Compositing and Blending Level 1 CR Test Suite

Specifying Blending in CSS (63 tests)

Test Refs Flags Info
+ 3 Specifying Blending in CSS
+ 3.1 Order of graphical operations
+ 3.2 Behavior specific to HTML
+ 3.3 Behavior specific to SVG
mix-blend-mode-in-svg-image = SVG CSS Compositing and Blending: mix-blend-mode in an SVG linked as an image
mix-blend-mode-svg-rectangle = SVG mix-blend-mode for a simple SVG element - rectangle
+ 3.4 CSS Properties
+ 3.4.1 The mix-blend-mode property
blending_in_a_group_with_filter SVG Blending in a group with filter
  • Blending in a group with filter
blending_in_a_group_with_opacity SVG Blending in a group with opacity
  • Blending in a group with opacity
compositing_simple_div = [simple<div>] blending
fixed-z-index-blend = fixed position, z-index, and mix-blend-mode
  • Tests fixed, z-index, and mix-blend-mode. Passes if there is a green box when the page is scrolled to the bottom.
line-with-svg-background SVG CSS mix-blend-mode API Test
mix-blend-mode-animation = Blended element with animation
  • Test checks that an element with mix-blend-mode and animation blends with the parent element.
mix-blend-mode-blended-element-interposed = CSS Reftest Reference
  • Test checks that an element with mix-blend-mode having a child blends with the parent element.
mix-blend-mode-blended-element-overflow-hidden-and-border-radius = blending between an element and its child having overflow:hidden and border-radius
  • Test checks that an element having mix-blend-mode, overflow:hidden and border-radius blends correctly with its parent element.
mix-blend-mode-blended-element-overflow-scroll = blending between an element and its child having overflow:scroll
  • Test checks that an element with mix-blend-mode and overflow:scroll blends with its parent element
mix-blend-mode-blended-element-with-transparent-pixels = blending between an element with transparent pixels and a child element
  • Test checks that blending is performed with a parent that creates a stacking context, but not with any of its underlying content. The element, including its children, must blend with the parent as a whole.
mix-blend-mode-blended-with-3d-transform = mix-blend-mode between an element and its child with 3D transform
  • Test checks that the element with mix-blend-mode and 3D transform blends correctly with its parent
mix-blend-mode-blended-with-transform-and-perspective = blending between an element and its child having mix-blend-mode and perspective
  • Test checks that an element having mix-blend-mode and perspective blends correctly with its parent
mix-blend-mode-blending-with-sibling = mix-blend-mode between an element and its sibling
  • Test checks that an element with mix-blend-mode blends with a sibling element
mix-blend-mode-border-image = SVG Blended element with border image
  • Test checks if mix-blend-mode is applied for an element with border-image.
mix-blend-mode-both-parent-and-blended-with-3d-transform = mix-blend-mode between an element and its child (both with 3D transform)
  • Test checks that the element with mix-blend-mode blends with the parent element (both with 3D transform)
mix-blend-mode-canvas-parent = DOM/JS Canvas with mix-blend-mode blends with the parent element.
  • Test checks that a canvas element having mix-blend-mode applied blends with the content of the parent element.
mix-blend-mode-canvas-sibling = DOM/JS Canvas with mix-blend-mode blends with sibling element
  • Test checks that a canvas element having mix-blend-mode applied blends with a sibling element.
mix-blend-mode-creates-stacking-context DOM/JSScript an element with mix-blend-mode other than normal creates a stacking context
  • Test checks that applying a blendmode other than normal to the element must establish a new stacking context.
mix-blend-mode-filter = Blended element with filter.
  • Test checks that an element having a filter effect and mix-blend-mode blends with its parent element.
mix-blend-mode-iframe-parent = an iframe element with mix-blend-mode should blend with its parent element.
  • Test checks that an iframe element blends with its parent element.
mix-blend-mode-iframe-sibling = an iframe element with mix-blend-mode should blend with a sibling element.
  • Test checks that an iframe element blends with a sibling element.
mix-blend-mode-image ≠ Bitmaps Image element with mix-blend-mode.
  • Test checks that mix-blend-mode is applied to an img element.
mix-blend-mode-in-svg-image = SVG CSS Compositing and Blending: mix-blend-mode in an SVG linked as an image
mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius = mix-blend-mode between an element and its child having overflow:hidden and border-radius, when the blending element overlaps a sibling element
  • Test checks that the element with mix-blend-mode, overflow:hidden and border-radius blends correctly with its parent, as well as with the sibling element where they overlap.
mix-blend-mode-mask = SVG Blended element with masking.
  • Test checks that an element having mask and mix-blend-mode blends with its parent element.
mix-blend-mode-overflowing-child = blended element overflows parent
  • Test checks that an overflowing element with mix-blend-mode blends with the parent element.
mix-blend-mode-overflowing-child-of-blended-element = blend an element having an overflowing child.
  • Test checks that a group consisting of an element with mix-blend-mode and an overflowing child blends as a whole with the underlying stacking context.
mix-blend-mode-paragraph = Paragraph element with mix-blend-mode.
  • Test checks that test a paragraph element blends with the parent element.
mix-blend-mode-paragraph-background-image = SVG Paragraph element with mix-blend-mode over parent with background image.
  • Test checks that test a paragraph element blends with the parent element having background image.
