summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/canvas/element
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element')
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.html29
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.html29
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.pngbin207 -> 0 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.html29
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.pngbin112 -> 0 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.html (renamed from testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.html)6
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.png (renamed from testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.png)bin207 -> 207 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.html29
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.pngbin205 -> 0 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.html29
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.pngbin207 -> 0 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.html29
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.pngbin112 -> 0 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.pngbin205 -> 0 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.html (renamed from testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.html)6
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.png (renamed from testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.png)bin205 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.html (renamed from testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.html)6
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.png (renamed from testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.png)bin117 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.html (renamed from testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.html)6
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.png (renamed from testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.png)bin207 -> 207 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html15
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.html20
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html15
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.html20
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html15
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.html20
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html85
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html101
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html15
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.html20
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html15
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.html20
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur-expected.html85
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.html106
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.isotropic-expected.html15
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.isotropic.html21
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-x-expected.html15
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-x.html21
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-y-expected.html15
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-y.html21
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.x-only-expected.html15
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.x-only.html21
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.y-only-expected.html15
-rw-r--r--testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.y-only.html21
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.beginLayer-options.html7
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.ctm.getTransform.html7
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.exceptions-are-no-op.html7
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha-expected.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending-expected.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.html35
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow-expected.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow.html39
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite-expected.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.html35
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow-expected.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow.html39
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow-expected.html35
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow.html38
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending-expected.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html72
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform.html77
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html76
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation.html81
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow-expected.html35
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.html38
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html78
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform.html83
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation-expected.html82
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation.html87
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite-expected.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html72
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform.html77
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html76
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation.html81
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow-expected.html35
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.html38
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html78
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform.html83
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation-expected.html82
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation.html87
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html72
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform.html77
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html76
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation.html81
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html78
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform.html83
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation-expected.html82
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation.html87
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha-expected.html50
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending-expected.html51
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.html39
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html55
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow.html42
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite-expected.html51
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.html39
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html55
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow.html42
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.html38
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow-expected.html54
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow.html42
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending-expected.html50
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.html37
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html98
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html77
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html102
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html81
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow-expected.html54
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.html41
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html104
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html83
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html108
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation.html87
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite-expected.html50
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.html37
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html98
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html77
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html102
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html81
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow-expected.html54
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.html41
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html104
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html83
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html108
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation.html87
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html98
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html77
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html102
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html81
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html104
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html83
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html108
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation.html87
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html98
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html77
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html102
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html81
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html104
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html83
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html108
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html87
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states-expected.html50
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states.html37
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow-expected.html53
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow.html40
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html72
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html77
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html76
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html81
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html78
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html83
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html82
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html87
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states-expected.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow-expected.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow.html37
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation-expected.html910
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation.html861
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html7
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-restore.html7
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html7
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.endLayer.html7
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-beginLayer-restore.html7
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-endLayer.html7
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.html40
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.toBlob.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.createPattern.html33
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.drawImage.html35
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.getImageData.html33
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.html87
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.putImageData.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.toDataURL.html33
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh-expected.html22
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter.svg10
-rw-r--r--testing/web-platform/tests/html/canvas/element/text/WEB_FEATURES.yml4
180 files changed, 7895 insertions, 2742 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.html
deleted file mode 100644
index 59d66c383c..0000000000
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.fillStyle.parse.hsl-clamp-1</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
-<body class="show_output">
-
-<h1>2d.fillStyle.parse.hsl-clamp-1</h1>
-<p class="desc"></p>
-
-<p class="notes">
-<p class="output">Actual output:</p>
-<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
-<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-clamp-1.png" class="output expected" id="expected" alt="">
-<ul id="d"></ul>
-<script>
-var t = async_test("");
-_addTest(function(canvas, ctx) {
-
- ctx.fillStyle = '#f00';
- ctx.fillStyle = 'hsl(120, 200%, 50%)';
- ctx.fillRect(0, 0, 100, 50);
- _assertPixel(canvas, 50,25, 0,255,0,255);
-
-});
-</script>
-
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.html
deleted file mode 100644
index 56f3a0a8b5..0000000000
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.fillStyle.parse.hsl-clamp-3</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
-<body class="show_output">
-
-<h1>2d.fillStyle.parse.hsl-clamp-3</h1>
-<p class="desc"></p>
-
-<p class="notes">
-<p class="output">Actual output:</p>
-<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
-<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-clamp-3.png" class="output expected" id="expected" alt="">
-<ul id="d"></ul>
-<script>
-var t = async_test("");
-_addTest(function(canvas, ctx) {
-
- ctx.fillStyle = '#f00';
- ctx.fillStyle = 'hsl(120, 100%, 200%)';
- ctx.fillRect(0, 0, 100, 50);
- _assertPixel(canvas, 50,25, 255,255,255,255);
-
-});
-</script>
-
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.png
deleted file mode 100644
index bf48767a88..0000000000
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.png
+++ /dev/null
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.html
deleted file mode 100644
index af9d11e678..0000000000
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.fillStyle.parse.hsl-clamp-4</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
-<body class="show_output">
-
-<h1>2d.fillStyle.parse.hsl-clamp-4</h1>
-<p class="desc"></p>
-
-<p class="notes">
-<p class="output">Actual output:</p>
-<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
-<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-clamp-4.png" class="output expected" id="expected" alt="">
-<ul id="d"></ul>
-<script>
-var t = async_test("");
-_addTest(function(canvas, ctx) {
-
- ctx.fillStyle = '#f00';
- ctx.fillStyle = 'hsl(120, 100%, -200%)';
- ctx.fillRect(0, 0, 100, 50);
- _assertPixel(canvas, 50,25, 0,0,0,255);
-
-});
-</script>
-
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.png
deleted file mode 100644
index d638d03386..0000000000
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.png
+++ /dev/null
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.html
index 1a1939e47a..65440c6228 100644
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.html
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.html
@@ -1,19 +1,19 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.fillStyle.parse.hsl-clamp-2</title>
+<title>Canvas test: 2d.fillStyle.parse.hsl-clamp-negative-saturation</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/html/canvas/resources/canvas-tests.js"></script>
<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
<body class="show_output">
-<h1>2d.fillStyle.parse.hsl-clamp-2</h1>
+<h1>2d.fillStyle.parse.hsl-clamp-negative-saturation</h1>
<p class="desc"></p>
<p class="notes">
<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
-<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-clamp-2.png" class="output expected" id="expected" alt="">
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-clamp-negative-saturation.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
var t = async_test("");
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.png
index 88fd827985..88fd827985 100644
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.png
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.html
deleted file mode 100644
index 2acac26e1a..0000000000
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-1</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
-<body class="show_output">
-
-<h1>2d.fillStyle.parse.hsla-clamp-1</h1>
-<p class="desc"></p>
-
-<p class="notes">
-<p class="output">Actual output:</p>
-<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
-<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-1.png" class="output expected" id="expected" alt="">
-<ul id="d"></ul>
-<script>
-var t = async_test("");
-_addTest(function(canvas, ctx) {
-
- ctx.fillStyle = '#f00';
- ctx.fillStyle = 'hsla(120, 200%, 50%, 1)';
- ctx.fillRect(0, 0, 100, 50);
- _assertPixel(canvas, 50,25, 0,255,0,255);
-
-});
-</script>
-
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.png
deleted file mode 100644
index 2733836c99..0000000000
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.png
+++ /dev/null
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.html
deleted file mode 100644
index 4bc134aec5..0000000000
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-3</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
-<body class="show_output">
-
-<h1>2d.fillStyle.parse.hsla-clamp-3</h1>
-<p class="desc"></p>
-
-<p class="notes">
-<p class="output">Actual output:</p>
-<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
-<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-3.png" class="output expected" id="expected" alt="">
-<ul id="d"></ul>
-<script>
-var t = async_test("");
-_addTest(function(canvas, ctx) {
-
- ctx.fillStyle = '#f00';
- ctx.fillStyle = 'hsla(120, 100%, 200%, 1)';
- ctx.fillRect(0, 0, 100, 50);
- _assertPixel(canvas, 50,25, 255,255,255,255);
-
-});
-</script>
-
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.png
deleted file mode 100644
index bf48767a88..0000000000
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.png
+++ /dev/null
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.html
deleted file mode 100644
index f8b2382755..0000000000
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-4</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
-<body class="show_output">
-
-<h1>2d.fillStyle.parse.hsla-clamp-4</h1>
-<p class="desc"></p>
-
-<p class="notes">
-<p class="output">Actual output:</p>
-<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
-<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-4.png" class="output expected" id="expected" alt="">
-<ul id="d"></ul>
-<script>
-var t = async_test("");
-_addTest(function(canvas, ctx) {
-
- ctx.fillStyle = '#f00';
- ctx.fillStyle = 'hsla(120, 100%, -200%, 1)';
- ctx.fillRect(0, 0, 100, 50);
- _assertPixel(canvas, 50,25, 0,0,0,255);
-
-});
-</script>
-
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.png
deleted file mode 100644
index d638d03386..0000000000
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.png
+++ /dev/null
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.png
deleted file mode 100644
index 2733836c99..0000000000
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.png
+++ /dev/null
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.html
index 9c5e2258b9..e5dc98d4e3 100644
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.html
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.html
@@ -1,19 +1,19 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-5</title>
+<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-alpha-1</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/html/canvas/resources/canvas-tests.js"></script>
<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
<body class="show_output">
-<h1>2d.fillStyle.parse.hsla-clamp-5</h1>
+<h1>2d.fillStyle.parse.hsla-clamp-alpha-1</h1>
<p class="desc"></p>
<p class="notes">
<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
-<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-5.png" class="output expected" id="expected" alt="">
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-alpha-1.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
var t = async_test("");
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.png
index 2733836c99..2733836c99 100644
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.png
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.html
index 153515eedd..26139a562e 100644
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.html
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.html
@@ -1,19 +1,19 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-6</title>
+<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-alpha-2</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/html/canvas/resources/canvas-tests.js"></script>
<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
<body class="show_output">
-<h1>2d.fillStyle.parse.hsla-clamp-6</h1>
+<h1>2d.fillStyle.parse.hsla-clamp-alpha-2</h1>
<p class="desc"></p>
<p class="notes">
<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
-<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-6.png" class="output expected" id="expected" alt="">
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-alpha-2.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
var t = async_test("");
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.png
index eeedd0ff05..eeedd0ff05 100644
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.png
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.html
index 0f32fb5474..2d9b9d3bdf 100644
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.html
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.html
@@ -1,19 +1,19 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-2</title>
+<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-negative-saturation</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/html/canvas/resources/canvas-tests.js"></script>
<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
<body class="show_output">
-<h1>2d.fillStyle.parse.hsla-clamp-2</h1>
+<h1>2d.fillStyle.parse.hsla-clamp-negative-saturation</h1>
<p class="desc"></p>
<p class="notes">
<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
-<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-2.png" class="output expected" id="expected" alt="">
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-negative-saturation.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
var t = async_test("");
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.png
index 88fd827985..88fd827985 100644
--- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.png
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html
deleted file mode 100644
index dac31c97f1..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
- width="100" height="100"
- color-interpolation-filters="sRGB">
- <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
- <feGaussianBlur stdDeviation="4 4" />
- </filter>
- <rect x="25" y="25" width="50" height="50"
- fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.html
deleted file mode 100644
index f4c8c1033a..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html">
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'teal';
- ctx.filter = new CanvasFilter({
- name: 'gaussianBlur',
- stdDeviation: [4, 4],
- });
- ctx.fillRect(25, 25, 50, 50);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html
deleted file mode 100644
index 88d0cb2de2..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
- width="100" height="100"
- color-interpolation-filters="sRGB">
- <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
- <feGaussianBlur stdDeviation="4 1" />
- </filter>
- <rect x="25" y="25" width="50" height="50"
- fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.html
deleted file mode 100644
index b3efcb8c3e..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html">
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'teal';
- ctx.filter = new CanvasFilter({
- name: 'gaussianBlur',
- stdDeviation: [4, 1],
- });
- ctx.fillRect(25, 25, 50, 50);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html
deleted file mode 100644
index 744983d4ae..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
- width="100" height="100"
- color-interpolation-filters="sRGB">
- <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
- <feGaussianBlur stdDeviation="1 4" />
- </filter>
- <rect x="25" y="25" width="50" height="50"
- fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.html
deleted file mode 100644
index d5cc6e0058..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html">
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'teal';
- ctx.filter = new CanvasFilter({
- name: 'gaussianBlur',
- stdDeviation: [1, 4],
- });
- ctx.fillRect(25, 25, 50, 50);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html
new file mode 100644
index 0000000000..c1ca0ab46f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative</title>
+<h1 style="font-size: 20px;">2d.filter.canvasFilterObject.gaussianBlur.tentative</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(5, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>x-only</div>
+ <div style="width: 100px; height: 100px; outline: 1px solid">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="100" height="100"
+ color-interpolation-filters="sRGB">
+ <filter id="blur0" x="-50%" y="-50%" width="200%" height="200%">
+ <feGaussianBlur stdDeviation="4 0" />
+ </filter>
+ <rect x="25" y="25" width="50" height="50"
+ fill="teal" filter="url(#blur0)" />
+ </svg>
+ </div>
+</span>
+
+<span>
+ <div>mostly-x</div>
+ <div style="width: 100px; height: 100px; outline: 1px solid">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="100" height="100"
+ color-interpolation-filters="sRGB">
+ <filter id="blur1" x="-50%" y="-50%" width="200%" height="200%">
+ <feGaussianBlur stdDeviation="4 1" />
+ </filter>
+ <rect x="25" y="25" width="50" height="50"
+ fill="teal" filter="url(#blur1)" />
+ </svg>
+ </div>
+</span>
+
+<span>
+ <div>isotropic</div>
+ <div style="width: 100px; height: 100px; outline: 1px solid">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="100" height="100"
+ color-interpolation-filters="sRGB">
+ <filter id="blur2" x="-50%" y="-50%" width="200%" height="200%">
+ <feGaussianBlur stdDeviation="4 4" />
+ </filter>
+ <rect x="25" y="25" width="50" height="50"
+ fill="teal" filter="url(#blur2)" />
+ </svg>
+ </div>
+</span>
+
+<span>
+ <div>mostly-y</div>
+ <div style="width: 100px; height: 100px; outline: 1px solid">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="100" height="100"
+ color-interpolation-filters="sRGB">
+ <filter id="blur3" x="-50%" y="-50%" width="200%" height="200%">
+ <feGaussianBlur stdDeviation="1 4" />
+ </filter>
+ <rect x="25" y="25" width="50" height="50"
+ fill="teal" filter="url(#blur3)" />
+ </svg>
+ </div>
+</span>
+
+<span>
+ <div>y-only</div>
+ <div style="width: 100px; height: 100px; outline: 1px solid">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="100" height="100"
+ color-interpolation-filters="sRGB">
+ <filter id="blur4" x="-50%" y="-50%" width="200%" height="200%">
+ <feGaussianBlur stdDeviation="0 4" />
+ </filter>
+ <rect x="25" y="25" width="50" height="50"
+ fill="teal" filter="url(#blur4)" />
+ </svg>
+ </div>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html
new file mode 100644
index 0000000000..498418c292
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html">
+<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative</title>
+<h1 style="font-size: 20px;">2d.filter.canvasFilterObject.gaussianBlur.tentative</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(5, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>x-only</div>
+ <canvas id="canvas0" width="100" height="100" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.fillStyle = 'teal';
+ ctx.filter = new CanvasFilter({
+ name: 'gaussianBlur',
+ stdDeviation: [4, 0],
+ });
+ ctx.fillRect(25, 25, 50, 50);
+ </script>
+</span>
+
+<span>
+ <div>mostly-x</div>
+ <canvas id="canvas1" width="100" height="100" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.fillStyle = 'teal';
+ ctx.filter = new CanvasFilter({
+ name: 'gaussianBlur',
+ stdDeviation: [4, 1],
+ });
+ ctx.fillRect(25, 25, 50, 50);
+ </script>
+</span>
+
+<span>
+ <div>isotropic</div>
+ <canvas id="canvas2" width="100" height="100" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas2");
+ const ctx = canvas.getContext('2d');
+
+ ctx.fillStyle = 'teal';
+ ctx.filter = new CanvasFilter({
+ name: 'gaussianBlur',
+ stdDeviation: [4, 4],
+ });
+ ctx.fillRect(25, 25, 50, 50);
+ </script>
+</span>
+
+<span>
+ <div>mostly-y</div>
+ <canvas id="canvas3" width="100" height="100" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas3");
+ const ctx = canvas.getContext('2d');
+
+ ctx.fillStyle = 'teal';
+ ctx.filter = new CanvasFilter({
+ name: 'gaussianBlur',
+ stdDeviation: [1, 4],
+ });
+ ctx.fillRect(25, 25, 50, 50);
+ </script>
+</span>
+
+<span>
+ <div>y-only</div>
+ <canvas id="canvas4" width="100" height="100" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas4");
+ const ctx = canvas.getContext('2d');
+
+ ctx.fillStyle = 'teal';
+ ctx.filter = new CanvasFilter({
+ name: 'gaussianBlur',
+ stdDeviation: [0, 4],
+ });
+ ctx.fillRect(25, 25, 50, 50);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html
deleted file mode 100644
index e611113e42..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
- width="100" height="100"
- color-interpolation-filters="sRGB">
- <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
- <feGaussianBlur stdDeviation="4 0" />
- </filter>
- <rect x="25" y="25" width="50" height="50"
- fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.html
deleted file mode 100644
index 4e8576fe74..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html">
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'teal';
- ctx.filter = new CanvasFilter({
- name: 'gaussianBlur',
- stdDeviation: [4, 0],
- });
- ctx.fillRect(25, 25, 50, 50);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html
deleted file mode 100644
index c6d915cb07..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
- width="100" height="100"
- color-interpolation-filters="sRGB">
- <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
- <feGaussianBlur stdDeviation="0 4" />
- </filter>
- <rect x="25" y="25" width="50" height="50"
- fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.html
deleted file mode 100644
index ec0a2353cf..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html">
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'teal';
- ctx.filter = new CanvasFilter({
- name: 'gaussianBlur',
- stdDeviation: [0, 4],
- });
- ctx.fillRect(25, 25, 50, 50);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur-expected.html
new file mode 100644
index 0000000000..f24e9d0dba
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur-expected.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.layers.gaussianBlur</title>
+<h1 style="font-size: 20px;">2d.filter.layers.gaussianBlur</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(5, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>x-only</div>
+ <div style="width: 100px; height: 100px; outline: 1px solid">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="100" height="100"
+ color-interpolation-filters="sRGB">
+ <filter id="blur0" x="-50%" y="-50%" width="200%" height="200%">
+ <feGaussianBlur stdDeviation="4 0" />
+ </filter>
+ <rect x="25" y="25" width="50" height="50"
+ fill="teal" filter="url(#blur0)" />
+ </svg>
+ </div>
+</span>
+
+<span>
+ <div>mostly-x</div>
+ <div style="width: 100px; height: 100px; outline: 1px solid">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="100" height="100"
+ color-interpolation-filters="sRGB">
+ <filter id="blur1" x="-50%" y="-50%" width="200%" height="200%">
+ <feGaussianBlur stdDeviation="4 1" />
+ </filter>
+ <rect x="25" y="25" width="50" height="50"
+ fill="teal" filter="url(#blur1)" />
+ </svg>
+ </div>
+</span>
+
+<span>
+ <div>isotropic</div>
+ <div style="width: 100px; height: 100px; outline: 1px solid">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="100" height="100"
+ color-interpolation-filters="sRGB">
+ <filter id="blur2" x="-50%" y="-50%" width="200%" height="200%">
+ <feGaussianBlur stdDeviation="4 4" />
+ </filter>
+ <rect x="25" y="25" width="50" height="50"
+ fill="teal" filter="url(#blur2)" />
+ </svg>
+ </div>
+</span>
+
+<span>
+ <div>mostly-y</div>
+ <div style="width: 100px; height: 100px; outline: 1px solid">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="100" height="100"
+ color-interpolation-filters="sRGB">
+ <filter id="blur3" x="-50%" y="-50%" width="200%" height="200%">
+ <feGaussianBlur stdDeviation="1 4" />
+ </filter>
+ <rect x="25" y="25" width="50" height="50"
+ fill="teal" filter="url(#blur3)" />
+ </svg>
+ </div>
+</span>
+
+<span>
+ <div>y-only</div>
+ <div style="width: 100px; height: 100px; outline: 1px solid">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="100" height="100"
+ color-interpolation-filters="sRGB">
+ <filter id="blur4" x="-50%" y="-50%" width="200%" height="200%">
+ <feGaussianBlur stdDeviation="0 4" />
+ </filter>
+ <rect x="25" y="25" width="50" height="50"
+ fill="teal" filter="url(#blur4)" />
+ </svg>
+ </div>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.html
new file mode 100644
index 0000000000..19db679076
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.filter.layers.gaussianBlur-expected.html">
+<title>Canvas test: 2d.filter.layers.gaussianBlur</title>
+<h1 style="font-size: 20px;">2d.filter.layers.gaussianBlur</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(5, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>x-only</div>
+ <canvas id="canvas0" width="100" height="100" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.fillStyle = 'teal';
+ ctx.beginLayer({filter: {
+ name: 'gaussianBlur',
+ stdDeviation: [4, 0],
+ }});
+ ctx.fillRect(25, 25, 50, 50);
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>mostly-x</div>
+ <canvas id="canvas1" width="100" height="100" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.fillStyle = 'teal';
+ ctx.beginLayer({filter: {
+ name: 'gaussianBlur',
+ stdDeviation: [4, 1],
+ }});
+ ctx.fillRect(25, 25, 50, 50);
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>isotropic</div>
+ <canvas id="canvas2" width="100" height="100" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas2");
+ const ctx = canvas.getContext('2d');
+
+ ctx.fillStyle = 'teal';
+ ctx.beginLayer({filter: {
+ name: 'gaussianBlur',
+ stdDeviation: [4, 4],
+ }});
+ ctx.fillRect(25, 25, 50, 50);
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>mostly-y</div>
+ <canvas id="canvas3" width="100" height="100" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas3");
+ const ctx = canvas.getContext('2d');
+
+ ctx.fillStyle = 'teal';
+ ctx.beginLayer({filter: {
+ name: 'gaussianBlur',
+ stdDeviation: [1, 4],
+ }});
+ ctx.fillRect(25, 25, 50, 50);
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>y-only</div>
+ <canvas id="canvas4" width="100" height="100" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas4");
+ const ctx = canvas.getContext('2d');
+
+ ctx.fillStyle = 'teal';
+ ctx.beginLayer({filter: {
+ name: 'gaussianBlur',
+ stdDeviation: [0, 4],
+ }});
+ ctx.fillRect(25, 25, 50, 50);
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.isotropic-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.isotropic-expected.html
deleted file mode 100644
index 4f93754862..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.isotropic-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.layers.gaussianBlur.isotropic</title>
-<h1>2d.filter.layers.gaussianBlur.isotropic</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
- width="100" height="100"
- color-interpolation-filters="sRGB">
- <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
- <feGaussianBlur stdDeviation="4 4" />
- </filter>
- <rect x="25" y="25" width="50" height="50"
- fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.isotropic.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.isotropic.html
deleted file mode 100644
index a2cc098896..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.isotropic.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.layers.gaussianBlur.isotropic-expected.html">
-<title>Canvas test: 2d.filter.layers.gaussianBlur.isotropic</title>
-<h1>2d.filter.layers.gaussianBlur.isotropic</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'teal';
- ctx.beginLayer({filter: {
- name: 'gaussianBlur',
- stdDeviation: [4, 4],
- }});
- ctx.fillRect(25, 25, 50, 50);
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-x-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-x-expected.html
deleted file mode 100644
index 255270c192..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-x-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-x</title>
-<h1>2d.filter.layers.gaussianBlur.mostly-x</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
- width="100" height="100"
- color-interpolation-filters="sRGB">
- <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
- <feGaussianBlur stdDeviation="4 1" />
- </filter>
- <rect x="25" y="25" width="50" height="50"
- fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-x.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-x.html
deleted file mode 100644
index 0090e0e71e..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-x.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.layers.gaussianBlur.mostly-x-expected.html">
-<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-x</title>
-<h1>2d.filter.layers.gaussianBlur.mostly-x</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'teal';
- ctx.beginLayer({filter: {
- name: 'gaussianBlur',
- stdDeviation: [4, 1],
- }});
- ctx.fillRect(25, 25, 50, 50);
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-y-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-y-expected.html
deleted file mode 100644
index 76a46b1533..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-y-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-y</title>
-<h1>2d.filter.layers.gaussianBlur.mostly-y</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
- width="100" height="100"
- color-interpolation-filters="sRGB">
- <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
- <feGaussianBlur stdDeviation="1 4" />
- </filter>
- <rect x="25" y="25" width="50" height="50"
- fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-y.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-y.html
deleted file mode 100644
index 5c481cbe25..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-y.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.layers.gaussianBlur.mostly-y-expected.html">
-<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-y</title>
-<h1>2d.filter.layers.gaussianBlur.mostly-y</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'teal';
- ctx.beginLayer({filter: {
- name: 'gaussianBlur',
- stdDeviation: [1, 4],
- }});
- ctx.fillRect(25, 25, 50, 50);
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.x-only-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.x-only-expected.html
deleted file mode 100644
index 26741f9847..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.x-only-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.layers.gaussianBlur.x-only</title>
-<h1>2d.filter.layers.gaussianBlur.x-only</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
- width="100" height="100"
- color-interpolation-filters="sRGB">
- <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
- <feGaussianBlur stdDeviation="4 0" />
- </filter>
- <rect x="25" y="25" width="50" height="50"
- fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.x-only.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.x-only.html
deleted file mode 100644
index f7940eb921..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.x-only.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.layers.gaussianBlur.x-only-expected.html">
-<title>Canvas test: 2d.filter.layers.gaussianBlur.x-only</title>
-<h1>2d.filter.layers.gaussianBlur.x-only</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'teal';
- ctx.beginLayer({filter: {
- name: 'gaussianBlur',
- stdDeviation: [4, 0],
- }});
- ctx.fillRect(25, 25, 50, 50);
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.y-only-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.y-only-expected.html
deleted file mode 100644
index d00eec6b57..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.y-only-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.layers.gaussianBlur.y-only</title>
-<h1>2d.filter.layers.gaussianBlur.y-only</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
- width="100" height="100"
- color-interpolation-filters="sRGB">
- <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
- <feGaussianBlur stdDeviation="0 4" />
- </filter>
- <rect x="25" y="25" width="50" height="50"
- fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.y-only.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.y-only.html
deleted file mode 100644
index 59421a1ff3..0000000000
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.y-only.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.layers.gaussianBlur.y-only-expected.html">
-<title>Canvas test: 2d.filter.layers.gaussianBlur.y-only</title>
-<h1>2d.filter.layers.gaussianBlur.y-only</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'teal';
- ctx.beginLayer({filter: {
- name: 'gaussianBlur',
- stdDeviation: [0, 4],
- }});
- ctx.fillRect(25, 25, 50, 50);
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.beginLayer-options.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.beginLayer-options.html
index 658d7e0991..573d300055 100644
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.beginLayer-options.html
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.beginLayer-options.html
@@ -16,8 +16,9 @@
<ul id="d"></ul>
<script>
-var t = async_test("Checks beginLayer works for different option parameter values");
-_addTest(function(canvas, ctx) {
+test(t => {
+ var canvas = document.getElementById('c');
+ var ctx = canvas.getContext('2d');
ctx.beginLayer(); ctx.endLayer();
ctx.beginLayer(null); ctx.endLayer();
@@ -45,6 +46,6 @@ _addTest(function(canvas, ctx) {
ctx.beginLayer({filter: true}); ctx.endLayer();
ctx.beginLayer({filter: false}); ctx.endLayer();
-});
+}, "Checks beginLayer works for different option parameter values");
</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.ctm.getTransform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.ctm.getTransform.html
index 7a69c59527..d669b3c522 100644
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.ctm.getTransform.html
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.ctm.getTransform.html
@@ -16,8 +16,9 @@
<ul id="d"></ul>
<script>
-var t = async_test("Tests getTransform inside layers.");
-_addTest(function(canvas, ctx) {
+test(t => {
+ var canvas = document.getElementById('c');
+ var ctx = canvas.getContext('2d');
ctx.translate(10, 20);
ctx.beginLayer();
@@ -26,6 +27,6 @@ _addTest(function(canvas, ctx) {
assert_array_equals([m.a, m.b, m.c, m.d, m.e, m.f], [2, 0, 0, 3, 10, 20]);
ctx.endLayer();
-});
+}, "Tests getTransform inside layers.");
</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.exceptions-are-no-op.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.exceptions-are-no-op.html
index 7ab2080fca..facffd74e9 100644
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.exceptions-are-no-op.html
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.exceptions-are-no-op.html
@@ -16,8 +16,9 @@
<ul id="d"></ul>
<script>
-var t = async_test("Checks that the context state is left unchanged if beginLayer throws.");
-_addTest(function(canvas, ctx) {
+test(t => {
+ var canvas = document.getElementById('c');
+ var ctx = canvas.getContext('2d');
// Get `beginLayer` to throw while parsing the filter.
assert_throws_js(TypeError,
@@ -26,6 +27,6 @@ _addTest(function(canvas, ctx) {
// `beginLayer` shouldn't have opened the layer, so `endLayer` should throw.
assert_throws_dom("InvalidStateError", () => ctx.endLayer());
-});
+}, "Checks that the context state is left unchanged if beginLayer throws.");
</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha-expected.html
deleted file mode 100644
index 0666e3098a..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha-expected.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.alpha</title>
-<h1>2d.layer.global-states.alpha</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
-
- canvas2 = document.createElement("canvas");
- ctx2 = canvas2.getContext("2d");
-
- ctx2.globalCompositeOperation = 'screen';
- ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx2.fillRect(50, 50, 75, 50);
- ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx2.fillRect(70, 70, 75, 50);
-
- ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending-expected.html
deleted file mode 100644
index 8a45027588..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending-expected.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.alpha.blending</title>
-<h1>2d.layer.global-states.alpha.blending</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
- ctx.globalCompositeOperation = 'multiply';
-
- canvas2 = document.createElement("canvas");
- ctx2 = canvas2.getContext("2d");
-
- ctx2.globalCompositeOperation = 'screen';
- ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx2.fillRect(50, 50, 75, 50);
- ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx2.fillRect(70, 70, 75, 50);
-
- ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.html
deleted file mode 100644
index 8e15a2b936..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.alpha.blending-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha.blending</title>
-<h1>2d.layer.global-states.alpha.blending</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
- ctx.globalCompositeOperation = 'multiply';
-
- ctx.beginLayer();
-
- // Enable compositing in the layer to validate that draw calls in the layer
- // won't individually composite with the background.
- ctx.globalCompositeOperation = 'screen';
-
- ctx.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow-expected.html
deleted file mode 100644
index f7b633b35f..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow-expected.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.alpha.blending.shadow</title>
-<h1>2d.layer.global-states.alpha.blending.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
- ctx.globalCompositeOperation = 'multiply';
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- canvas2 = document.createElement("canvas");
- ctx2 = canvas2.getContext("2d");
-
- ctx2.globalCompositeOperation = 'screen';
- ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx2.fillRect(50, 50, 75, 50);
- ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx2.fillRect(70, 70, 75, 50);
-
- ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow.html
deleted file mode 100644
index c8c6d433bc..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.alpha.blending.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha.blending.shadow</title>
-<h1>2d.layer.global-states.alpha.blending.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
- ctx.globalCompositeOperation = 'multiply';
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.beginLayer();
-
- // Enable compositing in the layer to validate that draw calls in the layer
- // won't individually composite with the background.
- ctx.globalCompositeOperation = 'screen';
-
- ctx.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite-expected.html
deleted file mode 100644
index 951049e638..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite-expected.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.alpha.composite</title>
-<h1>2d.layer.global-states.alpha.composite</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
- ctx.globalCompositeOperation = 'source-in';
-
- canvas2 = document.createElement("canvas");
- ctx2 = canvas2.getContext("2d");
-
- ctx2.globalCompositeOperation = 'screen';
- ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx2.fillRect(50, 50, 75, 50);
- ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx2.fillRect(70, 70, 75, 50);
-
- ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.html
deleted file mode 100644
index 1ac6a2cbfe..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.alpha.composite-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha.composite</title>
-<h1>2d.layer.global-states.alpha.composite</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
- ctx.globalCompositeOperation = 'source-in';
-
- ctx.beginLayer();
-
- // Enable compositing in the layer to validate that draw calls in the layer
- // won't individually composite with the background.
- ctx.globalCompositeOperation = 'screen';
-
- ctx.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow-expected.html
deleted file mode 100644
index 0ae93871f5..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow-expected.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.alpha.composite.shadow</title>
-<h1>2d.layer.global-states.alpha.composite.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
- ctx.globalCompositeOperation = 'source-in';
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- canvas2 = document.createElement("canvas");
- ctx2 = canvas2.getContext("2d");
-
- ctx2.globalCompositeOperation = 'screen';
- ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx2.fillRect(50, 50, 75, 50);
- ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx2.fillRect(70, 70, 75, 50);
-
- ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow.html
deleted file mode 100644
index 92b8a0d7a7..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.alpha.composite.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha.composite.shadow</title>
-<h1>2d.layer.global-states.alpha.composite.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
- ctx.globalCompositeOperation = 'source-in';
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.beginLayer();
-
- // Enable compositing in the layer to validate that draw calls in the layer
- // won't individually composite with the background.
- ctx.globalCompositeOperation = 'screen';
-
- ctx.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.html
deleted file mode 100644
index 829796acbf..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.alpha-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha</title>
-<h1>2d.layer.global-states.alpha</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
-
- ctx.beginLayer();
-
- // Enable compositing in the layer to validate that draw calls in the layer
- // won't individually composite with the background.
- ctx.globalCompositeOperation = 'screen';
-
- ctx.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow-expected.html
deleted file mode 100644
index 6f764c5001..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow-expected.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.alpha.shadow</title>
-<h1>2d.layer.global-states.alpha.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.5;
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- canvas2 = document.createElement("canvas");
- ctx2 = canvas2.getContext("2d");
-
- ctx2.globalCompositeOperation = 'screen';
- ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx2.fillRect(50, 50, 75, 50);
- ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx2.fillRect(70, 70, 75, 50);
-
- ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow.html
deleted file mode 100644
index a325302b3b..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.alpha.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha.shadow</title>
-<h1>2d.layer.global-states.alpha.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.5;
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.beginLayer();
-
- // Enable compositing in the layer to validate that draw calls in the layer
- // won't individually composite with the background.
- ctx.globalCompositeOperation = 'screen';
-
- ctx.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending-expected.html
deleted file mode 100644
index 33fdf46a28..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending-expected.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.blending</title>
-<h1>2d.layer.global-states.blending</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalCompositeOperation = 'multiply';
-
- canvas2 = document.createElement("canvas");
- ctx2 = canvas2.getContext("2d");
-
- ctx2.globalCompositeOperation = 'screen';
- ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx2.fillRect(50, 50, 75, 50);
- ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx2.fillRect(70, 70, 75, 50);
-
- ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.html
deleted file mode 100644
index 7d4d9ae4b5..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.blending-expected.html">
-<title>Canvas test: 2d.layer.global-states.blending</title>
-<h1>2d.layer.global-states.blending</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalCompositeOperation = 'multiply';
-
- ctx.beginLayer();
-
- // Enable compositing in the layer to validate that draw calls in the layer
- // won't individually composite with the background.
- ctx.globalCompositeOperation = 'screen';
-
- ctx.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html
new file mode 100644
index 0000000000..c56f13f2fd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.blending.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'multiply';
+ // No shadow.
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ // No shadow.
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform.html
new file mode 100644
index 0000000000..91decadfe2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.blending.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.blending.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'multiply';
+ // No shadow.
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ // No shadow.
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html
new file mode 100644
index 0000000000..e5f8ba0db4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.blending.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'multiply';
+ // No shadow.
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ // No shadow.
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation.html
new file mode 100644
index 0000000000..d6b28315f2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.blending.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.blending.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'multiply';
+ // No shadow.
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ // No shadow.
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow-expected.html
deleted file mode 100644
index 6f969074f9..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow-expected.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.blending.shadow</title>
-<h1>2d.layer.global-states.blending.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalCompositeOperation = 'multiply';
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- canvas2 = document.createElement("canvas");
- ctx2 = canvas2.getContext("2d");
-
- ctx2.globalCompositeOperation = 'screen';
- ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx2.fillRect(50, 50, 75, 50);
- ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx2.fillRect(70, 70, 75, 50);
-
- ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.html
deleted file mode 100644
index 51926d76d8..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.blending.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.blending.shadow</title>
-<h1>2d.layer.global-states.blending.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalCompositeOperation = 'multiply';
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.beginLayer();
-
- // Enable compositing in the layer to validate that draw calls in the layer
- // won't individually composite with the background.
- ctx.globalCompositeOperation = 'screen';
-
- ctx.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html
new file mode 100644
index 0000000000..debbd430c4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.blending.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform.html
new file mode 100644
index 0000000000..e0b8e45b51
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.blending.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.blending.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation-expected.html
new file mode 100644
index 0000000000..75a55e591b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation-expected.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.blending.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation.html
new file mode 100644
index 0000000000..f3891369c9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.blending.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.blending.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite-expected.html
deleted file mode 100644
index ed7669c4cf..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite-expected.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.composite</title>
-<h1>2d.layer.global-states.composite</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalCompositeOperation = 'source-in';
-
- canvas2 = document.createElement("canvas");
- ctx2 = canvas2.getContext("2d");
-
- ctx2.globalCompositeOperation = 'screen';
- ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx2.fillRect(50, 50, 75, 50);
- ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx2.fillRect(70, 70, 75, 50);
-
- ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.html
deleted file mode 100644
index 898d149924..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.composite-expected.html">
-<title>Canvas test: 2d.layer.global-states.composite</title>
-<h1>2d.layer.global-states.composite</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalCompositeOperation = 'source-in';
-
- ctx.beginLayer();
-
- // Enable compositing in the layer to validate that draw calls in the layer
- // won't individually composite with the background.
- ctx.globalCompositeOperation = 'screen';
-
- ctx.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html
new file mode 100644
index 0000000000..cf87559582
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.composite.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'source-in';
+ // No shadow.
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ // No shadow.
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform.html
new file mode 100644
index 0000000000..195905e16b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.composite.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.composite.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'source-in';
+ // No shadow.
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ // No shadow.
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html
new file mode 100644
index 0000000000..2f9bb208fb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.composite.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'source-in';
+ // No shadow.
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ // No shadow.
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation.html
new file mode 100644
index 0000000000..905fd7637b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.composite.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.composite.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'source-in';
+ // No shadow.
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ // No shadow.
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow-expected.html
deleted file mode 100644
index b687c27f47..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow-expected.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.composite.shadow</title>
-<h1>2d.layer.global-states.composite.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalCompositeOperation = 'source-in';
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- canvas2 = document.createElement("canvas");
- ctx2 = canvas2.getContext("2d");
-
- ctx2.globalCompositeOperation = 'screen';
- ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx2.fillRect(50, 50, 75, 50);
- ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx2.fillRect(70, 70, 75, 50);
-
- ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.html
deleted file mode 100644
index c563a57b76..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.composite.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.composite.shadow</title>
-<h1>2d.layer.global-states.composite.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalCompositeOperation = 'source-in';
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.beginLayer();
-
- // Enable compositing in the layer to validate that draw calls in the layer
- // won't individually composite with the background.
- ctx.globalCompositeOperation = 'screen';
-
- ctx.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html
new file mode 100644
index 0000000000..2b4436806a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.composite.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform.html
new file mode 100644
index 0000000000..df008cf12e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.composite.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.composite.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation-expected.html
new file mode 100644
index 0000000000..da144975a5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation-expected.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.composite.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation.html
new file mode 100644
index 0000000000..99e1d95443
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.composite.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.composite.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html
new file mode 100644
index 0000000000..489d432282
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.copy.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'copy';
+ // No shadow.
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ // No shadow.
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform.html
new file mode 100644
index 0000000000..1720f20589
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.copy.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.copy.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'copy';
+ // No shadow.
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ // No shadow.
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html
new file mode 100644
index 0000000000..63913ffb05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.copy.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'copy';
+ // No shadow.
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ // No shadow.
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation.html
new file mode 100644
index 0000000000..87cd91bb12
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.copy.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.copy.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'copy';
+ // No shadow.
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ // No shadow.
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html
new file mode 100644
index 0000000000..021581f892
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.copy.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform.html
new file mode 100644
index 0000000000..e8d01065c1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.copy.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.copy.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation-expected.html
new file mode 100644
index 0000000000..dd9a5c2a00
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation-expected.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.copy.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation.html
new file mode 100644
index 0000000000..5c7fa379f1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.copy.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.copy.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha-expected.html
deleted file mode 100644
index f304700feb..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha-expected.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.alpha</title>
-<h1>2d.layer.global-states.filter.alpha</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- const svg = `
- <svg xmlns="http://www.w3.org/2000/svg"
- width="200" height="200"
- color-interpolation-filters="sRGB">
- <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
- <feColorMatrix
- type="matrix"
- values="0.393 0.769 0.189 0 0
- 0.349 0.686 0.168 0 0
- 0.272 0.534 0.131 0 0
- 0 0 0 1 0" />
- <feComponentTransfer>
- <feFuncA type="table" tableValues="0 0.7"></feFuncA>
- </feComponentTransfer>
- <feDropShadow dx="5" dy="5" flood-color="#81e" />
- </filter>
- <g filter="url(#filter)">
- <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
- <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
- </g>
- </svg>`;
-
- const img = new Image();
- img.width = 200;
- img.height = 200;
- img.onload = () => {
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
-
- ctx.drawImage(img, 0, 0);
- };
- img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending-expected.html
deleted file mode 100644
index 7c91ce4229..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending-expected.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.alpha.blending</title>
-<h1>2d.layer.global-states.filter.alpha.blending</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- const svg = `
- <svg xmlns="http://www.w3.org/2000/svg"
- width="200" height="200"
- color-interpolation-filters="sRGB">
- <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
- <feColorMatrix
- type="matrix"
- values="0.393 0.769 0.189 0 0
- 0.349 0.686 0.168 0 0
- 0.272 0.534 0.131 0 0
- 0 0 0 1 0" />
- <feComponentTransfer>
- <feFuncA type="table" tableValues="0 0.7"></feFuncA>
- </feComponentTransfer>
- <feDropShadow dx="5" dy="5" flood-color="#81e" />
- </filter>
- <g filter="url(#filter)">
- <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
- <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
- </g>
- </svg>`;
-
- const img = new Image();
- img.width = 200;
- img.height = 200;
- img.onload = () => {
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
- ctx.globalCompositeOperation = 'multiply';
-
- ctx.drawImage(img, 0, 0);
- };
- img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.html
deleted file mode 100644
index 98ea67e9e9..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.alpha.blending-expected.html">
-<meta name=fuzzy content="maxDifference=0-1; totalPixels=0-2453">
-<title>Canvas test: 2d.layer.global-states.filter.alpha.blending</title>
-<h1>2d.layer.global-states.filter.alpha.blending</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
- ctx.globalCompositeOperation = 'multiply';
-
- ctx.beginLayer({filter: [
- {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
- 0.349, 0.686, 0.168, 0, 0,
- 0.272, 0.534, 0.131, 0, 0,
- 0, 0, 0, 1, 0]},
- {name: 'componentTransfer',
- funcA: {type: "table", tableValues: [0, 0.7]}},
- {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
- ctx.fillStyle = 'rgba(200, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 200, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html
deleted file mode 100644
index 62942ffeae..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.alpha.blending.shadow</title>
-<h1>2d.layer.global-states.filter.alpha.blending.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- const svg = `
- <svg xmlns="http://www.w3.org/2000/svg"
- width="200" height="200"
- color-interpolation-filters="sRGB">
- <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
- <feColorMatrix
- type="matrix"
- values="0.393 0.769 0.189 0 0
- 0.349 0.686 0.168 0 0
- 0.272 0.534 0.131 0 0
- 0 0 0 1 0" />
- <feComponentTransfer>
- <feFuncA type="table" tableValues="0 0.7"></feFuncA>
- </feComponentTransfer>
- <feDropShadow dx="5" dy="5" flood-color="#81e" />
- </filter>
- <g filter="url(#filter)">
- <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
- <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
- </g>
- </svg>`;
-
- const img = new Image();
- img.width = 200;
- img.height = 200;
- img.onload = () => {
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
- ctx.globalCompositeOperation = 'multiply';
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.drawImage(img, 0, 0);
- };
- img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow.html
deleted file mode 100644
index ccadfb624b..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.alpha.blending.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.alpha.blending.shadow</title>
-<h1>2d.layer.global-states.filter.alpha.blending.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
- ctx.globalCompositeOperation = 'multiply';
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.beginLayer({filter: [
- {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
- 0.349, 0.686, 0.168, 0, 0,
- 0.272, 0.534, 0.131, 0, 0,
- 0, 0, 0, 1, 0]},
- {name: 'componentTransfer',
- funcA: {type: "table", tableValues: [0, 0.7]}},
- {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
- ctx.fillStyle = 'rgba(200, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 200, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite-expected.html
deleted file mode 100644
index 8e0d98648e..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite-expected.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.alpha.composite</title>
-<h1>2d.layer.global-states.filter.alpha.composite</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- const svg = `
- <svg xmlns="http://www.w3.org/2000/svg"
- width="200" height="200"
- color-interpolation-filters="sRGB">
- <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
- <feColorMatrix
- type="matrix"
- values="0.393 0.769 0.189 0 0
- 0.349 0.686 0.168 0 0
- 0.272 0.534 0.131 0 0
- 0 0 0 1 0" />
- <feComponentTransfer>
- <feFuncA type="table" tableValues="0 0.7"></feFuncA>
- </feComponentTransfer>
- <feDropShadow dx="5" dy="5" flood-color="#81e" />
- </filter>
- <g filter="url(#filter)">
- <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
- <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
- </g>
- </svg>`;
-
- const img = new Image();
- img.width = 200;
- img.height = 200;
- img.onload = () => {
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
- ctx.globalCompositeOperation = 'source-in';
-
- ctx.drawImage(img, 0, 0);
- };
- img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.html
deleted file mode 100644
index 29041d4933..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.alpha.composite-expected.html">
-<meta name=fuzzy content="maxDifference=0-1; totalPixels=0-5204">
-<title>Canvas test: 2d.layer.global-states.filter.alpha.composite</title>
-<h1>2d.layer.global-states.filter.alpha.composite</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
- ctx.globalCompositeOperation = 'source-in';
-
- ctx.beginLayer({filter: [
- {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
- 0.349, 0.686, 0.168, 0, 0,
- 0.272, 0.534, 0.131, 0, 0,
- 0, 0, 0, 1, 0]},
- {name: 'componentTransfer',
- funcA: {type: "table", tableValues: [0, 0.7]}},
- {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
- ctx.fillStyle = 'rgba(200, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 200, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html
deleted file mode 100644
index a649972546..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.alpha.composite.shadow</title>
-<h1>2d.layer.global-states.filter.alpha.composite.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- const svg = `
- <svg xmlns="http://www.w3.org/2000/svg"
- width="200" height="200"
- color-interpolation-filters="sRGB">
- <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
- <feColorMatrix
- type="matrix"
- values="0.393 0.769 0.189 0 0
- 0.349 0.686 0.168 0 0
- 0.272 0.534 0.131 0 0
- 0 0 0 1 0" />
- <feComponentTransfer>
- <feFuncA type="table" tableValues="0 0.7"></feFuncA>
- </feComponentTransfer>
- <feDropShadow dx="5" dy="5" flood-color="#81e" />
- </filter>
- <g filter="url(#filter)">
- <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
- <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
- </g>
- </svg>`;
-
- const img = new Image();
- img.width = 200;
- img.height = 200;
- img.onload = () => {
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
- ctx.globalCompositeOperation = 'source-in';
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.drawImage(img, 0, 0);
- };
- img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow.html
deleted file mode 100644
index b2907f02aa..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.alpha.composite.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.alpha.composite.shadow</title>
-<h1>2d.layer.global-states.filter.alpha.composite.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
- ctx.globalCompositeOperation = 'source-in';
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.beginLayer({filter: [
- {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
- 0.349, 0.686, 0.168, 0, 0,
- 0.272, 0.534, 0.131, 0, 0,
- 0, 0, 0, 1, 0]},
- {name: 'componentTransfer',
- funcA: {type: "table", tableValues: [0, 0.7]}},
- {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
- ctx.fillStyle = 'rgba(200, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 200, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.html
deleted file mode 100644
index 85718cffba..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.alpha-expected.html">
-<meta name=fuzzy content="maxDifference=0-2; totalPixels=0-6766">
-<title>Canvas test: 2d.layer.global-states.filter.alpha</title>
-<h1>2d.layer.global-states.filter.alpha</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.6;
-
- ctx.beginLayer({filter: [
- {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
- 0.349, 0.686, 0.168, 0, 0,
- 0.272, 0.534, 0.131, 0, 0,
- 0, 0, 0, 1, 0]},
- {name: 'componentTransfer',
- funcA: {type: "table", tableValues: [0, 0.7]}},
- {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
- ctx.fillStyle = 'rgba(200, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 200, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow-expected.html
deleted file mode 100644
index 169baee29b..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow-expected.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.alpha.shadow</title>
-<h1>2d.layer.global-states.filter.alpha.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- const svg = `
- <svg xmlns="http://www.w3.org/2000/svg"
- width="200" height="200"
- color-interpolation-filters="sRGB">
- <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
- <feColorMatrix
- type="matrix"
- values="0.393 0.769 0.189 0 0
- 0.349 0.686 0.168 0 0
- 0.272 0.534 0.131 0 0
- 0 0 0 1 0" />
- <feComponentTransfer>
- <feFuncA type="table" tableValues="0 0.7"></feFuncA>
- </feComponentTransfer>
- <feDropShadow dx="5" dy="5" flood-color="#81e" />
- </filter>
- <g filter="url(#filter)">
- <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
- <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
- </g>
- </svg>`;
-
- const img = new Image();
- img.width = 200;
- img.height = 200;
- img.onload = () => {
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.5;
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.drawImage(img, 0, 0);
- };
- img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow.html
deleted file mode 100644
index aaeb167ccf..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.alpha.shadow-expected.html">
-<meta name=fuzzy content="maxDifference=0-2; totalPixels=0-6311">
-<title>Canvas test: 2d.layer.global-states.filter.alpha.shadow</title>
-<h1>2d.layer.global-states.filter.alpha.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalAlpha = 0.5;
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.beginLayer({filter: [
- {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
- 0.349, 0.686, 0.168, 0, 0,
- 0.272, 0.534, 0.131, 0, 0,
- 0, 0, 0, 1, 0]},
- {name: 'componentTransfer',
- funcA: {type: "table", tableValues: [0, 0.7]}},
- {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
- ctx.fillStyle = 'rgba(200, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 200, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending-expected.html
deleted file mode 100644
index f81dcf72dc..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending-expected.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.blending</title>
-<h1>2d.layer.global-states.filter.blending</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- const svg = `
- <svg xmlns="http://www.w3.org/2000/svg"
- width="200" height="200"
- color-interpolation-filters="sRGB">
- <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
- <feColorMatrix
- type="matrix"
- values="0.393 0.769 0.189 0 0
- 0.349 0.686 0.168 0 0
- 0.272 0.534 0.131 0 0
- 0 0 0 1 0" />
- <feComponentTransfer>
- <feFuncA type="table" tableValues="0 0.7"></feFuncA>
- </feComponentTransfer>
- <feDropShadow dx="5" dy="5" flood-color="#81e" />
- </filter>
- <g filter="url(#filter)">
- <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
- <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
- </g>
- </svg>`;
-
- const img = new Image();
- img.width = 200;
- img.height = 200;
- img.onload = () => {
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalCompositeOperation = 'multiply';
-
- ctx.drawImage(img, 0, 0);
- };
- img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.html
deleted file mode 100644
index 31628812c2..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.blending-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.blending</title>
-<h1>2d.layer.global-states.filter.blending</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalCompositeOperation = 'multiply';
-
- ctx.beginLayer({filter: [
- {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
- 0.349, 0.686, 0.168, 0, 0,
- 0.272, 0.534, 0.131, 0, 0,
- 0, 0, 0, 1, 0]},
- {name: 'componentTransfer',
- funcA: {type: "table", tableValues: [0, 0.7]}},
- {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
- ctx.fillStyle = 'rgba(200, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 200, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html
new file mode 100644
index 0000000000..482ab25a85
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.blending.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'multiply';
+ // No shadow.
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ // No shadow.
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html
new file mode 100644
index 0000000000..188d5ea98b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.blending.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'multiply';
+ // No shadow.
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ // No shadow.
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html
new file mode 100644
index 0000000000..3af6b863ed
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.blending.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'multiply';
+ // No shadow.
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ // No shadow.
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html
new file mode 100644
index 0000000000..849a0c997e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.blending.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'multiply';
+ // No shadow.
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ // No shadow.
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow-expected.html
deleted file mode 100644
index 91f3725f8e..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow-expected.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.blending.shadow</title>
-<h1>2d.layer.global-states.filter.blending.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- const svg = `
- <svg xmlns="http://www.w3.org/2000/svg"
- width="200" height="200"
- color-interpolation-filters="sRGB">
- <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
- <feColorMatrix
- type="matrix"
- values="0.393 0.769 0.189 0 0
- 0.349 0.686 0.168 0 0
- 0.272 0.534 0.131 0 0
- 0 0 0 1 0" />
- <feComponentTransfer>
- <feFuncA type="table" tableValues="0 0.7"></feFuncA>
- </feComponentTransfer>
- <feDropShadow dx="5" dy="5" flood-color="#81e" />
- </filter>
- <g filter="url(#filter)">
- <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
- <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
- </g>
- </svg>`;
-
- const img = new Image();
- img.width = 200;
- img.height = 200;
- img.onload = () => {
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalCompositeOperation = 'multiply';
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.drawImage(img, 0, 0);
- };
- img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.html
deleted file mode 100644
index e54cf06d0d..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.blending.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.blending.shadow</title>
-<h1>2d.layer.global-states.filter.blending.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalCompositeOperation = 'multiply';
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.beginLayer({filter: [
- {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
- 0.349, 0.686, 0.168, 0, 0,
- 0.272, 0.534, 0.131, 0, 0,
- 0, 0, 0, 1, 0]},
- {name: 'componentTransfer',
- funcA: {type: "table", tableValues: [0, 0.7]}},
- {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
- ctx.fillStyle = 'rgba(200, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 200, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html
new file mode 100644
index 0000000000..d530ef9d19
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.blending.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html
new file mode 100644
index 0000000000..34ded8fef5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.blending.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.blending.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html
new file mode 100644
index 0000000000..80705c36fd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.blending.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation.html
new file mode 100644
index 0000000000..78407dd459
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.blending.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.blending.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite-expected.html
deleted file mode 100644
index 97e85a1593..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite-expected.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.composite</title>
-<h1>2d.layer.global-states.filter.composite</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- const svg = `
- <svg xmlns="http://www.w3.org/2000/svg"
- width="200" height="200"
- color-interpolation-filters="sRGB">
- <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
- <feColorMatrix
- type="matrix"
- values="0.393 0.769 0.189 0 0
- 0.349 0.686 0.168 0 0
- 0.272 0.534 0.131 0 0
- 0 0 0 1 0" />
- <feComponentTransfer>
- <feFuncA type="table" tableValues="0 0.7"></feFuncA>
- </feComponentTransfer>
- <feDropShadow dx="5" dy="5" flood-color="#81e" />
- </filter>
- <g filter="url(#filter)">
- <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
- <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
- </g>
- </svg>`;
-
- const img = new Image();
- img.width = 200;
- img.height = 200;
- img.onload = () => {
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalCompositeOperation = 'source-in';
-
- ctx.drawImage(img, 0, 0);
- };
- img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.html
deleted file mode 100644
index d7e365422f..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.composite-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.composite</title>
-<h1>2d.layer.global-states.filter.composite</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalCompositeOperation = 'source-in';
-
- ctx.beginLayer({filter: [
- {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
- 0.349, 0.686, 0.168, 0, 0,
- 0.272, 0.534, 0.131, 0, 0,
- 0, 0, 0, 1, 0]},
- {name: 'componentTransfer',
- funcA: {type: "table", tableValues: [0, 0.7]}},
- {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
- ctx.fillStyle = 'rgba(200, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 200, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html
new file mode 100644
index 0000000000..2f513bff0a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.composite.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'source-in';
+ // No shadow.
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ // No shadow.
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html
new file mode 100644
index 0000000000..e3c36d3c0e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.composite.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'source-in';
+ // No shadow.
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ // No shadow.
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html
new file mode 100644
index 0000000000..242973300f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.composite.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'source-in';
+ // No shadow.
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ // No shadow.
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html
new file mode 100644
index 0000000000..466513864e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.composite.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'source-in';
+ // No shadow.
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ // No shadow.
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow-expected.html
deleted file mode 100644
index 4716bb2760..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow-expected.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.composite.shadow</title>
-<h1>2d.layer.global-states.filter.composite.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- const svg = `
- <svg xmlns="http://www.w3.org/2000/svg"
- width="200" height="200"
- color-interpolation-filters="sRGB">
- <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
- <feColorMatrix
- type="matrix"
- values="0.393 0.769 0.189 0 0
- 0.349 0.686 0.168 0 0
- 0.272 0.534 0.131 0 0
- 0 0 0 1 0" />
- <feComponentTransfer>
- <feFuncA type="table" tableValues="0 0.7"></feFuncA>
- </feComponentTransfer>
- <feDropShadow dx="5" dy="5" flood-color="#81e" />
- </filter>
- <g filter="url(#filter)">
- <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
- <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
- </g>
- </svg>`;
-
- const img = new Image();
- img.width = 200;
- img.height = 200;
- img.onload = () => {
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalCompositeOperation = 'source-in';
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.drawImage(img, 0, 0);
- };
- img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.html
deleted file mode 100644
index e5c7698634..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.composite.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.composite.shadow</title>
-<h1>2d.layer.global-states.filter.composite.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.globalCompositeOperation = 'source-in';
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.beginLayer({filter: [
- {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
- 0.349, 0.686, 0.168, 0, 0,
- 0.272, 0.534, 0.131, 0, 0,
- 0, 0, 0, 1, 0]},
- {name: 'componentTransfer',
- funcA: {type: "table", tableValues: [0, 0.7]}},
- {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
- ctx.fillStyle = 'rgba(200, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 200, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html
new file mode 100644
index 0000000000..c8926e5e15
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.composite.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html
new file mode 100644
index 0000000000..bc7cfd314e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.composite.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.composite.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html
new file mode 100644
index 0000000000..e70fe3e92d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.composite.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation.html
new file mode 100644
index 0000000000..f304e9c8e8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.composite.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.composite.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html
new file mode 100644
index 0000000000..21aa241aca
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.copy.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'copy';
+ // No shadow.
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ // No shadow.
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html
new file mode 100644
index 0000000000..ac5c7303a8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.copy.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'copy';
+ // No shadow.
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ // No shadow.
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html
new file mode 100644
index 0000000000..b2b46ee039
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.copy.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'copy';
+ // No shadow.
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ // No shadow.
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html
new file mode 100644
index 0000000000..3158a2fff3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.copy.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'copy';
+ // No shadow.
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ // No shadow.
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html
new file mode 100644
index 0000000000..d11326d5d6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.copy.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html
new file mode 100644
index 0000000000..839ab13add
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.copy.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.copy.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html
new file mode 100644
index 0000000000..3ac098c344
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.copy.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation.html
new file mode 100644
index 0000000000..7c090165f5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.copy.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.copy.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html
new file mode 100644
index 0000000000..a445ae2c4a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ // No globalCompositeOperation.
+ // No shadow.
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ // No globalCompositeOperation.
+ // No shadow.
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html
new file mode 100644
index 0000000000..d2b2d806c4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ // No globalCompositeOperation.
+ // No shadow.
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ // No globalCompositeOperation.
+ // No shadow.
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html
new file mode 100644
index 0000000000..610c601b1c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ // No globalCompositeOperation.
+ // No shadow.
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ // No globalCompositeOperation.
+ // No shadow.
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html
new file mode 100644
index 0000000000..afc4ebbd40
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ // No globalCompositeOperation.
+ // No shadow.
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ // No globalCompositeOperation.
+ // No shadow.
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html
new file mode 100644
index 0000000000..6bd4501584
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ // No globalCompositeOperation.
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ // No globalCompositeOperation.
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html
new file mode 100644
index 0000000000..93caac12fc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ // No globalCompositeOperation.
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ // No globalCompositeOperation.
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html
new file mode 100644
index 0000000000..b60a5526d9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ // No globalCompositeOperation.
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ const svg = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="90" height="90"
+ color-interpolation-filters="sRGB">
+ <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+ <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+ <feComponentTransfer>
+ <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+ </feComponentTransfer>
+ </filter>
+ <g filter="url(#filter)">
+ <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+ <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+ </g>
+ </svg>`;
+
+ const img = new Image();
+ img.width = 90;
+ img.height = 90;
+ img.onload = () => {
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ // No globalCompositeOperation.
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.drawImage(img, 0, 0);
+ };
+ img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html
new file mode 100644
index 0000000000..6849a2f40d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ // No globalCompositeOperation.
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ // No globalCompositeOperation.
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer({filter: [
+ {name: 'dropShadow',
+ dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+ {name: 'componentTransfer',
+ funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states-expected.html
deleted file mode 100644
index e56fe0b360..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states-expected.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.no-global-states</title>
-<h1>2d.layer.global-states.filter.no-global-states</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- const svg = `
- <svg xmlns="http://www.w3.org/2000/svg"
- width="200" height="200"
- color-interpolation-filters="sRGB">
- <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
- <feColorMatrix
- type="matrix"
- values="0.393 0.769 0.189 0 0
- 0.349 0.686 0.168 0 0
- 0.272 0.534 0.131 0 0
- 0 0 0 1 0" />
- <feComponentTransfer>
- <feFuncA type="table" tableValues="0 0.7"></feFuncA>
- </feComponentTransfer>
- <feDropShadow dx="5" dy="5" flood-color="#81e" />
- </filter>
- <g filter="url(#filter)">
- <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
- <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
- </g>
- </svg>`;
-
- const img = new Image();
- img.width = 200;
- img.height = 200;
- img.onload = () => {
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- // No global states.
-
- ctx.drawImage(img, 0, 0);
- };
- img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states.html
deleted file mode 100644
index 68f4d5004a..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.no-global-states-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.no-global-states</title>
-<h1>2d.layer.global-states.filter.no-global-states</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- // No global states.
-
- ctx.beginLayer({filter: [
- {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
- 0.349, 0.686, 0.168, 0, 0,
- 0.272, 0.534, 0.131, 0, 0,
- 0, 0, 0, 1, 0]},
- {name: 'componentTransfer',
- funcA: {type: "table", tableValues: [0, 0.7]}},
- {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
- ctx.fillStyle = 'rgba(200, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 200, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow-expected.html
deleted file mode 100644
index 13ba2dd4cd..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow-expected.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.shadow</title>
-<h1>2d.layer.global-states.filter.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- const svg = `
- <svg xmlns="http://www.w3.org/2000/svg"
- width="200" height="200"
- color-interpolation-filters="sRGB">
- <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
- <feColorMatrix
- type="matrix"
- values="0.393 0.769 0.189 0 0
- 0.349 0.686 0.168 0 0
- 0.272 0.534 0.131 0 0
- 0 0 0 1 0" />
- <feComponentTransfer>
- <feFuncA type="table" tableValues="0 0.7"></feFuncA>
- </feComponentTransfer>
- <feDropShadow dx="5" dy="5" flood-color="#81e" />
- </filter>
- <g filter="url(#filter)">
- <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
- <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
- </g>
- </svg>`;
-
- const img = new Image();
- img.width = 200;
- img.height = 200;
- img.onload = () => {
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.drawImage(img, 0, 0);
- };
- img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow.html
deleted file mode 100644
index 9efcd9d4f7..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.shadow</title>
-<h1>2d.layer.global-states.filter.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.beginLayer({filter: [
- {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
- 0.349, 0.686, 0.168, 0, 0,
- 0.272, 0.534, 0.131, 0, 0,
- 0, 0, 0, 1, 0]},
- {name: 'componentTransfer',
- funcA: {type: "table", tableValues: [0, 0.7]}},
- {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
- ctx.fillStyle = 'rgba(200, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 200, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html
new file mode 100644
index 0000000000..d1a799707f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.no-composite-op.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ // No globalCompositeOperation.
+ // No shadow.
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ // No globalCompositeOperation.
+ // No shadow.
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html
new file mode 100644
index 0000000000..f0fd2d19e3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.no-composite-op.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ // No globalCompositeOperation.
+ // No shadow.
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ // No globalCompositeOperation.
+ // No shadow.
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html
new file mode 100644
index 0000000000..cc91a67faf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.no-composite-op.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ // No globalCompositeOperation.
+ // No shadow.
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ // No globalCompositeOperation.
+ // No shadow.
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html
new file mode 100644
index 0000000000..7ab850023e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.no-composite-op.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ // No globalCompositeOperation.
+ // No shadow.
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ // No globalCompositeOperation.
+ // No shadow.
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html
new file mode 100644
index 0000000000..02b239116c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.no-composite-op.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ // No globalCompositeOperation.
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ // No globalCompositeOperation.
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html
new file mode 100644
index 0000000000..9da1936c5d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.no-composite-op.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ // No globalCompositeOperation.
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ // No transform.
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ // No globalCompositeOperation.
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html
new file mode 100644
index 0000000000..06f6a2dff3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.no-composite-op.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ // No globalCompositeOperation.
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ // No globalCompositeOperation.
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.globalCompositeOperation = 'screen';
+ ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 40, 50);
+ ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx2.fillRect(30, 5, 50, 40);
+
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html
new file mode 100644
index 0000000000..00ace7c54d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.no-composite-op.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.no-composite-op.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(2, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>no-globalAlpha</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ // No globalAlpha.
+ // No globalCompositeOperation.
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>globalAlpha</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 40);
+ ctx.rotate(Math.PI);
+ ctx.translate(-45, -45);
+
+ ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+ ctx.fillRect(20, 15, 50, 50);
+
+ ctx.globalAlpha = 0.75;
+ // No globalCompositeOperation.
+ ctx.shadowOffsetX = -7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+ ctx.shadowBlur = 3;
+
+ ctx.beginLayer();
+
+ // Enable compositing in the layer to validate that draw calls in the layer
+ // won't individually composite with the background.
+ ctx.globalCompositeOperation = 'screen';
+
+ ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+ ctx.fillRect(10, 25, 40, 50);
+ ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ ctx.fillRect(30, 5, 50, 40);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states-expected.html
deleted file mode 100644
index b91a2ae8b5..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states-expected.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.no-global-states</title>
-<h1>2d.layer.global-states.no-global-states</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- // No global states.
-
- canvas2 = document.createElement("canvas");
- ctx2 = canvas2.getContext("2d");
-
- ctx2.globalCompositeOperation = 'screen';
- ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx2.fillRect(50, 50, 75, 50);
- ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx2.fillRect(70, 70, 75, 50);
-
- ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states.html
deleted file mode 100644
index d561be2341..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.no-global-states-expected.html">
-<title>Canvas test: 2d.layer.global-states.no-global-states</title>
-<h1>2d.layer.global-states.no-global-states</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- // No global states.
-
- ctx.beginLayer();
-
- // Enable compositing in the layer to validate that draw calls in the layer
- // won't individually composite with the background.
- ctx.globalCompositeOperation = 'screen';
-
- ctx.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow-expected.html
deleted file mode 100644
index 835e9d420a..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow-expected.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.shadow</title>
-<h1>2d.layer.global-states.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- canvas2 = document.createElement("canvas");
- ctx2 = canvas2.getContext("2d");
-
- ctx2.globalCompositeOperation = 'screen';
- ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx2.fillRect(50, 50, 75, 50);
- ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx2.fillRect(70, 70, 75, 50);
-
- ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow.html
deleted file mode 100644
index 209316164c..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.shadow</title>
-<h1>2d.layer.global-states.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
- <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
- const canvas = document.getElementById("canvas");
- const ctx = canvas.getContext('2d');
-
- ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
- var circle = new Path2D();
- circle.arc(90, 90, 45, 0, 2 * Math.PI);
- ctx.fill(circle);
-
- ctx.shadowOffsetX = -10;
- ctx.shadowOffsetY = 10;
- ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
- ctx.shadowBlur = 3;
-
- ctx.beginLayer();
-
- // Enable compositing in the layer to validate that draw calls in the layer
- // won't individually composite with the background.
- ctx.globalCompositeOperation = 'screen';
-
- ctx.fillStyle = 'rgba(225, 0, 0, 1)';
- ctx.fillRect(50, 50, 75, 50);
- ctx.fillStyle = 'rgba(0, 255, 0, 1)';
- ctx.fillRect(70, 70, 75, 50);
-
- ctx.endLayer();
-</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation-expected.html
new file mode 100644
index 0000000000..02a8915c0b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation-expected.html
@@ -0,0 +1,910 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.globalCompositeOperation</title>
+<h1 style="font-size: 20px;">2d.layer.globalCompositeOperation</h1>
+<p class="desc">Checks that layers work with all globalCompositeOperation values.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(7, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>source-over</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-over';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>source-in</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>source-atop</div>
+ <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas2");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-atop';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>destination-over</div>
+ <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas3");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'destination-over';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>destination-in</div>
+ <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas4");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>destination-out</div>
+ <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas5");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'destination-out';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>destination-atop</div>
+ <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas6");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'destination-atop';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>lighter</div>
+ <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas7");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'lighter';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>copy</div>
+ <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas8");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>xor</div>
+ <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas9");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'xor';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>multiply</div>
+ <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas10");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>screen</div>
+ <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas11");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'screen';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>overlay</div>
+ <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas12");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'overlay';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>darken</div>
+ <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas13");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'darken';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>lighten</div>
+ <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas14");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'lighten';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>color-dodge</div>
+ <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas15");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'color-dodge';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>color-burn</div>
+ <canvas id="canvas16" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas16");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'color-burn';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>hard-light</div>
+ <canvas id="canvas17" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas17");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'hard-light';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>soft-light</div>
+ <canvas id="canvas18" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas18");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'soft-light';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>difference</div>
+ <canvas id="canvas19" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas19");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'difference';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>exclusion</div>
+ <canvas id="canvas20" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas20");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'exclusion';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>hue</div>
+ <canvas id="canvas21" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas21");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'hue';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>saturation</div>
+ <canvas id="canvas22" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas22");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'saturation';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>color</div>
+ <canvas id="canvas23" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas23");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'color';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+<span>
+ <div>luminosity</div>
+ <canvas id="canvas24" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas24");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'luminosity';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ const canvas2 = document.createElement("canvas");
+ const ctx2 = canvas2.getContext("2d");
+
+ ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx2.fillRect(10, 25, 25, 20);
+ ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx2.fillRect(25, 10, 20, 25);
+
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(canvas2, 0, 0);
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation.html
new file mode 100644
index 0000000000..32809d852c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation.html
@@ -0,0 +1,861 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.globalCompositeOperation-expected.html">
+<title>Canvas test: 2d.layer.globalCompositeOperation</title>
+<h1 style="font-size: 20px;">2d.layer.globalCompositeOperation</h1>
+<p class="desc">Checks that layers work with all globalCompositeOperation values.</p>
+
+<div style="display: grid; grid-gap: 4px;
+ grid-template-columns: repeat(7, max-content);
+ font-size: 13px; text-align: center;">
+<span>
+ <div>source-over</div>
+ <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas0");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-over';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>source-in</div>
+ <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas1");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>source-atop</div>
+ <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas2");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'source-atop';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>destination-over</div>
+ <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas3");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'destination-over';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>destination-in</div>
+ <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas4");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>destination-out</div>
+ <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas5");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'destination-out';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>destination-atop</div>
+ <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas6");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'destination-atop';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>lighter</div>
+ <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas7");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'lighter';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>copy</div>
+ <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas8");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'copy';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>xor</div>
+ <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas9");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'xor';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>multiply</div>
+ <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas10");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'multiply';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>screen</div>
+ <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas11");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'screen';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>overlay</div>
+ <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas12");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'overlay';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>darken</div>
+ <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas13");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'darken';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>lighten</div>
+ <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas14");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'lighten';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>color-dodge</div>
+ <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas15");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'color-dodge';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>color-burn</div>
+ <canvas id="canvas16" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas16");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'color-burn';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>hard-light</div>
+ <canvas id="canvas17" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas17");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'hard-light';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>soft-light</div>
+ <canvas id="canvas18" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas18");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'soft-light';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>difference</div>
+ <canvas id="canvas19" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas19");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'difference';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>exclusion</div>
+ <canvas id="canvas20" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas20");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'exclusion';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>hue</div>
+ <canvas id="canvas21" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas21");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'hue';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>saturation</div>
+ <canvas id="canvas22" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas22");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'saturation';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>color</div>
+ <canvas id="canvas23" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas23");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'color';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+<span>
+ <div>luminosity</div>
+ <canvas id="canvas24" width="90" height="90" style="outline: 1px solid">
+ <p class="fallback">FAIL (fallback content)</p>
+ </canvas>
+ <script type="module">
+ const canvas = document.getElementById("canvas24");
+ const ctx = canvas.getContext('2d');
+
+ ctx.translate(50, 50);
+ ctx.scale(2, 2);
+ ctx.rotate(Math.PI);
+ ctx.translate(-25, -25);
+
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+ ctx.fillRect(15, 15, 25, 25);
+
+ ctx.globalAlpha = 0.75;
+ ctx.globalCompositeOperation = 'luminosity';
+ ctx.shadowOffsetX = 7;
+ ctx.shadowOffsetY = 7;
+ ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+ ctx.beginLayer();
+
+ ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+ ctx.fillRect(10, 25, 25, 20);
+ ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+ ctx.fillRect(25, 10, 20, 25);
+
+ ctx.endLayer();
+ </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html
index 74e05e1e48..1544bbcb82 100644
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html
@@ -16,8 +16,9 @@
<ul id="d"></ul>
<script>
-var t = async_test("Raises exception on beginLayer() + reset() + endLayer().");
-_addTest(function(canvas, ctx) {
+test(t => {
+ var canvas = document.getElementById('c');
+ var ctx = canvas.getContext('2d');
assert_throws_dom("INVALID_STATE_ERR", function() {
ctx.beginLayer();
@@ -25,6 +26,6 @@ _addTest(function(canvas, ctx) {
ctx.endLayer();
});
-});
+}, "Raises exception on beginLayer() + reset() + endLayer().");
</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-restore.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-restore.html
index 1979cb6c73..3d33fbf7fb 100644
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-restore.html
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-restore.html
@@ -16,14 +16,15 @@
<ul id="d"></ul>
<script>
-var t = async_test("Raises exception on beginLayer() + restore().");
-_addTest(function(canvas, ctx) {
+test(t => {
+ var canvas = document.getElementById('c');
+ var ctx = canvas.getContext('2d');
assert_throws_dom("INVALID_STATE_ERR", function() {
ctx.beginLayer();
ctx.restore();
});
-});
+}, "Raises exception on beginLayer() + restore().");
</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html
index c635ac75b9..e48f806f32 100644
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html
@@ -16,8 +16,9 @@
<ul id="d"></ul>
<script>
-var t = async_test("Raises exception on beginLayer() + save() + endLayer().");
-_addTest(function(canvas, ctx) {
+test(t => {
+ var canvas = document.getElementById('c');
+ var ctx = canvas.getContext('2d');
assert_throws_dom("INVALID_STATE_ERR", function() {
ctx.beginLayer();
@@ -25,6 +26,6 @@ _addTest(function(canvas, ctx) {
ctx.endLayer();
});
-});
+}, "Raises exception on beginLayer() + save() + endLayer().");
</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.endLayer.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.endLayer.html
index c39a352d65..2950de37bc 100644
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.endLayer.html
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.endLayer.html
@@ -16,13 +16,14 @@
<ul id="d"></ul>
<script>
-var t = async_test("Raises exception on lone endLayer calls.");
-_addTest(function(canvas, ctx) {
+test(t => {
+ var canvas = document.getElementById('c');
+ var ctx = canvas.getContext('2d');
assert_throws_dom("INVALID_STATE_ERR", function() {
ctx.endLayer();
});
-});
+}, "Raises exception on lone endLayer calls.");
</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-beginLayer-restore.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-beginLayer-restore.html
index e2d4d56589..ff21610074 100644
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-beginLayer-restore.html
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-beginLayer-restore.html
@@ -16,8 +16,9 @@
<ul id="d"></ul>
<script>
-var t = async_test("Raises exception on save() + beginLayer() + restore().");
-_addTest(function(canvas, ctx) {
+test(t => {
+ var canvas = document.getElementById('c');
+ var ctx = canvas.getContext('2d');
assert_throws_dom("INVALID_STATE_ERR", function() {
ctx.save();
@@ -25,6 +26,6 @@ _addTest(function(canvas, ctx) {
ctx.restore();
});
-});
+}, "Raises exception on save() + beginLayer() + restore().");
</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-endLayer.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-endLayer.html
index f4308e1191..5c6da4b5bc 100644
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-endLayer.html
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-endLayer.html
@@ -16,14 +16,15 @@
<ul id="d"></ul>
<script>
-var t = async_test("Raises exception on save() + endLayer().");
-_addTest(function(canvas, ctx) {
+test(t => {
+ var canvas = document.getElementById('c');
+ var ctx = canvas.getContext('2d');
assert_throws_dom("INVALID_STATE_ERR", function() {
ctx.save();
ctx.endLayer();
});
-});
+}, "Raises exception on save() + endLayer().");
</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.html
deleted file mode 100644
index f1204aa61b..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.malformed-operations-with-promises.createImageBitmap</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
-<body class="show_output">
-
-<h1>2d.layer.malformed-operations-with-promises.createImageBitmap</h1>
-<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
-
-
-<p class="output">Actual output:</p>
-<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas>
-
-<ul id="d"></ul>
-<script>
-promise_test(async t => {
-
- var canvas = document.getElementById('c');
- var ctx = canvas.getContext('2d');
-
- // Shouldn't throw on its own.
- await createImageBitmap(canvas);
- // Make sure the exception isn't caused by calling the function twice.
- await createImageBitmap(canvas);
- // Calling again inside a layer should throw.
- ctx.beginLayer();
- await promise_rejects_dom(t, 'InvalidStateError', createImageBitmap(canvas));
-
-}, "Check that exceptions are thrown for operations that are malformed while layers are open.");
-</script>
-
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.html
new file mode 100644
index 0000000000..8e81bffdfb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.malformed-operations-with-promises</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+
+<script>
+
+promise_test(async t => {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+
+ // Shouldn't throw on its own.
+ await createImageBitmap(canvas);
+ // Make sure the exception isn't caused by calling the function twice.
+ await createImageBitmap(canvas);
+ // Calling again inside a layer should throw.
+ ctx.beginLayer();
+ await promise_rejects_dom(t, 'InvalidStateError',
+ createImageBitmap(canvas));
+}, "Throws if createImageBitmap is called while layers are open.");
+
+promise_test(async t => {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+
+ // Shouldn't throw on its own.
+ await new Promise(resolve => canvas.toBlob(resolve));
+ // Make sure the exception isn't caused by calling the function twice.
+ await new Promise(resolve => canvas.toBlob(resolve));
+ // Calling again inside a layer should throw.
+ ctx.beginLayer();
+ await promise_rejects_dom(t, 'InvalidStateError',
+ new Promise(resolve => canvas.toBlob(resolve)));
+}, "Throws if toBlob is called while layers are open.");
+
+</script>
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.toBlob.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.toBlob.html
deleted file mode 100644
index 6c69bb3784..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.toBlob.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.malformed-operations-with-promises.toBlob</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
-<body class="show_output">
-
-<h1>2d.layer.malformed-operations-with-promises.toBlob</h1>
-<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
-
-
-<p class="output">Actual output:</p>
-<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas>
-
-<ul id="d"></ul>
-<script>
-promise_test(async t => {
-
- var canvas = document.getElementById('c');
- var ctx = canvas.getContext('2d');
-
- // Shouldn't throw on its own.
- await new Promise(resolve => canvas.toBlob(resolve));
- // Make sure the exception isn't caused by calling the function twice.
- await new Promise(resolve => canvas.toBlob(resolve));
- // Calling again inside a layer should throw.
- ctx.beginLayer();
- await promise_rejects_dom(t, 'InvalidStateError', new Promise(resolve => canvas.toBlob(resolve)));
-
-}, "Check that exceptions are thrown for operations that are malformed while layers are open.");
-</script>
-
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.createPattern.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.createPattern.html
deleted file mode 100644
index f927b96524..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.createPattern.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.malformed-operations.createPattern</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
-<body class="show_output">
-
-<h1>2d.layer.malformed-operations.createPattern</h1>
-<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
-
-
-<p class="output">Actual output:</p>
-<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas>
-
-<ul id="d"></ul>
-<script>
-var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
-_addTest(function(canvas, ctx) {
-
- // Shouldn't throw on its own.
- ctx.createPattern(canvas, 'repeat');
- // Make sure the exception isn't caused by calling the function twice.
- ctx.createPattern(canvas, 'repeat');
- // Calling again inside a layer should throw.
- ctx.beginLayer();
- assert_throws_dom("InvalidStateError",
- () => ctx.createPattern(canvas, 'repeat'));
-
-});
-</script>
-
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.drawImage.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.drawImage.html
deleted file mode 100644
index 8bcc89d38e..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.drawImage.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.malformed-operations.drawImage</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
-<body class="show_output">
-
-<h1>2d.layer.malformed-operations.drawImage</h1>
-<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
-
-
-<p class="output">Actual output:</p>
-<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas>
-
-<ul id="d"></ul>
-<script>
-var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
-_addTest(function(canvas, ctx) {
-
- const canvas2 = new OffscreenCanvas(200, 200);
- const ctx2 = canvas2.getContext('2d');
- // Shouldn't throw on its own.
- ctx2.drawImage(canvas, 0, 0);
- // Make sure the exception isn't caused by calling the function twice.
- ctx2.drawImage(canvas, 0, 0);
- // Calling again inside a layer should throw.
- ctx.beginLayer();
- assert_throws_dom("InvalidStateError",
- () => ctx2.drawImage(canvas, 0, 0));
-
-});
-</script>
-
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.getImageData.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.getImageData.html
deleted file mode 100644
index 5dc3fcc017..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.getImageData.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.malformed-operations.getImageData</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
-<body class="show_output">
-
-<h1>2d.layer.malformed-operations.getImageData</h1>
-<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
-
-
-<p class="output">Actual output:</p>
-<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas>
-
-<ul id="d"></ul>
-<script>
-var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
-_addTest(function(canvas, ctx) {
-
- // Shouldn't throw on its own.
- ctx.getImageData(0, 0, 200, 200);
- // Make sure the exception isn't caused by calling the function twice.
- ctx.getImageData(0, 0, 200, 200);
- // Calling again inside a layer should throw.
- ctx.beginLayer();
- assert_throws_dom("InvalidStateError",
- () => ctx.getImageData(0, 0, 200, 200));
-
-});
-</script>
-
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.html
new file mode 100644
index 0000000000..cf6e7a80db
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.malformed-operations</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+
+<script>
+
+test(t => {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+
+ // Shouldn't throw on its own.
+ ctx.createPattern(canvas, 'repeat');
+ // Make sure the exception isn't caused by calling the function twice.
+ ctx.createPattern(canvas, 'repeat');
+ // Calling again inside a layer should throw.
+ ctx.beginLayer();
+ assert_throws_dom("InvalidStateError",
+ () => ctx.createPattern(canvas, 'repeat'));
+}, "Throws if createPattern is called while layers are open.");
+
+test(t => {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+
+ const canvas2 = new OffscreenCanvas(200, 200);
+ const ctx2 = canvas2.getContext('2d');
+ // Shouldn't throw on its own.
+ ctx2.drawImage(canvas, 0, 0);
+ // Make sure the exception isn't caused by calling the function twice.
+ ctx2.drawImage(canvas, 0, 0);
+ // Calling again inside a layer should throw.
+ ctx.beginLayer();
+ assert_throws_dom("InvalidStateError",
+ () => ctx2.drawImage(canvas, 0, 0));
+}, "Throws if drawImage is called while layers are open.");
+
+test(t => {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+
+ // Shouldn't throw on its own.
+ ctx.getImageData(0, 0, 200, 200);
+ // Make sure the exception isn't caused by calling the function twice.
+ ctx.getImageData(0, 0, 200, 200);
+ // Calling again inside a layer should throw.
+ ctx.beginLayer();
+ assert_throws_dom("InvalidStateError",
+ () => ctx.getImageData(0, 0, 200, 200));
+}, "Throws if getImageData is called while layers are open.");
+
+test(t => {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+
+ const canvas2 = new OffscreenCanvas(200, 200);
+ const ctx2 = canvas2.getContext('2d')
+ const data = ctx2.getImageData(0, 0, 1, 1);
+ // Shouldn't throw on its own.
+ ctx.putImageData(data, 0, 0);
+ // Make sure the exception isn't caused by calling the function twice.
+ ctx.putImageData(data, 0, 0);
+ // Calling again inside a layer should throw.
+ ctx.beginLayer();
+ assert_throws_dom("InvalidStateError",
+ () => ctx.putImageData(data, 0, 0));
+}, "Throws if putImageData is called while layers are open.");
+
+test(t => {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+
+ // Shouldn't throw on its own.
+ canvas.toDataURL();
+ // Make sure the exception isn't caused by calling the function twice.
+ canvas.toDataURL();
+ // Calling again inside a layer should throw.
+ ctx.beginLayer();
+ assert_throws_dom("InvalidStateError",
+ () => canvas.toDataURL());
+}, "Throws if toDataURL is called while layers are open.");
+
+</script>
+</div>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.putImageData.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.putImageData.html
deleted file mode 100644
index fd4fc262c2..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.putImageData.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.malformed-operations.putImageData</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
-<body class="show_output">
-
-<h1>2d.layer.malformed-operations.putImageData</h1>
-<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
-
-
-<p class="output">Actual output:</p>
-<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas>
-
-<ul id="d"></ul>
-<script>
-var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
-_addTest(function(canvas, ctx) {
-
- const canvas2 = new OffscreenCanvas(200, 200);
- const ctx2 = canvas2.getContext('2d')
- const data = ctx2.getImageData(0, 0, 1, 1);
- // Shouldn't throw on its own.
- ctx.putImageData(data, 0, 0);
- // Make sure the exception isn't caused by calling the function twice.
- ctx.putImageData(data, 0, 0);
- // Calling again inside a layer should throw.
- ctx.beginLayer();
- assert_throws_dom("InvalidStateError",
- () => ctx.putImageData(data, 0, 0));
-
-});
-</script>
-
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.toDataURL.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.toDataURL.html
deleted file mode 100644
index c9bb4f3875..0000000000
--- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.toDataURL.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.malformed-operations.toDataURL</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
-<body class="show_output">
-
-<h1>2d.layer.malformed-operations.toDataURL</h1>
-<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
-
-
-<p class="output">Actual output:</p>
-<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas>
-
-<ul id="d"></ul>
-<script>
-var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
-_addTest(function(canvas, ctx) {
-
- // Shouldn't throw on its own.
- canvas.toDataURL();
- // Make sure the exception isn't caused by calling the function twice.
- canvas.toDataURL();
- // Calling again inside a layer should throw.
- ctx.beginLayer();
- assert_throws_dom("InvalidStateError",
- () => canvas.toDataURL());
-
-});
-</script>
-
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh-expected.html
new file mode 100644
index 0000000000..d183f6940d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh-expected.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<title>HTML Canvas reference: SVG filter using CSS font-relative line-height units</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+:root {
+ font: 20px Ahem;
+}
+
+div {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ background: green;
+}
+
+.r {
+ background: red;
+}
+</style>
+<div><div class="r" style="width: 48px;"></div></div><br>
+<div><div class="r" style="width: 24px;"></div></div>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh.html b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh.html
new file mode 100644
index 0000000000..b61193fb9f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<title>HTML Canvas test: SVG filter using CSS font-relative line-height units</title>
+<link rel="match" href="svg-filter-lh-rlh-expected.html"/>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+:root {
+ font: 20px Ahem;
+}
+</style>
+<svg width="0" height="0">
+ <!-- https://html.spec.whatwg.org/multipage/canvas.html#working-with-externally-defined-svg-filters -->
+ <use href="./svg-filter.svg#filter-lh" />
+ <use href="./svg-filter.svg#filter-rlh" />
+</svg
+><canvas id="canvas-lh" width="100" height="100"></canvas><br
+><canvas id="canvas-rlh" width="100" height="100"></canvas>
+<script>
+function use_filter(canvas, filter_id) {
+ const ctx = canvas.getContext("2d");
+ ctx.font = "40px Ahem";
+ ctx.filter = `url(./svg-filter.svg#${filter_id})`;
+ ctx.fillStyle = "red";
+ ctx.fillRect(0, 0, 100, 100);
+}
+window.addEventListener("load", async () => {
+ use_filter(document.getElementById("canvas-lh"), "filter-lh");
+ use_filter(document.getElementById("canvas-rlh"), "filter-rlh");
+ document.documentElement.classList.remove('test-wait');
+});
+</script>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter.svg b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter.svg
new file mode 100644
index 0000000000..a783a3eb15
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter.svg
@@ -0,0 +1,10 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+ <filter id="filter-lh">
+ <feFlood result="floodFill" x="1lh" y="0" width="100" height="100" flood-color="green" />
+ <feBlend in="SourceGraphic" in2="floodFill" mode="color-dodge" />
+ </filter>
+ <filter id="filter-rlh">
+ <feFlood result="floodFill" x="1rlh" y="0" width="100" height="100" flood-color="green" />
+ <feBlend in="SourceGraphic" in2="floodFill" mode="color-dodge" />
+ </filter>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/text/WEB_FEATURES.yml b/testing/web-platform/tests/html/canvas/element/text/WEB_FEATURES.yml
new file mode 100644
index 0000000000..1d9e4bab82
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/WEB_FEATURES.yml
@@ -0,0 +1,4 @@
+features:
+- name: canvas-text-baselines
+ files:
+ - 2d.text.measure.baselines.*