css/compositing

edit

WPT coverage of the tests of css/compositing at the revision 5602b0f210e3. The tests link to their results in the browsers on wpt.fyi. The tentative tests (experimental features) and the reftests are listed separately from the stable tests.

Group	Passing	Tests	Pass rate
Stable	13	15	87%
Tentative	0	0	–
Reftests	55	60	92%
All	68	75	91%

Failure reasons

The tests that do not pass (failing or disabled), by kind of reason. A test with several reasons counts once per kind.

BUG: 2
TEST BUG: 5

Stable tests

Test	Result	Subtests	Kind	Description
`canvas-composite-modes.html`	Fail	12 / 15	TEST BUG	`destination` and `plus-darker` are not operators of `globalCompositeOperation` (no browser supports them), and the expected alpha of `lighter` is not clamped to 1
`inheritance.html`	Pass	6 / 6
`isolation/animation/isolation-no-interpolation.html`	Pass	42 / 42
`mix-blend-mode/mix-blend-mode-creates-stacking-context.html`	Fail	0 / 1	TEST BUG	the test expects the computed `z-index` not to be `auto` when `mix-blend-mode` creates a stacking context, but `z-index` computes to its specified value (https://drafts.csswg.org/css-position-4/#propdef-z-index): a stacking context does not change it; Edge fails too (wpt.fyi)
`mix-blend-mode/mix-blend-mode-parsing.html`	Pass	17 / 17
`parsing/background-blend-mode-computed-multiple.html`	Pass	7 / 7
`parsing/background-blend-mode-computed.html`	Pass	19 / 19
`parsing/background-blend-mode-invalid.html`	Pass	2 / 2
`parsing/background-blend-mode-valid.html`	Pass	17 / 17
`parsing/isolation-computed.html`	Pass	2 / 2
`parsing/isolation-invalid.html`	Pass	2 / 2
`parsing/isolation-valid.html`	Pass	2 / 2
`parsing/mix-blend-mode-computed.html`	Pass	16 / 16
`parsing/mix-blend-mode-invalid.html`	Pass	3 / 3
`parsing/mix-blend-mode-valid.html`	Pass	16 / 16

Reftests

Test	Result	Variants	Kind	Description
`background-blending/background-blend-mode-gradient-image.html`	Pass	1 / 1
`background-blending/background-blend-mode-plus-lighter.html`	Pass	1 / 1
`isolation/isolation-establishes-stacking-context.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-animation.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-blended-element-interposed.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-blended-element-overflow-hidden-and-border-radius.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-blended-element-overflow-scroll.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-blended-element-with-transparent-pixels.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-blended-with-3D-transform.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-blended-with-transform-and-perspective.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-blending-with-sibling.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-border-image.html`	Fail	0 / 1	TEST BUG	the blended child has `border-width: 10px` without `border-style`: its borders are 0px wide and no border image is painted, so it covers only 100x100px of the 120x120px yellow parent, while the reference is a 120x120px green square; fails in every browser
`mix-blend-mode/mix-blend-mode-both-parent-and-blended-with-3D-transform.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-canvas-parent.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-canvas-sibling.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-filter.html`	Fail	0 / 1	TEST BUG	the reference is `#0F0` with `filter: opacity(0.9)` over white ((26,255,26)), while the test composites the red box blended with `difference` at 90% over its yellow parent ((26,255,0)): the blue channels cannot match; fails in every browser
`mix-blend-mode/mix-blend-mode-iframe-parent.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-iframe-sibling.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-image.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-mask.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-overflowing-child-of-blended-element.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-overflowing-child.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-paragraph-background-image.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-paragraph.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-2.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-parent-element-overflow-hidden-and-border-radius.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-parent-element-overflow-scroll.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-parent-with-3D-transform.html`	Fail	0 / 1	BUG	only the antialiased edges of what is painted differ, or a box is painted 1px away (not analyzed individually; the causes fixed with #461 are not involved: the Ahem glyphs are not antialiased, the joins of the sides of the borders, the glyphs of the highlights painted once, the slices of the border images, the transformed rectangles that are almost on the pixels)
`mix-blend-mode/mix-blend-mode-parent-with-border-radius.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-parent-with-text.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-plus-lighter-basic.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-plus-lighter-svg-basic.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-plus-lighter-svg.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-plus-lighter.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-root-element-group.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-rotated-clip.html`	Fail	0 / 1	BUG	only the antialiased edges of what is painted differ, or a box is painted 1px away (not analyzed individually; the causes fixed with #461 are not involved: the Ahem glyphs are not antialiased, the joins of the sides of the borders, the glyphs of the highlights painted once, the slices of the border images, the transformed rectangles that are almost on the pixels)
`mix-blend-mode/mix-blend-mode-script.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-sibling-with-3D-transform.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-simple.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-stacking-context-001.html`	Fail	0 / 1	TEST BUG	the red box blended with `multiply` over aqua has `opacity: 0.9`: 10% of the aqua backdrop shows through ((0,25,25)), while the reference is an opaque black box; fails in every browser
`mix-blend-mode/mix-blend-mode-stacking-context-002.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-stacking-context-creates-isolation.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-svg.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-video-sibling.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-video.html`	Pass	1 / 1
`mix-blend-mode/mix-blend-mode-with-transform-and-preserve-3D.html`	Pass	1 / 1
`root-element-background-image-transparency-001.html`	Pass	1 / 1
`root-element-background-image-transparency-002.html`	Pass	1 / 1
`root-element-background-image-transparency-003.html`	Pass	1 / 1
`root-element-background-image-transparency-004.html`	Pass	1 / 1
`root-element-background-margin-opacity.html`	Pass	1 / 1
`root-element-background-transparency.html`	Pass	1 / 1
`root-element-blend-mode.html`	Pass	1 / 1
`root-element-filter.html`	Pass	1 / 1
`root-element-opacity-change.html`	Pass	1 / 1
`root-element-opacity.html`	Pass	1 / 1
`svg/mix-blend-mode-in-svg-image.html`	Pass	1 / 1
`svg/mix-blend-mode-svg-rectangle.html`	Pass	1 / 1