CSS Masking Level 1 CR Test Suite

Positioned Masks (90 tests)

Test Refs Flags Info
+ 7 Positioned Masks
+ 7.1 Mask Image Source: the mask-image property
display-none-mask = Mask behaviour when mask image is missing or display:none
  • A missing or invalid mask image is equivalent to transparent black (i.e. nothing is displayed). A mask with display:none is disabled (which is a change to the specified behaviour as of issue 245)
mask-image-1a = CSS Masking: mask-image: mask layer image
  • Test checks whether image as mask layer works correctly or not.
mask-image-1b = CSS Masking: mask-image: mask layer image
  • Test checks whether SVG image as mask layer works correctly or not.
mask-image-1c = CSS Masking: mask-image: mask layer image
  • Test checks whether SVG mask element as mask layer works correctly or not.
mask-image-1d = CSS Masking: mask-image: mask layer image
  • Test checks whether treat unresolvable mask as no-mask for a SVG element embedded in HTML document.
mask-image-2 = CSS Masking: mask-image: mask layer image
  • Test checks whether gradient CSS image as mask layer works correctly or not.
mask-image-3a = CSS Masking: mask-image: multiple SVG masks
  • Test checks whether SVG mask as mask layer works correctly or not.
mask-image-3b = CSS Masking: mask-image: interleave SVG mask with image mask
  • Test checks whether SVG mask and image as mask layer works correctly or not.
mask-image-3c = CSS Masking: mask-image: interleave SVG mask with image mask
  • Test checks whether SVG mask and image as mask layer works correctly or not.
mask-image-3d = CSS Masking: mask-image: interleave SVG mask with image mask
  • Test checks whether SVG mask and image as mask layer works correctly or not.
mask-image-3e = CSS Masking: mask-image: interleave SVG mask with image mask
  • Test checks whether SVG mask and image as mask layer works correctly or not.
mask-image-3f = CSS Masking: mask-image: SVG masks apply on border area
  • Test checks whether SVG mask layer can be positioned on box-shadow area correctly or not.
mask-image-3g = CSS Masking: mask-image: SVG masks apply on border area
  • Test checks whether apply transfrom to a SVG mask layer works correctly or not.
mask-image-3h = CSS Masking: clip-path in SVG mask
  • Test checks whether clip-path in SVG mask works correctly or not.
mask-image-3i = CSS Masking: mask-image: interleave SVG mask with image mask
  • Test checks whether SVG mask and image as mask layer works correctly or not.
mask-image-4a = CSS Masking: mask-image: unresovlable mask url
  • Test checks non-existent url should be counted as an image layer of transparent black.
mask-image-4b = CSS Masking: mask-image: unresovlable mask url
  • Test checks a mask reference to a none-mask SVG element should be counted as an image layer of transparent black.
mask-image-5 = CSS Masking: mask-image: data url mask
  • Test checks handling data url mask correctly.
mask-image-6 = CSS Masking: mask on inline element
  • Test checks whether mask on inline elemnt works correctly or not.
mask-image-interpolation Script mask-image-interpolation
  • mask-image supports animation
mask-opacity-1a = CSS Masking: mask-image: mask with filter and opacity
  • Test checks whether apply opacity to masked element correctly or not.
mask-opacity-1b = CSS Masking: mask-image: mask with opacity
  • Test checks whether apply opacity to masked element correctly or not.
mask-opacity-1c = CSS Masking: mask-image: filter with opacity
  • Test checks whether apply opacity to masked element correctly or not.
mask-opacity-1d = CSS Masking: mask-image: mask with opacity
  • Test checks whether apply opacity to masked element correctly or not.
mask-opacity-1e = CSS Masking: mask-image: mask with opacity
  • Test checks whether apply opacity to masked element correctly or not.
mask-image-data-url-image = mask-image: url(data:...)
  • mask-image can use a data: URL as an image
mask-image-ib-split = mask-image on an inline with a block inside split by a columnset
  • mask-image applies to the block child
mask-image-ib-split-2 = mask-image on a fragmented inline
  • mask-image applies to all fragments
mask-image-svg-child-will-change = mask-image on svg with child with will-change: transform
mask-image-url-image = mask-image: url(image.svg)
  • mask-image can use an SVG file as an image