mix-blend-mode-parent-element-overflow-hidden-and-border-radius = blending between an element having overflow:hidden and border-radius and its child
  • Test checks that an element having mix-blend-mode blends with the parent element having overflow:hidden and border-radius
mix-blend-mode-parent-element-overflow-scroll = blending between an element with overflow:scroll and its child
  • Test checks that an element with mix-blend-mode blends its parent having overflow:scroll
mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed = blending between an element having overflow:scroll and its child having position: fixed
  • Test checks that an element with mix-blend-mode blends with the parent element with overflow:scroll
mix-blend-mode-parent-with-3d-transform = mix-blend-mode between an element with 3D transform and its child
  • Test checks that an element with mix-blend-mode blends with its parent having 3D transform
mix-blend-mode-parent-with-3d-transform-and-transition DOM/JS blending between an element having 3D transitions and its child
  • Test checks that an element having mix-blend-mode blends with its parent element having 3D transform and transition
mix-blend-mode-parent-with-border-radius = blending with parent having border radius
  • Test checks that an element with mix-blend-mode blends with the parent element having border-radius.
mix-blend-mode-parent-with-text = check that the stacking context created by the parent element isolates blending.
  • Test checks that an element with mix-blend-mode only blends with the contents of a parent that creates a stacking context.
mix-blend-mode-parsing DOM/JSScript parsing mix-blend-mode property
  • Test checks that the value specified for mix-blend-mode property is correctly parsed
mix-blend-mode-script = DOM/JS Set mix-blend-mode from script.
  • Test checks that mix-blend-mode is applied when set from script.
mix-blend-mode-sibling-with-3d-transform = blending between an element and its sibling element having 3D transform
  • Test checks that an element with mix-blend-mode blends with both parent element and with sibling element having 3D transform
mix-blend-mode-sibling-with-3d-transform-and-transition DOM/JS blending between an element and its sibling having 3D transform and transition
  • Test checks that an element having mix-blend-mode blends with an overlapping sibling element having 3D transform and transition
mix-blend-mode-simple = An element with mix-blend-mode blends with its parent element.
  • Test checks that an element with mix-blend-mode blends with its parent element.
mix-blend-mode-stacking-context-001 = mix-blend-mode between an element and its child
  • Test checks that the element with mix-blend-mode and opacity blends with the parent element
mix-blend-mode-stacking-context-creates-isolation = stacking context creates isolated group
  • Test checks that properties that cause the creation of stacking context cause a group to be isolated
mix-blend-mode-svg = SVG SVG element is blended.
  • Test checks that an SVG element blends with the parent container.
mix-blend-mode-svg-rectangle = SVG mix-blend-mode for a simple SVG element - rectangle
mix-blend-mode-video ≠ Video element with mix-blend-mode.
  • Test checks that mix-blend-mode is applied to a video element.
mix-blend-mode-video-sibling ≠ mix-blend-mode blending between a video element and an overlapping sibling
  • Test checks that a video element blends with an overlapping sibling element with some text inside
mix-blend-mode-with-transform-and-preserve-3d = mix-blend-mode between an element and its child having 3D transform and preserve 3D
  • Test checks that mix-blend-mode overrides the behavior of transform-style:preserve-3d
text-with-svg-background SVG CSS mix-blend-mode API Test
text_with_svg_background SVG Text with SVG background
  • Text with SVG background
will-change-stacking-context-mix-blend-mode-1 = CSS will-change: 'will-change: mix-blend-mode' creates a stacking context
  • If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.
z-index-blend-will-change-overlapping-layers = z-index, will-change, mix-blend-mode on overlapping layers
  • Tests z-index, will-change and mix-blend-mode on overlapping layers. Passes if there is a green bar when the page is scrolled to the bottom.
mix-blend-mode-computed Script Compositing and Blending Level 1: getComputedStyle().mixBlendMode
  • mix-blend-mode computed value is as specified.
mix-blend-mode-invalid Script Compositing and Blending Level 1: parsing mix-blend-mode with invalid values
  • mix-blend-mode supports only the grammar '<blend-mode>'.
mix-blend-mode-valid Script Compositing and Blending Level 1: parsing mix-blend-mode with valid values
  • mix-blend-mode supports the full grammar '<blend-mode>'.
+ 3.4.2 The isolation property
blend-isolation CSS Compositing and Blending: isolation applied to a group containing blending
  • Isolation on a group with blending
mix-blend-mode-in-svg-image = SVG CSS Compositing and Blending: mix-blend-mode in an SVG linked as an image
will-change-stacking-context-isolation-1 = CSS will-change: 'will-change: isolation' creates a stacking context
  • If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.
background-blend-mode-computed Script Compositing and Blending Level 1: getComputedStyle().backgroundBlendMode
  • background-blend-mode computed value is as specified.
background-blend-mode-invalid Script Compositing and Blending Level 1: parsing background-blend-mode with invalid values
  • background-blend-mode supports only the grammar '<blend-mode>#'.
background-blend-mode-valid Script Compositing and Blending Level 1: parsing background-blend-mode with valid values
  • background-blend-mode supports the full grammar '<blend-mode>#'.
isolation-computed Script Compositing and Blending Level 1: getComputedStyle().isolation
  • isolation computed value is as specified.
isolation-invalid Script Compositing and Blending Level 1: parsing isolation with invalid values
  • isolation supports only the grammar '<isolation-mode>'.
isolation-valid Script Compositing and Blending Level 1: parsing isolation with valid values
  • isolation supports the full grammar '<isolation-mode>'.