mask-image-url-image-hash = mask-image: url(image.svg#hash)
  • mask-image can use an SVG file as an image with element reference
mask-image-url-local-mask = mask-image: url(#local-mask)
  • mask-image can use local reference to a <mask> element
mask-image-url-remote-mask = mask-image: url(remote.svg#mask)
  • mask-image can use reference to a <mask> element from a remote SVG document
+ 7.2 Mask Image Interpretation: the mask-mode property
mask-mode-a = CSS Masking: mask-mode with vector image
  • Test checks that mask an SVG image referenced by mask-image is correct with different mask mode.
mask-mode-b = CSS Masking: mask-mode with raster image
  • Test checks that mask a PNG image referenced by mask-image is correct with different mask mode.
mask-mode-c = CSS Masking: mask-mode with raster image
  • Test checks that mask a PNG image referenced by mask-image is correct with different mask mode.
mask-mode-d = CSS Masking: mask-mode with raster image
  • Test checks that whether mask-mode is filled automatically according to the number of mask layers.
mask-mode-to-mask-type = CSS Masking: mask-mode with vector image
  • Test checks the fallback logic between mask-mode and mask-type.
+ 7.3 Tiling Mask Images: The mask-repeat property
mask-repeat-1 = CSS Masking: mask-repeat: repeated mask layer image
  • Test checks whether repeated mask layer works correctly or not.
mask-repeat-2 = CSS Masking: mask-repeat: repeated mask layer image
  • Test checks whether repeated mask layer works correctly or not.
mask-repeat-3 = CSS Masking: mask-repeat: repeated mask layer image
  • Test checks whether repeated mask layer works correctly or not.
+ 7.4 Positioning Mask Images: the mask-position property
mask-position-1a = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-1b = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-1c = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-2a = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-2b = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-3a = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-3b = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-4a = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-4b = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-4c = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-4d = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-5 = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-6 = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-7 = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-interpolation Script mask-position-interpolation
  • mask-position supports animation
mask-position-invalid Script CSS Masking Module Level 1: parsing mask-position with invalid values
  • mask-position supports only the '<position>#' grammar.
mask-position-valid Script CSS Masking Module Level 1: parsing mask-position with valid values
  • mask-position supports the full '<position>#' grammar.
+ 7.5 Masking Area: the mask-clip property
mask-clip-1 = CSS Masking: mask-clip: clip mask image
  • border-box, padding-box, content-box and no-clip values of mask-clip should clip to the appropriate boxes.
mask-clip-2 = CSS Masking: mask-clip: clip mask image
  • fill-box, stroke-box and view-box values of mask-clip should clip to the appropriate boxes.
+ 7.6 Positioning Area: the mask-origin property
mask-origin-1 = CSS Masking: mask-origin: mask positioning area
  • Test checks whether setting mask position area works correctly or not.
mask-origin-2 = CSS Masking: mask-origin: mask positioning area
  • Test checks whether setting mask origin to margin-box works correctly or not.
mask-origin-3 = CSS Masking: mask-origin: mask positioning area
  • Test checks whether setting mask position area works correctly or not.
+ 7.7 Sizing Mask Images: the mask-size property
mask-size-auto = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-auto-auto = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-auto-length = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-auto-percent = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-contain = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-contain-clip-border = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-contain-clip-padding = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-contain-position-fifty-fifty = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-cover = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-length = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-length-auto = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-length-length = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-length-percent = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-percent = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-percent-auto = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-percent-length = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-percent-percent = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-percent-percent-stretch = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
+ 7.8 Compositing mask layers: the mask-composite property
mask-composite-1a = CSS Masking: mask-composite: compose vector image
  • Test checks that vector-mask-image can be composed correctly by different mask-composite value.
mask-composite-1b = CSS Masking: mask-composite: compose raster image
  • Test checks that raster-mask-image can be composed correctly by different mask-composite value.
mask-composite-1c = CSS Masking: mask-composite: compose svg mask
  • Test checks that vector-mask-image can be composed correctly by different mask-composite value.
mask-composite-1d = CSS Masking: mask-composite: compose vector image
  • Test checks that whether mask-composite is filled automatically according to the number of mask layers.
mask-composite-2a = CSS Masking: mask-composite: compose vector image
  • Test checks that vector-mask-image can be composed correctly by different mask-composite value.
mask-composite-2b = CSS Masking: mask-composite: compose raster image
  • Test checks that raster-mask-image can be composed correctly by different mask-composite value.
mask-composite-2c = CSS Masking: mask-composite: compose SVG mask
  • Test checks that svg-mask can be composed correctly by different mask-composite value.
+ 7.9 Mask Shorthand: the mask property
mask-invalid Script CSS Masking Module Level 1: parsing mask with invalid values
  • mask supports only the '<mask-layer>#' grammar.
mask-valid.sub Script CSS Masking Module Level 1: parsing mask with valid values
  • mask supports the full '<mask-layer>#' grammar.
+ 7.10 The Mask Image Rendering Model
+ 7.10.1 Mask processing
+ 7.10.2 Layering Multiple Mask Images