diff options
714 files changed, 24491 insertions, 20203 deletions
diff --git a/tests/wpt/meta-legacy-layout/css/css-color/color-contrast-001.html.ini b/tests/wpt/meta-legacy-layout/css/css-color/color-contrast-001.html.ini deleted file mode 100644 index 905ffd0a44c..00000000000 --- a/tests/wpt/meta-legacy-layout/css/css-color/color-contrast-001.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[color-contrast-001.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/css/css-color/parsing/color-computed-color-contrast-function.html.ini b/tests/wpt/meta-legacy-layout/css/css-color/parsing/color-computed-color-contrast-function.html.ini deleted file mode 100644 index ff8c020f68f..00000000000 --- a/tests/wpt/meta-legacy-layout/css/css-color/parsing/color-computed-color-contrast-function.html.ini +++ /dev/null @@ -1,66 +0,0 @@ -[color-computed-color-contrast-function.html] - [Property color value 'color-contrast(white vs red, blue)'] - expected: FAIL - - [Property color value 'color-contrast(white vs blue, red)'] - expected: FAIL - - [Property color value 'color-contrast(white vs red, blue, green)'] - expected: FAIL - - [Property color value 'color-contrast(white vs white, white)'] - expected: FAIL - - [Property color value 'color-contrast(blue vs red, white)'] - expected: FAIL - - [Property color value 'color-contrast(red vs blue, white, red)'] - expected: FAIL - - [Property color value 'color-contrast(black vs red, blue)'] - expected: FAIL - - [Property color value 'color-contrast(black vs blue, red)'] - expected: FAIL - - [Property color value 'color-contrast(black vs white, white)'] - expected: FAIL - - [Property color value 'color-contrast(red vs blue, rgb(255, 255, 255, .5))'] - expected: FAIL - - [Property color value 'color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA)'] - expected: FAIL - - [Property color value 'color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA-large)'] - expected: FAIL - - [Property color value 'color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA)'] - expected: FAIL - - [Property color value 'color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA-large)'] - expected: FAIL - - [Property color value 'color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to 5.8)'] - expected: FAIL - - [Property color value 'color-contrast(wheat vs bisque, darkgoldenrod, olive to 100)'] - expected: FAIL - - [Property color value 'color-contrast(green vs bisque, darkgoldenrod, olive to 100)'] - expected: FAIL - - [Property color value 'color-contrast(green vs color(display-p3 0 1 0), color(display-p3 0 0 1))'] - expected: FAIL - - [Property color value 'color-contrast(color(display-p3 1 1 0) vs color(display-p3 0 1 0), color(display-p3 0 0 1))'] - expected: FAIL - - [Property color value 'color-contrast(green vs lab(50% -160 160), lch(0.2 50 20deg))'] - expected: FAIL - - [Property color value 'color-contrast(lab(50% -160 160) vs green, lch(0.2 50 20deg))'] - expected: FAIL - - [Property color value 'color-contrast( white vs red, blue )'] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/css/css-color/parsing/color-valid-color-contrast-function.html.ini b/tests/wpt/meta-legacy-layout/css/css-color/parsing/color-valid-color-contrast-function.html.ini deleted file mode 100644 index 6c759d11a0e..00000000000 --- a/tests/wpt/meta-legacy-layout/css/css-color/parsing/color-valid-color-contrast-function.html.ini +++ /dev/null @@ -1,66 +0,0 @@ -[color-valid-color-contrast-function.html] - [e.style['color'\] = "color-contrast(white vs red, blue)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(white vs blue, red)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(white vs red, blue, green)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(white vs white, white)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(blue vs red, white)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(red vs blue, white, red)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(black vs red, blue)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(black vs blue, red)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(black vs white, white)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(red vs blue, rgb(255, 255, 255, .5))" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA-large)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA-large)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to 5.8)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(wheat vs bisque, darkgoldenrod, olive to 100)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(green vs bisque, darkgoldenrod, olive to 100)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(green vs color(display-p3 0 1 0), color(display-p3 0 0 1))" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(color(display-p3 1 1 0) vs color(display-p3 0 1 0), color(display-p3 0 0 1))" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(green vs lab(50% -160 160), lch(0.2 50 20deg))" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(lab(50% -160 160) vs green, lch(0.2 50 20deg))" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast( white vs red, blue )" should set the property value] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/css/css-color/parsing/color-valid-color-mix-function.html.ini b/tests/wpt/meta-legacy-layout/css/css-color/parsing/color-valid-color-mix-function.html.ini index 45fe5b3df7b..561ada105d0 100644 --- a/tests/wpt/meta-legacy-layout/css/css-color/parsing/color-valid-color-mix-function.html.ini +++ b/tests/wpt/meta-legacy-layout/css/css-color/parsing/color-valid-color-mix-function.html.ini @@ -280,3 +280,6 @@ [e.style['color'\] = "color-mix(in hwb specified hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))" should set the property value] expected: FAIL + + [e.style['color'\] = "color-mix(in hsl, red calc(50% * sign(100em - 1px)), blue)" should set the property value] + expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/css/css-pseudo/first-letter-width-2.html.ini b/tests/wpt/meta-legacy-layout/css/css-pseudo/first-letter-width-2.html.ini deleted file mode 100644 index 4ecd64faef3..00000000000 --- a/tests/wpt/meta-legacy-layout/css/css-pseudo/first-letter-width-2.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[first-letter-width-2.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/css/css-transforms/transform-with-sign-function.html.ini b/tests/wpt/meta-legacy-layout/css/css-transforms/transform-with-sign-function.html.ini index 7d7a21ed7ce..acc2f9ef2d3 100644 --- a/tests/wpt/meta-legacy-layout/css/css-transforms/transform-with-sign-function.html.ini +++ b/tests/wpt/meta-legacy-layout/css/css-transforms/transform-with-sign-function.html.ini @@ -25,3 +25,6 @@ [rotateZ(calc(sign(1em - 1px) * 2deg)) should be used-value-equivalent to rotateZ(2deg)] expected: FAIL + + [calc(sign(1em - 1px) * 2) calc(sign(1em - 1px) * 2) calc(sign(1em - 1px) * 2) should be used-value-equivalent to 2 2 2] + expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/css/filter-effects/filter-region-html-content-viewport.tentative.html.ini b/tests/wpt/meta-legacy-layout/css/filter-effects/filter-region-html-content-viewport.tentative.html.ini new file mode 100644 index 00000000000..1d4ac00095b --- /dev/null +++ b/tests/wpt/meta-legacy-layout/css/filter-effects/filter-region-html-content-viewport.tentative.html.ini @@ -0,0 +1,2 @@ +[filter-region-html-content-viewport.tentative.html] + expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute-redirect.tentative.https.window.js.ini b/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute-redirect.tentative.https.window.js.ini new file mode 100644 index 00000000000..20dafbdd63f --- /dev/null +++ b/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute-redirect.tentative.https.window.js.ini @@ -0,0 +1,6 @@ +[deferred-fetch-allowed-by-permissions-policy-attribute-redirect.tentative.https.window.html] + [Permissions policy allow="deferred-fetch" allows same-origin navigation in an iframe.] + expected: FAIL + + [Permissions policy allow="deferred-fetch" disallows cross-origin navigation in an iframe.] + expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute.tentative.https.window.js.ini b/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute.tentative.https.window.js.ini new file mode 100644 index 00000000000..1a86a1f7b4e --- /dev/null +++ b/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute.tentative.https.window.js.ini @@ -0,0 +1,6 @@ +[deferred-fetch-allowed-by-permissions-policy-attribute.tentative.https.window.html] + [Permissions policy "deferred-fetch" can be enabled in the same-origin iframe using allow="deferred-fetch" attribute.] + expected: FAIL + + [Permissions policy "deferred-fetch" can be enabled in the cross-origin iframe using allow="deferred-fetch" attribute.] + expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy.tentative.https.window.js.ini b/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy.tentative.https.window.js.ini new file mode 100644 index 00000000000..4d0280dcc94 --- /dev/null +++ b/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy.tentative.https.window.js.ini @@ -0,0 +1,9 @@ +[deferred-fetch-allowed-by-permissions-policy.tentative.https.window.html] + [Permissions policy header: "deferred-fetch=*" allows fetchLater() in the top-level document.] + expected: FAIL + + [Permissions policy header: "deferred-fetch=*" allows fetchLater() in the same-origin iframe.] + expected: FAIL + + [Permissions policy header: "deferred-fetch=*" allow="deferred-fetch" allows fetchLater() in the cross-origin iframe.] + expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-default-permissions-policy.tentative.https.window.js.ini b/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-default-permissions-policy.tentative.https.window.js.ini new file mode 100644 index 00000000000..83da2ca5d77 --- /dev/null +++ b/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-default-permissions-policy.tentative.https.window.js.ini @@ -0,0 +1,6 @@ +[deferred-fetch-default-permissions-policy.tentative.https.window.html] + [Default "deferred-fetch" permissions policy ["self"\] allows fetchLater() in the top-level document.] + expected: FAIL + + [Default "deferred-fetch" permissions policy ["self"\] allows fetchLater() in the same-origin iframe.] + expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-disabled-by-permissions-policy.tentative.https.window.js.ini b/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-disabled-by-permissions-policy.tentative.https.window.js.ini new file mode 100644 index 00000000000..e35b7ecb5ca --- /dev/null +++ b/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-disabled-by-permissions-policy.tentative.https.window.js.ini @@ -0,0 +1,3 @@ +[deferred-fetch-disabled-by-permissions-policy.tentative.https.window.html] + [Permissions policy header: "deferred-fetch=()" disallows fetchLater() in the top-level document.] + expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-supported-by-permissions-policy.tentative.window.js.ini b/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-supported-by-permissions-policy.tentative.window.js.ini new file mode 100644 index 00000000000..eeffb965154 --- /dev/null +++ b/tests/wpt/meta-legacy-layout/fetch/fetch-later/permissions-policy/deferred-fetch-supported-by-permissions-policy.tentative.window.js.ini @@ -0,0 +1,3 @@ +[deferred-fetch-supported-by-permissions-policy.tentative.window.html] + [document.featurePolicy.features should advertise deferred-fetch.] + expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform.html.ini deleted file mode 100644 index 1c6480ede07..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.composite.no-shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation.html.ini deleted file mode 100644 index 1327e04cf85..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.composite.no-shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform.html.ini deleted file mode 100644 index 7e434389bac..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.copy.no-shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation.html.ini deleted file mode 100644 index e4e1d2ecfe8..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.copy.no-shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html.ini deleted file mode 100644 index 320c0788bde..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.blending.no-shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html.ini deleted file mode 100644 index ffdea0f0bba..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.blending.no-shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html.ini deleted file mode 100644 index 4c9e8f01822..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.blending.shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation.html.ini deleted file mode 100644 index f3e73bbc0c6..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.blending.shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html.ini deleted file mode 100644 index 625607575ed..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.composite.no-shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html.ini deleted file mode 100644 index 0d03f3d5494..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.composite.no-shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html.ini deleted file mode 100644 index 6951a253266..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.composite.shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation.html.ini deleted file mode 100644 index 5bd2f825d0d..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.composite.shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html.ini deleted file mode 100644 index a11a235607e..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.copy.no-shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html.ini deleted file mode 100644 index 11e660c56be..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.copy.no-shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html.ini deleted file mode 100644 index 98c792d69be..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.copy.shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation.html.ini deleted file mode 100644 index 7352700efe6..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.copy.shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html.ini deleted file mode 100644 index 2bca108715d..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html.ini deleted file mode 100644 index 6084e59852a..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html.ini deleted file mode 100644 index 4521ebd917c..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html.ini deleted file mode 100644 index b55fabce624..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.no-composite-op.shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.no-transform.html.ini new file mode 100644 index 00000000000..5bfd6fbfd87 --- /dev/null +++ b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.no-transform.html.ini @@ -0,0 +1,2 @@ +[2d.layer.global-states.filter.no-transform.html] + expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.rotation.html.ini new file mode 100644 index 00000000000..d69f71b10b6 --- /dev/null +++ b/tests/wpt/meta-legacy-layout/html/canvas/element/layers/2d.layer.global-states.filter.rotation.html.ini @@ -0,0 +1,2 @@ +[2d.layer.global-states.filter.rotation.html] + expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.html.ini deleted file mode 100644 index 404c45da07f..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.blending.no-shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.w.html.ini deleted file mode 100644 index 6d3f867402c..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.blending.no-shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.html.ini deleted file mode 100644 index 5f0ae34ff49..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.blending.no-shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.w.html.ini deleted file mode 100644 index 865516930b3..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.blending.no-shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.html.ini deleted file mode 100644 index a5415c367c6..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.blending.shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.w.html.ini deleted file mode 100644 index eb0f9ac9be6..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.blending.shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.html.ini deleted file mode 100644 index 6cb0dd36119..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.blending.shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.w.html.ini deleted file mode 100644 index 69749d1d220..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.blending.shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.w.html.ini deleted file mode 100644 index 5896105e3bd..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.composite.no-shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.w.html.ini deleted file mode 100644 index 3990f08265f..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.composite.no-shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.html.ini deleted file mode 100644 index cb0410d4760..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.composite.shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.w.html.ini deleted file mode 100644 index b1cec0976d5..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.composite.shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.html.ini deleted file mode 100644 index 8af32a1f6de..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.composite.shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.w.html.ini deleted file mode 100644 index 00e24ab0f41..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.composite.shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.w.html.ini deleted file mode 100644 index 8b6afbe31c3..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.copy.no-shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.w.html.ini deleted file mode 100644 index 61b8d7e2d9d..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.copy.no-shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.html.ini deleted file mode 100644 index b3ddf29a402..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.copy.shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.w.html.ini deleted file mode 100644 index ad7a10db034..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.copy.shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.html.ini deleted file mode 100644 index 73cf9337979..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.copy.shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.w.html.ini deleted file mode 100644 index f7dc71e7998..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.copy.shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html.ini deleted file mode 100644 index 11e566f624c..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.w.html.ini deleted file mode 100644 index 504e6dbe000..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.blending.no-shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.w.html.ini deleted file mode 100644 index e160d39a8bf..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.blending.shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.w.html.ini deleted file mode 100644 index fd8f19fffb9..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.blending.shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html.ini deleted file mode 100644 index 856ca9b5ddb..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.w.html.ini deleted file mode 100644 index c65e4e6af7a..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.composite.no-shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.w.html.ini deleted file mode 100644 index bc8ba3b7d1b..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.composite.shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.w.html.ini deleted file mode 100644 index 8697b8ee551..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.composite.shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html.ini deleted file mode 100644 index b4350ad384d..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.w.html.ini deleted file mode 100644 index 46f49fe0224..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.copy.no-shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.w.html.ini deleted file mode 100644 index 529082f039d..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.copy.shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.w.html.ini deleted file mode 100644 index 787f83ec5e5..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.copy.shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html.ini deleted file mode 100644 index e84b41a07ad..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html.ini deleted file mode 100644 index 4c5a408b484..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html.ini deleted file mode 100644 index 3c57414972d..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html.ini deleted file mode 100644 index 6f27126360e..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-transform.w.html.ini new file mode 100644 index 00000000000..d867e0fc45b --- /dev/null +++ b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-transform.w.html.ini @@ -0,0 +1,2 @@ +[2d.layer.global-states.filter.no-transform.w.html] + expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.rotation.w.html.ini new file mode 100644 index 00000000000..af2eb3e5257 --- /dev/null +++ b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.filter.rotation.w.html.ini @@ -0,0 +1,2 @@ +[2d.layer.global-states.filter.rotation.w.html] + expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html.ini deleted file mode 100644 index e1271b08876..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.no-composite-op.no-shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html.ini deleted file mode 100644 index b810cf1c28f..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html.ini deleted file mode 100644 index 8ad13f66916..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.no-composite-op.no-shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html.ini deleted file mode 100644 index a8cef471940..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html.ini deleted file mode 100644 index 61897735a81..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.no-composite-op.shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.w.html.ini deleted file mode 100644 index 25ab7cbc35e..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.no-composite-op.shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html.ini deleted file mode 100644 index 99afebe84a2..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.no-composite-op.shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.w.html.ini deleted file mode 100644 index 6d5d73e1852..00000000000 --- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.no-composite-op.shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.html.ini new file mode 100644 index 00000000000..780decaea7a --- /dev/null +++ b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.html.ini @@ -0,0 +1,2 @@ +[2d.layer.global-states.no-transform.html] + expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.w.html.ini new file mode 100644 index 00000000000..6f5fcab1e92 --- /dev/null +++ b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.w.html.ini @@ -0,0 +1,2 @@ +[2d.layer.global-states.no-transform.w.html] + expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.rotation.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.rotation.html.ini new file mode 100644 index 00000000000..67b4fa5c70a --- /dev/null +++ b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.rotation.html.ini @@ -0,0 +1,2 @@ +[2d.layer.global-states.rotation.html] + expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.rotation.w.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.rotation.w.html.ini new file mode 100644 index 00000000000..d1c4919b910 --- /dev/null +++ b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/layers/2d.layer.global-states.rotation.w.html.ini @@ -0,0 +1,2 @@ +[2d.layer.global-states.rotation.w.html] + expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/document-isolation-policy/isolate-and-require-corp.tentative.https.html.ini b/tests/wpt/meta-legacy-layout/html/document-isolation-policy/isolate-and-require-corp.tentative.https.html.ini new file mode 100644 index 00000000000..84ba60da883 --- /dev/null +++ b/tests/wpt/meta-legacy-layout/html/document-isolation-policy/isolate-and-require-corp.tentative.https.html.ini @@ -0,0 +1,3 @@ +[isolate-and-require-corp.tentative.https.html] + ["isolate-and-require-corp" top-level: fetch() to cross-origin response without CORP should fail] + expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/document-isolation-policy/shared-workers.tentative.https.html.ini b/tests/wpt/meta-legacy-layout/html/document-isolation-policy/shared-workers.tentative.https.html.ini new file mode 100644 index 00000000000..c0b5a06b476 --- /dev/null +++ b/tests/wpt/meta-legacy-layout/html/document-isolation-policy/shared-workers.tentative.https.html.ini @@ -0,0 +1,33 @@ +[shared-workers.tentative.https.html] + [default policy (derived from response)] + expected: FAIL + + ["isolate-and-require-corp" (derived from response)] + expected: FAIL + + [default policy (derived from owner set due to use of local scheme - blob URL)] + expected: FAIL + + [isolate-and-require-corp (derived from blob URL creator)] + expected: FAIL + + ["isolate-and-require-corp" (derived from owner set due to use of local scheme - blob URL)] + expected: FAIL + + [default policy (derived from owner set due to use of local scheme - data URL)] + expected: FAIL + + [default policy (not derived from data URL creator)] + expected: FAIL + + ["isolate-and-require-corp" (derived from owner set due to use of local scheme - data URL)] + expected: FAIL + + [default policy (derived from owner set due to use of local scheme - filesystem URL)] + expected: FAIL + + [isolate-and-require-corp (derived from filesystem URL creator)] + expected: FAIL + + ["isolate-and-require-corp" (derived from owner set due to use of local scheme - filesystem URL)] + expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/interaction/focus/the-autofocus-attribute/supported-elements.html.ini b/tests/wpt/meta-legacy-layout/html/interaction/focus/the-autofocus-attribute/supported-elements.html.ini index d169bd2e9fa..09c25efb089 100644 --- a/tests/wpt/meta-legacy-layout/html/interaction/focus/the-autofocus-attribute/supported-elements.html.ini +++ b/tests/wpt/meta-legacy-layout/html/interaction/focus/the-autofocus-attribute/supported-elements.html.ini @@ -1,4 +1,5 @@ [supported-elements.html] + expected: TIMEOUT [Contenteditable element should support autofocus] expected: FAIL @@ -6,10 +7,10 @@ expected: FAIL [Host element with delegatesFocus including no focusable descendants should be skipped] - expected: FAIL + expected: NOTRUN [Area element should support autofocus] - expected: FAIL + expected: NOTRUN [Host element with delegatesFocus should support autofocus] - expected: FAIL + expected: NOTRUN diff --git a/tests/wpt/meta-legacy-layout/html/rendering/the-details-element/details-pseudo-elements-003.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/rendering/the-details-element/details-pseudo-elements-003.tentative.html.ini new file mode 100644 index 00000000000..8521ca4c028 --- /dev/null +++ b/tests/wpt/meta-legacy-layout/html/rendering/the-details-element/details-pseudo-elements-003.tentative.html.ini @@ -0,0 +1,2 @@ +[details-pseudo-elements-003.tentative.html] + expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-3.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-3.html.ini index eacbe5794ea..26918347169 100644 --- a/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-3.html.ini +++ b/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-3.html.ini @@ -1,5 +1,5 @@ [iframe_sandbox_popups_escaping-3.html] type: testharness - expected: TIMEOUT + expected: CRASH [Check that popups from a sandboxed iframe escape the sandbox if\n allow-popups-to-escape-sandbox is used] expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/semantics/forms/form-submission-0/reparent-form-during-planned-navigation-task.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/forms/form-submission-0/reparent-form-during-planned-navigation-task.html.ini deleted file mode 100644 index 7682a4830bf..00000000000 --- a/tests/wpt/meta-legacy-layout/html/semantics/forms/form-submission-0/reparent-form-during-planned-navigation-task.html.ini +++ /dev/null @@ -1,4 +0,0 @@ -[reparent-form-during-planned-navigation-task.html] - expected: TIMEOUT - [reparent-form-during-planned-navigation-task] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html.ini deleted file mode 100644 index 4663af098fb..00000000000 --- a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[native-popup-with-datalist.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html.ini deleted file mode 100644 index a0a8eab3b2a..00000000000 --- a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[select-appearance-custom-button-no-datalist.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode.tentative.html.ini deleted file mode 100644 index 5bc744af70b..00000000000 --- a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[select-appearance-dark-mode.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html.ini deleted file mode 100644 index 9aa406ec68c..00000000000 --- a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[select-appearance-no-button-custom-datalist.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html.ini deleted file mode 100644 index b2de1c98775..00000000000 --- a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[select-appearance-no-button-no-datalist.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html.ini deleted file mode 100644 index 3b64ad3a46a..00000000000 --- a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[select-appearance-writing-mode-vertical-lr.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html.ini deleted file mode 100644 index a3843b0849b..00000000000 --- a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[select-appearance-writing-mode-vertical-rl.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html.ini deleted file mode 100644 index 83afdb3d551..00000000000 --- a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[selectlist-option-arbitrary-content-displayed.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/semantics/popovers/popover-dialog-crash.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/popovers/popover-dialog-crash.html.ini deleted file mode 100644 index e01429a48a2..00000000000 --- a/tests/wpt/meta-legacy-layout/html/semantics/popovers/popover-dialog-crash.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[popover-dialog-crash.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/semantics/popovers/popover-hint-crash.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/popovers/popover-hint-crash.tentative.html.ini deleted file mode 100644 index 321a2116951..00000000000 --- a/tests/wpt/meta-legacy-layout/html/semantics/popovers/popover-hint-crash.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[popover-hint-crash.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/html/semantics/popovers/popover-manual-crash.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/popovers/popover-manual-crash.html.ini deleted file mode 100644 index 72f788df367..00000000000 --- a/tests/wpt/meta-legacy-layout/html/semantics/popovers/popover-manual-crash.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[popover-manual-crash.html] - expected: TIMEOUT diff --git a/tests/wpt/meta-legacy-layout/webxr/depth-sensing/depth_sensing_preferences.https.html.ini b/tests/wpt/meta-legacy-layout/webxr/depth-sensing/depth_sensing_preferences.https.html.ini new file mode 100644 index 00000000000..59e6de0a2e8 --- /dev/null +++ b/tests/wpt/meta-legacy-layout/webxr/depth-sensing/depth_sensing_preferences.https.html.ini @@ -0,0 +1,36 @@ +[depth_sensing_preferences.https.html] + [depthSensing - Required - Fully populated grants session] + expected: FAIL + + [depthSensing - Required - Empty usage grants session] + expected: FAIL + + [depthSensing - Required - Empty format grants session] + expected: FAIL + + [depthSensing - Required - Empty usage and format grants session] + expected: FAIL + + [depthSensing - Required - Missing usage rejects session] + expected: FAIL + + [depthSensing - Required - Missing format rejects session] + expected: FAIL + + [depthSensing - Required - Missing usage and format rejects session] + expected: FAIL + + [depthSensing - Required - Missing configuration rejects session] + expected: FAIL + + [depthSensing - Optional - Missing usage optional still rejects session] + expected: FAIL + + [depthSensing - Optional - Missing format optional still rejects session] + expected: FAIL + + [depthSensing - Optional - Missing usage and format optional still rejects session] + expected: FAIL + + [depthSensing - Optional - Missing configuration optional grants session without depth] + expected: FAIL diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json index 38d797895ce..0ef1b7c42e1 100644 --- a/tests/wpt/meta/MANIFEST.json +++ b/tests/wpt/meta/MANIFEST.json @@ -287,6 +287,13 @@ {} ] ], + "image-with-detached-text-child.html": [ + "64f5ab46939ab5af19db90405307259da4856046", + [ + null, + {} + ] + ], "img-map-pseudo.html": [ "443934e431b9ffe9a0bca469c1d97cb8edccf5c6", [ @@ -7026,27 +7033,6 @@ {} ] ], - "popover-dialog-crash.html": [ - "e7579d5a3869958422fc07422fbb84124c8c635a", - [ - null, - {} - ] - ], - "popover-hint-crash.tentative.html": [ - "82f83538e93e364dc90b45aa41515a586ea2089b", - [ - null, - {} - ] - ], - "popover-manual-crash.html": [ - "535eb4c7d120186f620c376a149158900721fe12", - [ - null, - {} - ] - ], "popover-undefined-remove-crash.html": [ "3c273ea6f344d179a3d010d20f0779b3721abb40", [ @@ -32886,6 +32872,45 @@ {} ] ], + "page-box-008-print.html": [ + "c05f0e24af08b0e497de5a91ae869315e82092c0", + [ + null, + [ + [ + "/css/css-page/page-box-008-print-ref.html", + "==" + ] + ], + {} + ] + ], + "page-box-009-print.html": [ + "dc9ced3bdf9ea7cdc23988a9fc3fba1420262300", + [ + null, + [ + [ + "/css/css-page/page-box-009-print-ref.html", + "==" + ] + ], + {} + ] + ], + "page-box-010-print.html": [ + "66e192a14e84238d99e57159dc04ccd8bfea24a4", + [ + null, + [ + [ + "/css/css-page/page-box-010-print-ref.html", + "==" + ] + ], + {} + ] + ], "page-left-right-001-print.html": [ "044696fcca27ec7ebe18edab3053dfbb65af6bbc", [ @@ -122106,7 +122131,7 @@ ] ], "anchor-scroll-scrollable-anchor.html": [ - "c2a256877d4c64b9652d2056d1ba19c0f1e51be9", + "ffb5b2ef8005d6a072afd3ffa21cac2dbea3312d", [ null, [ @@ -122115,7 +122140,23 @@ "==" ] ], - {} + { + "fuzzy": [ + [ + null, + [ + [ + 1, + 1 + ], + [ + 0, + 50 + ] + ] + ] + ] + } ] ], "anchor-scroll-to-sticky-001.html": [ @@ -145424,19 +145465,6 @@ {} ] ], - "color-contrast-001.html": [ - "d2fd196a33a338c08cba1445a4e44a8809dad9ad", - [ - null, - [ - [ - "/css/css-color/greensquare-ref.html", - "==" - ] - ], - {} - ] - ], "color-mix-basic-001.html": [ "c69a292159003c578918bd1be9e495c6cbdb094e", [ @@ -160695,7 +160723,7 @@ ] ], "display-contents-details.html": [ - "0dcda91ab380d8291e8aa3074794ee80866aaf3b", + "927621bba5148789c971dea8bdb5c15d4c0aabc4", [ null, [ @@ -196474,6 +196502,71 @@ {} ] ], + "text-box-trim-atomic-inline-001.html": [ + "5f2d01c7dc723981a832fb802992083ccbf96c6b", + [ + null, + [ + [ + "/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001-ref.html", + "==" + ] + ], + {} + ] + ], + "text-box-trim-block-in-inline-end-001.html": [ + "7b008a21f04396b8a1703e540d44600538f301aa", + [ + null, + [ + [ + "/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001-ref.html", + "==" + ] + ], + {} + ] + ], + "text-box-trim-block-in-inline-end-002.html": [ + "a1711e309cc61efe0cde5b8c0058a1f72c7eb223", + [ + null, + [ + [ + "/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001-ref.html", + "==" + ] + ], + {} + ] + ], + "text-box-trim-block-in-inline-end-003.html": [ + "8ace67f78f60df6cf5fd4f53613d9d21cb4e0ba0", + [ + null, + [ + [ + "/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001-ref.html", + "==" + ] + ], + {} + ] + ], + "text-box-trim-block-in-inline-end-004.html": [ + "3c682a211f9ae45c2478876135a2c4e8a86b999a", + [ + null, + [ + [ + "/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001-ref.html", + "==" + ] + ], + {} + ] + ], "text-box-trim-block-in-inline-start-001.html": [ "9d14a08bc2ab509955cf5be11cc797ff9f59e48c", [ @@ -196500,6 +196593,19 @@ {} ] ], + "text-box-trim-block-in-inline-start-003.html": [ + "5227a4d13aa4bc6513516da4dd963f1891bb3a3b", + [ + null, + [ + [ + "/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-001-ref.html", + "==" + ] + ], + {} + ] + ], "text-box-trim-dynamic-001.html": [ "5cd25060934ef6a73aa0d01141adde8296103c08", [ @@ -196746,6 +196852,19 @@ {} ] ], + "text-box-trim-line-clamp-001.html": [ + "e0af246db0e53665c5a54d3ad1a2064f52b61462", + [ + null, + [ + [ + "/css/css-inline/text-box-trim/text-box-trim-line-clamp-001-ref.html", + "==" + ] + ], + {} + ] + ], "text-box-trim-multicol-001.html": [ "69323e0aeffd2fb641cc0bbd1ef952103ed171ab", [ @@ -214826,7 +214945,7 @@ ] ], "scrollbar-gutter-002.html": [ - "531af61b5d35e1638586fa0383f3ce27cacc762a", + "73c10dc7b3feccdf97ec442c504dad70e6ea0feb", [ null, [ @@ -214842,7 +214961,7 @@ [ [ 1, - 1 + 20 ], [ 0, @@ -214959,7 +215078,7 @@ ] ], "scrollbar-gutter-vertical-lr-002.html": [ - "b74aa642ca1966e044d2d3a5a145dc9130916b72", + "598cfdf3664f6ba14df20b73b3383ceb091fe12c", [ null, [ @@ -214975,7 +215094,7 @@ [ [ 1, - 1 + 25 ], [ 0, @@ -220764,19 +220883,6 @@ {} ] ], - "first-letter-width-2.html": [ - "e7d01afe47291b507179ca4f984e710d06ee526e", - [ - null, - [ - [ - "/css/css-pseudo/first-letter-width-2-ref.html", - "==" - ] - ], - {} - ] - ], "first-letter-width.html": [ "fedf917c62a1c34c054b7484594ced16960c4c17", [ @@ -223411,13 +223517,13 @@ {} ] ], - "text-wrap.tentative.html": [ - "b2acd519a60dab9660122a8586978138e6d1f065", + "nowrap.html": [ + "f1d8f53182e54a0bc149c86004d0238e6e284118", [ null, [ [ - "/css/css-ruby/break-within-bases/text-wrap-ref.html", + "/css/css-ruby/break-within-bases/nowrap-ref.html", "==" ] ], @@ -223595,7 +223701,7 @@ ] ], "ruby-align-001.html": [ - "13c96f53f2f30ecef1a9017cd7f63159dfd9a6e7", + "c611a56532cef538def6236f62ca9282f62d4694", [ null, [ @@ -223608,7 +223714,7 @@ ] ], "ruby-align-001a.html": [ - "6e652f172653867d8a9fce5930463fb7fd1832e5", + "a2c492bbce5a99243f65fcba8eb0084e292f7a55", [ null, [ @@ -223621,7 +223727,7 @@ ] ], "ruby-align-002.html": [ - "ec40be5e105b5e1e64802b56b465a5f3286a761b", + "22e43e44018a350874d4e21216b1e833d014b4a7", [ null, [ @@ -223634,7 +223740,7 @@ ] ], "ruby-align-002a.html": [ - "dfb7ae37ed90232164728b0d47e2273a9e794b48", + "21838c989ada5a1fce2c0196bc985a08c6e24070", [ null, [ @@ -223646,6 +223752,19 @@ {} ] ], + "ruby-align-space-around.html": [ + "dfc1b6a894b8aaf5bbb953111036c6ab20e31aa0", + [ + null, + [ + [ + "/css/css-ruby/ruby-align-space-around-ref.html", + "==" + ] + ], + {} + ] + ], "ruby-annotation-pairing-001.html": [ "453ba96ebdc51d4cccc5f3547cc656eac469f8d7", [ @@ -231680,6 +231799,123 @@ {} ] ], + "intrinsic-size-017.html": [ + "d3742a532d207b9644bd3d76ab265180b23ecfa9", + [ + null, + [ + [ + "/css/reference/ref-filled-green-100px-square-only.html", + "==" + ] + ], + {} + ] + ], + "intrinsic-size-018.html": [ + "cbe5d5f10f73d54ce23aa2b620bc30b5cabcee22", + [ + null, + [ + [ + "/css/reference/ref-filled-green-100px-square-only.html", + "==" + ] + ], + {} + ] + ], + "intrinsic-size-019.html": [ + "94ddc3c5781e8aa94184ea0b23efbbd563a87d6a", + [ + null, + [ + [ + "/css/reference/ref-filled-green-100px-square-only.html", + "==" + ] + ], + {} + ] + ], + "intrinsic-size-020.html": [ + "0b8c038571c4afd666cca49d23486466d1a6519e", + [ + null, + [ + [ + "/css/reference/ref-filled-green-100px-square.xht", + "==" + ] + ], + {} + ] + ], + "intrinsic-size-021.html": [ + "b8ea5cd32cacbde71699905ea8575bd5d81ce825", + [ + null, + [ + [ + "/css/reference/ref-filled-green-100px-square.xht", + "==" + ] + ], + {} + ] + ], + "intrinsic-size-022.html": [ + "d03a1d37d5cbab8d5fbc987cdb162680f89da4ba", + [ + null, + [ + [ + "/css/reference/ref-filled-green-100px-square.xht", + "==" + ] + ], + {} + ] + ], + "intrinsic-size-023.html": [ + "65269f06bab5f4b9e683ba56ae5c454b3a8a00b9", + [ + null, + [ + [ + "/css/reference/ref-filled-green-100px-square.xht", + "==" + ] + ], + {} + ] + ], + "intrinsic-size-024.html": [ + "e05724f258fb70cecc8ef1f4f6378a4d57a54590", + [ + null, + [ + [ + "/css/reference/ref-filled-green-100px-square.xht", + "==" + ] + ], + {} + ] + ], + "intrinsic-size-025.html": [ + "cc7aa35724ec80663ddc4019847504eb85c46c3a", + [ + null, + [ + [ + "/css/reference/ref-filled-green-100px-square.xht", + "==" + ] + ], + {} + ] + ], "percentage-resolution-001.html": [ "d606bfc65e340f95fbbc355b764a7de5e7aeb6a1", [ @@ -252408,7 +252644,7 @@ ] ], "trailing-space-and-text-alignment-002.html": [ - "6ee7d03d9d5e1734fd0649605c0bb5a67bd931fc", + "27a0fd2b6315f39b87a3959f449597f7c1c54abc", [ null, [ @@ -252428,7 +252664,7 @@ ], [ 0, - 50 + 100 ] ] ] @@ -252450,7 +252686,7 @@ ] ], "trailing-space-and-text-alignment-004.html": [ - "69d74051f7fff67ba9d397e401da45150329f84f", + "756f07133a7be77f096ac091c8d5e431af88a7ca", [ null, [ @@ -252470,7 +252706,7 @@ ], [ 0, - 50 + 100 ] ] ] @@ -252505,7 +252741,7 @@ ] ], "trailing-space-and-text-alignment-rtl-002.html": [ - "3da84ae5123332dd79ec30062a682fbb7cbf1afa", + "bb3649f3f31837c5575a0a3d6ba731332cb3f578", [ null, [ @@ -252525,7 +252761,7 @@ ], [ 0, - 50 + 100 ] ] ] @@ -252547,7 +252783,7 @@ ] ], "trailing-space-and-text-alignment-rtl-004.html": [ - "480969efc0dc7b90af54518b45788e711da7c87f", + "0421942963d82232071ba5ed421e08ec86d8b6fc", [ null, [ @@ -252567,7 +252803,7 @@ ], [ 0, - 50 + 100 ] ] ] @@ -291338,6 +291574,19 @@ {} ] ], + "letter-spacing.html": [ + "5c17e10ebed8c1b81b74235060c385835e1d42a3", + [ + null, + [ + [ + "/css/css-viewport/zoom/reference/letter-spacing-ref.html", + "==" + ] + ], + {} + ] + ], "line-height.html": [ "fa333be32f6abf97911ee62a09555ceb1071d9d6", [ @@ -291363,6 +291612,19 @@ ], {} ] + ], + "svg.html": [ + "826ce5a80a3b9c06b3c14678704daffd3e2faf7b", + [ + null, + [ + [ + "/css/css-viewport/zoom/svg-ref.html", + "==" + ] + ], + {} + ] ] } }, @@ -308976,6 +309238,19 @@ {} ] ], + "filter-region-html-content-viewport.tentative.html": [ + "d248abf9230ed57d2ca4fc8d7f9c1b7d2265ff5d", + [ + null, + [ + [ + "/css/filter-effects/reference/green-100x100.html", + "==" + ] + ], + {} + ] + ], "filter-region-negative-positioned-child-001.html": [ "8f302ab52abe2f1008ca60d46fbc77d8ce35c22a", [ @@ -318441,416 +318716,52 @@ {} ] ], - "2d.layer.global-states.blending.no-shadow.no-transform.html": [ - "91decadfe2d9a05ddef878ecf783d388f4833ff5", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.blending.no-shadow.rotation.html": [ - "d6b28315f214795d62e8160856f8314056e4ca84", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.blending.shadow.no-transform.html": [ - "e0b8e45b51ae70d0d452901152a7a51dbc188292", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.blending.shadow.rotation.html": [ - "f3891369c9437be0078a3fa7956d5302c8da2a43", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.composite.no-shadow.no-transform.html": [ - "195905e16bf775fa9776992218d78588d6d55aee", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.composite.no-shadow.rotation.html": [ - "905fd7637b860cbd3282f39d372b826d688467e3", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.composite.shadow.no-transform.html": [ - "df008cf12e96839fb09dd04bd6bc40f62e58939c", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.composite.shadow.rotation.html": [ - "99e1d95443716cef787739996407b843f6519ec4", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.copy.no-shadow.no-transform.html": [ - "1720f20589fcd676f93f9871d32f6701820672df", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.copy.no-shadow.rotation.html": [ - "87cd91bb120b52d5c6d2081444a5be759f9b5d75", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.copy.shadow.no-transform.html": [ - "e8d01065c1d746407f641fecf5648c96df676145", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.copy.shadow.rotation.html": [ - "5c7fa379f14932e1377fab595f8b1a3302457d6c", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.blending.no-shadow.no-transform.html": [ - "188d5ea98be76d827857285197ccae1494d87db9", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.blending.no-shadow.rotation.html": [ - "849a0c997e6677df4a1b95210c1474956d503de6", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.blending.shadow.no-transform.html": [ - "34ded8fef59b4469ee8e44d703c4d2b16d8af65d", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.blending.shadow.rotation.html": [ - "78407dd4596c2ee01eb78a46ec3bb9e5624cad3d", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.composite.no-shadow.no-transform.html": [ - "e3c36d3c0e63e6acce02f7d8e99d20995781823e", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.composite.no-shadow.rotation.html": [ - "466513864ed57c156340fb79d82337c9222e3e2d", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.composite.shadow.no-transform.html": [ - "bc7cfd314eb746b92b0215df4c0d63c60a883e66", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.composite.shadow.rotation.html": [ - "f304e9c8e8771fca7aec7973e069d7b498158ec2", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.copy.no-shadow.no-transform.html": [ - "ac5c7303a81856c5763f3237d75aeb5e9ddedc04", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.copy.no-shadow.rotation.html": [ - "3158a2fff34ef7327f85ce0c05d2b5bfbba271f4", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.copy.shadow.no-transform.html": [ - "839ab13add854c1c3c033568b2a8a37a4a5acb2b", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.copy.shadow.rotation.html": [ - "7c090165f5903101ba0c4d945f0b9bd1efa3ee69", + "2d.layer.global-states.filter.no-transform.html": [ + "dc55eeb38cf9093d7e6749ffcd56b89d775dbfc1", [ null, [ [ - "/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html", + "/html/canvas/element/layers/2d.layer.global-states.filter.no-transform-expected.html", "==" ] ], {} ] ], - "2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html": [ - "d2b2d806c4b30ef0fa6d141766b7d0f9cbebc589", + "2d.layer.global-states.filter.rotation.html": [ + "49676d458ef38f581b3f3cc03fec160b83bf3826", [ null, [ [ - "/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html", + "/html/canvas/element/layers/2d.layer.global-states.filter.rotation-expected.html", "==" ] ], {} ] ], - "2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html": [ - "afc4ebbd4051dac715b8eb87aa55a22a44e7e967", + "2d.layer.global-states.no-transform.html": [ + "cabbe954cee38864c414099114998c1b559d3d4d", [ null, [ [ - "/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html", + "/html/canvas/element/layers/2d.layer.global-states.no-transform-expected.html", "==" ] ], {} ] ], - "2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html": [ - "93caac12fc978d21d143d37c7836114e45ff2f90", + "2d.layer.global-states.rotation.html": [ + "240a510b844710ecaabe94b08bbc482a977abef1", [ null, [ [ - "/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.no-composite-op.shadow.rotation.html": [ - "6849a2f40dee8360035b77807a1cff41400ca48d", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.no-composite-op.no-shadow.no-transform.html": [ - "f0fd2d19e3bd5ab09b8e5386e28e83f15e31244f", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.no-composite-op.no-shadow.rotation.html": [ - "7ab850023e0da41bb6bfeecfb1640c7b18dda49b", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.no-composite-op.shadow.no-transform.html": [ - "9da1936c5dfbd8bcb03d2683c32ee2ee5d56a70c", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.no-composite-op.shadow.rotation.html": [ - "00ace7c54d8203fb0eff593219fa26ad9886a32e", - [ - null, - [ - [ - "/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html", + "/html/canvas/element/layers/2d.layer.global-states.rotation-expected.html", "==" ] ], @@ -321464,832 +321375,104 @@ {} ] ], - "2d.layer.global-states.blending.no-shadow.no-transform.html": [ - "1f8736e0e4df8d66f58edbc2f5c66fffaee8b67b", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.blending.no-shadow.no-transform.w.html": [ - "2bd46eee66ebb9ce874d8d40b30e2800732521e9", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.blending.no-shadow.rotation.html": [ - "0470777988446c7a131ab8ad1644c7f87d6bd00f", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.blending.no-shadow.rotation.w.html": [ - "4d33b3a638e18cb638e99b056ef08783ee16aa36", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.blending.shadow.no-transform.html": [ - "c6f0239c394f85b6175c8952e901672d8abd6825", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.blending.shadow.no-transform.w.html": [ - "0be246ebfb1cd9e8ca55e991e1bef60524e6a41f", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.blending.shadow.rotation.html": [ - "aac9d86e660f9bd8662d74d3f96a04909bdf3228", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.blending.shadow.rotation.w.html": [ - "86067b72994c14e577a99b9943970f6bdb83921c", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.composite.no-shadow.no-transform.html": [ - "69dc916d7deef1f1c07ef6b590e26e1a6a46482e", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.composite.no-shadow.no-transform.w.html": [ - "aa358b57bcd50c514af6e5259fa543af1a906bd6", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.composite.no-shadow.rotation.html": [ - "d0d08f9835fe9d3876f8fe722fb1bb3609824aa7", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.composite.no-shadow.rotation.w.html": [ - "5e2cd0783dfa93eb4e87dccaba1118ab27fc002e", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.composite.shadow.no-transform.html": [ - "8b79eba1285ba3a9fe23ab4c20748df0ae1ba5ff", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.composite.shadow.no-transform.w.html": [ - "47f2df391f67aa8bfef3cf6707772ea10394097c", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.composite.shadow.rotation.html": [ - "632d390986aee9f63553b4ea1578cf42de92e35a", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.composite.shadow.rotation.w.html": [ - "dde0d8bec03160bd3c7fa49ef13ccf9e363e684b", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.copy.no-shadow.no-transform.html": [ - "70b659f52ba565806c813e3d8c86cccf9666f548", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.copy.no-shadow.no-transform.w.html": [ - "1db7f17a94d65c074b8ecfa41dd191f7f5889980", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.copy.no-shadow.rotation.html": [ - "2151535015b670f35cebc61cd9287350ef3e9bd9", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.copy.no-shadow.rotation.w.html": [ - "9c0cac99b913236a4946bbdf29ceb7221bdc2de5", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.copy.shadow.no-transform.html": [ - "42231fa61eeda807201e913fb9d8edb27f144c6a", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.copy.shadow.no-transform.w.html": [ - "20dc667ef8730ecf3216ea17b713b4a801b764da", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.copy.shadow.rotation.html": [ - "77158a9f962d2f0aa5bad8934a4a5b0676e20070", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.copy.shadow.rotation.w.html": [ - "def6bc51e2054f7189125a23dbcd12e78b5ff239", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.blending.no-shadow.no-transform.html": [ - "8acbfa668fbc62c168d6d9ec43607b51291947c8", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html": [ - "93edfabdf3a28ccdff4c6f5f5977dc84605697ac", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.blending.no-shadow.rotation.html": [ - "0a4a8c65d2f9831e7f40a34496b06944c4d7f312", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.blending.no-shadow.rotation.w.html": [ - "7caaf1edee3eb3c13fe32fe3fefae4d114271237", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.blending.shadow.no-transform.html": [ - "1ee32543245ad91b5629ae502a6dcc598a7c0713", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.blending.shadow.no-transform.w.html": [ - "3ec656c135dcc826b8083ff47aa6218d1cd75387", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.blending.shadow.rotation.html": [ - "62af08d2ac5c45fcc7035f7d395c06d85ca66758", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.blending.shadow.rotation.w.html": [ - "d5693cdcdcc8fd9452c18f68346c70d3353fe123", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.composite.no-shadow.no-transform.html": [ - "17394aa4c84a8302a7512dff6103791f16a2b544", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html": [ - "386ad43b0fe9fb04a707ca11c186c98e52d217b2", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.composite.no-shadow.rotation.html": [ - "576283ea732cfcc476d2db4721d6c11f2b187525", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.composite.no-shadow.rotation.w.html": [ - "6dd39d77e954771783314be9b19d507429dcbca2", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.composite.shadow.no-transform.html": [ - "b574a819d601458af022bba16eb282f4167a1335", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.composite.shadow.no-transform.w.html": [ - "96ee1b027b3d7890a7444b19f596529feeb64f3c", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.composite.shadow.rotation.html": [ - "b7b4312a3591e314f59fa90ceeb0a41f5d152444", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.composite.shadow.rotation.w.html": [ - "1ae9f00a8588b2ded2a3bf5644ca3c5f2812c280", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.copy.no-shadow.no-transform.html": [ - "f08ba940af401dfa88645adcbcf5b329b741e0f4", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html": [ - "75fc90bae67cc47cb5606b5b0ece91e05eed0cd3", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.copy.no-shadow.rotation.html": [ - "3f12cf0c4e4dc0444da574fee29fc56de19263b2", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.copy.no-shadow.rotation.w.html": [ - "0a3ecee6698060758615b01ceae626ce0971ecf7", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.copy.shadow.no-transform.html": [ - "b4996deb6f3b5e7380ca32282e595dfd1095e326", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.copy.shadow.no-transform.w.html": [ - "9c13a367b32606080ea265a82a54002874e69ee4", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.copy.shadow.rotation.html": [ - "eab5f8312bbb31753800958d128562a235bfca77", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.copy.shadow.rotation.w.html": [ - "aebd6cc00d4802fa7dcea4162d85f081f46fa022", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html": [ - "f86b0fd37d73c501c1cdc3b466228b775349b678", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html": [ - "ab0836af94b1f4764ec6a63be2279617ec1ab033", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html": [ - "5854af853cb8c756538ff9af0c48384a5b08b787", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html": [ - "c08f1f9f3c6a5fdd90662506fdb65e71cc70d5b2", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html": [ - "f1dc725b83a509d79c6bb4f522eabbda6d4a8fc8", + "2d.layer.global-states.filter.no-transform.html": [ + "3afded0040552a09621515de9f1ce94789262715", [ null, [ [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html", + "/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-transform-expected.html", "==" ] ], {} ] ], - "2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html": [ - "f191747805364c19d0d2c04e9ab1e92b5f306337", + "2d.layer.global-states.filter.no-transform.w.html": [ + "7b925b2539aeabc0f8b21ea0c5eb97f256bb8bc2", [ null, [ [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html", + "/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-transform-expected.html", "==" ] ], {} ] ], - "2d.layer.global-states.filter.no-composite-op.shadow.rotation.html": [ - "76258b326d6cdcdfbd99b9874e2f2eade7303d5a", + "2d.layer.global-states.filter.rotation.html": [ + "851b24adbd5f5acc8277ef5396be3a57b0c54f70", [ null, [ [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html", + "/html/canvas/offscreen/layers/2d.layer.global-states.filter.rotation-expected.html", "==" ] ], {} ] ], - "2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html": [ - "9a10fb569feb88d1e067b867757855d9f3dc23a8", + "2d.layer.global-states.filter.rotation.w.html": [ + "adb85393eb1e2e866fdef409a5a5f36a3341c8d4", [ null, [ [ - "/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html", + "/html/canvas/offscreen/layers/2d.layer.global-states.filter.rotation-expected.html", "==" ] ], {} ] ], - "2d.layer.global-states.no-composite-op.no-shadow.no-transform.html": [ - "016f78a5d8fb5f3f78cc35f11ac27f892caba2ae", + "2d.layer.global-states.no-transform.html": [ + "d80b669af927b320716deaeb30304eb6290e88cd", [ null, [ [ - "/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html", + "/html/canvas/offscreen/layers/2d.layer.global-states.no-transform-expected.html", "==" ] ], {} ] ], - "2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html": [ - "2a450624f1f20caadda8a135cd7a8daa378969d4", + "2d.layer.global-states.no-transform.w.html": [ + "e9e1f753a3cf350480a2da2e2a37feb5acebde17", [ null, [ [ - "/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html", + "/html/canvas/offscreen/layers/2d.layer.global-states.no-transform-expected.html", "==" ] ], {} ] ], - "2d.layer.global-states.no-composite-op.no-shadow.rotation.html": [ - "12a1e64b4236d037c2cd2c18e3928995581b968e", + "2d.layer.global-states.rotation.html": [ + "30d0ef5aca5893fe1733ba4603208c0c79d7814c", [ null, [ [ - "/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html", + "/html/canvas/offscreen/layers/2d.layer.global-states.rotation-expected.html", "==" ] ], {} ] ], - "2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html": [ - "a0f5f7609906e8a3f6a3182ae0c2130be741c4c7", + "2d.layer.global-states.rotation.w.html": [ + "7f947d8dba2ac3cb3023f608c7963f207fdf6b02", [ null, [ [ - "/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.no-composite-op.shadow.no-transform.html": [ - "99301fde096e3cbe420b13fcb2e3335b9546ef1c", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.no-composite-op.shadow.no-transform.w.html": [ - "46375f290c8c9e13919b725affa785915f6ad6e3", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.no-composite-op.shadow.rotation.html": [ - "280cc1cceb218f2c429f0fffcb321dbad0cb1ee9", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html", - "==" - ] - ], - {} - ] - ], - "2d.layer.global-states.no-composite-op.shadow.rotation.w.html": [ - "3192f79afa7d08b9cc11679cdbf3272256a39483", - [ - null, - [ - [ - "/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html", + "/html/canvas/offscreen/layers/2d.layer.global-states.rotation-expected.html", "==" ] ], @@ -327653,7 +326836,7 @@ ] ], "details-display-type-001.tentative.html": [ - "81641355187ae465a02a775b274f7a7903e5d172", + "3188c1eafda1bbb4e43a5c048bc9d33647b6e444", [ null, [ @@ -327666,7 +326849,7 @@ ] ], "details-display-type-002.tentative.html": [ - "716221f7c5c6f83f4b341e4affce90c2622cc40f", + "6426e1c524f0b12b88330678263951af1b1e42d7", [ null, [ @@ -327679,7 +326862,7 @@ ] ], "details-pseudo-elements-001.tentative.html": [ - "1a9f7d6a023832c1b106d67579bfbbec34a5c4f2", + "8ea3d0f85af933b6202f15ee00b9fdac451ab0c9", [ null, [ @@ -327692,7 +326875,7 @@ ] ], "details-pseudo-elements-002.tentative.html": [ - "e149395665171e1ba7068422857f11d75c54f566", + "0f1176a3316bb08f9a49c63544d4ae090d878e40", [ null, [ @@ -327704,6 +326887,19 @@ {} ] ], + "details-pseudo-elements-003.tentative.html": [ + "ee5b42f13ac166f65ee2884722ab76cf0e2a1ba1", + [ + null, + [ + [ + "/html/rendering/the-details-element/details-pseudo-elements-003-ref.html", + "==" + ] + ], + {} + ] + ], "details-revert.html": [ "760cc8281e820d2ef256eb22d88d7aa8f090b821", [ @@ -328120,6 +327316,19 @@ {} ] ], + "input-number-text-size.tentative.html": [ + "e7b1a1990dcd4f6af2efad70705b7523460c15db", + [ + null, + [ + [ + "/html/rendering/widgets/input-number-text-size-ref.html", + "==" + ] + ], + {} + ] + ], "input-password-background-suppresses-appearance.html": [ "3c85b100a1dc74e94d0a7f7e187da951d7476209", [ @@ -329028,6 +328237,34 @@ } }, "forms": { + "the-datalist-element": { + "input-text-datalist-appearance.html": [ + "c1663de2f2f181305f5d988f1e36a0f54ea4b4c6", + [ + null, + [ + [ + "/html/semantics/forms/the-datalist-element/input-text-focused-ref.html", + "!=" + ] + ], + {} + ] + ], + "input-text-datalist-removal.html": [ + "c85bd288ed519eccfd97f4b07eacb8d2217b5451", + [ + null, + [ + [ + "/html/semantics/forms/the-datalist-element/input-text-focused-ref.html", + "==" + ] + ], + {} + ] + ] + }, "the-input-element": { "auto-direction-dynamic.html": [ "68ea51185c07833a8cd197f35cbcd6c5ee9c184a", @@ -329351,97 +328588,6 @@ ] ], "stylable-select": { - "native-popup-with-datalist.tentative.html": [ - "3ec54fa6526f930b30e9e08b1553902d502b58cc", - [ - null, - [ - [ - "/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist-ref.html", - "==" - ] - ], - {} - ] - ], - "select-appearance-custom-button-no-datalist.tentative.html": [ - "aaceabcf051be57d4fc657474f9a1844edc0f5d4", - [ - null, - [ - [ - "/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist-ref.html", - "==" - ] - ], - {} - ] - ], - "select-appearance-dark-mode.tentative.html": [ - "a121b0b864b7b0aed0426f15fda1f9e4de58fa64", - [ - null, - [ - [ - "/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode-ref.html", - "==" - ] - ], - {} - ] - ], - "select-appearance-no-button-custom-datalist.tentative.html": [ - "cc8a4c60bd76fa1e936a1788e5dec11d6d5b252b", - [ - null, - [ - [ - "/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html", - "==" - ] - ], - {} - ] - ], - "select-appearance-no-button-no-datalist.tentative.html": [ - "29261b7f2556be9341323e37a86cb27e7f417545", - [ - null, - [ - [ - "/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html", - "==" - ] - ], - {} - ] - ], - "select-appearance-writing-mode-vertical-lr.tentative.html": [ - "2f8a6aa886ee76021dbaea98da47f2cf05e2ff56", - [ - null, - [ - [ - "/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html", - "==" - ] - ], - {} - ] - ], - "select-appearance-writing-mode-vertical-rl.tentative.html": [ - "c2ea647be95a58c305444f67b9a211309fd18b6a", - [ - null, - [ - [ - "/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html", - "==" - ] - ], - {} - ] - ], "select-child-button-and-datalist-invalidation.tentative.html": [ "822a63e1045879d7293b4a48469f2cf06e1b4aec", [ @@ -329627,35 +328773,6 @@ {} ] ], - "selectlist-option-arbitrary-content-displayed.tentative.html": [ - "8c620baccad8ef750589b8d7687dd3aa458a1cf4", - [ - null, - [ - [ - "/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed-ref.tentative.html", - "==" - ] - ], - { - "fuzzy": [ - [ - null, - [ - [ - 0, - 1 - ], - [ - 0, - 200 - ] - ] - ] - ] - } - ] - ], "selectlist-option-arbitrary-content-not-displayed.tentative.html": [ "e7cacdba2711e2f4e3d187704abc43e2adcbd8ea", [ @@ -339461,7 +338578,7 @@ ] ], "marker-007.svg": [ - "c7812203787a02db8f8e8ae005b4be54605dbf7e", + "e7df9945c4873079f94a2545f1f30ccfdf213936", [ null, [ @@ -339470,7 +338587,23 @@ "==" ] ], - {} + { + "fuzzy": [ + [ + null, + [ + [ + 0, + 1 + ], + [ + 0, + 10 + ] + ] + ] + ] + } ] ], "marker-008.svg": [ @@ -339789,6 +338922,19 @@ {} ] ], + "non-scaling-stroke-002.html": [ + "bdb31c286097825c0af01d990a4019d6242bf2c8", + [ + null, + [ + [ + "/svg/painting/reftests/green-100x100.svg", + "==" + ] + ], + {} + ] + ], "paint-context-001.svg": [ "7be33cb20fb257496cb1357a5481edecf364bc59", [ @@ -342318,7 +341464,7 @@ ] ], "toggle-animated-iframe-visibility.html": [ - "b5c32f26d8df952e0e5e673af41473e2f8474027", + "df1287d40be632c8de22d9eeae592eabee47a5a3", [ null, [ @@ -342333,8 +341479,8 @@ null, [ [ - 1, - 1 + 0, + 25 ], [ 0, @@ -345779,6 +344925,10 @@ "attribution-reporting": { "debug": { "report-aggregate-attribution": [ + "2f07defd8471d1efc523b5fcb3c6d20cdeb8bce1", + [] + ], + "report-aggregate-debug": [ "9a5de3bdf5791bebff2aa30d6b39b43c16b13680", [] ], @@ -348540,7 +347690,7 @@ [] ], "helpers.js": [ - "054df6b97295a5a54d46a1813b4096c31a52f027", + "7157742e6e5c98746ec73933f4e0d6812eef12fb", [] ], "reporting_origin.py": [ @@ -408392,6 +407542,14 @@ [] ] }, + "text-box-trim-atomic-inline-001-ref.html": [ + "7614329e2e5bd97b0334541b760b0a10138dfef4", + [] + ], + "text-box-trim-block-in-inline-end-001-ref.html": [ + "ef0c90d6644afc9c6b57f5cfdb8adf4e6360d069", + [] + ], "text-box-trim-block-in-inline-start-001-ref.html": [ "dd288036917d9a4a4e85e968b4b7486b0f22a039", [] @@ -408436,6 +407594,10 @@ "84a80e160c7ea0eb105a224bdfe5d8e3a491b954", [] ], + "text-box-trim-line-clamp-001-ref.html": [ + "e8d6ba60b18ef9efc24e11560114f1525aed9a11", + [] + ], "text-box-trim-multicol-001-ref.html": [ "aa81e23a26a4900dde31b1943b2774e0449d7249", [] @@ -411857,6 +411019,18 @@ "9f5550f8f585a04ab48bc26ef834ef09ed85ce00", [] ], + "page-box-008-print-ref.html": [ + "91ed0cec3fac6fea39363a23058951f4408f3daf", + [] + ], + "page-box-009-print-ref.html": [ + "3c034171d3b70e62e0e2aebfff9d419d2cd51451", + [] + ], + "page-box-010-print-ref.html": [ + "e5e9a057dcb6191864a16be34fa9fd2749de66eb", + [] + ], "page-left-right-001-print-ref.html": [ "1eb011bed8a0dde4a65494d54fc2e2bd9a042080", [] @@ -413129,10 +412303,6 @@ "82c5074fd26aa2dc35c9c8fa77dd3bf1099c5f88", [] ], - "first-letter-width-2-ref.html": [ - "67fe00ca79030554f19be7100ccb505dc273e300", - [] - ], "first-letter-width-ref.html": [ "8ebb00b9dcc10f43df0efea20991af653f5cb691", [] @@ -413866,8 +413036,8 @@ "f69f8d9456f04e5af630a4c8327abcee0eabb940", [] ], - "text-wrap-ref.html": [ - "7b814db7e49bb544b153fc4a08a4c1ffeb63f8bb", + "nowrap-ref.html": [ + "c3bf6b9b383e786123f44436a957bd80a149d7c3", [] ] }, @@ -413914,11 +413084,15 @@ [] ], "ruby-align-001-ref.html": [ - "eb368b3ae6141ecfa12d57c4c1ed06f388b82b53", + "4497858d8057ea463fcd50b84a112009935ff34e", [] ], "ruby-align-002-ref.html": [ - "e4dd3c8bbe80a8cbe81bae39a626509bf87206f0", + "b0d7ec4efe54400c6c6c4d074a3d7ddd73993769", + [] + ], + "ruby-align-space-around-ref.html": [ + "8eec06f10c38aee103a264d5748f28fdccc234b1", [] ], "ruby-autohide-001-ref.html": [ @@ -421226,7 +420400,7 @@ [] ], "WEB_FEATURES.yml": [ - "bb44025b80bbd77cbd32483e2212b1c975426539", + "d58c1119747958ef3fe20766b3a69db1aa6b80e1", [] ], "add-child-in-empty-layer-ref.html": [ @@ -425790,6 +424964,10 @@ "iframe-zoom-ref.html": [ "43bc3e24cf832079f56772747f4b493c121a7c59", [] + ], + "letter-spacing-ref.html": [ + "7d050672c4eae54a27f888957173eb62f4a451ec", + [] ] }, "relative-units-from-parent-ref.html": [ @@ -425809,7 +424987,11 @@ "e7de64aafb769e106885ea2b4e01fb75331c3e68", [] ] - } + }, + "svg-ref.html": [ + "10bf2decaa74ae0108c86d5b97ad0480f85bf307", + [] + ] } }, "css-will-change": { @@ -433904,7 +433086,7 @@ [] ], "event-timing-test-utils.js": [ - "7b281a4e0e45afa72b41781f06f71aba79be7999", + "a10f1c20c355360dafee0fccd08ceff34334f394", [] ], "slow-image.py": [ @@ -434412,11 +433594,11 @@ [] ], "automatic-beacon-helper.js": [ - "8286c94fec1f03bba8a4616b04541a1015d2144f", + "36c10c904edf84098755b4fc5d95eac0ab194aa4", [] ], "automatic-beacon-unfenced-page.html": [ - "7f17c1a9042442f8a24156718922887af4df5be2", + "c9561bec5505916107257c20019b22f0fe84fd99", [] ], "background-fetch-inner.https.html": [ @@ -434468,7 +433650,7 @@ [] ], "beacon-store.py": [ - "4c89687f4a806f492423234039f1a0f33d7f2ce1", + "e4a4048de93e9d598c7be4e8684c546960312519", [] ], "before-unload-inner.html": [ @@ -435132,7 +434314,7 @@ [] ], "utils.js": [ - "49148025187b1b57e714661e34801b8be1259461", + "218ac281f65242565bde58fee0ee8e2998e7e444", [] ], "web-bluetooth-inner.html": [ @@ -436026,9 +435208,33 @@ [] ], "README.md": [ - "661e2b918438fabcdee9e160f79ba8dddb2877d4", + "d70ad217b1c6f3f5eb315e1ab4ac83939f47b7d5", [] ], + "permissions-policy": { + "README.md": [ + "a0a724a25e04da5f2e0e4aef74752c8a0732fcb0", + [] + ], + "deferred-fetch-allowed-by-permissions-policy.tentative.https.window.js.headers": [ + "cd356bd1a39146374ee372062e4ebb73c7826aa9", + [] + ], + "deferred-fetch-disabled-by-permissions-policy.tentative.https.window.js.headers": [ + "9c2b593ec80d3b3578242e7f5f052c53b5636717", + [] + ], + "resources": { + "helper.js": [ + "5cbb183acf1d7e295ff84d17706c681c634e9b2e", + [] + ], + "permissions-policy-deferred-fetch.html": [ + "f5ce3178db4b163205a8d442bc851d0f6c40921a", + [] + ] + } + }, "resources": { "fetch-later-helper.js": [ "566b3e0a1a4d0d57f857f5972fc99f2bb57e742b", @@ -440195,6 +439401,14 @@ "6f44d8a83ecade23c4b02707c56981d25ed62811", [] ], + "close_noopener_beforeunload-1.html": [ + "fc114bc443e500819487efc92f9e1042c2dcfa60", + [] + ], + "close_noopener_beforeunload-2.html": [ + "4cce1e2e6f7dd058ed0129abb2a14e5f879aa340", + [] + ], "close_pagehide-1.html": [ "5631b539a6af1ffee4f77b265b03eed3255f364f", [] @@ -441455,132 +440669,20 @@ "88057fc354a4e593191a4b3d5c94cdfa7d466126", [] ], - "2d.layer.global-states.blending.no-shadow.no-transform-expected.html": [ - "c56f13f2fd5bcb96d53de3332a1a45d02663be2f", - [] - ], - "2d.layer.global-states.blending.no-shadow.rotation-expected.html": [ - "e5f8ba0db43330bcf6c42a354c978b5930ee1e84", + "2d.layer.global-states.filter.no-transform-expected.html": [ + "c57e256847846ac136679ad6455ed6b3b8f566a3", [] ], - "2d.layer.global-states.blending.shadow.no-transform-expected.html": [ - "debbd430c434a0fe0a8ffd1c0a481e7e33067474", + "2d.layer.global-states.filter.rotation-expected.html": [ + "650a40bb80c1409b6b8f6effaa10ad7baf8d45f2", [] ], - "2d.layer.global-states.blending.shadow.rotation-expected.html": [ - "75a55e591b6d12ae8a672549af8ceba8712aa7c7", + "2d.layer.global-states.no-transform-expected.html": [ + "ad6f64043f6a175b105db4313d46c64d18f417eb", [] ], - "2d.layer.global-states.composite.no-shadow.no-transform-expected.html": [ - "cf875595821fdbec74112916279efad539805d11", - [] - ], - "2d.layer.global-states.composite.no-shadow.rotation-expected.html": [ - "2f9bb208fb02f8b706b69dd8bd9417e9885d533a", - [] - ], - "2d.layer.global-states.composite.shadow.no-transform-expected.html": [ - "2b4436806a4435a358dfd4173aba2e43ae393061", - [] - ], - "2d.layer.global-states.composite.shadow.rotation-expected.html": [ - "da144975a57d2563394c7b6cedc1d998f8fb5ef1", - [] - ], - "2d.layer.global-states.copy.no-shadow.no-transform-expected.html": [ - "489d4322823e96b1f205e3088b7b4939c3757c39", - [] - ], - "2d.layer.global-states.copy.no-shadow.rotation-expected.html": [ - "63913ffb0571c916d0c3927ba3265583486bfe2c", - [] - ], - "2d.layer.global-states.copy.shadow.no-transform-expected.html": [ - "021581f8925dcfbca0e02d83a58c6ac1ff2c7ea3", - [] - ], - "2d.layer.global-states.copy.shadow.rotation-expected.html": [ - "dd9a5c2a00141ad61a1e53e56b012cc99ae0316f", - [] - ], - "2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html": [ - "482ab25a8552ea83f004e35de28c5ac2a1532a4a", - [] - ], - "2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html": [ - "3af6b863edde3d476287c20b02b88f542d7169cc", - [] - ], - "2d.layer.global-states.filter.blending.shadow.no-transform-expected.html": [ - "d530ef9d19024a4c939c5eed778f8e1bc5e24cba", - [] - ], - "2d.layer.global-states.filter.blending.shadow.rotation-expected.html": [ - "80705c36fdb5269f689e2c1877088fdc2b0a17e3", - [] - ], - "2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html": [ - "2f513bff0a646c3477e01c4c7c1b2195d8626290", - [] - ], - "2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html": [ - "242973300fba5fab0371786fc77bba416e59a87c", - [] - ], - "2d.layer.global-states.filter.composite.shadow.no-transform-expected.html": [ - "c8926e5e15dea3f236a263d4bf64a182374d685f", - [] - ], - "2d.layer.global-states.filter.composite.shadow.rotation-expected.html": [ - "e70fe3e92d87c705328eff2cc4949599b093ed40", - [] - ], - "2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html": [ - "21aa241aca8b82feeba45f72b73c1fded973744c", - [] - ], - "2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html": [ - "b2b46ee039cb85c2eba622b7d7e6c320b436b139", - [] - ], - "2d.layer.global-states.filter.copy.shadow.no-transform-expected.html": [ - "d11326d5d68dbde8aa28ed07f5093bbd9c414d71", - [] - ], - "2d.layer.global-states.filter.copy.shadow.rotation-expected.html": [ - "3ac098c344877d9e50c94810a1141f89bdd67e2d", - [] - ], - "2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html": [ - "a445ae2c4a4b0c21c500ee6ab0ad7e470d479ef6", - [] - ], - "2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html": [ - "610c601b1cbd705081b161721b36197a98c951b3", - [] - ], - "2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html": [ - "6bd4501584ad5be0e2e263a0f6e573cbf4b17d60", - [] - ], - "2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html": [ - "b60a5526d9da815f175b46d27327b39de975c1ce", - [] - ], - "2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html": [ - "d1a799707f5bf255b4d30f4f351b729ab897ed5e", - [] - ], - "2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html": [ - "cc91a67faf88245951d468dedc08023e9c3fd1c2", - [] - ], - "2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html": [ - "02b239116c06d644b0b5e08519d94313a441bfa1", - [] - ], - "2d.layer.global-states.no-composite-op.shadow.rotation-expected.html": [ - "06f6a2dff3ec1533b419a8d1819a9fdf32fc1aa4", + "2d.layer.global-states.rotation-expected.html": [ + "376504488c392ea6f58f415da8f03faafafb41f2", [] ], "2d.layer.globalCompositeOperation-expected.html": [ @@ -442635,132 +441737,20 @@ "88057fc354a4e593191a4b3d5c94cdfa7d466126", [] ], - "2d.layer.global-states.blending.no-shadow.no-transform-expected.html": [ - "c56f13f2fd5bcb96d53de3332a1a45d02663be2f", + "2d.layer.global-states.filter.no-transform-expected.html": [ + "c57e256847846ac136679ad6455ed6b3b8f566a3", [] ], - "2d.layer.global-states.blending.no-shadow.rotation-expected.html": [ - "e5f8ba0db43330bcf6c42a354c978b5930ee1e84", + "2d.layer.global-states.filter.rotation-expected.html": [ + "650a40bb80c1409b6b8f6effaa10ad7baf8d45f2", [] ], - "2d.layer.global-states.blending.shadow.no-transform-expected.html": [ - "debbd430c434a0fe0a8ffd1c0a481e7e33067474", + "2d.layer.global-states.no-transform-expected.html": [ + "ad6f64043f6a175b105db4313d46c64d18f417eb", [] ], - "2d.layer.global-states.blending.shadow.rotation-expected.html": [ - "75a55e591b6d12ae8a672549af8ceba8712aa7c7", - [] - ], - "2d.layer.global-states.composite.no-shadow.no-transform-expected.html": [ - "cf875595821fdbec74112916279efad539805d11", - [] - ], - "2d.layer.global-states.composite.no-shadow.rotation-expected.html": [ - "2f9bb208fb02f8b706b69dd8bd9417e9885d533a", - [] - ], - "2d.layer.global-states.composite.shadow.no-transform-expected.html": [ - "2b4436806a4435a358dfd4173aba2e43ae393061", - [] - ], - "2d.layer.global-states.composite.shadow.rotation-expected.html": [ - "da144975a57d2563394c7b6cedc1d998f8fb5ef1", - [] - ], - "2d.layer.global-states.copy.no-shadow.no-transform-expected.html": [ - "489d4322823e96b1f205e3088b7b4939c3757c39", - [] - ], - "2d.layer.global-states.copy.no-shadow.rotation-expected.html": [ - "63913ffb0571c916d0c3927ba3265583486bfe2c", - [] - ], - "2d.layer.global-states.copy.shadow.no-transform-expected.html": [ - "021581f8925dcfbca0e02d83a58c6ac1ff2c7ea3", - [] - ], - "2d.layer.global-states.copy.shadow.rotation-expected.html": [ - "dd9a5c2a00141ad61a1e53e56b012cc99ae0316f", - [] - ], - "2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html": [ - "482ab25a8552ea83f004e35de28c5ac2a1532a4a", - [] - ], - "2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html": [ - "3af6b863edde3d476287c20b02b88f542d7169cc", - [] - ], - "2d.layer.global-states.filter.blending.shadow.no-transform-expected.html": [ - "d530ef9d19024a4c939c5eed778f8e1bc5e24cba", - [] - ], - "2d.layer.global-states.filter.blending.shadow.rotation-expected.html": [ - "80705c36fdb5269f689e2c1877088fdc2b0a17e3", - [] - ], - "2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html": [ - "2f513bff0a646c3477e01c4c7c1b2195d8626290", - [] - ], - "2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html": [ - "242973300fba5fab0371786fc77bba416e59a87c", - [] - ], - "2d.layer.global-states.filter.composite.shadow.no-transform-expected.html": [ - "c8926e5e15dea3f236a263d4bf64a182374d685f", - [] - ], - "2d.layer.global-states.filter.composite.shadow.rotation-expected.html": [ - "e70fe3e92d87c705328eff2cc4949599b093ed40", - [] - ], - "2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html": [ - "21aa241aca8b82feeba45f72b73c1fded973744c", - [] - ], - "2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html": [ - "b2b46ee039cb85c2eba622b7d7e6c320b436b139", - [] - ], - "2d.layer.global-states.filter.copy.shadow.no-transform-expected.html": [ - "d11326d5d68dbde8aa28ed07f5093bbd9c414d71", - [] - ], - "2d.layer.global-states.filter.copy.shadow.rotation-expected.html": [ - "3ac098c344877d9e50c94810a1141f89bdd67e2d", - [] - ], - "2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html": [ - "a445ae2c4a4b0c21c500ee6ab0ad7e470d479ef6", - [] - ], - "2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html": [ - "610c601b1cbd705081b161721b36197a98c951b3", - [] - ], - "2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html": [ - "6bd4501584ad5be0e2e263a0f6e573cbf4b17d60", - [] - ], - "2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html": [ - "b60a5526d9da815f175b46d27327b39de975c1ce", - [] - ], - "2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html": [ - "d1a799707f5bf255b4d30f4f351b729ab897ed5e", - [] - ], - "2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html": [ - "cc91a67faf88245951d468dedc08023e9c3fd1c2", - [] - ], - "2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html": [ - "02b239116c06d644b0b5e08519d94313a441bfa1", - [] - ], - "2d.layer.global-states.no-composite-op.shadow.rotation-expected.html": [ - "06f6a2dff3ec1533b419a8d1819a9fdf32fc1aa4", + "2d.layer.global-states.rotation-expected.html": [ + "376504488c392ea6f58f415da8f03faafafb41f2", [] ], "2d.layer.globalCompositeOperation-expected.html": [ @@ -443029,7 +442019,7 @@ [] ], "gentestutilsunion.py": [ - "415090a14ab7ad96bbc5352b4180420d72a43b4e", + "2880240799501d0b55c79c91809da8f75a3d702f", [] ], "name2dir-canvas.yaml": [ @@ -443082,7 +442072,7 @@ [] ], "testharness_element_grid.html": [ - "b8f0ffe020082303a0147b76cc85d7e170bc0a64", + "ee2360f72c22dec8b152994c1ad9580cd1bfac57", [] ], "testharness_offscreen.html": [ @@ -443109,7 +442099,7 @@ "yaml": { "element": { "meta.yaml": [ - "12852e200ad7199f25cc11d877fc5a62df2abf75", + "358333d96e0c5a9b26ad65b5fedcb2a3ce604858", [] ], "the-canvas-element.yaml": [ @@ -443119,7 +442109,7 @@ }, "offscreen": { "meta.yaml": [ - "b07898224d2b3c3cc2e038dcf23589c26071df02", + "9c1cfbfd0fc80c0eeed751f7dff3bdff64d0df43", [] ], "the-offscreen-canvas.yaml": [ @@ -443154,11 +442144,11 @@ [] ], "filters.yaml": [ - "9a738a37bdc5ba4ae5101a62747767a11e2d3505", + "f83776e38886273851c735fc9762e226dc5a9dc4", [] ], "layers.yaml": [ - "e71155650b0662d894cc9a665334af794effdf94", + "a915f391ec239578abeb532923e3cc9cbdf78576", [] ], "line-styles.yaml": [ @@ -443190,7 +442180,7 @@ [] ], "the-canvas-state.yaml": [ - "045208615436efec1596a2f14cb62f02fa8e470a", + "230e45f80a5901cae395ed1c4c848556e333073d", [] ], "transformations.yaml": [ @@ -443954,6 +442944,46 @@ } } }, + "document-isolation-policy": { + "README.md": [ + "59f039ed3e0596e02c55673bc1ca97e82311f358", + [] + ], + "isolate-and-require-corp.tentative.https.html.headers": [ + "bcc6f0734d580474a8bd25f25d4662f175cdc39b", + [] + ], + "resources": { + "fetch-and-create-url.html": [ + "6b0f96221dc47c367a53ffac3b07276070f71892", + [] + ], + "nothing-cross-origin-corp.js": [ + "662e9364f99ef5ab103932aabd9c3d5aced0ac38", + [] + ], + "nothing-cross-origin-corp.js.headers": [ + "1b88136c01cbca187f68799b0a54169b34978ac7", + [] + ], + "nothing-no-corp.js": [ + "662e9364f99ef5ab103932aabd9c3d5aced0ac38", + [] + ], + "shared-worker-fetch.js.py": [ + "bf46cd291d4b955c35082e8f611b772d70267253", + [] + ], + "shared-worker.js": [ + "c5f2c3cc2c3b5fe88d59fb86ed112c2fa2964d69", + [] + ], + "worker-support.js": [ + "349b4eb9117b1c397e656435c8c1adf85964baa8", + [] + ] + } + }, "dom": { "WEB_FEATURES.yml": [ "5c9e27d29745ca9046d04c1dea58af2f8b3fd801", @@ -449210,6 +448240,10 @@ "baf242291b5ef22370d99f5ff8c0dd1b06c5842a", [] ], + "details-pseudo-elements-003-ref.html": [ + "e6c55cc141a3f27748df46c0bac2b191c6f61a4c", + [] + ], "details-revert-ref.html": [ "dc46b159012fd80c39b66e94935c210a11826487", [] @@ -449350,6 +448384,10 @@ "5b2ea91fe5fa635c221adc8801605f3b14fb66c7", [] ], + "input-number-text-size-ref.html": [ + "4c9b244990d611686614d409d315d74a0f4bd119", + [] + ], "input-password-background-suppresses-appearance-ref.html": [ "33e0e6ac161007679a51f435951f579ab5dfaf09", [] @@ -450850,6 +449888,12 @@ [] ] }, + "the-datalist-element": { + "input-text-focused-ref.html": [ + "df8ea576069cf84c3a01c996c618103bd9e91323", + [] + ] + }, "the-fieldset-element": { "WEB_FEATURES.yml": [ "912cb47c6d02d3ca01b930da37cd549afb69a5ee", @@ -451024,10 +450068,6 @@ ] }, "stylable-select": { - "native-popup-with-datalist-ref.html": [ - "6540e324b5d935a1f335b4e1d1b1cc36bb90a5fe", - [] - ], "resources": { "stylable-select-styles.css": [ "7f4c8b6c448af5ac01bdf85c906ecd8bc18bff79", @@ -451038,26 +450078,6 @@ [] ] }, - "select-appearance-custom-button-no-datalist-ref.html": [ - "10c966a107ba3f341cc45b43e3160a791abec6b1", - [] - ], - "select-appearance-dark-mode-ref.html": [ - "d4d4da5d48bd316c1747e05a5e17c4eeb44626f3", - [] - ], - "select-appearance-no-button-no-datalist-ref.html": [ - "79f1d662c57a94de57614d15b2aa28a59a7ea33c", - [] - ], - "select-appearance-writing-mode-vertical-lr-ref.html": [ - "9f1976ba04112d0ef6ac09b30cae899d1c43a6ae", - [] - ], - "select-appearance-writing-mode-vertical-rl-ref.html": [ - "3e67e99436f7ae0ded41e40489a5373dd775a764", - [] - ], "select-child-button-and-datalist-ref.html": [ "e99ca4d57a8b2e3ea5f7e208e90a2a710710faf8", [] @@ -451113,10 +450133,6 @@ "dda53db5bf859f4c5e00d578028d02236111b454", [] ], - "selectlist-option-arbitrary-content-displayed-ref.tentative.html": [ - "126bbc5dd76ef260b8003fa568ca78d16d97d0b9", - [] - ], "selectlist-option-arbitrary-content-not-displayed-ref.tentative.html": [ "fa44198fff0a91dcab4ff722858a4f128e2960a1", [] @@ -456284,7 +455300,7 @@ [] ], "virtual_authenticator.html.ini": [ - "b5683f8fa991a1760b40f37d01f082e4b5a49696", + "542c40507bdd8b3364a960188b556a05433173d2", [] ] }, @@ -457579,7 +456595,7 @@ [] ], "webauthn.idl": [ - "cf1a2fbdc48d36ba9d03bb446617eebd624e5e67", + "3d5a453addcb4e4bcfc10e9c7333e621876ff9d3", [] ], "webcodecs-aac-codec-registration.idl": [ @@ -457611,7 +456627,7 @@ [] ], "webcodecs.idl": [ - "c754b2b036cbe9c12415d5c735de7f86212fa5ac", + "690a8ac942eddef6449e828214e1453c8010f5a2", [] ], "webcrypto-secure-curves.idl": [ @@ -458136,7 +457152,7 @@ ] }, "lint.ignore": [ - "df9b2f87ca04cd8dc30ae3d4a9e8a0d4aafe30f1", + "31ce1ab3a96d3e9184dcdafcb8fa211f80bd845d", [] ], "loading": { @@ -458195,11 +457211,11 @@ [] ], "early-hints-helpers.sub.js": [ - "faf6119cf1edd5454aaabd643ffe40d33c589463", + "e41832c8ea507b526f37dd6afbadda621bb0f0d2", [] ], "early-hints-test-loader.h2.py": [ - "bb987209c50f41f260cc7e5d43901c8777ee8779", + "263cd64a622ebc3e9514ba8a50df9751e6ca2c94", [] ], "empty-corp-absent.js": [ @@ -458290,6 +457306,10 @@ "2e90f76af143fce7f05eb77bb71f00e0d880ff88", [] ], + "preload-fetchpriority.html": [ + "38e56a9b67dc855c613a642fdf0e2286a6344a12", + [] + ], "preload-finished-before-final-response.h2.py": [ "d0b12408d9cff01352380cec5727145dbed6dded", [] @@ -461922,7 +460942,7 @@ [] ], "permissions-policy-geolocation.html": [ - "b858a52392b168fd42baf85631b7e18212b9e2e7", + "e32dde3845b415643f3cdd5cc193bbf5e6a02d67", [] ], "permissions-policy-idle-detection-worker.html": [ @@ -465040,7 +464060,7 @@ [] ], "webxr-test.js": [ - "a0713e03cce229277a648c8c853b979849e5288d", + "49938dc3ec1e7609b9bc18e10f10217e6f9c88c3", [] ], "webxr-test.js.headers": [ @@ -467318,6 +466338,26 @@ "b51c4517509470ce5f2940b1ac64242d65885ec2", [] ], + "direct.css": [ + "c812213f5307cd446ed4a38bda7e25d9fb4ab85c", + [] + ], + "direct.html": [ + "e98d70207afaead718c0c358a8aba0bbbc14da5b", + [] + ], + "direct.js": [ + "ed6f0e5f980a69bc14048f29d331c258cb2f995b", + [] + ], + "direct.py": [ + "d30d41b44e27a8426e78ef01724f0ab903a12b7b", + [] + ], + "direct.txt": [ + "f3d9861c137b2ddfdeff1690c544f57328df7447", + [] + ], "echo-content.py": [ "70ae4b60254cf7971cdd92dc2b1e382ef1a6196b", [] @@ -467790,6 +466830,10 @@ "56d196df040f9adb999c944329e6f1569ac876fd", [] ], + "imported-sw.js": [ + "04a894d77f87a432c4a14fc79819f3c7cd63e6d9", + [] + ], "indexeddb-worker.js": [ "9add47683884c04fc22c34337714fd2a356dcac7", [] @@ -468082,6 +467126,24 @@ "4d882c617d8dc6b790a51b82f3edeb65e7f18d22", [] ], + "or-test": { + "direct1.text": [ + "f3d9861c137b2ddfdeff1690c544f57328df7447", + [] + ], + "direct1.text.headers": [ + "156209f9c81ff73b6aaf1a0734ef770ddf0a8e3e", + [] + ], + "direct2.text": [ + "f3d9861c137b2ddfdeff1690c544f57328df7447", + [] + ], + "direct2.text.headers": [ + "156209f9c81ff73b6aaf1a0734ef770ddf0a8e3e", + [] + ] + }, "other.html": [ "b9f3504387722c4583a0904cb7b7f7a4f9706b71", [] @@ -468302,6 +467364,10 @@ "b9c28f51f90a8fc95c687713d945f4a19b127a64", [] ], + "router-rules.js": [ + "fdc1c9e063787053a24be52829862c39bed6a883", + [] + ], "sample-worker-interceptor.js": [ "c06f8dd77b79d4c6c6e8b3a15048a79338d9b42f", [] @@ -468420,6 +467486,14 @@ "a17a9a3a12cefe883a5d4dee4d5a45bef120d050", [] ], + "simple-test-for-condition-main-resource.html": [ + "0c3e3e78707b14dcca98bf1a435a34f402b3dadd", + [] + ], + "simple.csv": [ + "ecbef786e73889df94e3ced833c18a15d3f73fa2", + [] + ], "simple.html": [ "0c3e3e78707b14dcca98bf1a435a34f402b3dadd", [] @@ -468448,6 +467522,26 @@ "fdf1e6cac04e1651f30d960897da8740a40c9138", [] ], + "static-router-helpers.sub.js": [ + "0ab1f1fae1dd234d4e9206a10ea70a13fa10ed99", + [] + ], + "static-router-no-fetch-handler-sw.js": [ + "1ba5fd7d463b7913fd13425bcf977e383c4795cd", + [] + ], + "static-router-race-network-and-fetch-handler-sw.js": [ + "468116eea80bcc65d1ec33fb6492e04d720a2d2f", + [] + ], + "static-router-sw.js": [ + "c0bd683f9182689b1c586f360beb74103939c9d2", + [] + ], + "static-router-sw.sub.js": [ + "04f9c5533a4890ef10f3cd3c1abed94dffcc424f", + [] + ], "subdir": { "blank.html": [ "a3c3a4689a62b45b1e429f6b7a94690e556a1259", @@ -468676,93 +467770,9 @@ "tentative": { "static-router": { "README.md": [ - "5429b61d40e4c65fcdecd9d24d71fa2876a8d353", + "33e508aba2c4d552379e2de831cf1a8018ef0a69", [] - ], - "resources": { - "direct.css": [ - "c812213f5307cd446ed4a38bda7e25d9fb4ab85c", - [] - ], - "direct.html": [ - "e98d70207afaead718c0c358a8aba0bbbc14da5b", - [] - ], - "direct.js": [ - "ed6f0e5f980a69bc14048f29d331c258cb2f995b", - [] - ], - "direct.py": [ - "d30d41b44e27a8426e78ef01724f0ab903a12b7b", - [] - ], - "direct.txt": [ - "f3d9861c137b2ddfdeff1690c544f57328df7447", - [] - ], - "imported-sw.js": [ - "04a894d77f87a432c4a14fc79819f3c7cd63e6d9", - [] - ], - "or-test": { - "direct1.text": [ - "f3d9861c137b2ddfdeff1690c544f57328df7447", - [] - ], - "direct1.text.headers": [ - "156209f9c81ff73b6aaf1a0734ef770ddf0a8e3e", - [] - ], - "direct2.text": [ - "f3d9861c137b2ddfdeff1690c544f57328df7447", - [] - ], - "direct2.text.headers": [ - "156209f9c81ff73b6aaf1a0734ef770ddf0a8e3e", - [] - ] - }, - "router-rules.js": [ - "fdc1c9e063787053a24be52829862c39bed6a883", - [] - ], - "simple-test-for-condition-main-resource.html": [ - "0c3e3e78707b14dcca98bf1a435a34f402b3dadd", - [] - ], - "simple.csv": [ - "ecbef786e73889df94e3ced833c18a15d3f73fa2", - [] - ], - "simple.html": [ - "0c3e3e78707b14dcca98bf1a435a34f402b3dadd", - [] - ], - "static-router-helpers.sub.js": [ - "cf34e98635fb68f9cbc8ccf842f16a71e63e5173", - [] - ], - "static-router-no-fetch-handler-sw.js": [ - "1ba5fd7d463b7913fd13425bcf977e383c4795cd", - [] - ], - "static-router-race-network-and-fetch-handler-sw.js": [ - "468116eea80bcc65d1ec33fb6492e04d720a2d2f", - [] - ], - "static-router-sw.js": [ - "c0bd683f9182689b1c586f360beb74103939c9d2", - [] - ], - "static-router-sw.sub.js": [ - "04f9c5533a4890ef10f3cd3c1abed94dffcc424f", - [] - ], - "test-helpers.sub.js": [ - "64a7f7d24fd2d36dcc914bb321538f576267f010", - [] - ] - } + ] } } } @@ -469107,6 +468117,10 @@ "575e504e64f7dceb46ba68445d8da47f91ac1ea5", [] ], + "cross-origin-worklet-in-sandboxed-frame-inner.https.sub.html": [ + "498fda3078099a1843eca3d7da2fdd96542ec89d", + [] + ], "delete-key.https.html": [ "41595f3ee3868a1e7fa1f866bcc8936de16f5cbd", [] @@ -469626,8 +468640,16 @@ "60ac226f8cd4c8f82f0df9cf641cbe26ac39fed5", [] ], + "hint-test-inputs.js": [ + "258fb8e857361cdbdf731f33a6bee8aa4a8bcb94", + [] + ], "test-inputs.js": [ - "7fd2e52b91228f906604ca68cb61744a1cbf5a33", + "283ebaf596d72fa60d0c3ea9c065abb9e30a1672", + [] + ], + "test-utils.js": [ + "be9290fe50b4a766e8cc8269978dd406d5e44638", [] ] }, @@ -469645,7 +468667,7 @@ [] ], "cookies.py": [ - "3ba9cd9270b2c30b2d7911878338d624ecacc281", + "304f999570b22f432681f93c17db4d06d439ad5b", [] ], "executor.sub.html": [ @@ -469664,6 +468686,10 @@ "d912eff90a5b9cc7f726a2a9c9d5da7eb4103fa6", [] ], + "random_redirect.py": [ + "595096e0cace1237badd1137bbcee414c01e9c15", + [] + ], "ruleset.py": [ "5b6ac87aed5ea1ed41f7e79bf340a4259039e52a", [] @@ -469677,7 +468703,7 @@ [] ], "utils.sub.js": [ - "73624c0c25b5d13f3ae116ed3589c1aea30c89c8", + "0ab3f1ac3419a4ac8653ddef199d82e238b333da", [] ] } @@ -472500,7 +471526,7 @@ [] ], "serve.py": [ - "42d80918024ac3abd10a6d155c3d0b3981763573", + "ee48884137171779ac66cd2a24a28c31fc49d382", [] ], "test_functional.py": [ @@ -482966,7 +481992,7 @@ [] ], "error.py": [ - "bb3bd4d7fca6dd4d0e101d16a5ecf201d0a4090e", + "c77b2e41b3b9bddda3a9dfb6988297de24f69643", [] ], "modules": { @@ -483025,7 +482051,7 @@ [] ], "error.py": [ - "25e4b39ae694f3f252777a726fda0716b67d592f", + "b19693e2d25adfb1078e8db4b53a28ce6e7a545f", [] ], "protocol.py": [ @@ -483462,7 +482488,7 @@ [] ], "executorwebdriver.py": [ - "69013e5e796979133dafd5df08de347320244f43", + "3e221b897981eb32227df1dfe57d6713859c775b", [] ], "executorwktr.py": [ @@ -483474,7 +482500,7 @@ [] ], "protocol.py": [ - "3d588738b6e00510cac4c98982ce897ed22db2fa", + "5ebdeed35995c41f3e6eb56d1d574e7091336ce0", [] ], "pytestrunner": { @@ -487144,7 +486170,7 @@ }, "network": { "__init__.py": [ - "2e6376287b91c27e6a42d19ad33674921d77f760", + "c1b4c1dd54bf0879259a7c1983f6ee9d697016cc", [] ], "add_intercept": { @@ -487261,6 +486287,14 @@ "redirected.html": [ "3732b218cff8de24ec7b313361715285822cfc3e", [] + ], + "serviceworker.html": [ + "c7ca7448d052898462db02e9a58fc5029eb8a777", + [] + ], + "serviceworker.js": [ + "d58241a97edea5fa4f6b05816fa75b0f0aa0e2c1", + [] ] } }, @@ -487861,11 +486895,11 @@ [] ], "fixtures.py": [ - "5ab020ad0087ff19dda62d5ae34fa2867f3f6e2c", + "55256425f391b3959fa342d4b651329b94d48b89", [] ], "fixtures_bidi.py": [ - "c76b369f21c44bc071d8f045a9662aff1173ebd7", + "a9cefd004b14f622fcec8cca8cb2315d138698b9", [] ], "fixtures_http.py": [ @@ -487873,7 +486907,7 @@ [] ], "helpers.py": [ - "678733e951f083d121c9946c72cfea75d090d2b4", + "2b810be8a99a9fe143d90a588816ad0829c99542", [] ], "html": { @@ -488221,7 +487255,7 @@ [] ], "batch_normalization.json": [ - "192985f5f4d7f0f6c2cb4d0303379b676693d2c0", + "f1d445e37244f92aafe01a1d0f2626caf9508f5e", [] ], "cast.json": [ @@ -488245,11 +487279,11 @@ [] ], "conv2d.json": [ - "13e6b17242849b8e760d6b18af85d701a603b317", + "e6e36021333db0bcf1b03f9e266c48fa782b14c3", [] ], "conv_transpose2d.json": [ - "241faf52633abd2bac30c95e1d83d9930b2fe32b", + "d15c4a8461565b530050b4168d95bf1250da142e", [] ], "cos.json": [ @@ -488285,7 +487319,7 @@ [] ], "gather.json": [ - "acd7ad8775e6df514547ed5871d386b42b82c78a", + "a67e708ae20b0e0d0b39fd55685be068ccd162a6", [] ], "gemm.json": [ @@ -488498,7 +487532,7 @@ ] }, "utils.js": [ - "eba8b10182d9b52e47061caf5072889aa0ce49a7", + "3cfcf579a50e4658f7cb0fbe0306fa84cbaea240", [] ], "utils_validation.js": [ @@ -488537,7 +487571,7 @@ [] ], "RTCRtpParameters-helper.js": [ - "dd8ae0cc06d28b29865e61c5365600cbed465f35", + "8a6d7f63529c7d6d78f5d17459c305f99c7bfe21", [] ], "RTCRtpReceiver-jitterBufferTarget-stats-helper.js": [ @@ -488605,7 +487639,7 @@ [] ], "sdp.js": [ - "a7538a671e7c351328afb30bd621bd2dd17ba29a", + "d464ee168ee5d1b6351d60ee60f520c0b2bfb19d", [] ] } @@ -491302,7 +490336,7 @@ [] ], "webxr_test_constants_fake_depth.js": [ - "36890d398ded9915ee502b0d2f1ba2fcb388b60d", + "b350db3a27a11af9169c97068771bda496683fd7", [] ], "webxr_test_constants_fake_world.js": [ @@ -495227,39 +494261,83 @@ {} ] ], - "idbcursor_advance_objectstore.htm": [ - "c9226c5667a61c0d852d0eaaf838a2d5ec1fcc92", - [ - null, - {} - ] - ], - "idbcursor_advance_objectstore2.htm": [ - "3d46f0c6755f5351a84c65a5cd4556a3d57e5fa6", + "idbcursor_advance_objectstore.any.js": [ + "5ce345e8b178221b86c8db5fbb51aa6727a86353", [ - null, - {} - ] - ], - "idbcursor_advance_objectstore3.htm": [ - "c91e4acaab55caa9f50e943b5bcf021f31daa203", + "IndexedDB/idbcursor_advance_objectstore.any.html", + { + "script_metadata": [ + [ + "global", + "window,worker" + ], + [ + "title", + "IDBCursor.advance()" + ], + [ + "script", + "resources/support.js" + ] + ] + } + ], [ - null, - {} - ] - ], - "idbcursor_advance_objectstore4.htm": [ - "766a56daf41c27af9dc793c12aabc0148b0d4e4e", + "IndexedDB/idbcursor_advance_objectstore.any.serviceworker.html", + { + "script_metadata": [ + [ + "global", + "window,worker" + ], + [ + "title", + "IDBCursor.advance()" + ], + [ + "script", + "resources/support.js" + ] + ] + } + ], [ - null, - {} - ] - ], - "idbcursor_advance_objectstore5.htm": [ - "2c6fa640aed149039e559de04c4a1ae14dc4448a", + "IndexedDB/idbcursor_advance_objectstore.any.sharedworker.html", + { + "script_metadata": [ + [ + "global", + "window,worker" + ], + [ + "title", + "IDBCursor.advance()" + ], + [ + "script", + "resources/support.js" + ] + ] + } + ], [ - null, - {} + "IndexedDB/idbcursor_advance_objectstore.any.worker.html", + { + "script_metadata": [ + [ + "global", + "window,worker" + ], + [ + "title", + "IDBCursor.advance()" + ], + [ + "script", + "resources/support.js" + ] + ] + } ] ], "idbcursor_continue_delete_objectstore.htm": [ @@ -507837,6 +506915,26 @@ ] }, "attribution-reporting": { + "aggregatable-debug": { + "simple-source-aggregatable-debug-report.sub.https.html": [ + "9b5d6fcb4e0298a008da8b17822ff8f34dd31ac4", + [ + null, + { + "timeout": "long" + } + ] + ], + "simple-trigger-aggregatable-debug-report.sub.https.html": [ + "4dbf7b39a7b5979468ea83d3293b6fb73c4581f5", + [ + null, + { + "timeout": "long" + } + ] + ] + }, "aggregatable-report-no-contributions.sub.https.html": [ "b42a61b7bd50a2934b0b7f479618d466047146bc", [ @@ -508460,14 +507558,14 @@ }, "badging": { "badge-error.https.html": [ - "3da5cf61e8332a22addccbb4ee664fb03a0c62e0", + "123cd6dc76448643b736ab42da061ed6e6e4031b", [ null, {} ] ], "badge-success.https.html": [ - "6a25962e7b978729c57bea2b563178ec3b434fb1", + "59a1f8c09448281ff44a33cbb48c21ba0b48c032", [ null, {} @@ -508517,7 +507615,7 @@ ] ], "non-fully-active.https.html": [ - "d870e52273c0a310df3c3ab3f97693d7070a6cb7", + "ab6ba2336f19f0afa48c88de5fe03b0a009ff8a2", [ null, {} @@ -532066,7 +531164,7 @@ ] ], "position-try-options-parsing.html": [ - "72bc74111bcc2f8439449da35dc97ca3ef57db95", + "375bef170c191f960bc2e0cfa0f18bca39ae9e87", [ null, {} @@ -534912,6 +534010,13 @@ {} ] ], + "page-break-important.html": [ + "778e579ab72e8996518e9de4494f0fcdd22407ab", + [ + null, + {} + ] + ], "page-break-legacy-shorthands.html": [ "7eaa18f5435e87362e85bc0963c512cdf3904c9a", [ @@ -535715,13 +534820,6 @@ ] ], "parsing": { - "color-computed-color-contrast-function.html": [ - "74be5ced3748dcaa9b86d99938390cd7de122de0", - [ - null, - {} - ] - ], "color-computed-color-function.html": [ "cafa79a1e10b145b4c8836b3057e416e928765df", [ @@ -535792,13 +534890,6 @@ {} ] ], - "color-invalid-color-contrast-function.html": [ - "1ac97926917e49c74a259fcaf9194f527c536472", - [ - null, - {} - ] - ], "color-invalid-color-function.html": [ "e02fb44fcb0aed9dc732c098068554ada5f5a91c", [ @@ -535876,13 +534967,6 @@ {} ] ], - "color-valid-color-contrast-function.html": [ - "bdb8f0f588805797c1589802043d761560f4cdb8", - [ - null, - {} - ] - ], "color-valid-color-function.html": [ "2a7750539ca6e8efbcc6724adf79c11180faef83", [ @@ -535891,7 +534975,7 @@ ] ], "color-valid-color-mix-function.html": [ - "baa6512053fa476a979ac7f995168e70b3854e0f", + "1f7c7728ab5b48d30b02e48fb9f318f9b5c5b8ba", [ null, {} @@ -536357,7 +535441,7 @@ ] ], "container-for-shadow-dom.html": [ - "b136af902e50b2ffc26cb6d9da3cd21b6646968b", + "c3ae9612546bf8d7f64519634e95b83f89fa386c", [ null, {} @@ -536588,7 +535672,7 @@ ] ], "container-units-shadow.html": [ - "0e4172c90ee33460d5999bf04df40e1eb6151594", + "66ae1c976ccd318664a24b7c8981d7d699bdff76", [ null, {} @@ -537043,6 +536127,13 @@ ] ] }, + "container-type-important.html": [ + "e95a50998403a0683403e42d81db46b16c769a03", + [ + null, + {} + ] + ], "content-visibility": { "animation-display-lock.html": [ "279ffd002ed21a90b2525978e9c0b328375b69a1", @@ -545992,6 +545083,13 @@ {} ] ], + "text-box-trim-om-001.html": [ + "da66de0055546ef7e8a71bc115ffd170bc53f061", + [ + null, + {} + ] + ], "text-box-trim-valid.html": [ "61622774f6f33054ad97e74dde0b020619eb1d02", [ @@ -558540,7 +557638,7 @@ ] ], "transform-with-sign-function.html": [ - "b6e179d390b9bf484e64e3c90ac9fd23f0df7891", + "64b30dca17ee4853a467f535a9c90d4438763455", [ null, {} @@ -593056,6 +592154,15 @@ } ] ], + "first-input-interactionid-key.html": [ + "1991fe2cb884aac0de39ceba9e6e9120cfd37c3d", + [ + null, + { + "testdriver": true + } + ] + ], "first-input-interactionid-tap.html": [ "17d9a5e9812b8cfc196a11e0a9fa9246cc3d531f", [ @@ -595090,7 +594197,7 @@ ] ], "automatic-beacon-anchor-click-handler.https.html": [ - "a451c48f73d8599a72e537497537589fbe311ea9", + "7488e2f3004573127b4002ee9574b5d5ae73ebdc", [ null, { @@ -595099,7 +594206,7 @@ ] ], "automatic-beacon-click-handler.https.html": [ - "55f18fd42b6bff1d927eafbf3cc7bdd5ae154a78", + "fa6690c0a92bf2d929cff74de28069586e113039", [ null, { @@ -595108,7 +594215,7 @@ ] ], "automatic-beacon-component-ad.https.html": [ - "fffff548b46948048f66f61b276886cf4a54adea", + "55711c4f08b5332efd1e88a3daa3dae07e46932f", [ null, { @@ -595117,7 +594224,7 @@ ] ], "automatic-beacon-cross-origin-false.https.html": [ - "a3627036fc53f2dd56d487bbb8683381e1f4f303", + "93c937ab2f3f254b632db2499d0cee0a0e1731bd", [ null, { @@ -595135,7 +594242,7 @@ ] ], "automatic-beacon-cross-origin-no-data.https.html": [ - "887a06847f4e11d96596497e01d6dacc00a3540e", + "16b1d0ac26460f0f246c1098f28d313977823b3f", [ null, { @@ -595144,7 +594251,7 @@ ] ], "automatic-beacon-cross-origin-no-opt-in.https.html": [ - "f1817b76dd242a02071a59088ea487daa9ab547c", + "6f1ebee449846e234a6cd8e66508871e30a1bc72", [ null, { @@ -595153,7 +594260,7 @@ ] ], "automatic-beacon-no-destination.https.html": [ - "1779ba657318c0b76fcc91572b17a20a7b709855", + "8456b316bef2bf38d6b3b34a52ccc10c3f2a931e", [ null, { @@ -595162,7 +594269,7 @@ ] ], "automatic-beacon-no-opt-in.https.html": [ - "b6dac31dbdcb5f84f4eb3e6b1ab432433b246f6d", + "cedfff1a944cdb7cf1b885f86b37c5cc84dce088", [ null, { @@ -595171,7 +594278,7 @@ ] ], "automatic-beacon-shared-storage.https.html": [ - "4ee1d0d01bfe4cc2015d5bc690e82f0937d23eec", + "56ca40b9e928cadfe3bece598b7b719036b745e7", [ null, { @@ -595180,7 +594287,7 @@ ] ], "automatic-beacon-two-events-clear.https.html": [ - "ff353981051f7d429d048f1a096a7c57934c5faf", + "3533cf58c00aa98e2cda4c0ff8e708e35cfd1e6e", [ null, { @@ -595189,7 +594296,7 @@ ] ], "automatic-beacon-two-events-persist.https.html": [ - "b9e582e43ecd235582499c08eb7366b47c768a40", + "a0c872d16c8e0d5972986633d8f19badb8dd3f77", [ null, { @@ -595686,14 +594793,14 @@ ] ], "fence-report-event-cross-origin-no-embedder-opt-in.https.html": [ - "954de240d93197a942c7eb755c667dda32f98d3f", + "422224ce2d40a2973f0c3f090997a30a025cf1a4", [ null, {} ] ], "fence-report-event-cross-origin-no-subframe-opt-in.https.html": [ - "ea5d0cdcc25e3f0625ebdeb0026dc0d28bfc9d2d", + "229226d60f29056c61fcd603d27b521347e5b5ba", [ null, {} @@ -595707,14 +594814,14 @@ ] ], "fence-report-event-cross-origin-urn-iframe-no-embedder-opt-in.https.html": [ - "6f6835b3f59ef67439ab8bb841289588a413905d", + "6795af2f42eafa2991b035d657be51d7b3f902ca", [ null, {} ] ], "fence-report-event-cross-origin-urn-iframe-no-subframe-opt-in.https.html": [ - "855ad1f9cd02e05a40b1ac5e4b6f6ad863837b19", + "1a701e250951ed6a3b041bcead9682d663a2b8c3", [ null, {} @@ -595727,8 +594834,8 @@ {} ] ], - "fence-report-event-cross-origin.https.html": [ - "f198ea409f7e45a1e7e9da774c87e83a8383490f", + "fence-report-event-cross-origin.sub.https.html": [ + "a54143cdb1444cba633ed18e677a9b5d805f3462", [ null, {} @@ -595742,7 +594849,7 @@ ] ], "fence-report-event-sub-fencedframe.https.html": [ - "558125d890b822dbf778ca4967bacb8c8db4b07b", + "b3516acf4bd4524e6caa11f9f43a0a97891d8082", [ null, {} @@ -596112,6 +595219,13 @@ } ] ], + "parse-from-string-sandboxed-iframe.https.html": [ + "01eae33ab02c88e0cb9d31561a9c1279a7b2a1b2", + [ + null, + {} + ] + ], "payment-handler.https.html": [ "36e5e50726ea285438a7ce5f965bcc7ad474d820", [ @@ -596227,7 +595341,7 @@ ] ], "report-event.https.html": [ - "c06765b8f9a1a2de4fca68b07b03fa5d6d233ebd", + "af9da69d29c941a594fc713f80254120ce464031", [ null, {} @@ -605912,7 +605026,7 @@ ] }, "iframe.tentative.https.window.js": [ - "305272af4195f160650256da389bb6e7e3392b97", + "4f2610863604f0a235524a80f7988212355e5ab9", [ "fetch/fetch-later/iframe.tentative.https.window.html", { @@ -605962,6 +605076,217 @@ {} ] ], + "permissions-policy": { + "deferred-fetch-allowed-by-permissions-policy-attribute-redirect.tentative.https.window.js": [ + "2f168f06508a4c20a59f96e5a1231084e5e71bf8", + [ + "fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute-redirect.tentative.https.window.html", + { + "script_metadata": [ + [ + "title", + "Permissions Policy \"deferred-fetch\" is allowed to redirect by allow attribute" + ], + [ + "script", + "/permissions-policy/resources/permissions-policy.js" + ], + [ + "script", + "/common/utils.js" + ], + [ + "script", + "/common/get-host-info.sub.js" + ], + [ + "script", + "/fetch/fetch-later/resources/fetch-later-helper.js" + ], + [ + "script", + "/fetch/fetch-later/permissions-policy/resources/helper.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ] + ], + "deferred-fetch-allowed-by-permissions-policy-attribute.tentative.https.window.js": [ + "c881609b4f16b4da439092c45ca3331d36378076", + [ + "fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute.tentative.https.window.html", + { + "script_metadata": [ + [ + "title", + "Permissions Policy \"deferred-fetch\" is allowed by allow attribute" + ], + [ + "script", + "/permissions-policy/resources/permissions-policy.js" + ], + [ + "script", + "/common/utils.js" + ], + [ + "script", + "/common/get-host-info.sub.js" + ], + [ + "script", + "/fetch/fetch-later/resources/fetch-later-helper.js" + ], + [ + "script", + "/fetch/fetch-later/permissions-policy/resources/helper.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ] + ], + "deferred-fetch-allowed-by-permissions-policy.tentative.https.window.js": [ + "b65013d177f10d4fc258e2cde032398964e508c9", + [ + "fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy.tentative.https.window.html", + { + "script_metadata": [ + [ + "title", + "Permissions Policy \"deferred-fetch\" is allowed" + ], + [ + "script", + "/permissions-policy/resources/permissions-policy.js" + ], + [ + "script", + "/common/utils.js" + ], + [ + "script", + "/common/get-host-info.sub.js" + ], + [ + "script", + "/fetch/fetch-later/resources/fetch-later-helper.js" + ], + [ + "script", + "/fetch/fetch-later/permissions-policy/resources/helper.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ] + ], + "deferred-fetch-default-permissions-policy.tentative.https.window.js": [ + "51b7e51844939f154755915cdcba613913c097e0", + [ + "fetch/fetch-later/permissions-policy/deferred-fetch-default-permissions-policy.tentative.https.window.html", + { + "script_metadata": [ + [ + "title", + "Permissions Policy \"deferred-fetch\" default behavior" + ], + [ + "script", + "/permissions-policy/resources/permissions-policy.js" + ], + [ + "script", + "/common/utils.js" + ], + [ + "script", + "/common/get-host-info.sub.js" + ], + [ + "script", + "/fetch/fetch-later/resources/fetch-later-helper.js" + ], + [ + "script", + "/fetch/fetch-later/permissions-policy/resources/helper.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ] + ], + "deferred-fetch-disabled-by-permissions-policy.tentative.https.window.js": [ + "283f703a283bea7d9577e0788eceafb04345f857", + [ + "fetch/fetch-later/permissions-policy/deferred-fetch-disabled-by-permissions-policy.tentative.https.window.html", + { + "script_metadata": [ + [ + "title", + "Permissions Policy \"deferred-fetch\" is disabled" + ], + [ + "script", + "/permissions-policy/resources/permissions-policy.js" + ], + [ + "script", + "/common/utils.js" + ], + [ + "script", + "/common/get-host-info.sub.js" + ], + [ + "script", + "/fetch/fetch-later/resources/fetch-later-helper.js" + ], + [ + "script", + "/fetch/fetch-later/permissions-policy/resources/helper.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ] + ], + "deferred-fetch-supported-by-permissions-policy.tentative.window.js": [ + "e89f1edb8567092bcf6146d772a93789e2dbc9f8", + [ + "fetch/fetch-later/permissions-policy/deferred-fetch-supported-by-permissions-policy.tentative.window.html", + { + "script_metadata": [ + [ + "title", + "The feature list should advertise deferred-fetch" + ] + ] + } + ] + ] + }, "policies": { "csp-allowed.tentative.https.window.js": [ "32a3e106a0c55195473689f3522636b5e3ce6953", @@ -623818,7 +623143,7 @@ ] ], "disabled-by-permissions-policy.https.sub.html": [ - "d3d94e1d3d74ba121ca169e9cb6689382f23f018", + "ec34a4998da7c76437981c42ecc688ef6b5374ac", [ null, { @@ -623910,7 +623235,7 @@ ] ], "non-fully-active.https.html": [ - "13853c0ef860a6d099172c91db960b720760662a", + "7b381be7fff68ecf42425af168c560f51f818842", [ null, { @@ -631870,6 +631195,13 @@ {} ] ], + "close_noopener_beforeunload.html": [ + "6862a70b8c1489a1d6ab8450cc01772d753fbe4d", + [ + null, + {} + ] + ], "close_pagehide.html": [ "4d726437c235d16a03dda3ae277026e0b71298ae", [ @@ -640575,14 +639907,14 @@ ] ], "2d.canvas.host.initial.reset.2dstate.html": [ - "36230dab7735685ef0c4714aff07f42a3edd995e", + "f6aaf9c9bbbcf9105578b8da81694a3aa63b1308", [ null, {} ] ], "2d.canvas.host.initial.reset.2dstate.worker.js": [ - "df0bd9f63cb6e2df735b7d321f16e86c4adbe7b0", + "fe0db573c6df6712640cb26f3a8e425270c8423d", [ "html/canvas/offscreen/canvas-host/2d.canvas.host.initial.reset.2dstate.worker.html", {} @@ -657769,6 +657101,24 @@ } } }, + "document-isolation-policy": { + "isolate-and-require-corp.tentative.https.html": [ + "df4bd47f28e4ea4d0db0fcc141045dd889f07e3a", + [ + null, + { + "timeout": "long" + } + ] + ], + "shared-workers.tentative.https.html": [ + "d0a186f45e7865c9f585112601f934b1861c5471", + [ + null, + {} + ] + ] + }, "dom": { "aria-attribute-reflection.html": [ "d2e5b03f853baa85ee53224953e3995ec3743a80", @@ -662902,7 +662252,7 @@ ] ], "details-blockification.html": [ - "960074854d8a4a2cc3a9c99f56e5d74e930e693b", + "2bd5aaf2e6259b52748776e077d3dfd5dbbf455b", [ null, {} @@ -663015,7 +662365,7 @@ ] ], "input-text-size.html": [ - "4838399405aa93b81e661e437f8fde57de009f9f", + "fa69f9977317b83118cc11845897706cb9bbc834", [ null, {} @@ -680065,7 +679415,7 @@ ] ], "zero.html": [ - "9ff793ae7c6fb6504a64e7f4285b30b68972d0fe", + "28e4f5310b3999bc6abc1486d1900e98d927e1b7", [ null, {} @@ -689263,6 +688613,24 @@ } ] ], + "preload-fetchpriority.h2.window.js": [ + "480e70f1d9f29a6b00798859c584aba8bc6fc923", + [ + "loading/early-hints/preload-fetchpriority.h2.window.html", + { + "script_metadata": [ + [ + "script", + "/common/utils.js" + ], + [ + "script", + "resources/early-hints-helpers.sub.js" + ] + ] + } + ] + ], "preload-finished-before-final-response.h2.window.js": [ "c63239be1f59426b35760c26ef47453c9248c59b", [ @@ -693861,7 +693229,7 @@ ] ], "mediametadata.html": [ - "d73a43125160ecd1f6a45ac094490bfb4fc13a8f", + "8dcf7dc25c6fa460c94d7c91387e826d7464d980", [ null, {} @@ -699222,6 +698590,28 @@ {} ] ], + "registration-association.https.window.js": [ + "61be5f62cd7b565ff8659cfe672df3e380763f44", + [ + "notifications/registration-association.https.window.html", + { + "script_metadata": [ + [ + "script", + "/resources/testdriver.js" + ], + [ + "script", + "/resources/testdriver-vendor.js" + ], + [ + "script", + "resources/helpers.js" + ] + ] + } + ] + ], "shownotification-window.https.html": [ "b21a5621df75d540379fe24d82734de521b0f82a", [ @@ -726972,6 +726362,76 @@ {} ] ], + "static-router-fetch-event.https.html": [ + "167e3af00909ec26d41ac89eac989e7ffbd824ee", + [ + null, + {} + ] + ], + "static-router-invalid-rules.https.html": [ + "15b8ef5742d7d901e46110f9898e8f3374a2e261", + [ + null, + {} + ] + ], + "static-router-main-resource.https.html": [ + "71bc0697f9c08c84873a2e651d748dc01000b870", + [ + null, + {} + ] + ], + "static-router-multiple-router-registrations.https.html": [ + "dd7ff1e4e9ddd36227605e497246299f91b07f12", + [ + null, + {} + ] + ], + "static-router-mutiple-conditions.https.html": [ + "3d69411843c2b74b73e7a30fd45f320a995b82eb", + [ + null, + {} + ] + ], + "static-router-no-fetch-handler.https.html": [ + "e98dd08a90ad610744d83fbe8c4e6d72c901b77c", + [ + null, + {} + ] + ], + "static-router-race-network-and-fetch-handler.https.html": [ + "0dad64ad9923435c3f68662e436559c05f89787d", + [ + null, + {} + ] + ], + "static-router-request-destination.https.html": [ + "55ad6da31aad1058d9707bd63867142a80a9743c", + [ + null, + {} + ] + ], + "static-router-request-method.https.html": [ + "8e219532a3e653ce88ed083079f44b41a91fa08d", + [ + null, + {} + ] + ], + "static-router-subresource.https.html": [ + "ab05a3d25282473d5425d9086ef76a132fa2c5da", + [ + null, + {} + ] + ], "synced-state.https.html": [ "0e9f63a9a2e528e7ffb8f9913edffc8e0294ad98", [ @@ -726981,78 +726441,8 @@ ], "tentative": { "static-router": { - "static-router-fetch-event.https.html": [ - "167e3af00909ec26d41ac89eac989e7ffbd824ee", - [ - null, - {} - ] - ], - "static-router-invalid-rules.https.html": [ - "15b8ef5742d7d901e46110f9898e8f3374a2e261", - [ - null, - {} - ] - ], - "static-router-main-resource.https.html": [ - "71bc0697f9c08c84873a2e651d748dc01000b870", - [ - null, - {} - ] - ], - "static-router-multiple-router-registrations.https.html": [ - "dd7ff1e4e9ddd36227605e497246299f91b07f12", - [ - null, - {} - ] - ], - "static-router-mutiple-conditions.https.html": [ - "3d69411843c2b74b73e7a30fd45f320a995b82eb", - [ - null, - {} - ] - ], - "static-router-no-fetch-handler.https.html": [ - "e98dd08a90ad610744d83fbe8c4e6d72c901b77c", - [ - null, - {} - ] - ], - "static-router-race-network-and-fetch-handler.https.html": [ - "0dad64ad9923435c3f68662e436559c05f89787d", - [ - null, - {} - ] - ], - "static-router-request-destination.https.html": [ - "55ad6da31aad1058d9707bd63867142a80a9743c", - [ - null, - {} - ] - ], - "static-router-request-method.https.html": [ - "8e219532a3e653ce88ed083079f44b41a91fa08d", - [ - null, - {} - ] - ], "static-router-resource-timing.https.html": [ - "e99c2d3d0b3996cbd7074cea08f9500a0971e0bf", - [ - null, - {} - ] - ], - "static-router-subresource.https.html": [ - "ab05a3d25282473d5425d9086ef76a132fa2c5da", + "c85c5ea3b9adfd618cea8f38a71c5daec9791b0e", [ null, {} @@ -729152,6 +728542,13 @@ {} ] ], + "cross-origin-worklet-in-sandboxed-frame.tentative.https.sub.html": [ + "f44a356bf83c842ac0c665b0e4e39159538eda7d", + [ + null, + {} + ] + ], "cross-origin-worklet-select-url-and-verify-data-origin.tentative.https.sub.html": [ "5b6b9d5f8f5b5e04f89a651eb88e344dae8e957b", [ @@ -729323,7 +728720,7 @@ ] ], "shared-storage-in-sandboxed-iframe.tentative.https.html": [ - "662d0ff63441bdb741fb9110152deaea7d08c515", + "537f2e99d3850ad51318b9654e67fe579076a882", [ null, {} @@ -730455,6 +729852,51 @@ {} ] ], + "cookie-indices.https.html": [ + "f5fac65822ed7433ffd803ddf74ed91e4b69a4bb", + [ + "speculation-rules/prefetch/cookie-indices.https.html?include=changed", + { + "testdriver": true, + "timeout": "long" + } + ], + [ + "speculation-rules/prefetch/cookie-indices.https.html?include=changedWithRedirect", + { + "testdriver": true, + "timeout": "long" + } + ], + [ + "speculation-rules/prefetch/cookie-indices.https.html?include=changedWithRedirect2", + { + "testdriver": true, + "timeout": "long" + } + ], + [ + "speculation-rules/prefetch/cookie-indices.https.html?include=changedWithRedirect3", + { + "testdriver": true, + "timeout": "long" + } + ], + [ + "speculation-rules/prefetch/cookie-indices.https.html?include=unchanged", + { + "testdriver": true, + "timeout": "long" + } + ], + [ + "speculation-rules/prefetch/cookie-indices.https.html?include=unchangedWithRedirect", + { + "testdriver": true, + "timeout": "long" + } + ] + ], "cross-origin-cookies.https.html": [ "a16872fcef9c1b836b6b24a380bd12f068d55209", [ @@ -730713,7 +730155,7 @@ ], "no-vary-search": { "prefetch-single-with-hint.https.html": [ - "1cbd7e8e717b30a8b6ad9e1248f23f1835c1831e", + "f2d8b3090e1f8447f86bd62a6f24ca9daae06ec7", [ "speculation-rules/prefetch/no-vary-search/prefetch-single-with-hint.https.html?1-1", {} @@ -730828,7 +730270,7 @@ ] ], "prefetch-single.https.html": [ - "9cf136db26aa9c74b1e4933ca79c6de12764db25", + "bea186759a0402d5e09ad4551a366e993cbafb7a", [ "speculation-rules/prefetch/no-vary-search/prefetch-single.https.html?1-1", {} @@ -731494,8 +730936,179 @@ } ] ], + "no-vary-search-hint.https.html": [ + "3ac2757e665bdbd0ad3adb49dcbdb7a0aa5fcb94", + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?1-1", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?10-10", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?11-11", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?12-12", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?13-13", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?14-14", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?15-15", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?16-16", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?17-17", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?18-18", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?19-19", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?2-2", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?20-20", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?21-21", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?22-22", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?23-23", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?24-24", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?25-25", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?26-26", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?27-27", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?28-last", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?3-3", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?4-4", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?5-5", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?6-6", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?7-7", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?8-8", + { + "timeout": "long" + } + ], + [ + "speculation-rules/prerender/no-vary-search-hint.https.html?9-9", + { + "timeout": "long" + } + ] + ], "no-vary-search.https.html": [ - "61d0d52b5fa23d06da19165ec7ca4345dde2bdc4", + "dc47ff7ca2123bd609e5814c3a5e80b171b54080", [ "speculation-rules/prerender/no-vary-search.https.html?1-1", { @@ -734379,7 +733992,7 @@ ], "piping": { "abort.any.js": [ - "c9929df91cf68816a6a3381249616b4c38085dc5", + "e813b017769c6805f7682d150f202107ceb6b438", [ "streams/piping/abort.any.html", { @@ -736480,7 +736093,7 @@ ] ], "cancel.any.js": [ - "9915c1fb6330c1f2a8143fb956abc9bec5504f3d", + "d44222f1497f0acbf9d080b0668f9759c001d716", [ "streams/readable-streams/cancel.any.html", { @@ -746940,7 +746553,7 @@ ] ], "a-element.html": [ - "3429e07ec3f3f7d4cd15af6d2aa883e44ba78ac0", + "3428fa00574c4d4a5c48a8ceecd0567c5c011da1", [ "url/a-element.html?exclude=(file|javascript|mailto)", {} @@ -762007,12 +761620,16 @@ ] ], "temporal-svc-encoding.https.any.js": [ - "7cf7225e5dbda4b56ae0a33bc99b85acddc155d2", + "4d5da00cfe99ac4519f92bf53fc0c94309c44a49", [ "webcodecs/temporal-svc-encoding.https.any.html?av1", { "script_metadata": [ [ + "timeout", + "long" + ], + [ "global", "window,dedicatedworker" ], @@ -762036,7 +761653,8 @@ "variant", "?h264" ] - ] + ], + "timeout": "long" } ], [ @@ -762044,6 +761662,10 @@ { "script_metadata": [ [ + "timeout", + "long" + ], + [ "global", "window,dedicatedworker" ], @@ -762067,7 +761689,8 @@ "variant", "?h264" ] - ] + ], + "timeout": "long" } ], [ @@ -762075,6 +761698,10 @@ { "script_metadata": [ [ + "timeout", + "long" + ], + [ "global", "window,dedicatedworker" ], @@ -762098,7 +761725,8 @@ "variant", "?h264" ] - ] + ], + "timeout": "long" } ], [ @@ -762106,6 +761734,10 @@ { "script_metadata": [ [ + "timeout", + "long" + ], + [ "global", "window,dedicatedworker" ], @@ -762129,7 +761761,8 @@ "variant", "?h264" ] - ] + ], + "timeout": "long" } ], [ @@ -762137,6 +761770,10 @@ { "script_metadata": [ [ + "timeout", + "long" + ], + [ "global", "window,dedicatedworker" ], @@ -762160,7 +761797,8 @@ "variant", "?h264" ] - ] + ], + "timeout": "long" } ], [ @@ -762168,6 +761806,10 @@ { "script_metadata": [ [ + "timeout", + "long" + ], + [ "global", "window,dedicatedworker" ], @@ -762191,7 +761833,8 @@ "variant", "?h264" ] - ] + ], + "timeout": "long" } ], [ @@ -762199,6 +761842,10 @@ { "script_metadata": [ [ + "timeout", + "long" + ], + [ "global", "window,dedicatedworker" ], @@ -762222,7 +761869,8 @@ "variant", "?h264" ] - ] + ], + "timeout": "long" } ], [ @@ -762230,6 +761878,10 @@ { "script_metadata": [ [ + "timeout", + "long" + ], + [ "global", "window,dedicatedworker" ], @@ -762253,7 +761905,8 @@ "variant", "?h264" ] - ] + ], + "timeout": "long" } ] ], @@ -766059,7 +765712,7 @@ "webnn": { "conformance_tests": { "arg_min_max.https.any.js": [ - "0f9e590fc884d6f7be157a19690cb6874a83c134", + "dd6cd6d9181abe7070e34376b678df6d5204f076", [ "webnn/conformance_tests/arg_min_max.https.any.html?cpu", { @@ -766081,6 +765734,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766113,6 +765770,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/arg_min_max.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API argMin/Max operations" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766145,6 +765842,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766177,6 +765878,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/arg_min_max.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API argMin/Max operations" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766190,7 +765931,7 @@ ] ], "batch_normalization.https.any.js": [ - "d3107820dbcbc8281e0d7b876ef5cac56f8322dd", + "569881f94f6d058da35cfe051c1ab78d81f8b70c", [ "webnn/conformance_tests/batch_normalization.https.any.html?cpu", { @@ -766212,6 +765953,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766244,6 +765989,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/batch_normalization.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API batchNormalization operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766276,6 +766061,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766308,6 +766097,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/batch_normalization.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API batchNormalization operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766321,7 +766150,7 @@ ] ], "buffer.https.any.js": [ - "51804e7224f8d845e8a59183cbb2e55db29707a0", + "9b4c43198b4df239b2bf5af91ec436ee49188314", [ "webnn/conformance_tests/buffer.https.any.html?cpu", { @@ -766343,6 +766172,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766375,6 +766208,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/buffer.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API buffer operations" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766407,6 +766280,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766439,6 +766316,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/buffer.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API buffer operations" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766452,7 +766369,7 @@ ] ], "cast.https.any.js": [ - "086428dd964bd6fcb6142d3aaeeeb0591b7d9476", + "29f197a1aa6c20c053c79874606432cf9a4736d9", [ "webnn/conformance_tests/cast.https.any.html?cpu", { @@ -766474,6 +766391,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766506,6 +766427,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/cast.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API cast operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766538,6 +766499,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766570,6 +766535,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/cast.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API cast operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766583,7 +766588,7 @@ ] ], "clamp.https.any.js": [ - "ab47ac9c5c700bc9acbd8b6a9ad1f307c5bdd784", + "15777271872bc1e53c1845f358b6294e76d1439f", [ "webnn/conformance_tests/clamp.https.any.html?cpu", { @@ -766605,6 +766610,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766637,6 +766646,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/clamp.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API clamp operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766669,6 +766718,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766701,6 +766754,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/clamp.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API clamp operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766714,7 +766807,7 @@ ] ], "compute-arraybufferview-with-bigger-arraybuffer.https.any.js": [ - "96a20f1fe57d26a35f3214fbb2fba2035c8e38a3", + "1380b604dac20d4cb0d12dac197503c4b34dd731", [ "webnn/conformance_tests/compute-arraybufferview-with-bigger-arraybuffer.https.any.html?cpu", { @@ -766736,6 +766829,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ] @@ -766763,6 +766860,41 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ] + ] + } + ], + [ + "webnn/conformance_tests/compute-arraybufferview-with-bigger-arraybuffer.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN MLContext.compute() for ArrayBufferView created from bigger ArrayBuffer" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ] @@ -766790,6 +766922,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ] @@ -766817,6 +766953,41 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ] + ] + } + ], + [ + "webnn/conformance_tests/compute-arraybufferview-with-bigger-arraybuffer.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN MLContext.compute() for ArrayBufferView created from bigger ArrayBuffer" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ] @@ -766825,7 +766996,7 @@ ] ], "concat.https.any.js": [ - "619f20fe1c65eb976c13381a0633f35af1fe8b97", + "3898ee7d6d864dac33c48c446c6f44d019b0e7c1", [ "webnn/conformance_tests/concat.https.any.html?cpu", { @@ -766847,6 +767018,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766879,6 +767054,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/concat.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API concat operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766911,6 +767126,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766943,6 +767162,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/concat.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API concat operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -766956,7 +767215,7 @@ ] ], "constant.https.any.js": [ - "79362947f1d5cd48be717605516715fba0dc5e9a", + "acc24e7772b4da85bb478c2ae1429a3e135b2f49", [ "webnn/conformance_tests/constant.https.any.html?cpu", { @@ -766978,6 +767237,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767010,6 +767273,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/constant.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API constant" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767042,6 +767345,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767074,6 +767381,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/constant.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API constant" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767087,7 +767434,7 @@ ] ], "conv2d.https.any.js": [ - "34af583162bbce07c55042324941d2c919575c4d", + "f6e5ec0fa1dabcb8492b9cc7d68fe605d5c09be4", [ "webnn/conformance_tests/conv2d.https.any.html?cpu", { @@ -767109,6 +767456,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767141,6 +767492,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/conv2d.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API conv2d operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767173,6 +767564,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767205,6 +767600,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/conv2d.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API conv2d operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767218,7 +767653,7 @@ ] ], "conv_transpose2d.https.any.js": [ - "2943e67851c52c41f0792cfe56ba3abc5d651017", + "9e741a45d09f77a8c1ba6347dcafc0d1468126ae", [ "webnn/conformance_tests/conv_transpose2d.https.any.html?cpu", { @@ -767240,6 +767675,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767272,6 +767711,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/conv_transpose2d.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API convTranspose2d operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767304,6 +767783,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767336,6 +767819,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/conv_transpose2d.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API convTranspose2d operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767349,7 +767872,7 @@ ] ], "elementwise_binary.https.any.js": [ - "a85a06e1d21d6acf9c54ca51929a9538b7632618", + "0124077773db1bffcfd2e8208376878876eb7ca8", [ "webnn/conformance_tests/elementwise_binary.https.any.html?cpu", { @@ -767371,6 +767894,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767403,6 +767930,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/elementwise_binary.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API element-wise binary operations" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767435,6 +768002,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767467,6 +768038,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/elementwise_binary.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API element-wise binary operations" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767480,7 +768091,7 @@ ] ], "elementwise_logical.https.any.js": [ - "3d3a825f9c07065c3050b3933623d1a0c485d18f", + "826b21dd8fef7493aaa5ea31bbb7d8a5ed271bd8", [ "webnn/conformance_tests/elementwise_logical.https.any.html?cpu", { @@ -767502,6 +768113,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767534,6 +768149,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/elementwise_logical.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API element-wise logical operations" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767566,6 +768221,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767598,6 +768257,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/elementwise_logical.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API element-wise logical operations" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767611,7 +768310,7 @@ ] ], "elementwise_unary.https.any.js": [ - "f202af01e51325c271afa67cd22105c3e3751e56", + "54406005e89639c8f856830e9cc7d922c18c3c6b", [ "webnn/conformance_tests/elementwise_unary.https.any.html?cpu", { @@ -767633,6 +768332,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767665,6 +768368,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/elementwise_unary.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API element-wise unary operations" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767697,6 +768440,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767729,6 +768476,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/elementwise_unary.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API element-wise unary operations" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767742,7 +768529,7 @@ ] ], "elu.https.any.js": [ - "ac1c19a80bcd35e130f7630e2ee6ad8ad1dd8b6d", + "b16cf04b624290d85578a46014f750556cc65b10", [ "webnn/conformance_tests/elu.https.any.html?cpu", { @@ -767764,6 +768551,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767796,6 +768587,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/elu.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API elu operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767828,6 +768659,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767860,6 +768695,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/elu.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API elu operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767873,7 +768748,7 @@ ] ], "expand.https.any.js": [ - "e7bf106f961e812716076a423c49ffbe7821533b", + "1535bb76a9027572b3fa91e7b4c7074b7a2f1691", [ "webnn/conformance_tests/expand.https.any.html?cpu", { @@ -767895,6 +768770,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767927,6 +768806,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/expand.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API expand operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767959,6 +768878,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -767991,6 +768914,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/expand.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API expand operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768004,7 +768967,7 @@ ] ], "gather.https.any.js": [ - "504f2dd792e27ba5b1f9fb0c4855a25875737d30", + "68d33bbf748f6842283e401d13d5487fed88d64a", [ "webnn/conformance_tests/gather.https.any.html?cpu", { @@ -768026,6 +768989,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768058,6 +769025,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/gather.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API gather operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768090,6 +769097,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768122,6 +769133,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/gather.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API gather operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768135,7 +769186,7 @@ ] ], "gemm.https.any.js": [ - "03a836a44a63fde6ad7710bb7e446818196b56e6", + "0af471753e049fe8984e9c047c3b1d9555914e49", [ "webnn/conformance_tests/gemm.https.any.html?cpu", { @@ -768157,6 +769208,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768189,6 +769244,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/gemm.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API gemm operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768221,6 +769316,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768253,6 +769352,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/gemm.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API gemm operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768266,7 +769405,7 @@ ] ], "hard_sigmoid.https.any.js": [ - "55391e7f1c9b6e36429cea968aa9bc6824d7929a", + "cfc726a57be26bca99b7c8857276dd0a86b82104", [ "webnn/conformance_tests/hard_sigmoid.https.any.html?cpu", { @@ -768288,6 +769427,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768320,6 +769463,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/hard_sigmoid.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API hardSigmoid operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768352,6 +769535,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768384,6 +769571,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/hard_sigmoid.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API hardSigmoid operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768397,7 +769624,7 @@ ] ], "hard_swish.https.any.js": [ - "24b8c413bbaabe1d3c80955e5e2cebbbd312b993", + "229e1b561083b852b26519e86b896dc222e14811", [ "webnn/conformance_tests/hard_swish.https.any.html?cpu", { @@ -768419,6 +769646,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768451,6 +769682,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/hard_swish.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API tanh operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768483,6 +769754,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768515,6 +769790,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/hard_swish.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API tanh operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768528,7 +769843,7 @@ ] ], "instance_normalization.https.any.js": [ - "fc339e5bab4ccf8f0f9c5425e48ffb65f7221756", + "4c5d33bbf70cdec71a79c005c852e4c3f66f9976", [ "webnn/conformance_tests/instance_normalization.https.any.html?cpu", { @@ -768550,6 +769865,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768582,6 +769901,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/instance_normalization.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API instanceNormalization operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768614,6 +769973,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768646,6 +770009,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/instance_normalization.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API instanceNormalization operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768659,7 +770062,7 @@ ] ], "layer_normalization.https.any.js": [ - "ea3cd04240b345439639706666ca7091fdff719c", + "f5bfb8c2cc82800a2602337f2af7e6290ddf660e", [ "webnn/conformance_tests/layer_normalization.https.any.html?cpu", { @@ -768681,6 +770084,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768713,6 +770120,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/layer_normalization.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API layerNormalization operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768745,6 +770192,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768777,6 +770228,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/layer_normalization.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API layerNormalization operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768790,7 +770281,7 @@ ] ], "leaky_relu.https.any.js": [ - "b2a4055bde70aa4009f227ef8ac9ef2c9a0eb6ed", + "9012f02a5edf2de886f3c308659a23336de293a1", [ "webnn/conformance_tests/leaky_relu.https.any.html?cpu", { @@ -768812,6 +770303,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768844,6 +770339,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/leaky_relu.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API leakyRelu operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768876,6 +770411,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768908,6 +770447,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/leaky_relu.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API leakyRelu operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768921,7 +770500,7 @@ ] ], "linear.https.any.js": [ - "0e22f7a0360f151bed23197611b815fd60061637", + "c011229db8f1f50f6ab3f7930d754984fb58f866", [ "webnn/conformance_tests/linear.https.any.html?cpu", { @@ -768943,6 +770522,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -768975,6 +770558,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/linear.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API linear operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769007,6 +770630,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769039,6 +770666,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/linear.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API linear operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769052,7 +770719,7 @@ ] ], "matmul.https.any.js": [ - "da7823057924b3df87aafa83afcb45796d4b9ca4", + "50930d1b0f73102da00921e543a3f8e2ce86ef06", [ "webnn/conformance_tests/matmul.https.any.html?cpu", { @@ -769074,6 +770741,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769106,6 +770777,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/matmul.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API matmul operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769138,6 +770849,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769170,6 +770885,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/matmul.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API matmul operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769183,7 +770938,7 @@ ] ], "pad.https.any.js": [ - "d733cbb6edb730b1aaaad8019eda3683edeb286d", + "ec9c106e6330fe399c99e63d523f611b8f4c31ee", [ "webnn/conformance_tests/pad.https.any.html?cpu", { @@ -769205,6 +770960,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769237,6 +770996,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/pad.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API pad operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769269,6 +771068,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769301,6 +771104,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/pad.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API pad operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769314,7 +771157,7 @@ ] ], "parallel-compute.https.any.js": [ - "642fec9f731bb5d207cb66597ea4a904f3ff6c01", + "ea1b5dbdc44917b34c70a21d04498f9b6b6912d3", [ "webnn/conformance_tests/parallel-compute.https.any.html?cpu", { @@ -769336,6 +771179,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769368,6 +771215,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/parallel-compute.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test parallel WebNN API compute operations" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769400,6 +771287,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769432,6 +771323,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/parallel-compute.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test parallel WebNN API compute operations" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769445,7 +771376,7 @@ ] ], "pooling.https.any.js": [ - "de2ae35a9c1f5b45bb1c3ed74fdee9ce58748fdd", + "83eea50a12f0021027cc22334e2c712f31b00d97", [ "webnn/conformance_tests/pooling.https.any.html?cpu", { @@ -769467,6 +771398,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769499,6 +771434,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/pooling.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API pooling operations" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769531,6 +771506,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769563,6 +771542,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/pooling.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API pooling operations" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769576,7 +771595,7 @@ ] ], "prelu.https.any.js": [ - "9337211e548635746e238784c2bab94388e4a7b6", + "3b4717663fa86ed33f38e09eade394f29b5a833a", [ "webnn/conformance_tests/prelu.https.any.html?cpu", { @@ -769598,6 +771617,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769630,6 +771653,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/prelu.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API prelu operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769662,6 +771725,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769694,6 +771761,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/prelu.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API prelu operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769707,7 +771814,7 @@ ] ], "reduction.https.any.js": [ - "c291906ba1c7b1bf6fd3990be49981c346c939c0", + "f5247ee137c6bfd24140028a87bf60cd5081465c", [ "webnn/conformance_tests/reduction.https.any.html?cpu", { @@ -769729,6 +771836,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769761,6 +771872,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/reduction.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API reduction operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769793,6 +771944,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769825,6 +771980,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/reduction.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API reduction operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769838,7 +772033,7 @@ ] ], "relu.https.any.js": [ - "7cb23eea1bdab567b3252279e944cf6b6470aedc", + "458cd61d82c1840cc872797b68f9ca743e77dee7", [ "webnn/conformance_tests/relu.https.any.html?cpu", { @@ -769860,6 +772055,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769892,6 +772091,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/relu.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API relu operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769924,6 +772163,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769956,6 +772199,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/relu.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API relu operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -769969,7 +772252,7 @@ ] ], "resample2d.https.any.js": [ - "b5bdda7197ec056dd0be568970e4b3c8ca2a07d6", + "4d68f9f51bd5e6b6fc20202a1fbdd76c8c65577e", [ "webnn/conformance_tests/resample2d.https.any.html?cpu", { @@ -769991,6 +772274,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770023,6 +772310,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/resample2d.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API resample2d operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770055,6 +772382,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770087,6 +772418,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/resample2d.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API resample2d operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770100,7 +772471,7 @@ ] ], "reshape.https.any.js": [ - "a7d03b2a0c2b46c2b1dc1090d1dd6137e8b4de99", + "de9953e6f820353f15dcbd828e919b972c553860", [ "webnn/conformance_tests/reshape.https.any.html?cpu", { @@ -770122,6 +772493,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770154,6 +772529,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/reshape.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API reshape operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770186,6 +772601,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770218,6 +772637,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/reshape.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API reshape operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770231,7 +772690,7 @@ ] ], "sigmoid.https.any.js": [ - "9730b548b5622c960539fa88eb9f9719e836905a", + "154e68e4299947ce83bece8db01b828a82c2c24c", [ "webnn/conformance_tests/sigmoid.https.any.html?cpu", { @@ -770253,6 +772712,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770285,6 +772748,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/sigmoid.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API sigmoid operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770317,6 +772820,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770349,6 +772856,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/sigmoid.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API sigmoid operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770362,7 +772909,7 @@ ] ], "slice.https.any.js": [ - "b316ea58c4b9f49e8a1dd941c731d2d79cca86c3", + "b39eade98f29b9590a23cac65b3c69f798e8096d", [ "webnn/conformance_tests/slice.https.any.html?cpu", { @@ -770384,6 +772931,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770416,6 +772967,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/slice.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API slice operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770448,6 +773039,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770480,6 +773075,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/slice.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API slice operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770493,7 +773128,7 @@ ] ], "softmax.https.any.js": [ - "a68a32c45f04728956738c2feaad4eb4384c5148", + "75893eb34cb208ead47f2ec2595e798e6828b235", [ "webnn/conformance_tests/softmax.https.any.html?cpu", { @@ -770515,6 +773150,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770547,6 +773186,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/softmax.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API softmax operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770579,6 +773258,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770611,6 +773294,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/softmax.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API softmax operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770624,7 +773347,7 @@ ] ], "softplus.https.any.js": [ - "7d89b117eb54c024bf0626af88bd42acfb7dc3bf", + "a2f90bd23d5e1899401041914c8a4c707876662a", [ "webnn/conformance_tests/softplus.https.any.html?cpu", { @@ -770646,6 +773369,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770678,6 +773405,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/softplus.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API softplus operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770710,6 +773477,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770742,6 +773513,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/softplus.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API softplus operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770755,7 +773566,7 @@ ] ], "softsign.https.any.js": [ - "e175e0de56c18e5bcebdcfd9bd475bb96ec6fa63", + "1e9c9f77fee33850f75566ad8f174f6114dca53f", [ "webnn/conformance_tests/softsign.https.any.html?cpu", { @@ -770777,6 +773588,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770809,6 +773624,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/softsign.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API softsign operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770841,6 +773696,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770873,6 +773732,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/softsign.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API softsign operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770886,7 +773785,7 @@ ] ], "split.https.any.js": [ - "78d707687f08ff2bcf1fffc1429930fb26684db6", + "84fee2f66512a5d53f0dee6596342feba7b21695", [ "webnn/conformance_tests/split.https.any.html?cpu", { @@ -770908,6 +773807,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770940,6 +773843,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/split.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API split operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -770972,6 +773915,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771004,6 +773951,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/split.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API split operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771017,7 +774004,7 @@ ] ], "tanh.https.any.js": [ - "e3ab5e9192de01fda2a05b9089f58504b56195dd", + "d7d1b5975189091bbe1cf6ffef4b836ca8bf2831", [ "webnn/conformance_tests/tanh.https.any.html?cpu", { @@ -771039,6 +774026,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771071,6 +774062,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/tanh.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API tanh operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771103,6 +774134,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771135,6 +774170,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/tanh.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API tanh operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771148,7 +774223,7 @@ ] ], "transpose.https.any.js": [ - "83bd7a45c18f31175db3ad9706e19fa8d049f42a", + "82abef96ea2f66dd70d827550a9b6151e752c814", [ "webnn/conformance_tests/transpose.https.any.html?cpu", { @@ -771170,6 +774245,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771202,6 +774281,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/transpose.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API transpose operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771234,6 +774353,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771266,6 +774389,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/transpose.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API transpose operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771279,7 +774442,7 @@ ] ], "triangular.https.any.js": [ - "499f60ed3668b7ee219dc326591da008681b6f3a", + "9919110e9b1941f42185a53db0975d81fcfa4f2d", [ "webnn/conformance_tests/triangular.https.any.html?cpu", { @@ -771301,6 +774464,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771333,6 +774500,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/triangular.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API triangular operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771365,6 +774572,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771397,6 +774608,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/triangular.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API triangular operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771410,7 +774661,7 @@ ] ], "where.https.any.js": [ - "4ab453ab24535a88a2f6a7f73bc2ee17988f0277", + "fa920ac2519dc35d05477845925283f05b96b282", [ "webnn/conformance_tests/where.https.any.html?cpu", { @@ -771432,6 +774683,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771464,6 +774719,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/where.https.any.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API where operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771496,6 +774791,10 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771528,6 +774827,46 @@ "?gpu" ], [ + "variant", + "?npu" + ], + [ + "script", + "../resources/utils.js" + ], + [ + "timeout", + "long" + ] + ], + "timeout": "long" + } + ], + [ + "webnn/conformance_tests/where.https.any.worker.html?npu", + { + "script_metadata": [ + [ + "title", + "test WebNN API where operation" + ], + [ + "global", + "window,dedicatedworker" + ], + [ + "variant", + "?cpu" + ], + [ + "variant", + "?gpu" + ], + [ + "variant", + "?npu" + ], + [ "script", "../resources/utils.js" ], @@ -771643,7 +774982,7 @@ ] ], "batchNormalization.https.any.js": [ - "a1c79000d202ef793857f3826156d80683b3052a", + "7a2755927ca917262748952a3fd6c42b606c1a8f", [ "webnn/validation_tests/batchNormalization.https.any.html", { @@ -771889,7 +775228,7 @@ ] ], "conv2d.https.any.js": [ - "7dac654951b77817b88d3ca1840dc07a6d4f4e6c", + "55615faed9d29477c06f3f405a76e549714ba83b", [ "webnn/validation_tests/conv2d.https.any.html", { @@ -771930,7 +775269,7 @@ ] ], "convTranspose2d.https.any.js": [ - "02822c52749e8c642eca2209f2a37be73393a2a1", + "c4717a7c538779271f7f806d9b286c18dece87ea", [ "webnn/validation_tests/convTranspose2d.https.any.html", { @@ -772973,7 +776312,7 @@ ] ], "reduction.https.any.js": [ - "e9643c0f8a591728274a5d8625fbb9ff83e3e589", + "219a60076af4d094f630edcf321b6ef0b29d0b6b", [ "webnn/validation_tests/reduction.https.any.html", { @@ -774248,7 +777587,7 @@ ] ], "RTCRtpParameters-codecs.html": [ - "f5fa65e2ac9be706a72feb49c09b37def65986e8", + "97f519a45e4c97b5a9a191d6beb73f5faa7e1a6c", [ null, {} @@ -774920,7 +778259,7 @@ ] ], "rtp-demuxing.html": [ - "de08b2197f2985ac049024d1e5f44408d776f2e2", + "e53f1ff76f4bb0911fe6ad006b6707844a182ae4", [ null, { @@ -775008,14 +778347,14 @@ ] ], "video-codecs.https.html": [ - "4ce0618bca3007e4193b98a95b0a6d030cc24b5f", + "2fbb4ae28f64b07da1bc8defa1f8c65fc448604d", [ null, {} ] ], "vp8-fmtp.html": [ - "16ea635949f14bfec18005c0803a9bc99d6809ec", + "f52d6b11fb5f56eac358a253f684025efa5ae9fd", [ null, { @@ -775136,7 +778475,7 @@ ] ], "vp9-scalability-mode.https.html": [ - "9dc8a3103d6062402354fa29caae29178cf105d6", + "8d8f974fcdcb6ec641df5d931dc5f7fac35228d3", [ null, { @@ -791815,6 +795154,13 @@ {} ] ], + "depth_sensing_preferences.https.html": [ + "f6392016d40294552481ee36a43ad7f7b5d0161b", + [ + null, + {} + ] + ], "gpu": { "depth_sensing_gpu_dataUnavailable.https.html": [ "018edf7693452d69753758dc0db8e25a36d8615c", @@ -820631,7 +823977,7 @@ ] ], "locator.py": [ - "66c512d792a46217b2f7ac125a7cf0ce7d7d05a3", + "f2782509d93522cdd7ab94ecc774f46d88e30e1f", [ null, {} @@ -821233,7 +824579,7 @@ }, "before_request_sent": { "before_request_sent.py": [ - "95a790e37cdd2201b85a2de9870c9d911101ad78", + "22588b7013a55b285e15d0ee52fa8ffe608bf02f", [ null, {} @@ -821249,7 +824595,7 @@ }, "combined": { "network_events.py": [ - "7b6d99727ae116587737abd0c02fd908a6690de9", + "e58b5aa7fd95171a40495fe72427a0207f26e204", [ null, {} @@ -821406,7 +824752,7 @@ }, "response_completed": { "response_completed.py": [ - "f17a522766e1f5d32555787d22818f830bf9d6ea", + "30b35ef7e0d03a1199bab744bf7eb0ca95cf0e85", [ null, {} @@ -821422,7 +824768,7 @@ }, "response_started": { "response_started.py": [ - "9aa77739abcd9c74a5c5639af4d9dc7e60655888", + "030d9168a1d8fd6692ba28827689df8e1c6f4cc9", [ null, {} @@ -821830,8 +825176,8 @@ }, "session": { "new": { - "connect.py": [ - "523899c3364d6d13e82612556ffeb9e7c9d8e214", + "bidi_upgrade.py": [ + "1060bef2be95c6fb560b4d8bbafeb02e2a5083e2", [ null, {} @@ -822857,7 +826203,7 @@ }, "get_title": { "get.py": [ - "e696ec340339e64d68956c3ea3bcfa5e8fceb774", + "1ee76219e10da14059e267eaf758f3ae001d2ad8", [ null, {} @@ -823151,7 +826497,7 @@ ] ], "websocket_url.py": [ - "452decc90aa18420459d72886a85d89918a0fb38", + "9ae4bd2e1a082fb81c615520fb8e7e73d92d870a", [ null, {} @@ -823338,7 +826684,7 @@ }, "permissions": { "set.py": [ - "740b93d40e0b5b20a4febeb22ecaa4763cd6a408", + "0bee5d39146cbcc276da015aac82ddf881b51370", [ null, {} diff --git a/tests/wpt/meta/css/css-color/color-contrast-001.html.ini b/tests/wpt/meta/css/css-color/color-contrast-001.html.ini deleted file mode 100644 index 905ffd0a44c..00000000000 --- a/tests/wpt/meta/css/css-color/color-contrast-001.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[color-contrast-001.html] - expected: FAIL diff --git a/tests/wpt/meta/css/css-color/parsing/color-computed-color-contrast-function.html.ini b/tests/wpt/meta/css/css-color/parsing/color-computed-color-contrast-function.html.ini deleted file mode 100644 index ff8c020f68f..00000000000 --- a/tests/wpt/meta/css/css-color/parsing/color-computed-color-contrast-function.html.ini +++ /dev/null @@ -1,66 +0,0 @@ -[color-computed-color-contrast-function.html] - [Property color value 'color-contrast(white vs red, blue)'] - expected: FAIL - - [Property color value 'color-contrast(white vs blue, red)'] - expected: FAIL - - [Property color value 'color-contrast(white vs red, blue, green)'] - expected: FAIL - - [Property color value 'color-contrast(white vs white, white)'] - expected: FAIL - - [Property color value 'color-contrast(blue vs red, white)'] - expected: FAIL - - [Property color value 'color-contrast(red vs blue, white, red)'] - expected: FAIL - - [Property color value 'color-contrast(black vs red, blue)'] - expected: FAIL - - [Property color value 'color-contrast(black vs blue, red)'] - expected: FAIL - - [Property color value 'color-contrast(black vs white, white)'] - expected: FAIL - - [Property color value 'color-contrast(red vs blue, rgb(255, 255, 255, .5))'] - expected: FAIL - - [Property color value 'color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA)'] - expected: FAIL - - [Property color value 'color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA-large)'] - expected: FAIL - - [Property color value 'color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA)'] - expected: FAIL - - [Property color value 'color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA-large)'] - expected: FAIL - - [Property color value 'color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to 5.8)'] - expected: FAIL - - [Property color value 'color-contrast(wheat vs bisque, darkgoldenrod, olive to 100)'] - expected: FAIL - - [Property color value 'color-contrast(green vs bisque, darkgoldenrod, olive to 100)'] - expected: FAIL - - [Property color value 'color-contrast(green vs color(display-p3 0 1 0), color(display-p3 0 0 1))'] - expected: FAIL - - [Property color value 'color-contrast(color(display-p3 1 1 0) vs color(display-p3 0 1 0), color(display-p3 0 0 1))'] - expected: FAIL - - [Property color value 'color-contrast(green vs lab(50% -160 160), lch(0.2 50 20deg))'] - expected: FAIL - - [Property color value 'color-contrast(lab(50% -160 160) vs green, lch(0.2 50 20deg))'] - expected: FAIL - - [Property color value 'color-contrast( white vs red, blue )'] - expected: FAIL diff --git a/tests/wpt/meta/css/css-color/parsing/color-valid-color-contrast-function.html.ini b/tests/wpt/meta/css/css-color/parsing/color-valid-color-contrast-function.html.ini deleted file mode 100644 index 6c759d11a0e..00000000000 --- a/tests/wpt/meta/css/css-color/parsing/color-valid-color-contrast-function.html.ini +++ /dev/null @@ -1,66 +0,0 @@ -[color-valid-color-contrast-function.html] - [e.style['color'\] = "color-contrast(white vs red, blue)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(white vs blue, red)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(white vs red, blue, green)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(white vs white, white)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(blue vs red, white)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(red vs blue, white, red)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(black vs red, blue)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(black vs blue, red)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(black vs white, white)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(red vs blue, rgb(255, 255, 255, .5))" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA-large)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA-large)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to 5.8)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(wheat vs bisque, darkgoldenrod, olive to 100)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(green vs bisque, darkgoldenrod, olive to 100)" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(green vs color(display-p3 0 1 0), color(display-p3 0 0 1))" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(color(display-p3 1 1 0) vs color(display-p3 0 1 0), color(display-p3 0 0 1))" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(green vs lab(50% -160 160), lch(0.2 50 20deg))" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast(lab(50% -160 160) vs green, lch(0.2 50 20deg))" should set the property value] - expected: FAIL - - [e.style['color'\] = "color-contrast( white vs red, blue )" should set the property value] - expected: FAIL diff --git a/tests/wpt/meta/css/css-color/parsing/color-valid-color-mix-function.html.ini b/tests/wpt/meta/css/css-color/parsing/color-valid-color-mix-function.html.ini index 45fe5b3df7b..561ada105d0 100644 --- a/tests/wpt/meta/css/css-color/parsing/color-valid-color-mix-function.html.ini +++ b/tests/wpt/meta/css/css-color/parsing/color-valid-color-mix-function.html.ini @@ -280,3 +280,6 @@ [e.style['color'\] = "color-mix(in hwb specified hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))" should set the property value] expected: FAIL + + [e.style['color'\] = "color-mix(in hsl, red calc(50% * sign(100em - 1px)), blue)" should set the property value] + expected: FAIL diff --git a/tests/wpt/meta/css/css-transforms/transform-with-sign-function.html.ini b/tests/wpt/meta/css/css-transforms/transform-with-sign-function.html.ini index 7d7a21ed7ce..acc2f9ef2d3 100644 --- a/tests/wpt/meta/css/css-transforms/transform-with-sign-function.html.ini +++ b/tests/wpt/meta/css/css-transforms/transform-with-sign-function.html.ini @@ -25,3 +25,6 @@ [rotateZ(calc(sign(1em - 1px) * 2deg)) should be used-value-equivalent to rotateZ(2deg)] expected: FAIL + + [calc(sign(1em - 1px) * 2) calc(sign(1em - 1px) * 2) calc(sign(1em - 1px) * 2) should be used-value-equivalent to 2 2 2] + expected: FAIL diff --git a/tests/wpt/meta/css/filter-effects/filter-region-html-content-viewport.tentative.html.ini b/tests/wpt/meta/css/filter-effects/filter-region-html-content-viewport.tentative.html.ini new file mode 100644 index 00000000000..1d4ac00095b --- /dev/null +++ b/tests/wpt/meta/css/filter-effects/filter-region-html-content-viewport.tentative.html.ini @@ -0,0 +1,2 @@ +[filter-region-html-content-viewport.tentative.html] + expected: FAIL diff --git a/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute-redirect.tentative.https.window.js.ini b/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute-redirect.tentative.https.window.js.ini new file mode 100644 index 00000000000..20dafbdd63f --- /dev/null +++ b/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute-redirect.tentative.https.window.js.ini @@ -0,0 +1,6 @@ +[deferred-fetch-allowed-by-permissions-policy-attribute-redirect.tentative.https.window.html] + [Permissions policy allow="deferred-fetch" allows same-origin navigation in an iframe.] + expected: FAIL + + [Permissions policy allow="deferred-fetch" disallows cross-origin navigation in an iframe.] + expected: FAIL diff --git a/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute.tentative.https.window.js.ini b/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute.tentative.https.window.js.ini new file mode 100644 index 00000000000..1a86a1f7b4e --- /dev/null +++ b/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute.tentative.https.window.js.ini @@ -0,0 +1,6 @@ +[deferred-fetch-allowed-by-permissions-policy-attribute.tentative.https.window.html] + [Permissions policy "deferred-fetch" can be enabled in the same-origin iframe using allow="deferred-fetch" attribute.] + expected: FAIL + + [Permissions policy "deferred-fetch" can be enabled in the cross-origin iframe using allow="deferred-fetch" attribute.] + expected: FAIL diff --git a/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy.tentative.https.window.js.ini b/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy.tentative.https.window.js.ini new file mode 100644 index 00000000000..4d0280dcc94 --- /dev/null +++ b/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy.tentative.https.window.js.ini @@ -0,0 +1,9 @@ +[deferred-fetch-allowed-by-permissions-policy.tentative.https.window.html] + [Permissions policy header: "deferred-fetch=*" allows fetchLater() in the top-level document.] + expected: FAIL + + [Permissions policy header: "deferred-fetch=*" allows fetchLater() in the same-origin iframe.] + expected: FAIL + + [Permissions policy header: "deferred-fetch=*" allow="deferred-fetch" allows fetchLater() in the cross-origin iframe.] + expected: FAIL diff --git a/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-default-permissions-policy.tentative.https.window.js.ini b/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-default-permissions-policy.tentative.https.window.js.ini new file mode 100644 index 00000000000..83da2ca5d77 --- /dev/null +++ b/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-default-permissions-policy.tentative.https.window.js.ini @@ -0,0 +1,6 @@ +[deferred-fetch-default-permissions-policy.tentative.https.window.html] + [Default "deferred-fetch" permissions policy ["self"\] allows fetchLater() in the top-level document.] + expected: FAIL + + [Default "deferred-fetch" permissions policy ["self"\] allows fetchLater() in the same-origin iframe.] + expected: FAIL diff --git a/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-disabled-by-permissions-policy.tentative.https.window.js.ini b/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-disabled-by-permissions-policy.tentative.https.window.js.ini new file mode 100644 index 00000000000..e35b7ecb5ca --- /dev/null +++ b/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-disabled-by-permissions-policy.tentative.https.window.js.ini @@ -0,0 +1,3 @@ +[deferred-fetch-disabled-by-permissions-policy.tentative.https.window.html] + [Permissions policy header: "deferred-fetch=()" disallows fetchLater() in the top-level document.] + expected: FAIL diff --git a/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-supported-by-permissions-policy.tentative.window.js.ini b/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-supported-by-permissions-policy.tentative.window.js.ini new file mode 100644 index 00000000000..eeffb965154 --- /dev/null +++ b/tests/wpt/meta/fetch/fetch-later/permissions-policy/deferred-fetch-supported-by-permissions-policy.tentative.window.js.ini @@ -0,0 +1,3 @@ +[deferred-fetch-supported-by-permissions-policy.tentative.window.html] + [document.featurePolicy.features should advertise deferred-fetch.] + expected: FAIL diff --git a/tests/wpt/meta/fetch/metadata/generated/element-img-environment-change.sub.html.ini b/tests/wpt/meta/fetch/metadata/generated/element-img-environment-change.sub.html.ini index 410ec4c1d39..4648085f98d 100644 --- a/tests/wpt/meta/fetch/metadata/generated/element-img-environment-change.sub.html.ini +++ b/tests/wpt/meta/fetch/metadata/generated/element-img-environment-change.sub.html.ini @@ -41,3 +41,6 @@ [sec-fetch-site - HTTPS downgrade-upgrade, no attributes] expected: NOTRUN + + [sec-fetch-site - Not sent to non-trustworthy same-origin destination, no attributes] + expected: FAIL diff --git a/tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/empty-iframe-load-event.html.ini b/tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/empty-iframe-load-event.html.ini deleted file mode 100644 index 3e07e6b7d1f..00000000000 --- a/tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/empty-iframe-load-event.html.ini +++ /dev/null @@ -1,6 +0,0 @@ -[empty-iframe-load-event.html] - [Check execution order from nested timeout] - expected: FAIL - - [Check execution order on load handler] - expected: FAIL diff --git a/tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/replace-before-load/a-click.html.ini b/tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/replace-before-load/a-click.html.ini deleted file mode 100644 index 60a4fa51f8a..00000000000 --- a/tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/replace-before-load/a-click.html.ini +++ /dev/null @@ -1,3 +0,0 @@ -[a-click.html] - [aElement.click() before the load event must NOT replace] - expected: FAIL diff --git a/tests/wpt/meta/html/browsers/windows/embedded-opener-remove-frame.html.ini b/tests/wpt/meta/html/browsers/windows/embedded-opener-remove-frame.html.ini index c43a5aa58f3..91030fe2f7f 100644 --- a/tests/wpt/meta/html/browsers/windows/embedded-opener-remove-frame.html.ini +++ b/tests/wpt/meta/html/browsers/windows/embedded-opener-remove-frame.html.ini @@ -1,4 +1,5 @@ [embedded-opener-remove-frame.html] + expected: CRASH [opener of discarded nested browsing context] expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform.html.ini deleted file mode 100644 index 1c6480ede07..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.composite.no-shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation.html.ini deleted file mode 100644 index 1327e04cf85..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.composite.no-shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform.html.ini deleted file mode 100644 index 7e434389bac..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.copy.no-shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation.html.ini deleted file mode 100644 index e4e1d2ecfe8..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.copy.no-shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html.ini deleted file mode 100644 index 320c0788bde..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.blending.no-shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html.ini deleted file mode 100644 index ffdea0f0bba..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.blending.no-shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html.ini deleted file mode 100644 index 4c9e8f01822..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.blending.shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation.html.ini deleted file mode 100644 index f3e73bbc0c6..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.blending.shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html.ini deleted file mode 100644 index 625607575ed..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.composite.no-shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html.ini deleted file mode 100644 index 0d03f3d5494..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.composite.no-shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html.ini deleted file mode 100644 index 6951a253266..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.composite.shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation.html.ini deleted file mode 100644 index 5bd2f825d0d..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.composite.shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html.ini deleted file mode 100644 index a11a235607e..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.copy.no-shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html.ini deleted file mode 100644 index 11e660c56be..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.copy.no-shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html.ini deleted file mode 100644 index 98c792d69be..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.copy.shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation.html.ini deleted file mode 100644 index 7352700efe6..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.copy.shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html.ini deleted file mode 100644 index 2bca108715d..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html.ini deleted file mode 100644 index 6084e59852a..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html.ini deleted file mode 100644 index 4521ebd917c..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html.ini deleted file mode 100644 index b55fabce624..00000000000 --- a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.no-composite-op.shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.no-transform.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.no-transform.html.ini new file mode 100644 index 00000000000..5bfd6fbfd87 --- /dev/null +++ b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.no-transform.html.ini @@ -0,0 +1,2 @@ +[2d.layer.global-states.filter.no-transform.html] + expected: FAIL diff --git a/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.rotation.html.ini b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.rotation.html.ini new file mode 100644 index 00000000000..d69f71b10b6 --- /dev/null +++ b/tests/wpt/meta/html/canvas/element/layers/2d.layer.global-states.filter.rotation.html.ini @@ -0,0 +1,2 @@ +[2d.layer.global-states.filter.rotation.html] + expected: FAIL diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.html.ini deleted file mode 100644 index 404c45da07f..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.blending.no-shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.w.html.ini deleted file mode 100644 index 6d3f867402c..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.blending.no-shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.html.ini deleted file mode 100644 index 5f0ae34ff49..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.blending.no-shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.w.html.ini deleted file mode 100644 index 865516930b3..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.blending.no-shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.html.ini deleted file mode 100644 index a5415c367c6..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.blending.shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.w.html.ini deleted file mode 100644 index eb0f9ac9be6..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.blending.shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.html.ini deleted file mode 100644 index 6cb0dd36119..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.blending.shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.w.html.ini deleted file mode 100644 index 69749d1d220..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.blending.shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.w.html.ini deleted file mode 100644 index 5896105e3bd..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.composite.no-shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.w.html.ini deleted file mode 100644 index 3990f08265f..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.composite.no-shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.html.ini deleted file mode 100644 index cb0410d4760..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.composite.shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.w.html.ini deleted file mode 100644 index b1cec0976d5..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.composite.shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.html.ini deleted file mode 100644 index 8af32a1f6de..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.composite.shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.w.html.ini deleted file mode 100644 index 00e24ab0f41..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.composite.shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.w.html.ini deleted file mode 100644 index 8b6afbe31c3..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.copy.no-shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.w.html.ini deleted file mode 100644 index 61b8d7e2d9d..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.copy.no-shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.html.ini deleted file mode 100644 index b3ddf29a402..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.copy.shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.w.html.ini deleted file mode 100644 index ad7a10db034..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.copy.shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.html.ini deleted file mode 100644 index 73cf9337979..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.copy.shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.w.html.ini deleted file mode 100644 index f7dc71e7998..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.copy.shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html.ini deleted file mode 100644 index 11e566f624c..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.w.html.ini deleted file mode 100644 index 504e6dbe000..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.blending.no-shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.w.html.ini deleted file mode 100644 index e160d39a8bf..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.blending.shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.w.html.ini deleted file mode 100644 index fd8f19fffb9..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.blending.shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html.ini deleted file mode 100644 index 856ca9b5ddb..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.w.html.ini deleted file mode 100644 index c65e4e6af7a..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.composite.no-shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.w.html.ini deleted file mode 100644 index bc8ba3b7d1b..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.composite.shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.w.html.ini deleted file mode 100644 index 8697b8ee551..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.composite.shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html.ini deleted file mode 100644 index b4350ad384d..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.w.html.ini deleted file mode 100644 index 46f49fe0224..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.copy.no-shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.w.html.ini deleted file mode 100644 index 529082f039d..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.copy.shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.w.html.ini deleted file mode 100644 index 787f83ec5e5..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.copy.shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html.ini deleted file mode 100644 index e84b41a07ad..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html.ini deleted file mode 100644 index 4c5a408b484..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html.ini deleted file mode 100644 index 3c57414972d..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html.ini deleted file mode 100644 index 6f27126360e..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-transform.w.html.ini new file mode 100644 index 00000000000..d867e0fc45b --- /dev/null +++ b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-transform.w.html.ini @@ -0,0 +1,2 @@ +[2d.layer.global-states.filter.no-transform.w.html] + expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.rotation.w.html.ini new file mode 100644 index 00000000000..af2eb3e5257 --- /dev/null +++ b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.filter.rotation.w.html.ini @@ -0,0 +1,2 @@ +[2d.layer.global-states.filter.rotation.w.html] + expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html.ini deleted file mode 100644 index e1271b08876..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.no-composite-op.no-shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html.ini deleted file mode 100644 index b810cf1c28f..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html.ini deleted file mode 100644 index 8ad13f66916..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.no-composite-op.no-shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html.ini deleted file mode 100644 index a8cef471940..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html.ini deleted file mode 100644 index 61897735a81..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.no-composite-op.shadow.no-transform.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.w.html.ini deleted file mode 100644 index 25ab7cbc35e..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.no-composite-op.shadow.no-transform.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html.ini deleted file mode 100644 index 99afebe84a2..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.no-composite-op.shadow.rotation.html] - expected: FAIL diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.w.html.ini deleted file mode 100644 index 6d5d73e1852..00000000000 --- a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.w.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[2d.layer.global-states.no-composite-op.shadow.rotation.w.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.html.ini new file mode 100644 index 00000000000..780decaea7a --- /dev/null +++ b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.html.ini @@ -0,0 +1,2 @@ +[2d.layer.global-states.no-transform.html] + expected: FAIL diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.w.html.ini new file mode 100644 index 00000000000..6f5fcab1e92 --- /dev/null +++ b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.w.html.ini @@ -0,0 +1,2 @@ +[2d.layer.global-states.no-transform.w.html] + expected: TIMEOUT diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.rotation.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.rotation.html.ini new file mode 100644 index 00000000000..67b4fa5c70a --- /dev/null +++ b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.rotation.html.ini @@ -0,0 +1,2 @@ +[2d.layer.global-states.rotation.html] + expected: FAIL diff --git a/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.rotation.w.html.ini b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.rotation.w.html.ini new file mode 100644 index 00000000000..d1c4919b910 --- /dev/null +++ b/tests/wpt/meta/html/canvas/offscreen/layers/2d.layer.global-states.rotation.w.html.ini @@ -0,0 +1,2 @@ +[2d.layer.global-states.rotation.w.html] + expected: TIMEOUT diff --git a/tests/wpt/meta/html/document-isolation-policy/isolate-and-require-corp.tentative.https.html.ini b/tests/wpt/meta/html/document-isolation-policy/isolate-and-require-corp.tentative.https.html.ini new file mode 100644 index 00000000000..84ba60da883 --- /dev/null +++ b/tests/wpt/meta/html/document-isolation-policy/isolate-and-require-corp.tentative.https.html.ini @@ -0,0 +1,3 @@ +[isolate-and-require-corp.tentative.https.html] + ["isolate-and-require-corp" top-level: fetch() to cross-origin response without CORP should fail] + expected: FAIL diff --git a/tests/wpt/meta/html/document-isolation-policy/shared-workers.tentative.https.html.ini b/tests/wpt/meta/html/document-isolation-policy/shared-workers.tentative.https.html.ini new file mode 100644 index 00000000000..c0b5a06b476 --- /dev/null +++ b/tests/wpt/meta/html/document-isolation-policy/shared-workers.tentative.https.html.ini @@ -0,0 +1,33 @@ +[shared-workers.tentative.https.html] + [default policy (derived from response)] + expected: FAIL + + ["isolate-and-require-corp" (derived from response)] + expected: FAIL + + [default policy (derived from owner set due to use of local scheme - blob URL)] + expected: FAIL + + [isolate-and-require-corp (derived from blob URL creator)] + expected: FAIL + + ["isolate-and-require-corp" (derived from owner set due to use of local scheme - blob URL)] + expected: FAIL + + [default policy (derived from owner set due to use of local scheme - data URL)] + expected: FAIL + + [default policy (not derived from data URL creator)] + expected: FAIL + + ["isolate-and-require-corp" (derived from owner set due to use of local scheme - data URL)] + expected: FAIL + + [default policy (derived from owner set due to use of local scheme - filesystem URL)] + expected: FAIL + + [isolate-and-require-corp (derived from filesystem URL creator)] + expected: FAIL + + ["isolate-and-require-corp" (derived from owner set due to use of local scheme - filesystem URL)] + expected: FAIL diff --git a/tests/wpt/meta/html/rendering/the-details-element/details-pseudo-elements-003.tentative.html.ini b/tests/wpt/meta/html/rendering/the-details-element/details-pseudo-elements-003.tentative.html.ini new file mode 100644 index 00000000000..8521ca4c028 --- /dev/null +++ b/tests/wpt/meta/html/rendering/the-details-element/details-pseudo-elements-003.tentative.html.ini @@ -0,0 +1,2 @@ +[details-pseudo-elements-003.tentative.html] + expected: FAIL diff --git a/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-1.html.ini b/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-1.html.ini index d7d0d3ef89d..24903b5f66f 100644 --- a/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-1.html.ini +++ b/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-1.html.ini @@ -1,4 +1,4 @@ [iframe_sandbox_popups_escaping-1.html] expected: TIMEOUT [Check that popups from a sandboxed iframe escape the sandbox if\n allow-popups-to-escape-sandbox is used] - expected: FAIL + expected: TIMEOUT diff --git a/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-3.html.ini b/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-3.html.ini index d4b2e4435a0..6a420504feb 100644 --- a/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-3.html.ini +++ b/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-3.html.ini @@ -1,3 +1,3 @@ [iframe_sandbox_popups_escaping-3.html] [Check that popups from a sandboxed iframe escape the sandbox if\n allow-popups-to-escape-sandbox is used] - expected: TIMEOUT + expected: FAIL diff --git a/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-1.html.ini b/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-1.html.ini index 5799e6c26cd..bbc1f35d8d9 100644 --- a/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-1.html.ini +++ b/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-1.html.ini @@ -1,3 +1,3 @@ [iframe_sandbox_popups_nonescaping-1.html] [Check that popups from a sandboxed iframe do not escape the sandbox] - expected: NOTRUN + expected: FAIL diff --git a/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html.ini b/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html.ini index c6f1e5d7d84..90c8bd71ded 100644 --- a/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html.ini +++ b/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html.ini @@ -1,4 +1,4 @@ [iframe_sandbox_popups_nonescaping-2.html] - expected: TIMEOUT + expected: CRASH [Check that popups from a sandboxed iframe do not escape the sandbox] expected: NOTRUN diff --git a/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/sandbox-top-navigation-cross-site.tentative.sub.window.js.ini b/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/sandbox-top-navigation-cross-site.tentative.sub.window.js.ini index dd7548a86bc..8af95703e25 100644 --- a/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/sandbox-top-navigation-cross-site.tentative.sub.window.js.ini +++ b/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/sandbox-top-navigation-cross-site.tentative.sub.window.js.ini @@ -1,6 +1,7 @@ [sandbox-top-navigation-cross-site.tentative.sub.window.html] + expected: TIMEOUT [A cross-site unsandboxed iframe navigation consumes user activation and disallows top-level navigation.] - expected: FAIL + expected: TIMEOUT [A same-site unsandboxed iframe navigation does not consume user activation and allows top-level navigation.] expected: FAIL diff --git a/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html.ini b/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html.ini deleted file mode 100644 index 4663af098fb..00000000000 --- a/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[native-popup-with-datalist.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html.ini b/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html.ini deleted file mode 100644 index a0a8eab3b2a..00000000000 --- a/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[select-appearance-custom-button-no-datalist.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode.tentative.html.ini b/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode.tentative.html.ini deleted file mode 100644 index 5bc744af70b..00000000000 --- a/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[select-appearance-dark-mode.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html.ini b/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html.ini deleted file mode 100644 index 9aa406ec68c..00000000000 --- a/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[select-appearance-no-button-custom-datalist.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html.ini b/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html.ini deleted file mode 100644 index b2de1c98775..00000000000 --- a/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[select-appearance-no-button-no-datalist.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html.ini b/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html.ini deleted file mode 100644 index 3b64ad3a46a..00000000000 --- a/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[select-appearance-writing-mode-vertical-lr.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html.ini b/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html.ini deleted file mode 100644 index a3843b0849b..00000000000 --- a/tests/wpt/meta/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[select-appearance-writing-mode-vertical-rl.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html.ini b/tests/wpt/meta/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html.ini deleted file mode 100644 index 83afdb3d551..00000000000 --- a/tests/wpt/meta/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[selectlist-option-arbitrary-content-displayed.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/semantics/popovers/popover-dialog-crash.html.ini b/tests/wpt/meta/html/semantics/popovers/popover-dialog-crash.html.ini deleted file mode 100644 index e01429a48a2..00000000000 --- a/tests/wpt/meta/html/semantics/popovers/popover-dialog-crash.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[popover-dialog-crash.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/semantics/popovers/popover-hint-crash.tentative.html.ini b/tests/wpt/meta/html/semantics/popovers/popover-hint-crash.tentative.html.ini deleted file mode 100644 index 321a2116951..00000000000 --- a/tests/wpt/meta/html/semantics/popovers/popover-hint-crash.tentative.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[popover-hint-crash.tentative.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/semantics/popovers/popover-manual-crash.html.ini b/tests/wpt/meta/html/semantics/popovers/popover-manual-crash.html.ini deleted file mode 100644 index 72f788df367..00000000000 --- a/tests/wpt/meta/html/semantics/popovers/popover-manual-crash.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[popover-manual-crash.html] - expected: TIMEOUT diff --git a/tests/wpt/meta/html/syntax/parsing/DOMContentLoaded-defer.html.ini b/tests/wpt/meta/html/syntax/parsing/DOMContentLoaded-defer.html.ini deleted file mode 100644 index b8bdf33cb65..00000000000 --- a/tests/wpt/meta/html/syntax/parsing/DOMContentLoaded-defer.html.ini +++ /dev/null @@ -1,3 +0,0 @@ -[DOMContentLoaded-defer.html] - [The end: DOMContentLoaded and defer scripts] - expected: FAIL diff --git a/tests/wpt/meta-legacy-layout/html/webappapis/dynamic-markup-insertion/document-write/module-delayed.html.ini b/tests/wpt/meta/html/webappapis/dynamic-markup-insertion/document-write/module-delayed.html.ini index fc0233f5241..fc0233f5241 100644 --- a/tests/wpt/meta-legacy-layout/html/webappapis/dynamic-markup-insertion/document-write/module-delayed.html.ini +++ b/tests/wpt/meta/html/webappapis/dynamic-markup-insertion/document-write/module-delayed.html.ini diff --git a/tests/wpt/meta/webxr/depth-sensing/depth_sensing_preferences.https.html.ini b/tests/wpt/meta/webxr/depth-sensing/depth_sensing_preferences.https.html.ini new file mode 100644 index 00000000000..59e6de0a2e8 --- /dev/null +++ b/tests/wpt/meta/webxr/depth-sensing/depth_sensing_preferences.https.html.ini @@ -0,0 +1,36 @@ +[depth_sensing_preferences.https.html] + [depthSensing - Required - Fully populated grants session] + expected: FAIL + + [depthSensing - Required - Empty usage grants session] + expected: FAIL + + [depthSensing - Required - Empty format grants session] + expected: FAIL + + [depthSensing - Required - Empty usage and format grants session] + expected: FAIL + + [depthSensing - Required - Missing usage rejects session] + expected: FAIL + + [depthSensing - Required - Missing format rejects session] + expected: FAIL + + [depthSensing - Required - Missing usage and format rejects session] + expected: FAIL + + [depthSensing - Required - Missing configuration rejects session] + expected: FAIL + + [depthSensing - Optional - Missing usage optional still rejects session] + expected: FAIL + + [depthSensing - Optional - Missing format optional still rejects session] + expected: FAIL + + [depthSensing - Optional - Missing usage and format optional still rejects session] + expected: FAIL + + [depthSensing - Optional - Missing configuration optional grants session without depth] + expected: FAIL diff --git a/tests/wpt/tests/.well-known/attribution-reporting/debug/report-aggregate-attribution b/tests/wpt/tests/.well-known/attribution-reporting/debug/report-aggregate-attribution index 9a5de3bdf57..2f07defd847 100644 --- a/tests/wpt/tests/.well-known/attribution-reporting/debug/report-aggregate-attribution +++ b/tests/wpt/tests/.well-known/attribution-reporting/debug/report-aggregate-attribution @@ -1,4 +1,4 @@ -"""Endpoint to receive and return aggregatable debug reports.""" +"""Endpoint to receive and return attribution-success aggregatable reports.""" from importlib import import_module reports = import_module('attribution-reporting.resources.reports') diff --git a/tests/wpt/tests/.well-known/attribution-reporting/debug/report-aggregate-debug b/tests/wpt/tests/.well-known/attribution-reporting/debug/report-aggregate-debug new file mode 100644 index 00000000000..9a5de3bdf57 --- /dev/null +++ b/tests/wpt/tests/.well-known/attribution-reporting/debug/report-aggregate-debug @@ -0,0 +1,8 @@ +"""Endpoint to receive and return aggregatable debug reports.""" +from importlib import import_module + +reports = import_module('attribution-reporting.resources.reports') + + +def main(request, response): + return reports.handle_reports(request) diff --git a/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore.any.js b/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore.any.js new file mode 100644 index 00000000000..5ce345e8b17 --- /dev/null +++ b/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore.any.js @@ -0,0 +1,159 @@ +// META: global=window,worker +// META: title=IDBCursor.advance() +// META: script=resources/support.js +// @author Microsoft <https://www.microsoft.com> +// @author Intel <http://www.intel.com> + +'use strict'; + +function createAndPopulateObjectStore(db, records) { + let objStore = db.createObjectStore("store", { keyPath: "pKey" }); + for (let i = 0; i < records.length; i++) { + objStore.add(records[i]); + } + return objStore; +} + +function setOnUpgradeNeeded(dbObj, records) { + return function (event) { + dbObj.db = event.target.result; + createAndPopulateObjectStore(dbObj.db, records); + }; +} + +async_test(t => { + let dbObj = {}; + let count = 0; + const records = [ + { pKey: "primaryKey_0" }, + { pKey: "primaryKey_1" }, + { pKey: "primaryKey_2" }, + { pKey: "primaryKey_3" } + ]; + + let open_rq = createdb(t); + open_rq.onupgradeneeded = setOnUpgradeNeeded(dbObj, records); + + open_rq.onsuccess = function (e) { + let cursor_rq = dbObj.db.transaction("store", "readonly", { durability: 'relaxed' }) + .objectStore("store") + .openCursor(); + + cursor_rq.onsuccess = t.step_func(function (e) { + let cursor = e.target.result; + assert_true(cursor instanceof IDBCursor); + + switch (count) { + case 0: + count += 3; + cursor.advance(3); + break; + case 3: + assert_equals(cursor.value.pKey, records[count].pKey, "cursor.value.pKey"); + t.done(); + break; + default: + assert_unreached("unexpected count"); + break; + } + }); + } +}, "object store - iterate cursor number of times specified by count"); + +async_test(t => { + let dbObj = {}; + const records = [ + { pKey: "primaryKey_0" }, + { pKey: "primaryKey_1" } + ]; + + let open_rq = createdb(t); + open_rq.onupgradeneeded = setOnUpgradeNeeded(dbObj, records); + + open_rq.onsuccess = function (event) { + let txn = dbObj.db.transaction("store", "readwrite", { durability: 'relaxed' }); + let rq = txn.objectStore("store").openCursor(); + rq.onsuccess = t.step_func(function (event) { + let cursor = event.target.result; + assert_true(cursor instanceof IDBCursor); + + assert_throws_js(TypeError, + function () { cursor.advance(0); }); + t.done(); + }); + } +}, "Calling advance() with count argument 0 should throw TypeError."); + +async_test(t => { + let dbObj = {}; + const records = [ + { pKey: "primaryKey_0" }, + { pKey: "primaryKey_1" } + ]; + + let open_rq = createdb(t); + open_rq.onupgradeneeded = setOnUpgradeNeeded(dbObj, records); + + open_rq.onsuccess = function (event) { + let txn = dbObj.db.transaction("store", "readwrite", { durability: 'relaxed' }); + let rq = txn.objectStore("store").openCursor(); + rq.onsuccess = t.step_func(function (event) { + let cursor = event.target.result; + assert_true(cursor instanceof IDBCursor); + + event.target.transaction.abort(); + assert_throws_dom("TransactionInactiveError", + function () { cursor.advance(1); }); + t.done(); + }); + } +}, "Calling advance() should throws an exception TransactionInactiveError when the transaction is not active"); + +async_test(t => { + let dbObj = {}; + const records = [ + { pKey: "primaryKey_0" }, + { pKey: "primaryKey_1" } + ]; + + let open_rq = createdb(t); + open_rq.onupgradeneeded = setOnUpgradeNeeded(dbObj, records); + + open_rq.onsuccess = function (event) { + let txn = dbObj.db.transaction("store", "readwrite", { durability: 'relaxed' }); + let rq = txn.objectStore("store").openCursor(); + rq.onsuccess = t.step_func(function (event) { + let cursor = event.target.result; + assert_true(cursor instanceof IDBCursor); + + cursor.advance(1); + assert_throws_dom("InvalidStateError", + function () { cursor.advance(1); }); + t.done(); + }); + } +}, "Calling advance() should throw DOMException when the cursor is currently being iterated."); + +async_test(t => { + let db; + const records = [ + { pKey: "primaryKey_0" }, + { pKey: "primaryKey_1" } + ]; + + let open_rq = createdb(t); + open_rq.onupgradeneeded = function (event) { + db = event.target.result; + let objStore = createAndPopulateObjectStore(db, records); + let rq = objStore.openCursor(); + rq.onsuccess = t.step_func(function (event) { + let cursor = event.target.result; + assert_true(cursor instanceof IDBCursor, "cursor exist"); + + db.deleteObjectStore("store"); + assert_throws_dom("InvalidStateError", + function () { cursor.advance(1); }); + t.done(); + }); + } +}, "If the cursor's source or effective object store has been deleted, the implementation MUST throw a DOMException of type InvalidStateError"); diff --git a/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore.htm b/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore.htm deleted file mode 100644 index c9226c5667a..00000000000 --- a/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore.htm +++ /dev/null @@ -1,54 +0,0 @@ -<!DOCTYPE html> -<title> IDBCursor.advance() - object store - iterate cursor number of times specified by count </title> -<link rel="author" title="Microsoft" href="http://www.microsoft.com"> -<script src=/resources/testharness.js></script> -<script src=/resources/testharnessreport.js></script> -<script src=resources/support.js></script> - -<script> - var db, - count = 0, - t = async_test(), - records = [ { pKey: "primaryKey_0" }, - { pKey: "primaryKey_1" }, - { pKey: "primaryKey_2" }, - { pKey: "primaryKey_3" }]; - - var open_rq = createdb(t); - open_rq.onupgradeneeded = function(e) { - db = e.target.result; - var store = db.createObjectStore("test", {keyPath:"pKey"}); - - for(var i = 0; i < records.length; i++) { - store.add(records[i]); - } - }; - - open_rq.onsuccess = function (e) { - var cursor_rq = db.transaction("test", "readonly", {durability: 'relaxed'}) - .objectStore("test") - .openCursor(); - - cursor_rq.onsuccess = t.step_func(function(e) { - var cursor = e.target.result; - assert_true(cursor instanceof IDBCursor); - - switch(count) { - case 0: - count += 3; - cursor.advance(3); - break; - case 3: - assert_equals(cursor.value.pKey, records[count].pKey, "cursor.value.pKey"); - t.done(); - break; - default: - assert_unreached("unexpected count"); - break; - } - }); - } - -</script> - -<div id=log> </div> diff --git a/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore2.htm b/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore2.htm deleted file mode 100644 index 3d46f0c6755..00000000000 --- a/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore2.htm +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>IDBCursor.advance() - object store - throw TypeError</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="help" href="https://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html#widl-IDBCursor-advance-void-unsigned-long-count"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="resources/support.js"></script> -<div id="log"></div> -<script> - var db, - t = async_test(), - records = [{ pKey: "primaryKey_0"}, - { pKey: "primaryKey_1"}]; - - var open_rq = createdb(t); - open_rq.onupgradeneeded = function (event) { - db = event.target.result; - var objStore = db.createObjectStore("store", {keyPath:"pKey"}); - for (var i = 0; i < records.length; i++) { - objStore.add(records[i]); - } - } - - open_rq.onsuccess = function (event) { - var txn = db.transaction("store", "readwrite", {durability: 'relaxed'}); - var rq = txn.objectStore("store").openCursor(); - rq.onsuccess = t.step_func(function(event) { - var cursor = event.target.result; - assert_true(cursor instanceof IDBCursor); - - assert_throws_js(TypeError, function() { - cursor.advance(0); - }, "Calling advance() with count argument 0 should throw TypeError."); - - t.done(); - }); - } -</script> - diff --git a/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore3.htm b/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore3.htm deleted file mode 100644 index c91e4acaab5..00000000000 --- a/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore3.htm +++ /dev/null @@ -1,42 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>IDBCursor.advance() - object store - throw TransactionInactiveError</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="help" href="https://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html#widl-IDBCursor-advance-void-unsigned-long-count"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="resources/support.js"></script> -<div id="log"></div> -<script> - var db, - t = async_test(), - records = [{ pKey: "primaryKey_0"}, - { pKey: "primaryKey_1"}]; - - var open_rq = createdb(t); - open_rq.onupgradeneeded = function (event) { - db = event.target.result; - var objStore = db.createObjectStore("store", {keyPath:"pKey"}); - for (var i = 0; i < records.length; i++) { - objStore.add(records[i]); - } - } - - open_rq.onsuccess = function (event) { - var txn = db.transaction("store", "readwrite", {durability: 'relaxed'}); - var rq = txn.objectStore("store").openCursor(); - rq.onsuccess = t.step_func(function(event) { - var cursor = event.target.result; - assert_true(cursor instanceof IDBCursor); - - event.target.transaction.abort(); - assert_throws_dom("TransactionInactiveError", function() { - cursor.advance(1); - }, "Calling advance() should throws an exception TransactionInactiveError when the transaction is not active"); - - t.done(); - }); - } - -</script> - diff --git a/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore4.htm b/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore4.htm deleted file mode 100644 index 766a56daf41..00000000000 --- a/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore4.htm +++ /dev/null @@ -1,41 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>IDBCursor.advance() - object store - throw InvalidStateError</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="help" href="https://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html#widl-IDBCursor-advance-void-unsigned-long-count"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="resources/support.js"></script> -<div id="log"></div> -<script> - var db, - t = async_test(), - records = [{ pKey: "primaryKey_0"}, - { pKey: "primaryKey_1"}]; - - var open_rq = createdb(t); - open_rq.onupgradeneeded = function (event) { - db = event.target.result; - var objStore = db.createObjectStore("store", {keyPath:"pKey"}); - for (var i = 0; i < records.length; i++) { - objStore.add(records[i]); - } - } - - open_rq.onsuccess = function (event) { - var txn = db.transaction("store", "readwrite", {durability: 'relaxed'}); - var rq = txn.objectStore("store").openCursor(); - rq.onsuccess = t.step_func(function(event) { - var cursor = event.target.result; - assert_true(cursor instanceof IDBCursor); - - cursor.advance(1); - assert_throws_dom("InvalidStateError", function() { - cursor.advance(1); - }, "Calling advance() should throw DOMException when the cursor is currently being iterated."); - - t.done(); - }); - } -</script> - diff --git a/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore5.htm b/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore5.htm deleted file mode 100644 index 2c6fa640aed..00000000000 --- a/tests/wpt/tests/IndexedDB/idbcursor_advance_objectstore5.htm +++ /dev/null @@ -1,36 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>IDBCursor.advance() - object store - throw InvalidStateError caused by object store been deleted</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="resources/support.js"></script> -<div id="log"></div> -<script> - var db, - t = async_test(), - records = [{ pKey: "primaryKey_0"}, - { pKey: "primaryKey_1"}]; - - var open_rq = createdb(t); - open_rq.onupgradeneeded = function (event) { - db = event.target.result; - var objStore = db.createObjectStore("store", {keyPath:"pKey"}); - for (var i = 0; i < records.length; i++) { - objStore.add(records[i]); - } - var rq = objStore.openCursor(); - rq.onsuccess = t.step_func(function(event) { - var cursor = event.target.result; - assert_true(cursor instanceof IDBCursor, "cursor exist"); - - db.deleteObjectStore("store"); - assert_throws_dom("InvalidStateError", function() { - cursor.advance(1); - }, "If the cursor's source or effective object store has been deleted, the implementation MUST throw a DOMException of type InvalidStateError"); - - t.done(); - }); - } -</script> - diff --git a/tests/wpt/tests/accessibility/crashtests/image-with-detached-text-child.html b/tests/wpt/tests/accessibility/crashtests/image-with-detached-text-child.html new file mode 100644 index 00000000000..64f5ab46939 --- /dev/null +++ b/tests/wpt/tests/accessibility/crashtests/image-with-detached-text-child.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="test-wait"> +<body> +<div style="display:none"> + <map name="map2">x</map> +</div> +<img usemap="#map2"> +<span class=removeme></span> +</body> +<style> +/* The empty declarations are needed to repro the crash */ +div + div { } +.doesnotexist + div { } +</style> + +<script> +document.addEventListener('DOMContentLoaded', () => { + requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.querySelector('.removeme').remove(); + document.documentElement.className = ''; + }); + }); +}); +</script> + +</html> diff --git a/tests/wpt/tests/attribution-reporting/aggregatable-debug/simple-source-aggregatable-debug-report.sub.https.html b/tests/wpt/tests/attribution-reporting/aggregatable-debug/simple-source-aggregatable-debug-report.sub.https.html new file mode 100644 index 00000000000..9b5d6fcb4e0 --- /dev/null +++ b/tests/wpt/tests/attribution-reporting/aggregatable-debug/simple-source-aggregatable-debug-report.sub.https.html @@ -0,0 +1,51 @@ +<!doctype html> +<meta charset=utf-8> +<meta name=timeout content=long> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/attribution-reporting/resources/helpers.js"></script> +<script> +attribution_reporting_promise_test(async t => { + const host = 'https://{{host}}'; + + registerAttributionSrcByImg(createRedirectChain([ + { + source: { + destination: host, + aggregatable_debug_reporting: { + budget: 1024, + key_piece: '0x5', + debug_data: [ + { + types: ['source-success', 'source-noised'], + key_piece: '0x40', + value: 123 + } + ] + } + }, + }, + ])); + + const payload = await pollAggregatableDebugReports(); + assert_equals(payload.reports.length, 1); + const report = JSON.parse(payload.reports[0].body); + assert_own_property(report, 'shared_info'); + const shared_info = JSON.parse(report.shared_info); + assert_own_property(shared_info, 'api'); + assert_equals(shared_info.api, 'attribution-reporting-debug'); + assert_own_property(shared_info, 'report_id'); + assert_own_property(shared_info, 'reporting_origin'); + assert_own_property(shared_info, 'scheduled_report_time'); + assert_own_property(shared_info, 'version'); + assert_equals(shared_info.version, '0.1'); + assert_own_property(shared_info, 'attribution_destination'); + assert_equals(shared_info.attribution_destination, host); + assert_not_own_property(shared_info, 'source_registration_time'); + assert_own_property(report, 'aggregation_service_payloads'); + assert_equals(report.aggregation_service_payloads.length, 1); + const aggregation_service_payload = report.aggregation_service_payloads[0]; + assert_own_property(aggregation_service_payload, 'payload'); + assert_own_property(aggregation_service_payload, 'key_id'); +}, 'Aggregatable debug report is received.'); +</script> diff --git a/tests/wpt/tests/attribution-reporting/aggregatable-debug/simple-trigger-aggregatable-debug-report.sub.https.html b/tests/wpt/tests/attribution-reporting/aggregatable-debug/simple-trigger-aggregatable-debug-report.sub.https.html new file mode 100644 index 00000000000..4dbf7b39a7b --- /dev/null +++ b/tests/wpt/tests/attribution-reporting/aggregatable-debug/simple-trigger-aggregatable-debug-report.sub.https.html @@ -0,0 +1,49 @@ +<!doctype html> +<meta charset=utf-8> +<meta name=timeout content=long> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/attribution-reporting/resources/helpers.js"></script> +<script> +attribution_reporting_promise_test(async t => { + const host = 'https://{{host}}'; + + registerAttributionSrcByImg(createRedirectChain([ + { + trigger: { + aggregatable_debug_reporting: { + key_piece: '0x5', + debug_data: [ + { + types: ['trigger-no-matching-source'], + key_piece: '0x40', + value: 123 + } + ] + } + }, + }, + ])); + + const payload = await pollAggregatableDebugReports(); + assert_equals(payload.reports.length, 1); + const report = JSON.parse(payload.reports[0].body); + assert_own_property(report, 'shared_info'); + const shared_info = JSON.parse(report.shared_info); + assert_own_property(shared_info, 'api'); + assert_equals(shared_info.api, 'attribution-reporting-debug'); + assert_own_property(shared_info, 'report_id'); + assert_own_property(shared_info, 'reporting_origin'); + assert_own_property(shared_info, 'scheduled_report_time'); + assert_own_property(shared_info, 'version'); + assert_equals(shared_info.version, '0.1'); + assert_own_property(shared_info, 'attribution_destination'); + assert_equals(shared_info.attribution_destination, host); + assert_not_own_property(shared_info, 'source_registration_time'); + assert_own_property(report, 'aggregation_service_payloads'); + assert_equals(report.aggregation_service_payloads.length, 1); + const aggregation_service_payload = report.aggregation_service_payloads[0]; + assert_own_property(aggregation_service_payload, 'payload'); + assert_own_property(aggregation_service_payload, 'key_id'); +}, 'Aggregatable debug report is received.'); +</script> diff --git a/tests/wpt/tests/attribution-reporting/resources/helpers.js b/tests/wpt/tests/attribution-reporting/resources/helpers.js index 054df6b9729..7157742e6e5 100644 --- a/tests/wpt/tests/attribution-reporting/resources/helpers.js +++ b/tests/wpt/tests/attribution-reporting/resources/helpers.js @@ -16,8 +16,9 @@ const resetWptServer = () => resetAttributionReports(eventLevelReportsUrl), resetAttributionReports(aggregatableReportsUrl), resetAttributionReports(eventLevelDebugReportsUrl), - resetAttributionReports(aggregatableDebugReportsUrl), + resetAttributionReports(attributionSuccessDebugAggregatableReportsUrl), resetAttributionReports(verboseDebugReportsUrl), + resetAttributionReports(aggregatableDebugReportsUrl), resetRegisteredSources(), ]); @@ -27,10 +28,12 @@ const eventLevelDebugReportsUrl = '/.well-known/attribution-reporting/debug/report-event-attribution'; const aggregatableReportsUrl = '/.well-known/attribution-reporting/report-aggregate-attribution'; -const aggregatableDebugReportsUrl = +const attributionSuccessDebugAggregatableReportsUrl = '/.well-known/attribution-reporting/debug/report-aggregate-attribution'; const verboseDebugReportsUrl = '/.well-known/attribution-reporting/debug/verbose'; +const aggregatableDebugReportsUrl = + '/.well-known/attribution-reporting/debug/report-aggregate-debug'; const attributionDebugCookie = 'ar_debug=1;Secure;HttpOnly;SameSite=None;Path=/'; @@ -348,10 +351,12 @@ const pollEventLevelDebugReports = (origin) => pollAttributionReports(eventLevelDebugReportsUrl, origin); const pollAggregatableReports = (origin) => pollAttributionReports(aggregatableReportsUrl, origin); -const pollAggregatableDebugReports = (origin) => - pollAttributionReports(aggregatableDebugReportsUrl, origin); +const pollAttributionSuccessDebugAggregatableReports = (origin) => + pollAttributionReports(attributionSuccessDebugAggregatableReportsUrl, origin); const pollVerboseDebugReports = (origin) => pollAttributionReports(verboseDebugReportsUrl, origin); +const pollAggregatableDebugReports = (origin) => + pollAttributionReports(aggregatableDebugReportsUrl, origin); const validateReportHeaders = headers => { assert_array_equals(headers['content-type'], ['application/json']); diff --git a/tests/wpt/tests/badging/badge-error.https.html b/tests/wpt/tests/badging/badge-error.https.html index 3da5cf61e83..123cd6dc764 100644 --- a/tests/wpt/tests/badging/badge-error.https.html +++ b/tests/wpt/tests/badging/badge-error.https.html @@ -3,34 +3,48 @@ <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script> - -promise_test(t => { - return promise_rejects_js(t, TypeError, navigator.setAppBadge(-1)); -}, "Negative value not allowed"); - -promise_test(t => { - return promise_rejects_js(t, TypeError, navigator.setAppBadge( - Number.MAX_SAFE_INTEGER + 1)); -}, "Value too large (2^53)"); - -promise_test(t => { - return promise_rejects_js(t, TypeError, navigator.setAppBadge(Infinity)); -}, "Positive infinity"); - -promise_test(t => { - return promise_rejects_js(t, TypeError, navigator.setAppBadge(-Infinity)); -}, "Negative infinity"); - -promise_test(t => { - return promise_rejects_js(t, TypeError, navigator.setAppBadge(NaN)); -}, "NaN"); - -promise_test(t => { - return promise_rejects_js(t, TypeError, navigator.setAppBadge("Foo")); -}, 'Cannot convert to long: "Foo"'); - -promise_test(t => { - return promise_rejects_js(t, TypeError, navigator.setAppBadge({})); -}, "Cannot convert to long: object"); - + promise_test(async (t) => { + await promise_rejects_js( + t, + TypeError, + navigator.setAppBadge(-1), + "Reject with TypeError if the value is negative" + ); + await promise_rejects_js( + t, + TypeError, + navigator.setAppBadge(Number.MAX_SAFE_INTEGER + 1), + "Reject with TypeError if the value is larger than the maximum safe integer (2^53 - 1)" + ); + await promise_rejects_js( + t, + TypeError, + navigator.setAppBadge(Infinity), + "Reject with TypeError if the value is positive infinity" + ); + await promise_rejects_js( + t, + TypeError, + navigator.setAppBadge(-Infinity), + "Reject with TypeError if the value is negative infinity" + ); + await promise_rejects_js( + t, + TypeError, + navigator.setAppBadge(NaN), + "Reject with TypeError if the value is NaN" + ); + await promise_rejects_js( + t, + TypeError, + navigator.setAppBadge("Foo"), + 'Reject with TypeError if the value cannot be converted to a long: string' + ); + await promise_rejects_js( + t, + TypeError, + navigator.setAppBadge({}), + "Reject with TypeError if the value cannot be converted to a long: object" + ); + }, "Test various invalid input cases for setAppBadge()"); </script> diff --git a/tests/wpt/tests/badging/badge-success.https.html b/tests/wpt/tests/badging/badge-success.https.html index 6a25962e7b9..59a1f8c0944 100644 --- a/tests/wpt/tests/badging/badge-success.https.html +++ b/tests/wpt/tests/badging/badge-success.https.html @@ -3,60 +3,60 @@ <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script> - -promise_test(async t => { - const result = await navigator.setAppBadge(); - assert_equals(result, undefined); -}, "No parameter should show a flag with no numeric value."); - -promise_test(async t => { - const result = await navigator.setAppBadge(undefined); - assert_equals(result, undefined); -}, "undefined should show a flag with no numeric value."); - -promise_test(async t => { - const result = await navigator.setAppBadge(1); - assert_equals(result, undefined); -}, "An integer value of 3 should show the badge vale 3."); - -promise_test(async t => { - const result = await navigator.setAppBadge(10.6); - assert_equals(result, undefined); -}, "Non-whole number should round down to nearest integer (10)."); - -promise_test(async t => { - const result = await navigator.setAppBadge(Number.MAX_SAFE_INTEGER); - assert_equals(result, undefined); -}, "Maximum allowed value (2^53 - 1) should display saturated value: '99+'."); - -promise_test(async t => { - const result = await navigator.setAppBadge(0); - assert_equals(result, undefined); -}, "Set to zero should clear the badge."); - -promise_test(async t => { - const result = await navigator.clearAppBadge(); - assert_equals(result, undefined); -}, "Should clear the badge."); - -promise_test(async t => { - const result = await navigator.setAppBadge(null); - assert_equals(result, undefined); -}, "Setting to null should clear the badge."); - -promise_test(async t => { - const result = await navigator.setAppBadge(false); - assert_equals(result, undefined); -}, "Setting to false should clear the badge."); - -promise_test(async t => { - const result = await navigator.setAppBadge(true); - assert_equals(result, undefined); -}, "Setting to true should display a value of 1."); - -promise_test(async t => { - const result = await navigator.setAppBadge("3"); - assert_equals(result, undefined); -}, "Setting to the string '3' should display a value of 3."); - + // Testing valid input cases + promise_test(async () => { + const numberTestCases = [ + { value: undefined, desc: "undefined" }, + { value: null, desc: "null (coerced to 0)" }, + { value: 1, desc: "integer value of 1" }, + { value: 10.6, desc: "non-whole number" }, + { value: Number.MAX_SAFE_INTEGER, desc: "maximum allowed value" }, + { value: 0, desc: "zero" }, + ]; + + for (const { value, desc } of numberTestCases) { + const result = await navigator.setAppBadge(value); + assert_equals( + result, + undefined, + `Resolves successfully when passed ${desc} as input` + ); + } + }, "Resolves successfully for number input cases"); + + promise_test(async () => { + const stringTestCases = [ + { value: "3", desc: "numeric string '3' (coerced to 3)" }, + { + value: " 300.000 ", + desc: "numeric string ' 300.000 ' (coerced to 300)", + }, + { value: "", desc: "empty string (coerced to 0)" }, + ]; + + for (const { value, desc } of stringTestCases) { + const result = await navigator.setAppBadge(value); + assert_equals( + result, + undefined, + `Resolves successfully when passed ${desc} as input` + ); + } + }, "Resolves successfully for string input cases"); + + promise_test(async () => { + const resultFalse = await navigator.setAppBadge(false); + assert_equals( + resultFalse, + undefined, + "Resolves successfully when passed false as input (coerced to 0)" + ); + + const resultTrue = await navigator.setAppBadge(true); + assert_equals( + resultTrue, + undefined, + "Resolves successfully when passed true as input (coerced to 1)" + ); + }, "Resolves successfully for boolean input cases"); </script> diff --git a/tests/wpt/tests/badging/non-fully-active.https.html b/tests/wpt/tests/badging/non-fully-active.https.html index d870e52273c..ab6ba2336f1 100644 --- a/tests/wpt/tests/badging/non-fully-active.https.html +++ b/tests/wpt/tests/badging/non-fully-active.https.html @@ -4,16 +4,43 @@ <script src="/resources/testharnessreport.js"></script> <body></body> <script> -promise_test(async t => { - const iframe = document.createElement("iframe"); - document.body.appendChild(iframe); - await new Promise(resolve => { - iframe.onload = resolve; - iframe.src = "about:blank"; - }); - const exceptionCtor = iframe.contentWindow.DOMException; - const {navigator: nav} = iframe.contentWindow; - iframe.remove(); - return promise_rejects_dom(t, "InvalidStateError", exceptionCtor, nav.setAppBadge(1)); -}, "badging a non-fully active document should reject with InvalidStateError"); + promise_test(async (t) => { + const iframe = document.createElement("iframe"); + document.body.appendChild(iframe); + await new Promise((resolve) => { + iframe.onload = resolve; + iframe.src = "about:blank"; + }); + const exceptionCtor = iframe.contentWindow.DOMException; + const { navigator: nav } = iframe.contentWindow; + iframe.remove(); + + await promise_rejects_dom( + t, + "InvalidStateError", + exceptionCtor, + nav.setAppBadge() + ); + + await promise_rejects_dom( + t, + "InvalidStateError", + exceptionCtor, + nav.setAppBadge(1) + ); + + await promise_rejects_dom( + t, + "InvalidStateError", + exceptionCtor, + nav.setAppBadge(0) + ); + + await promise_rejects_dom( + t, + "InvalidStateError", + exceptionCtor, + nav.clearAppBadge() + ); + }, "badging a non-fully active document should reject with InvalidStateError"); </script> diff --git a/tests/wpt/tests/css/css-anchor-position/anchor-scroll-scrollable-anchor.html b/tests/wpt/tests/css/css-anchor-position/anchor-scroll-scrollable-anchor.html index c2a256877d4..ffb5b2ef800 100644 --- a/tests/wpt/tests/css/css-anchor-position/anchor-scroll-scrollable-anchor.html +++ b/tests/wpt/tests/css/css-anchor-position/anchor-scroll-scrollable-anchor.html @@ -1,5 +1,6 @@ <!DOCTYPE html> -<title>Basic of anchor positioned scrolling: scroll of a scrollable anchor should not affect anchor positioing</title> +<meta name="fuzzy" content="1;0-50"> +<title>Basic of anchor positioned scrolling: scroll of a scrollable anchor should not affect anchor positioning</title> <link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> <link rel="match" href="anchor-scroll-scrollable-anchor-ref.html"> <style> diff --git a/tests/wpt/tests/css/css-anchor-position/parsing/position-try-options-parsing.html b/tests/wpt/tests/css/css-anchor-position/parsing/position-try-options-parsing.html index 72bc74111bc..375bef170c1 100644 --- a/tests/wpt/tests/css/css-anchor-position/parsing/position-try-options-parsing.html +++ b/tests/wpt/tests/css/css-anchor-position/parsing/position-try-options-parsing.html @@ -25,15 +25,15 @@ test_valid_value("position-try-options", "--bar flip-inline flip-block"); test_valid_value("position-try-options", "flip-inline --foo", "--foo flip-inline"); test_valid_value("position-try-options", "flip-inline flip-start --foo", "--foo flip-inline flip-start"); - test_valid_value("position-try-options", "inset-area(left top)"); - test_valid_value("position-try-options", "inset-area(top left)", "inset-area(left top)"); - test_valid_value("position-try-options", "inset-area(start start)", "inset-area(start)"); - test_valid_value("position-try-options", "inset-area(left), inset-area(right)"); - test_valid_value("position-try-options", "--foo, inset-area(left)"); - test_valid_value("position-try-options", "--foo, inset-area(left), --bar"); - test_valid_value("position-try-options", "--foo, flip-start, inset-area(left)"); - test_valid_value("position-try-options", "--foo flip-start, inset-area(left)"); - test_valid_value("position-try-options", "inset-area(left), --bar flip-start"); + test_valid_value("position-try-options", "left top"); + test_valid_value("position-try-options", "top left", "left top"); + test_valid_value("position-try-options", "start start", "start"); + test_valid_value("position-try-options", "left, right"); + test_valid_value("position-try-options", "--foo, left"); + test_valid_value("position-try-options", "--foo, left, --bar"); + test_valid_value("position-try-options", "--foo, flip-start, left"); + test_valid_value("position-try-options", "--foo flip-start, left"); + test_valid_value("position-try-options", "left, --bar flip-start"); test_invalid_value("position-try-options", "none, flip-start"); test_invalid_value("position-try-options", "flip-block flip-block"); @@ -46,10 +46,9 @@ test_invalid_value("position-try-options", "foo"); test_invalid_value("position-try-options", "flip-start 123"); test_invalid_value("position-try-options", "--foo 123"); - test_invalid_value("position-try-options", "--foo inset-area(left)"); - test_invalid_value("position-try-options", "flip-start inset-area(left)"); - test_invalid_value("position-try-options", "inset-area(left) --foo "); - test_invalid_value("position-try-options", "inset-area(left) flip-start"); + test_invalid_value("position-try-options", "--foo left"); + test_invalid_value("position-try-options", "flip-start left"); + test_invalid_value("position-try-options", "left --foo "); + test_invalid_value("position-try-options", "left flip-start"); test_invalid_value("position-try-options", "--foo, none"); - test_invalid_value("position-try-options", "--foo, inset-area(none)"); </script> diff --git a/tests/wpt/tests/css/css-break/page-break-important.html b/tests/wpt/tests/css/css-break/page-break-important.html new file mode 100644 index 00000000000..778e579ab72 --- /dev/null +++ b/tests/wpt/tests/css/css-break/page-break-important.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Break: !important flag parsing</title> + <link rel="help" href="https://crbug.com/345092067"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <div id="target" style="page-break-before: always !important">Some text.</div> + </body> + <script> +test(() => { + assert_equals(target.style.pageBreakBefore, 'always'); +}); + </script> +</html> diff --git a/tests/wpt/tests/css/css-color/color-contrast-001.html b/tests/wpt/tests/css/css-color/color-contrast-001.html deleted file mode 100644 index d2fd196a33a..00000000000 --- a/tests/wpt/tests/css/css-color/color-contrast-001.html +++ /dev/null @@ -1,17 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Color 5: color-contrast()</title> -<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> -<link rel="help" href="https://www.w3.org/TR/css-color-5/#colorcontrast"> -<link rel="match" href="greensquare-ref.html"> -<meta name="assert" content="green has higher contrast with red than deeppink"> -<style> - .test { background-color: red; width: 12em; height: 6em; margin-top:0} - .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} - .test { background-color: color-contrast(red vs deeppink, #008000)} -</style> -<body> - <p>Test passes if you see a green square, and no red.</p> - <p class="ref"> </p> - <p class="test"> </p> -</body> diff --git a/tests/wpt/tests/css/css-color/parsing/color-computed-color-contrast-function.html b/tests/wpt/tests/css/css-color/parsing/color-computed-color-contrast-function.html deleted file mode 100644 index 74be5ced374..00000000000 --- a/tests/wpt/tests/css/css-color/parsing/color-computed-color-contrast-function.html +++ /dev/null @@ -1,51 +0,0 @@ -<!DOCTYPE html> -<html> -<head> -<meta charset="utf-8"> -<title>CSS Color Level 6: Computation of colors using color-contrast() function syntax</title> -<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> -<link rel="help" href="https://drafts.csswg.org/css-color-6/#colorcontrast"> -<link rel="help" href="https://drafts.csswg.org/css-color-6/#resolving-contrast"> -<link rel="help" href="https://drafts.csswg.org/css-color-6/#serial-color-contrast"> -<meta name="assert" content="computed value of color-contrast() matches expected values"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/css/support/computed-testcommon.js"></script> -</head> -<body> -<div id="target"></div> -<script> - // Test with no specified target contrast - test_computed_value(`color`, `color-contrast(white vs red, blue)`, `rgb(0, 0, 255)`); - test_computed_value(`color`, `color-contrast(white vs blue, red)`, `rgb(0, 0, 255)`); - test_computed_value(`color`, `color-contrast(white vs red, blue, green)`, `rgb(0, 0, 255)`); - test_computed_value(`color`, `color-contrast(white vs white, white)`, `rgb(255, 255, 255)`); - test_computed_value(`color`, `color-contrast(blue vs red, white)`, `rgb(255, 255, 255)`); - test_computed_value(`color`, `color-contrast(red vs blue, white, red)`, `rgb(255, 255, 255)`); - test_computed_value(`color`, `color-contrast(black vs red, blue)`, `rgb(255, 0, 0)`); - test_computed_value(`color`, `color-contrast(black vs blue, red)`, `rgb(255, 0, 0)`); - test_computed_value(`color`, `color-contrast(black vs white, white)`, `rgb(255, 255, 255)`); - test_computed_value(`color`, `color-contrast(red vs blue, rgb(255, 255, 255, .5))`, `rgba(255, 255, 255, 0.5)`); - - // Test with specified target contrast. - test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA)`, `rgb(0, 100, 0)`); // darkgreen - test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA-large)`, `rgb(128, 128, 0)`); // olive - test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA)`, `rgb(128, 0, 0)`); // maroon - test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA-large)`, `rgb(0, 100, 0)`); // darkgreen - test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to 5.8)`, `rgb(128, 0, 0)`); // maroon - - // Test with specified target contrast that none meet. - test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive to 100)`, `rgb(0, 0, 0)`); // black - test_computed_value(`color`, `color-contrast(green vs bisque, darkgoldenrod, olive to 100)`, `rgb(255, 255, 255)`); // white - - // Test non-sRGB colors. - test_computed_value(`color`, `color-contrast(green vs color(display-p3 0 1 0), color(display-p3 0 0 1))`, `color(display-p3 0 1 0)`); - test_computed_value(`color`, `color-contrast(color(display-p3 1 1 0) vs color(display-p3 0 1 0), color(display-p3 0 0 1))`, `color(display-p3 0 0 1)`); - test_computed_value(`color`, `color-contrast(green vs lab(50% -160 160), lch(0.2 50 20deg))`, `lch(0.2 50 20)`); - test_computed_value(`color`, `color-contrast(lab(50% -160 160) vs green, lch(0.2 50 20deg))`, `lch(0.2 50 20)`); - - // Test with extra whitespace - test_computed_value(`color`, `color-contrast( white vs red, blue )`, `rgb(0, 0, 255)`); -</script> -</body> -</html> diff --git a/tests/wpt/tests/css/css-color/parsing/color-invalid-color-contrast-function.html b/tests/wpt/tests/css/css-color/parsing/color-invalid-color-contrast-function.html deleted file mode 100644 index 1ac97926917..00000000000 --- a/tests/wpt/tests/css/css-color/parsing/color-invalid-color-contrast-function.html +++ /dev/null @@ -1,29 +0,0 @@ -<!DOCTYPE html> -<html> -<head> -<meta charset="utf-8"> -<title>CSS Color Level 6: Parsing and serialization of colors using invalid color-contrast() function syntax</title> -<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> -<link rel="help" href="https://drafts.csswg.org/css-color-6/#colorcontrast"> -<link rel="help" href="https://drafts.csswg.org/css-color-6/#resolving-contrast"> -<link rel="help" href="https://drafts.csswg.org/css-color-6/#serial-color-contrast"> -<meta name="assert" content="invalid color-contrast() values fail to parse"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/css/support/parsing-testcommon.js"></script> -</head> -<body> -<script> - test_invalid_value('color', `color-contrast(white vs red)`); - test_invalid_value('color', `color-contrast(white vs red,)`); - test_invalid_value('color', `color-contrast(white vs )`); - test_invalid_value('color', `color-contrast(white)`); - test_invalid_value('color', `color-contrast(white vs red green)`); - test_invalid_value('color', `color-contrast(white vs red, green to)`); - test_invalid_value('color', `color-contrast(white vs red, green to invalid)`); - test_invalid_value('color', `color-contrast(white vs red to AA)`); - test_invalid_value('color', `color-contrast(white vs red, green white)`); - test_invalid_value('color', `color-contrast(white vs red, green to AA white)`); -</script> -</body> -</html> diff --git a/tests/wpt/tests/css/css-color/parsing/color-valid-color-contrast-function.html b/tests/wpt/tests/css/css-color/parsing/color-valid-color-contrast-function.html deleted file mode 100644 index bdb8f0f5888..00000000000 --- a/tests/wpt/tests/css/css-color/parsing/color-valid-color-contrast-function.html +++ /dev/null @@ -1,50 +0,0 @@ -<!DOCTYPE html> -<html> -<head> -<meta charset="utf-8"> -<title>CSS Color Level 6: Parsing and serialization of colors using valid color-contrast() function syntax</title> -<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> -<link rel="help" href="https://drafts.csswg.org/css-color-6/#colorcontrast"> -<link rel="help" href="https://drafts.csswg.org/css-color-6/#resolving-contrast"> -<link rel="help" href="https://drafts.csswg.org/css-color-6/#serial-color-contrast"> -<meta name="assert" content="color-contrast() parses and serializes"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/css/support/parsing-testcommon.js"></script> -</head> -<body> -<script> - // Test with no specified target contrast - test_valid_value(`color`, `color-contrast(white vs red, blue)`, `rgb(0, 0, 255)`); - test_valid_value(`color`, `color-contrast(white vs blue, red)`, `rgb(0, 0, 255)`); - test_valid_value(`color`, `color-contrast(white vs red, blue, green)`, `rgb(0, 0, 255)`); - test_valid_value(`color`, `color-contrast(white vs white, white)`, `rgb(255, 255, 255)`); - test_valid_value(`color`, `color-contrast(blue vs red, white)`, `rgb(255, 255, 255)`); - test_valid_value(`color`, `color-contrast(red vs blue, white, red)`, `rgb(255, 255, 255)`); - test_valid_value(`color`, `color-contrast(black vs red, blue)`, `rgb(255, 0, 0)`); - test_valid_value(`color`, `color-contrast(black vs blue, red)`, `rgb(255, 0, 0)`); - test_valid_value(`color`, `color-contrast(black vs white, white)`, `rgb(255, 255, 255)`); - test_valid_value(`color`, `color-contrast(red vs blue, rgb(255, 255, 255, .5))`, `rgba(255, 255, 255, 0.5)`); - - // Test with specified target contrast. - test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA)`, `rgb(0, 100, 0)`); // darkgreen - test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA-large)`, `rgb(128, 128, 0)`); // olive - test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA)`, `rgb(128, 0, 0)`); // maroon - test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA-large)`, `rgb(0, 100, 0)`); // darkgreen - test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to 5.8)`, `rgb(128, 0, 0)`); // maroon - - // Test with specified target contrast that none meet. - test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive to 100)`, `rgb(0, 0, 0)`); // black - test_valid_value(`color`, `color-contrast(green vs bisque, darkgoldenrod, olive to 100)`, `rgb(255, 255, 255)`); // white - - // Test non-sRGB colors. - test_valid_value(`color`, `color-contrast(green vs color(display-p3 0 1 0), color(display-p3 0 0 1))`, `color(display-p3 0 1 0)`); - test_valid_value(`color`, `color-contrast(color(display-p3 1 1 0) vs color(display-p3 0 1 0), color(display-p3 0 0 1))`, `color(display-p3 0 0 1)`); - test_valid_value(`color`, `color-contrast(green vs lab(50% -160 160), lch(0.2 50 20deg))`, `lch(0.2 50 20)`); - test_valid_value(`color`, `color-contrast(lab(50% -160 160) vs green, lch(0.2 50 20deg))`, `lch(0.2 50 20)`); - - // Test with extra whitespace - test_valid_value(`color`, `color-contrast( white vs red, blue )`, `rgb(0, 0, 255)`); -</script> -</body> -</html> diff --git a/tests/wpt/tests/css/css-color/parsing/color-valid-color-mix-function.html b/tests/wpt/tests/css/css-color/parsing/color-valid-color-mix-function.html index baa6512053f..1f7c7728ab5 100644 --- a/tests/wpt/tests/css/css-color/parsing/color-valid-color-mix-function.html +++ b/tests/wpt/tests/css/css-color/parsing/color-valid-color-mix-function.html @@ -14,6 +14,11 @@ <script src="/css/support/color-testcommon.js"></script> </head> <body> +<style> + #target { + font-size: 10px; + } +</style> <div id="target"></div> <script> // https://github.com/w3c/csswg-drafts/issues/7302: Specified values shouldn't resolve keyword colors or calc values @@ -27,6 +32,7 @@ fuzzy_test_valid_color(`color-mix(in hsl, red 50%, blue)`, `color-mix(in hsl, red, blue)`); fuzzy_test_valid_color(`color-mix(in hsl, red, blue 50%)`, `color-mix(in hsl, red, blue)`); fuzzy_test_valid_color(`color-mix(in lch decreasing hue, red, hsl(120, 100%, 50%))`, `color-mix(in lch decreasing hue, red, rgb(0, 255, 0))`); + fuzzy_test_valid_color(`color-mix(in hsl, red calc(50% * sign(100em - 1px)), blue)`, `color-mix(in hsl, red calc(50% * sign(100em - 1px)), blue)`); fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46), rgb(133, 102, 71))`); fuzzy_test_valid_color(`color-mix(in hsl, 50% hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46), rgb(133, 102, 71))`); diff --git a/tests/wpt/tests/css/css-contain/container-queries/container-for-shadow-dom.html b/tests/wpt/tests/css/css-contain/container-queries/container-for-shadow-dom.html index b136af902e5..c3ae9612546 100644 --- a/tests/wpt/tests/css/css-contain/container-queries/container-for-shadow-dom.html +++ b/tests/wpt/tests/css/css-contain/container-queries/container-for-shadow-dom.html @@ -49,7 +49,7 @@ </div> </template> <style> - @container (width = 400px) { + @container (width = 200px) { #t2 { color: green; } } </style> @@ -102,7 +102,7 @@ </div> </template> <style> - @container (width = 400px) { + @container (width = 200px) { #inclusive-ancestor-part > div::part(part) { color: green; } } </style> @@ -118,7 +118,7 @@ width: 200px; container-type: inline-size; } - @container (width = 200px) { + @container (width = 400px) { ::slotted(#t6)::before { content: "X"; color: green; @@ -158,7 +158,7 @@ <div id="inclusive-ancestor-part-before"> <style> - @container (width = 400px) { + @container (width = 200px) { #inclusive-ancestor-part-before > div::part(part)::before { content: "X"; color: green; @@ -182,7 +182,7 @@ <div id="inclusive-ancestor-inner-part"> <style> - @container (width = 400px) { + @container (width = 200px) { #inclusive-ancestor-inner-part > div::part(inner-part) { color: green; } } </style> @@ -236,7 +236,7 @@ width: 200px; container-type: inline-size; } - #t11 { color: green; } + #t11 { color: red; } </style> <div> <span id="t11" part="part"></span> @@ -244,7 +244,7 @@ </template> <style> @container (width = 200px) { - #no-container-for-part > div::part(part) { color: red; } + #no-container-for-part > div::part(part) { color: green; } } </style> </div> @@ -258,7 +258,7 @@ width: 200px; container-type: inline-size; } - @container (width = 400px) { + @container (width = 200px) { :host::part(part) { color: green; } } </style> @@ -286,7 +286,7 @@ test(() => { const t2 = document.querySelector("#t2"); assert_equals(getComputedStyle(t2).color, green); - }, "Match container in same tree, not walking flat tree ancestors"); + }, "Match container in walking flat tree ancestors"); test(() => { const t3 = document.querySelector("#t3"); diff --git a/tests/wpt/tests/css/css-contain/container-queries/container-units-shadow.html b/tests/wpt/tests/css/css-contain/container-queries/container-units-shadow.html index 0e4172c90ee..66ae1c976cc 100644 --- a/tests/wpt/tests/css/css-contain/container-queries/container-units-shadow.html +++ b/tests/wpt/tests/css/css-contain/container-queries/container-units-shadow.html @@ -51,13 +51,13 @@ test(() => { let cs = getComputedStyle(direct); - assert_equals(cs.width, '100px'); - assert_equals(cs.height, '100px'); - }, 'Direct slotted child queries shadow-including ancestors'); + assert_equals(cs.width, '15px'); + assert_equals(cs.height, '15px'); + }, 'Direct slotted child queries flat tree'); test(() => { let cs = getComputedStyle(nondirect); - assert_equals(cs.width, '10px'); // #direct - assert_equals(cs.height, '20px'); // #outer - }, 'Nondirect slotted child queries shadow-including ancestors'); + assert_equals(cs.width, '1.5px'); + assert_equals(cs.height, '3px'); + }, 'Nondirect slotted child queries flat tree ancestors'); </script> diff --git a/tests/wpt/tests/css/css-contain/container-type-important.html b/tests/wpt/tests/css/css-contain/container-type-important.html new file mode 100644 index 00000000000..e95a5099840 --- /dev/null +++ b/tests/wpt/tests/css/css-contain/container-type-important.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Containers: !important flag parsing</title> + <link rel="help" href="https://crbug.com/343249146"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <div id="target" style="container-type: size !important">Some text.</div> + </body> + <script> +test(() => { + assert_equals(target.style.containerType, 'size'); +}); + </script> +</html> diff --git a/tests/wpt/tests/css/css-display/display-contents-details.html b/tests/wpt/tests/css/css-display/display-contents-details.html index 0dcda91ab38..927621bba51 100644 --- a/tests/wpt/tests/css/css-display/display-contents-details.html +++ b/tests/wpt/tests/css/css-display/display-contents-details.html @@ -11,6 +11,9 @@ border: 10px solid red; display: contents; } + details::details-content { + display: contents; + } </style> <p>You should see the word PASS below.</p> P<details open><summary>A</summary><span>S</span></details>S diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001-ref.html new file mode 100644 index 00000000000..7614329e2e5 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.spacer { + background: lightgray; + block-size: 100px; +} +.target { + font-family: Ahem; + font-size: 100px; + line-height: 2; + position: relative; + top: -50px; + height: 100px; +} +.atomic { + display: inline-block; + background: lime; +} +</style> +<div class="spacer"></div> +<div class="target"> + <span class="atomic">X</span> +</div> +<div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001.html new file mode 100644 index 00000000000..5f2d01c7dc7 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Test the `text-box-trim` isn't propagated into atomic inlines</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<link rel="match" href="text-box-trim-atomic-inline-001-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.spacer { + background: lightgray; + block-size: 100px; +} +.target { + font-family: Ahem; + font-size: 100px; + line-height: 2; + text-box-trim: both; + text-box-edge: text; +} +.atomic { + display: inline-block; + background: lime; +} +</style> +<div class="spacer"></div> +<div class="target"> + <span class="atomic">X</span> +</div> +<div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001-ref.html new file mode 100644 index 00000000000..ef0c90d6644 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.spacer { + background: lightgray; + block-size: 50px; +} +.target { + font-family: Ahem; + font-size: 50px; + line-height: 2; + height: 275px; +} +</style> +<div class="spacer"></div> +<div class="target"> + A<br> + B<br> + C +</div> +<div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001.html new file mode 100644 index 00000000000..7b008a21f04 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<link rel="match" href="text-box-trim-block-in-inline-end-001-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.spacer { + background: lightgray; + block-size: 50px; +} +.target { + font-family: Ahem; + font-size: 50px; + line-height: 2; + text-box-trim: end; + text-box-edge: text; +} +</style> +<div class="spacer"></div> +<div class="target"> + <span> + <div>A<br>B</div> + </span> + C +</div> +<div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-002.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-002.html new file mode 100644 index 00000000000..a1711e309cc --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<link rel="match" href="text-box-trim-block-in-inline-end-001-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.spacer { + background: lightgray; + block-size: 50px; +} +.target { + font-family: Ahem; + font-size: 50px; + line-height: 2; + text-box-trim: end; + text-box-edge: text; +} +</style> +<div class="spacer"></div> +<div class="target"> + <span> + <div>A<br>B<br>C</div> + </span> +</div> +<div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-003.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-003.html new file mode 100644 index 00000000000..8ace67f78f6 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<link rel="match" href="text-box-trim-block-in-inline-end-001-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.spacer { + background: lightgray; + block-size: 50px; +} +.target { + font-family: Ahem; + font-size: 50px; + line-height: 2; + text-box-trim: end; + text-box-edge: text; +} +</style> +<div class="spacer"></div> +<div class="target"> + <span> + <div>A</div> + </span> + <span> + <div>B</div> + </span> + <span> + <div>C</div> + </span> +</div> +<div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-004.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-004.html new file mode 100644 index 00000000000..3c682a211f9 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<link rel="match" href="text-box-trim-block-in-inline-end-001-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.spacer { + background: lightgray; + block-size: 50px; +} +.target { + font-family: Ahem; + font-size: 50px; + line-height: 2; + text-box-trim: end; + text-box-edge: text; +} +</style> +<div class="spacer"></div> +<div class="target"> + <div> + <span> + <div>A</div> + </span> + <span> + <div>B</div> + </span> + <span> + <div>C</div> + </span> + </div> + <div></div> +</div> +<div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-003.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-003.html new file mode 100644 index 00000000000..5227a4d13aa --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<link rel="match" href="text-box-trim-block-in-inline-start-001-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.spacer { + background: lightgray; + block-size: 50px; +} +.target { + font-family: Ahem; + font-size: 50px; + line-height: 2; + text-box-trim: start; + text-box-edge: text; +} +</style> +<div class="spacer"></div> +<div class="target"> + <span> + <div> + A + </div> + </span> + <span> + <div> + A + </div> + </span> + A +</div> +<div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-line-clamp-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-line-clamp-001-ref.html new file mode 100644 index 00000000000..e8d6ba60b18 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-line-clamp-001-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.spacer { + background: lightgray; + block-size: 100px; +} +.target { + font-family: Ahem; + font-size: 50px; + line-height: 2; + height: 275px; +} +.clamp { + line-clamp: 3; +} +@supports not (line-clamp: 3) { + .clamp { + -webkit-line-clamp: 3; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + } +} +</style> +<div class="spacer"></div> +<div class="target clamp"> + A<br> + B<br> + C<br> + D</div> +<div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-line-clamp-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-line-clamp-001.html new file mode 100644 index 00000000000..e0af246db0e --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-line-clamp-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<link rel="match" href="text-box-trim-line-clamp-001-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.spacer { + background: lightgray; + block-size: 100px; +} +.target { + font-family: Ahem; + font-size: 50px; + line-height: 2; + text-box-trim: end; + text-box-edge: text; +} +.clamp { + line-clamp: 3; +} +@supports not (line-clamp: 3) { + .clamp { + -webkit-line-clamp: 3; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + } +} +</style> +<div class="spacer"></div> +<div class="target clamp"> + A<br> + B<br> + C<br> + D</div> +<div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-om-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-om-001.html new file mode 100644 index 00000000000..da66de00555 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-om-001.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +@font-face { + font-family: test-font; + src: url(resources/cap-x-height.ttf); +} +.spacer { + background: lightgray; + block-size: 100px; +} +#target { + font-family: test-font; + font-size: 100px; + line-height: 2; + text-box-trim: both; + text-box-edge: ex alphabetic; +} +</style> +<div id="container"> + <div class="spacer"></div> + <div id="target">A</div> + <div class="spacer"></div> +</div> +<script> +function run_tests(test_names) { + const container = document.getElementById('container'); + const container_bounds = container.getBoundingClientRect(); + const target = document.getElementById('target'); + const target_bounds = target.getBoundingClientRect(); + + // Test `getBoundingClientRect()` returns the trimmed box size. + test(() => { + assert_equals(target_bounds.top - container_bounds.top, 100); + }, "getBoundingClientRect.top"); + test(() => { + assert_equals(target_bounds.height, 20); + }, "getBoundingClientRect.height"); + + // Test `elementFromPoint()` hits `target` even if the point is above/below + // the client rect, because the inner line box overflows the box. + test(() => { + const result = document.elementFromPoint(10, 90 + container_bounds.top); + assert_equals(result, target); + }, "elementFromPoint: 10px above the client rect"); + test(() => { + const result = document.elementFromPoint(10, 130 + container_bounds.top); + assert_equals(result, target); + }, "elementFromPoint: 10px below the client rect"); +} + +setup({explicit_done: true}); +document.fonts.ready.then(() => { + run_tests(); + done(); +}); +</script> diff --git a/tests/wpt/tests/css/css-overflow/scrollbar-gutter-002.html b/tests/wpt/tests/css/css-overflow/scrollbar-gutter-002.html index 531af61b5d3..73c10dc7b3f 100644 --- a/tests/wpt/tests/css/css-overflow/scrollbar-gutter-002.html +++ b/tests/wpt/tests/css/css-overflow/scrollbar-gutter-002.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <meta charset="utf-8"> - <meta name="fuzzy" content="1;0-50"> + <meta name="fuzzy" content="1-20;0-50"> <title>CSS Overflow: test scrollbar-gutter with horizontal left to right content</title> <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> diff --git a/tests/wpt/tests/css/css-overflow/scrollbar-gutter-vertical-lr-002.html b/tests/wpt/tests/css/css-overflow/scrollbar-gutter-vertical-lr-002.html index b74aa642ca1..598cfdf3664 100644 --- a/tests/wpt/tests/css/css-overflow/scrollbar-gutter-vertical-lr-002.html +++ b/tests/wpt/tests/css/css-overflow/scrollbar-gutter-vertical-lr-002.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <meta charset="utf-8"> - <meta name="fuzzy" content="1;0-50"> + <meta name="fuzzy" content="1-25;0-50"> <title>CSS Overflow: test scrollbar-gutter with vertical left to right content</title> <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> diff --git a/tests/wpt/tests/css/css-page/page-box-008-print-ref.html b/tests/wpt/tests/css/css-page/page-box-008-print-ref.html new file mode 100644 index 00000000000..91ed0cec3fa --- /dev/null +++ b/tests/wpt/tests/css/css-page/page-box-008-print-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + html { + writing-mode: vertical-rl; + } + @page { + size: 400px 800px; + margin: 0; + } + body { + margin: 0; + } +</style> +<div style="box-sizing:border-box; width:400px; border:solid blue; border-width:16px 32px 48px 80px;"> + <div style="box-sizing:border-box; width:288px; border:solid hotpink; background:yellow; border-width:16px 32px 48px 80px; padding:4px;"> + This document should be in vertical-rl writing-mode.<br> + The page padding (in hotpink) and margins (in blue) should be identical. + They should be smallest at the top, larger at the right, even larger at the + bottom, and largest at the left. + </div> +</div> diff --git a/tests/wpt/tests/css/css-page/page-box-008-print.html b/tests/wpt/tests/css/css-page/page-box-008-print.html new file mode 100644 index 00000000000..c05f0e24af0 --- /dev/null +++ b/tests/wpt/tests/css/css-page/page-box-008-print.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-page-3/#page-properties"> +<link rel="match" href="page-box-008-print-ref.html"> +<meta name="assert" content="Test percentage-based @page margin/padding, vertical writing mode"> +<style> + html { + writing-mode: vertical-rl; + } + @page { + size: 400px 800px; + margin-inline-start: 2%; + margin-block-start: 8%; + margin-inline-end: 6%; + margin-block-end: 20%; + padding-inline-start: 2%; + padding-block-start: 8%; + padding-inline-end: 6%; + padding-block-end: 20%; + background: blue; + } + body { + margin: 0; + background: hotpink; + } +</style> +<div style="box-sizing:border-box; padding:4px; block-size:100vb; background:yellow;"> + This document should be in vertical-rl writing-mode.<br> + The page padding (in hotpink) and margins (in blue) should be identical. They + should be smallest at the top, larger at the right, even larger at the bottom, + and largest at the left. +</div> diff --git a/tests/wpt/tests/css/css-page/page-box-009-print-ref.html b/tests/wpt/tests/css/css-page/page-box-009-print-ref.html new file mode 100644 index 00000000000..3c034171d3b --- /dev/null +++ b/tests/wpt/tests/css/css-page/page-box-009-print-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 400px 800px; + margin: 0; + } + body { + margin: 0; + } +</style> +<div style="box-sizing:border-box; height:800px; border:solid blue; border-width:16px 32px 48px 80px;"> + <div style="box-sizing:border-box; height:736px; border:solid hotpink; background:yellow; border-width:16px 32px 48px 80px; padding:4px;"> + This document should be in horizontal-tb writing mode.<br> + The page padding (in hotpink) and margins (in blue) should be identical. + They should be smallest at the top, larger at the right, even larger at the + bottom, and largest at the left. + </div> +</div> diff --git a/tests/wpt/tests/css/css-page/page-box-009-print.html b/tests/wpt/tests/css/css-page/page-box-009-print.html new file mode 100644 index 00000000000..dc9ced3bdf9 --- /dev/null +++ b/tests/wpt/tests/css/css-page/page-box-009-print.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-page-3/#page-properties"> +<link rel="match" href="page-box-009-print-ref.html"> +<meta name="assert" content="Test percentage-based @page margin/padding, orthogonal writing mode"> +<style> + @page { + writing-mode: vertical-rl; + size: 400px 800px; + margin-inline-start: 2%; + margin-block-start: 8%; + margin-inline-end: 6%; + margin-block-end: 20%; + padding-inline-start: 2%; + padding-block-start: 8%; + padding-inline-end: 6%; + padding-block-end: 20%; + background: blue; + } + body { + margin: 0; + background: hotpink; + } +</style> +<div style="box-sizing:border-box; padding:4px; height:100vh; background:yellow;"> + This document should be in horizontal-tb writing mode.<br> + The page padding (in hotpink) and margins (in blue) should be identical. They + should be smallest at the top, larger at the right, even larger at the bottom, + and largest at the left. +</div> diff --git a/tests/wpt/tests/css/css-page/page-box-010-print-ref.html b/tests/wpt/tests/css/css-page/page-box-010-print-ref.html new file mode 100644 index 00000000000..e5e9a057dcb --- /dev/null +++ b/tests/wpt/tests/css/css-page/page-box-010-print-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + margin: 0; + } + body { + margin: 0; + } +</style> +<div style="box-sizing:border-box; border:10px solid green; height:100vh; padding:40px;"> + There should be a green outline. +</div> diff --git a/tests/wpt/tests/css/css-page/page-box-010-print.html b/tests/wpt/tests/css/css-page/page-box-010-print.html new file mode 100644 index 00000000000..66e192a14e8 --- /dev/null +++ b/tests/wpt/tests/css/css-page/page-box-010-print.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-page-3/#page-properties"> +<link rel="match" href="page-box-010-print-ref.html"> +<meta name="assert" content="Test @page outline"> +<style> + @page { + margin: 50px; + outline: 10px solid green; + outline-offset: 40px; + } + body { + margin: 0; + } +</style> +There should be a green outline. diff --git a/tests/wpt/tests/css/css-pseudo/first-letter-width-2-ref.html b/tests/wpt/tests/css/css-pseudo/first-letter-width-2-ref.html deleted file mode 100644 index 67fe00ca790..00000000000 --- a/tests/wpt/tests/css/css-pseudo/first-letter-width-2-ref.html +++ /dev/null @@ -1,23 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<html lang="en"> -<head> - <title>initial-letter width test</title> - <style> - body { - overflow: scroll; - } - span { - position: absolute; - color: transparent; - } - #control { - background-color: green; - } - </style> -</head> -<body> - <p>There should be no red</p> - <span id="control">Test.</span> -</body> -</html> diff --git a/tests/wpt/tests/css/css-pseudo/first-letter-width-2.html b/tests/wpt/tests/css/css-pseudo/first-letter-width-2.html deleted file mode 100644 index e7d01afe472..00000000000 --- a/tests/wpt/tests/css/css-pseudo/first-letter-width-2.html +++ /dev/null @@ -1,49 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<html lang="en"> -<head> - <title>initial-letter width test</title> - <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=362880"> - <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling"> - <link rel="match" href="first-letter-width-2-ref.html"> - <meta name="assert" content="The width of an element with first-letter styling should render correctly."> - <style> - html { - overflow: scroll; - } - body { - overflow: scroll; - } - div { - position: relative; - } - span { - position: absolute; - color: transparent; - } - #control { - background-color: green; - } - #test { - background-color: red; - line-height: 1; - top: 1px; - } - #test::first-letter { - text-transform: uppercase; - } - </style> - <script> - function run() { - document.documentElement.style.overflow = "initial"; - } - </script> -</head> -<body onload="run()"> - <p>There should be no red</p> - <div> - <span id="test">Test</span> - <span id="control">Test.</span> - </div> -</body> -</html> diff --git a/tests/wpt/tests/css/css-ruby/break-within-bases/nowrap-ref.html b/tests/wpt/tests/css/css-ruby/break-within-bases/nowrap-ref.html new file mode 100644 index 00000000000..c3bf6b9b383 --- /dev/null +++ b/tests/wpt/tests/css/css-ruby/break-within-bases/nowrap-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +p { + inline-size: 10em; +} +</style> + +<p><ruby>垂直二等辺三角形<rt>すいちょくにとうへんさんかくけい</ruby></p> +<p><ruby>垂直二等辺三角形<rt>すいちょくにとうへんさんかくけい</ruby></p> +<p><ruby>垂直二等辺<rt>すいちょくにとうへん</ruby><br> +<ruby>三角形<rt>さんかくけい</ruby></p> diff --git a/tests/wpt/tests/css/css-ruby/break-within-bases/nowrap.html b/tests/wpt/tests/css/css-ruby/break-within-bases/nowrap.html new file mode 100644 index 00000000000..f1d8f53182e --- /dev/null +++ b/tests/wpt/tests/css/css-ruby/break-within-bases/nowrap.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Don't break rubies with nowrap</title> +<link rel="help" href="https://drafts.csswg.org/css-ruby/#break-within"> +<link rel="match" href="nowrap-ref.html"> +<style> +.tw-nowrap { + text-wrap: nowrap; +} +.ws-nowrap { + white-space: nowrap; +} + +span { + white-space: nowrap; +} + +p { + inline-size: 6em; +} +</style> + +<p class="tw-nowrap"><ruby>垂直二等辺三角形<rt>すいちょくにとうへんさんかくけい</ruby></p> +<p class="ws-nowrap"><ruby>垂直二等辺三角形<rt>すいちょくにとうへんさんかくけい</ruby></p> +<p><ruby><span>垂直</span><span>二等辺</span><span>三角形</span><rt><span>すいちょく</span><span>にとうへん</span><span>さんかくけい</span></ruby></p> diff --git a/tests/wpt/tests/css/css-ruby/break-within-bases/text-wrap-ref.html b/tests/wpt/tests/css/css-ruby/break-within-bases/text-wrap-ref.html deleted file mode 100644 index 7b814db7e49..00000000000 --- a/tests/wpt/tests/css/css-ruby/break-within-bases/text-wrap-ref.html +++ /dev/null @@ -1,11 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<style> -p { - inline-size: 10em; -} -</style> - -<p><ruby>二等辺三角形<rt>にとうへんさんかくけい</ruby></p> -<p><ruby>二等辺三角形<rt>にとうへんさんかくけい</ruby></p> -<p><ruby>二等辺三角形<rt>にとうへんさんかくけい</ruby></p> diff --git a/tests/wpt/tests/css/css-ruby/break-within-bases/text-wrap.tentative.html b/tests/wpt/tests/css/css-ruby/break-within-bases/text-wrap.tentative.html deleted file mode 100644 index b2acd519a60..00000000000 --- a/tests/wpt/tests/css/css-ruby/break-within-bases/text-wrap.tentative.html +++ /dev/null @@ -1,29 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>Don't break rubies in a container with `text-wrap` value other than `wrap`</title> -<!-- - Google Chrome doesn't break lines inside <ruby>s in a container with - text-wrap:balance or text-wrap:pretty. It's too complicated to suport - breakable rubies. ---> -<link rel="help" href="https://drafts.csswg.org/css-ruby/#break-within"> -<link rel="match" href="text-wrap-ref.html"> -<style> -.nowrap { - text-wrap: nowrap; -} -.balance { - text-wrap: balance; -} -.pretty { - text-wrap: pretty; -} - -p { - inline-size: 5em; -} -</style> - -<p class="nowrap"><ruby>二等辺三角形<rt>にとうへんさんかくけい</ruby></p> -<p class="balance"><ruby>二等辺三角形<rt>にとうへんさんかくけい</ruby></p> -<p class="pretty"><ruby>二等辺三角形<rt>にとうへんさんかくけい</ruby></p> diff --git a/tests/wpt/tests/css/css-ruby/ruby-align-001-ref.html b/tests/wpt/tests/css/css-ruby/ruby-align-001-ref.html index eb368b3ae61..4497858d805 100644 --- a/tests/wpt/tests/css/css-ruby/ruby-align-001-ref.html +++ b/tests/wpt/tests/css/css-ruby/ruby-align-001-ref.html @@ -12,6 +12,3 @@ <div>X X X</div> <div style="text-align: center">X X X</div> <div style="text-align-last: justify">X X X</div> -<!-- 8px = (width: 160px - 5 * font-size: 16px) / - (1 + justification opportunities: 4) / 2 --> -<div style="text-align-last: justify; padding: 0 8px">X X X</div> diff --git a/tests/wpt/tests/css/css-ruby/ruby-align-001.html b/tests/wpt/tests/css/css-ruby/ruby-align-001.html index 13c96f53f2f..c611a56532c 100644 --- a/tests/wpt/tests/css/css-ruby/ruby-align-001.html +++ b/tests/wpt/tests/css/css-ruby/ruby-align-001.html @@ -20,7 +20,4 @@ </ruby><br> <ruby style="ruby-align: space-between"> <rb>X X X<rt><div></div></rt> -</ruby><br> -<ruby style="ruby-align: space-around"> - <rb>X X X<rt><div></div></rt> </ruby> diff --git a/tests/wpt/tests/css/css-ruby/ruby-align-001a.html b/tests/wpt/tests/css/css-ruby/ruby-align-001a.html index 6e652f17265..a2c492bbce5 100644 --- a/tests/wpt/tests/css/css-ruby/ruby-align-001a.html +++ b/tests/wpt/tests/css/css-ruby/ruby-align-001a.html @@ -20,7 +20,4 @@ </ruby><br> <ruby> <rb style="ruby-align: space-between">X X X<rt><div></div></rt> -</ruby><br> -<ruby> - <rb style="ruby-align: space-around">X X X<rt><div></div></rt> </ruby> diff --git a/tests/wpt/tests/css/css-ruby/ruby-align-002-ref.html b/tests/wpt/tests/css/css-ruby/ruby-align-002-ref.html index e4dd3c8bbe8..b0d7ec4efe5 100644 --- a/tests/wpt/tests/css/css-ruby/ruby-align-002-ref.html +++ b/tests/wpt/tests/css/css-ruby/ruby-align-002-ref.html @@ -20,9 +20,4 @@ </ruby><br> <ruby> <rb></rb><rt><div style="text-align-last: justify">X X X</div></rt> -</ruby><br> -<!-- 8px = (width: 160px - 5 * font-size: 16px) / - (1 + justification opportunities: 4) / 2 --> -<ruby> - <rb></rb><rt><div style="text-align-last: justify; padding: 0 8px">X X X</div></rt> </ruby> diff --git a/tests/wpt/tests/css/css-ruby/ruby-align-002.html b/tests/wpt/tests/css/css-ruby/ruby-align-002.html index ec40be5e105..22e43e44018 100644 --- a/tests/wpt/tests/css/css-ruby/ruby-align-002.html +++ b/tests/wpt/tests/css/css-ruby/ruby-align-002.html @@ -22,7 +22,4 @@ </ruby><br> <ruby style="ruby-align: space-between"> <rb><div></div><rt>X X X</rt> -</ruby><br> -<ruby style="ruby-align: space-around"> - <rb><div></div><rt>X X X</rt> </ruby> diff --git a/tests/wpt/tests/css/css-ruby/ruby-align-002a.html b/tests/wpt/tests/css/css-ruby/ruby-align-002a.html index dfb7ae37ed9..21838c989ad 100644 --- a/tests/wpt/tests/css/css-ruby/ruby-align-002a.html +++ b/tests/wpt/tests/css/css-ruby/ruby-align-002a.html @@ -22,7 +22,4 @@ </ruby><br> <ruby> <rb><div></div><rt style="ruby-align: space-between">X X X</rt> -</ruby><br> -<ruby> - <rb><div></div><rt style="ruby-align: space-around">X X X</rt> </ruby> diff --git a/tests/wpt/tests/css/css-ruby/ruby-align-space-around-ref.html b/tests/wpt/tests/css/css-ruby/ruby-align-space-around-ref.html new file mode 100644 index 00000000000..8eec06f10c3 --- /dev/null +++ b/tests/wpt/tests/css/css-ruby/ruby-align-space-around-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Tests for ruby-align</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + div { width: 160px; box-sizing: border-box; } + + .annotation-test ruby { line-height: 0; } + .annotation-test rt { font-size: 100%; } + .annotation-test rb { font-size: 0; } + .annotation-test rt > div { width: 160px; box-sizing: border-box; } +</style> +<body style="font: 16px/3 Ahem"> +<!-- 8px = (width: 160px - 5 * font-size: 16px) / + (1 + justification opportunities: 4) / 2 --> +<div style="text-align-last: justify; padding: 0 8px">X X X</div> +<div style="text-align-last: justify; padding: 0 8px">X X X</div> + +<div class="annotation-test"> +<!-- 8px = (width: 160px - 5 * font-size: 16px) / + (1 + justification opportunities: 4) / 2 --> +<ruby> + <rb></rb><rt><div style="text-align-last: justify; padding: 0 8px">X X X</div></rt> +</ruby><br> +<ruby> + <rb></rb><rt><div style="text-align-last: justify; padding: 0 8px">X X X</div></rt> +</ruby> +</div> diff --git a/tests/wpt/tests/css/css-ruby/ruby-align-space-around.html b/tests/wpt/tests/css/css-ruby/ruby-align-space-around.html new file mode 100644 index 00000000000..dfc1b6a894b --- /dev/null +++ b/tests/wpt/tests/css/css-ruby/ruby-align-space-around.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Tests for ruby-align</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property"> +<link rel="match" href="ruby-align-space-around-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + ruby { line-height: 0; } + rt > div { width: 160px; } + + .annotation-test ruby { line-height: 0; } + .annotation-test rt { font-size: 100%; } + .annotation-test rb { font-size: 0; } + .annotation-test rb > div { width: 160px; } +</style> +<body style="font: 16px/3 Ahem"> +<ruby style="ruby-align: space-around"> + <rb>X X X<rt><div></div></rt> +</ruby><br> +<ruby> + <rb style="ruby-align: space-around">X X X<rt><div></div></rt> +</ruby> + +<div class="annotation-test"> +<ruby style="ruby-align: space-around"> + <rb><div></div><rt>X X X</rt> +</ruby><br> +<ruby> + <rb><div></div><rt style="ruby-align: space-around">X X X</rt> +</ruby> +</div> diff --git a/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-017.html b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-017.html new file mode 100644 index 00000000000..d3742a532d2 --- /dev/null +++ b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-017.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: image with width:min-content</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5032"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This test verifies that the resolved width value is derived from transferring the definite height through the natural aspect-ratio, not from the image's natural width."> + +<p>Test passes if there is a filled green square.</p> +<img src="support/200x200-green.png" style="height: 100px; width: min-content"> diff --git a/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-018.html b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-018.html new file mode 100644 index 00000000000..cbe5d5f10f7 --- /dev/null +++ b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-018.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: image with width:fit-content</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5032"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This test verifies that the resolved width value is derived from transferring the definite height through the natural aspect-ratio, not from the image's natural width."> + +<p>Test passes if there is a filled green square.</p> +<img src="support/200x200-green.png" style="height: 100px; width: fit-content"> diff --git a/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-019.html b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-019.html new file mode 100644 index 00000000000..94ddc3c5781 --- /dev/null +++ b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-019.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: image with width:max-content</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5032"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This test verifies that the resolved width value is derived from transferring the definite height through the natural aspect-ratio, not from the image's natural width."> + +<p>Test passes if there is a filled green square.</p> +<img src="support/200x200-green.png" style="height: 100px; width: max-content"> diff --git a/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-020.html b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-020.html new file mode 100644 index 00000000000..0b8c038571c --- /dev/null +++ b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-020.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: min-content contribution of image with width:min-content</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5032"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="This test verifies that the image's min-content contribution considers the definite height transferring through the natural aspect-ratio."> + +<style> +img { + vertical-align: top; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: min-content; background: red;"> + <img src="support/200x200-green.png" style="height: 100px; width: min-content"> +</div> diff --git a/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-021.html b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-021.html new file mode 100644 index 00000000000..b8ea5cd32ca --- /dev/null +++ b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-021.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: min-content contribution of image with width:fit-content</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5032"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="This test verifies that the image's min-content contribution considers the definite height transferring through the natural aspect-ratio."> + +<style> +img { + vertical-align: top; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: min-content; background: red;"> + <img src="support/200x200-green.png" style="height: 100px; width: fit-content"> +</div> diff --git a/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-022.html b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-022.html new file mode 100644 index 00000000000..d03a1d37d5c --- /dev/null +++ b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-022.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: min-content contribution of image with width:max-content</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5032"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="This test verifies that the image's min-content contribution considers the definite height transferring through the natural aspect-ratio."> + +<style> +img { + vertical-align: top; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: min-content; background: red;"> + <img src="support/200x200-green.png" style="height: 100px; width: max-content"> +</div> diff --git a/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-023.html b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-023.html new file mode 100644 index 00000000000..65269f06bab --- /dev/null +++ b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-023.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: max-content contribution of image with width:min-content</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5032"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="This test verifies that the image's max-content contribution considers the definite height transferring through the natural aspect-ratio."> + +<style> +img { + vertical-align: top; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: max-content; background: red;"> + <img src="support/200x200-green.png" style="height: 100px; width: min-content"> +</div> diff --git a/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-024.html b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-024.html new file mode 100644 index 00000000000..e05724f258f --- /dev/null +++ b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-024.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: max-content contribution of image with width:fit-content</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5032"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="This test verifies that the image's max-content contribution considers the definite height transferring through the natural aspect-ratio."> + +<style> +img { + vertical-align: top; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: max-content; background: red;"> + <img src="support/200x200-green.png" style="height: 100px; width: fit-content"> +</div> diff --git a/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-025.html b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-025.html new file mode 100644 index 00000000000..cc7aa35724e --- /dev/null +++ b/tests/wpt/tests/css/css-sizing/aspect-ratio/intrinsic-size-025.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: max-content contribution of image with width:max-content</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5032"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="This test verifies that the image's max-content contribution considers the definite height transferring through the natural aspect-ratio."> + +<style> +img { + vertical-align: top; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: max-content; background: red;"> + <img src="support/200x200-green.png" style="height: 100px; width: max-content"> +</div> diff --git a/tests/wpt/tests/css/css-text/white-space/trailing-space-and-text-alignment-002.html b/tests/wpt/tests/css/css-text/white-space/trailing-space-and-text-alignment-002.html index 6ee7d03d9d5..27a0fd2b631 100644 --- a/tests/wpt/tests/css/css-text/white-space/trailing-space-and-text-alignment-002.html +++ b/tests/wpt/tests/css/css-text/white-space/trailing-space-and-text-alignment-002.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <meta charset="utf-8"> -<meta name="fuzzy" content="1;0-50"> +<meta name="fuzzy" content="1;0-100"> <title>CSS Text level 3 Test: preserved trailing white space that hang in a textarea</title> <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> diff --git a/tests/wpt/tests/css/css-text/white-space/trailing-space-and-text-alignment-004.html b/tests/wpt/tests/css/css-text/white-space/trailing-space-and-text-alignment-004.html index 69d74051f7f..756f07133a7 100644 --- a/tests/wpt/tests/css/css-text/white-space/trailing-space-and-text-alignment-004.html +++ b/tests/wpt/tests/css/css-text/white-space/trailing-space-and-text-alignment-004.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <meta charset="utf-8"> -<meta name="fuzzy" content="1;0-50"> +<meta name="fuzzy" content="1;0-100"> <title>CSS Text level 3 Test: preserved trailing white space that hang in a textarea</title> <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> diff --git a/tests/wpt/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-002.html b/tests/wpt/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-002.html index 3da84ae5123..bb3649f3f31 100644 --- a/tests/wpt/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-002.html +++ b/tests/wpt/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-002.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <meta charset="utf-8"> -<meta name="fuzzy" content="1;0-50"> +<meta name="fuzzy" content="1;0-100"> <title>CSS Text level 3 Test: preserved trailing RTL white space that hang in a textarea</title> <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> diff --git a/tests/wpt/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-004.html b/tests/wpt/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-004.html index 480969efc0d..0421942963d 100644 --- a/tests/wpt/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-004.html +++ b/tests/wpt/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-004.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <meta charset="utf-8"> -<meta name="fuzzy" content="1;0-50"> +<meta name="fuzzy" content="1;0-100"> <title>CSS Text level 3 Test: preserved trailing RTL white space that hang in a textarea</title> <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> diff --git a/tests/wpt/tests/css/css-transforms/WEB_FEATURES.yml b/tests/wpt/tests/css/css-transforms/WEB_FEATURES.yml index bb44025b80b..d58c1119747 100644 --- a/tests/wpt/tests/css/css-transforms/WEB_FEATURES.yml +++ b/tests/wpt/tests/css/css-transforms/WEB_FEATURES.yml @@ -1,4 +1,7 @@ features: +- name: abs-sign + files: + - transform-with-sign-function.html - name: individual-transforms files: - transform-and-individual-transform-properties-computed-style.html diff --git a/tests/wpt/tests/css/css-transforms/transform-with-sign-function.html b/tests/wpt/tests/css/css-transforms/transform-with-sign-function.html index b6e179d390b..64b30dca17e 100644 --- a/tests/wpt/tests/css/css-transforms/transform-with-sign-function.html +++ b/tests/wpt/tests/css/css-transforms/transform-with-sign-function.html @@ -21,5 +21,6 @@ test_math_used('rotate(calc(sign(1em - 1px) * 2deg))', 'rotate(2deg)', {prop:'tr test_math_used('rotateX(calc(sign(1em - 1px) * 2deg))', 'rotateX(2deg)', {prop:'transform'}); test_math_used('rotateY(calc(sign(1em - 1px) * 2deg))', 'rotateY(2deg)', {prop:'transform'}); test_math_used('rotateZ(calc(sign(1em - 1px) * 2deg))', 'rotateZ(2deg)', {prop:'transform'}); +test_math_used('calc(sign(1em - 1px) * 2) calc(sign(1em - 1px) * 2) calc(sign(1em - 1px) * 2)', '2 2 2', {prop:'scale'}); </script> diff --git a/tests/wpt/tests/css/css-viewport/zoom/letter-spacing.html b/tests/wpt/tests/css/css-viewport/zoom/letter-spacing.html new file mode 100644 index 00000000000..5c17e10ebed --- /dev/null +++ b/tests/wpt/tests/css/css-viewport/zoom/letter-spacing.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<style>CSS zoom applies to letter-spacing when specified and inherited</style> +<link rel="author" title="Stefan Zager" href="mailto:szager@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-viewport/"> +<link rel="match" href="reference/letter-spacing-ref.html"> +<div style="letter-spacing: 2px; font-size: 12px"> + 12px font text with 2px letter-spacing +</div> + +<hr> + +<div style="letter-spacing: 2px; font-size: 12px; zoom: 2"> + 12px font zoomed text with 2px letter-spacing +</div> + +<hr> + +<div style="letter-spacing: 2px; font-size: 12px"> + <div style="zoom:2"> + 12px font zoomed inherited text with 2px letter-spacing + </div> +</div> + +<hr> diff --git a/tests/wpt/tests/css/css-viewport/zoom/reference/letter-spacing-ref.html b/tests/wpt/tests/css/css-viewport/zoom/reference/letter-spacing-ref.html new file mode 100644 index 00000000000..7d050672c4e --- /dev/null +++ b/tests/wpt/tests/css/css-viewport/zoom/reference/letter-spacing-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<style>CSS zoom applies to letter-spacing when specified and inherited</style> +<link rel="author" title="Stefan Zager" href="mailto:szager@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-viewport/"> +<div style="letter-spacing: 2px; font-size: 12px"> + 12px font text with 2px letter-spacing +</div> + +<hr> + +<div style="letter-spacing: 4px; font-size: 24px;"> + 12px font zoomed text with 2px letter-spacing +</div> + +<hr> + +<div style="letter-spacing: 2px; font-size: 12px"> + <div style="letter-spacing: 4px; font-size: 24px"> + 12px font zoomed inherited text with 2px letter-spacing + </div> +</div> + +<hr> diff --git a/tests/wpt/tests/css/css-viewport/zoom/svg-ref.html b/tests/wpt/tests/css/css-viewport/zoom/svg-ref.html new file mode 100644 index 00000000000..10bf2decaa7 --- /dev/null +++ b/tests/wpt/tests/css/css-viewport/zoom/svg-ref.html @@ -0,0 +1,27 @@ +<!doctype html> +<style> + body { margin: 0 } + :root { + font-size: 10px; + } + .container { + font-size: 20px; + } + line { + stroke-width: 40px; + stroke: lime; + } + svg { + background-color: red; + } +</style> +<div class="container"> + <svg width=400 height=400> + <rect width=400 height=400 fill="blue"/> + <line y1=0 y2=0 x1=0 x2=200 /> + <line y1=40 y2=40 x1=0 x2=10em /> + <line y1=80 y2=80 x1=0 x2=20rem /> + <line y1=120 y2=120 x1=0 x2=50% /> + <line y1=160 y2=160 x1=0 x2=4vw /> + </svg> +</div> diff --git a/tests/wpt/tests/css/css-viewport/zoom/svg.html b/tests/wpt/tests/css/css-viewport/zoom/svg.html new file mode 100644 index 00000000000..826ce5a80a3 --- /dev/null +++ b/tests/wpt/tests/css/css-viewport/zoom/svg.html @@ -0,0 +1,39 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1899695"> +<link rel="match" href="svg-ref.html"> +<style> + :root { + font-size: 10px; + zoom: 2; + } + body { margin: 0 } + .container { + font-size: 20px; + } + .child { + zoom: 2; + } + line { + stroke-width: 10px; + stroke: lime; + } + svg { + background-color: red; + } +</style> +<div class="container"> + <div class="child"> + <svg width=100 height=100> + <rect width=10rem height=100 fill="blue"/> + <line y1=0 y2=0 x1=0 x2=50 /> + <line y1=10 y2=10 x1=0 x2=2.5em /> + <line y1=20 y2=20 x1=0 x2=5rem /> + <line y1=30 y2=30 x1=0 x2=50% /> + <line y1=40 y2=40 x1=0 x2=1vw /> + </svg> + </div> +</div> diff --git a/tests/wpt/tests/css/filter-effects/filter-region-html-content-viewport.tentative.html b/tests/wpt/tests/css/filter-effects/filter-region-html-content-viewport.tentative.html new file mode 100644 index 00000000000..d248abf9230 --- /dev/null +++ b/tests/wpt/tests/css/filter-effects/filter-region-html-content-viewport.tentative.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>Filter with userSpaceOnUse filterUnits on non-SVG element</title> +<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterEffectsRegion"> +<link rel="match" href="reference/green-100x100.html"> +<style> + #target { + width: 105px; + height: 105px; + background-color: red; + position: relative; + border: 10px solid orange; + filter: url(#f); + } + #target > div { + width: 100px; + height: 100px; + background-color: yellow; + position: absolute; + top: 50px; + left: 50px; + } +</style> +<div id="target"> + <div></div> +</div> +<svg height="0"> + <filter id="f" filterUnits="userSpaceOnUse" + x="0%" y="0%" width="80%" height="80%"> + <feFlood flood-color="green"/> + </filter> +</svg> diff --git a/tests/wpt/tests/event-timing/first-input-interactionid-key.html b/tests/wpt/tests/event-timing/first-input-interactionid-key.html new file mode 100644 index 00000000000..1991fe2cb88 --- /dev/null +++ b/tests/wpt/tests/event-timing/first-input-interactionid-key.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<meta charset=utf-8 /> +<title>First Input: interactionId-key.</title> +<input id='input'></input> +<textarea id='textarea'></textarea> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src=/resources/testdriver.js></script> +<script src=/resources/testdriver-vendor.js></script> +<script src=/resources/testdriver-actions.js></script> +<script src=resources/event-timing-test-utils.js></script> + +<script> + const key = 'a'; // Arbitrary key picked for testing. + let firstInputInteractionId = 0; + let eventTimingKeyDownInteractionId = 0; + let hasFirstInputEntry = false; + let hasEventTimingKeyDownEntry = false; + + promise_test(async t => { + assert_implements(window.PerformanceEventTiming, 'Event Timing is not supported.'); + + const callback = (entryList) => { + entryList.getEntries().forEach(entry => { + switch (entry.entryType) { + case 'first-input': { + firstInputInteractionId = entry.interactionId; + hasFirstInputEntry = true; + break; + } + case 'event': { + if ('keydown' == entry.name) { + eventTimingKeyDownInteractionId = entry.interactionId; + hasEventTimingKeyDownEntry = true; + } + break; + } + } + }); + }; + const readyToResolve = () => { + return hasFirstInputEntry && hasEventTimingKeyDownEntry; + } + const observerPromise = createPerformanceObserverPromise(['event', 'first-input'], callback, readyToResolve); + await interactAndObserve('key', document.getElementById('input'), observerPromise, key); + + assert_greater_than(firstInputInteractionId, 0, 'The first input entry should have a non-trivial interactionId'); + assert_equals(firstInputInteractionId, eventTimingKeyDownInteractionId, 'The first input entry should have the same interactionId as the event timing keydown entry'); + assert_equals(firstInputInteractionId.target, eventTimingKeyDownInteractionId.target, 'The first input entry should have the same target as the event timing keydown entry'); + assert_not_equals(firstInputInteractionId.target, null, 'The first input entry should have a non-null target'); + + }, "The interactionId of the first input entry should match the same keydown entry of event timing when press a key."); +</script> + +</html>
\ No newline at end of file diff --git a/tests/wpt/tests/event-timing/resources/event-timing-test-utils.js b/tests/wpt/tests/event-timing/resources/event-timing-test-utils.js index 7b281a4e0e4..a10f1c20c35 100644 --- a/tests/wpt/tests/event-timing/resources/event-timing-test-utils.js +++ b/tests/wpt/tests/event-timing/resources/event-timing-test-utils.js @@ -418,9 +418,13 @@ async function createPerformanceObserverPromise(observeTypes, callback, readyToR // The testdriver.js, testdriver-vendor.js need to be included to use this // function. -async function interactAndObserve(interactionType, target, observerPromise) { +async function interactAndObserve(interactionType, target, observerPromise, key = '') { let interactionPromise; switch (interactionType) { + case 'key': { + addListeners(target, ['keydown', 'keyup']); + interactionPromise = pressKey(target, key); + } case 'tap': { addListeners(target, ['pointerdown', 'pointerup']); interactionPromise = tap(target); diff --git a/tests/wpt/tests/fenced-frame/automatic-beacon-anchor-click-handler.https.html b/tests/wpt/tests/fenced-frame/automatic-beacon-anchor-click-handler.https.html index a451c48f73d..7488e2f3004 100644 --- a/tests/wpt/tests/fenced-frame/automatic-beacon-anchor-click-handler.https.html +++ b/tests/wpt/tests/fenced-frame/automatic-beacon-anchor-click-handler.https.html @@ -52,7 +52,8 @@ promise_test(async(t) => { .pointerUp() .send(); - await verifyBeaconData(beacon_event.eventType, beacon_event.eventData); + await verifyBeaconData(beacon_event.eventType, beacon_event.eventData, + get_host_info().HTTPS_REMOTE_ORIGIN); // Leaving this fenced frame around for subsequent tests can lead to // flakiness. diff --git a/tests/wpt/tests/fenced-frame/automatic-beacon-click-handler.https.html b/tests/wpt/tests/fenced-frame/automatic-beacon-click-handler.https.html index 55f18fd42b6..fa6690c0a92 100644 --- a/tests/wpt/tests/fenced-frame/automatic-beacon-click-handler.https.html +++ b/tests/wpt/tests/fenced-frame/automatic-beacon-click-handler.https.html @@ -49,8 +49,10 @@ promise_test(async(t) => { .pointerUp() .send(); - await verifyBeaconData(start_event.eventType, start_event.eventData); - await verifyBeaconData(commit_event.eventType, commit_event.eventData); + await verifyBeaconData(start_event.eventType, start_event.eventData, + get_host_info().HTTPS_REMOTE_ORIGIN); + await verifyBeaconData(commit_event.eventType, commit_event.eventData, + get_host_info().HTTPS_REMOTE_ORIGIN); // Leaving this fenced frame around for subsequent tests can lead to // flakiness. diff --git a/tests/wpt/tests/fenced-frame/automatic-beacon-component-ad.https.html b/tests/wpt/tests/fenced-frame/automatic-beacon-component-ad.https.html index fffff548b46..55711c4f08b 100644 --- a/tests/wpt/tests/fenced-frame/automatic-beacon-component-ad.https.html +++ b/tests/wpt/tests/fenced-frame/automatic-beacon-component-ad.https.html @@ -18,6 +18,7 @@ promise_test(async(t) => { const fencedframe = await attachFencedFrameContext({ generator_api: 'fledge', register_beacon: true, + component_origin: get_host_info().HTTPS_REMOTE_ORIGIN, num_components: 1, // These headers will also be given to the component ad. headers: [["Allow-Fenced-Frame-Automatic-Beacons", "true"]] @@ -49,6 +50,7 @@ promise_test(async(t) => { .send(); // The component frame should not use the data set in its parent. + // The referrer header should be set to the root ad frame's origin. await verifyBeaconData(beacon_event.eventType, "<No data>"); }, 'Automatic beacon in an ad component should send without data with a ' + 'header opt-in.'); diff --git a/tests/wpt/tests/fenced-frame/automatic-beacon-cross-origin-false.https.html b/tests/wpt/tests/fenced-frame/automatic-beacon-cross-origin-false.https.html index a3627036fc5..93c937ab2f3 100644 --- a/tests/wpt/tests/fenced-frame/automatic-beacon-cross-origin-false.https.html +++ b/tests/wpt/tests/fenced-frame/automatic-beacon-cross-origin-false.https.html @@ -35,7 +35,8 @@ promise_test(async(t) => { .pointerUp() .send(); - await verifyBeaconData(beacon_event.eventType, "<No data>"); + await verifyBeaconData(beacon_event.eventType, "<No data>", + get_host_info().HTTPS_REMOTE_ORIGIN); }, 'Automatic beacon in a cross-origin subframe should send without data ' + 'when crossOrigin=false.'); </script> diff --git a/tests/wpt/tests/fenced-frame/automatic-beacon-cross-origin-no-data.https.html b/tests/wpt/tests/fenced-frame/automatic-beacon-cross-origin-no-data.https.html index 887a06847f4..16b1d0ac264 100644 --- a/tests/wpt/tests/fenced-frame/automatic-beacon-cross-origin-no-data.https.html +++ b/tests/wpt/tests/fenced-frame/automatic-beacon-cross-origin-no-data.https.html @@ -40,8 +40,10 @@ promise_test(async(t) => { .pointerUp() .send(); - await verifyBeaconData("reserved.top_navigation_start", "<No data>"); - await verifyBeaconData("reserved.top_navigation_commit", "<No data>"); + await verifyBeaconData("reserved.top_navigation_start", "<No data>", + get_host_info().HTTPS_REMOTE_ORIGIN); + await verifyBeaconData("reserved.top_navigation_commit", "<No data>", + get_host_info().HTTPS_REMOTE_ORIGIN); }, 'Automatic beacon in a cross-origin subframe with no beacon data set'); </script> </body> diff --git a/tests/wpt/tests/fenced-frame/automatic-beacon-cross-origin-no-opt-in.https.html b/tests/wpt/tests/fenced-frame/automatic-beacon-cross-origin-no-opt-in.https.html index f1817b76dd2..6f1ebee4498 100644 --- a/tests/wpt/tests/fenced-frame/automatic-beacon-cross-origin-no-opt-in.https.html +++ b/tests/wpt/tests/fenced-frame/automatic-beacon-cross-origin-no-opt-in.https.html @@ -37,8 +37,8 @@ promise_test(async(t) => { .pointerUp() .send(); - await verifyBeaconData(beacon_event.eventType, beacon_event.eventData, false, - t); + await verifyBeaconData(beacon_event.eventType, beacon_event.eventData, + get_host_info().HTTPS_REMOTE_ORIGIN, false, t); }, 'Automatic beacon in a cross-origin subframe with no opt-in header should ' + 'not send.'); </script> diff --git a/tests/wpt/tests/fenced-frame/automatic-beacon-no-destination.https.html b/tests/wpt/tests/fenced-frame/automatic-beacon-no-destination.https.html index 1779ba65731..8456b316bef 100644 --- a/tests/wpt/tests/fenced-frame/automatic-beacon-no-destination.https.html +++ b/tests/wpt/tests/fenced-frame/automatic-beacon-no-destination.https.html @@ -37,7 +37,8 @@ promise_test(async (t) => { // An automatic beacon should be sent out, but no data should be sent as part // of the beacon because the "buyer" destination was not specified in // setReportEventDataForAutomaticBeacons(). - await verifyBeaconData(beacon_event.eventType, "<No data>"); + await verifyBeaconData(beacon_event.eventType, "<No data>", + get_host_info().HTTPS_REMOTE_ORIGIN); }, "Set and trigger an automatic beacon with no destination specified"); </script> diff --git a/tests/wpt/tests/fenced-frame/automatic-beacon-no-opt-in.https.html b/tests/wpt/tests/fenced-frame/automatic-beacon-no-opt-in.https.html index b6dac31dbdc..cedfff1a944 100644 --- a/tests/wpt/tests/fenced-frame/automatic-beacon-no-opt-in.https.html +++ b/tests/wpt/tests/fenced-frame/automatic-beacon-no-opt-in.https.html @@ -40,8 +40,8 @@ promise_test(async (t) => { .pointerDown() .pointerUp() .send(); - await verifyBeaconData("reserved.top_navigation_start", "<No data>", false, - t); + await verifyBeaconData("reserved.top_navigation_start", "<No data>", null, + false, t); }, "Automatic beacons will not send if the document does not opt in."); </script> diff --git a/tests/wpt/tests/fenced-frame/automatic-beacon-shared-storage.https.html b/tests/wpt/tests/fenced-frame/automatic-beacon-shared-storage.https.html index 4ee1d0d01bf..56ca40b9e92 100644 --- a/tests/wpt/tests/fenced-frame/automatic-beacon-shared-storage.https.html +++ b/tests/wpt/tests/fenced-frame/automatic-beacon-shared-storage.https.html @@ -37,8 +37,10 @@ promise_test(async(t) => { .pointerUp() .send(); - await verifyBeaconData(start_event.eventType, start_event.eventData); - await verifyBeaconData(commit_event.eventType, commit_event.eventData); + await verifyBeaconData(start_event.eventType, start_event.eventData, + get_host_info().HTTPS_REMOTE_ORIGIN); + await verifyBeaconData(commit_event.eventType, commit_event.eventData, + get_host_info().HTTPS_REMOTE_ORIGIN); }, 'Set and trigger an automatic beacon in a click handler for SharedStorage'); </script> diff --git a/tests/wpt/tests/fenced-frame/automatic-beacon-two-events-clear.https.html b/tests/wpt/tests/fenced-frame/automatic-beacon-two-events-clear.https.html index ff353981051..3533cf58c00 100644 --- a/tests/wpt/tests/fenced-frame/automatic-beacon-two-events-clear.https.html +++ b/tests/wpt/tests/fenced-frame/automatic-beacon-two-events-clear.https.html @@ -34,7 +34,8 @@ promise_test(async(t) => { .pointerDown() .pointerUp() .send(); - await verifyBeaconData(beacon_event.eventType, beacon_event.eventData); + await verifyBeaconData(beacon_event.eventType, beacon_event.eventData, + get_host_info().HTTPS_REMOTE_ORIGIN); // The second click should not have any associated automatic beacon info, so // no beacon should be sent. @@ -44,8 +45,8 @@ promise_test(async(t) => { .pointerDown() .pointerUp() .send(); - await verifyBeaconData(beacon_event.eventType, beacon_event.eventData, false, - t); + await verifyBeaconData(beacon_event.eventType, beacon_event.eventData, + get_host_info().HTTPS_REMOTE_ORIGIN, false, t); }, 'Set expiring automatic beacon but trigger two events in a click handler'); </script> diff --git a/tests/wpt/tests/fenced-frame/automatic-beacon-two-events-persist.https.html b/tests/wpt/tests/fenced-frame/automatic-beacon-two-events-persist.https.html index b9e582e43ec..a0c872d16c8 100644 --- a/tests/wpt/tests/fenced-frame/automatic-beacon-two-events-persist.https.html +++ b/tests/wpt/tests/fenced-frame/automatic-beacon-two-events-persist.https.html @@ -33,7 +33,8 @@ promise_test(async(t) => { .pointerDown() .pointerUp() .send(); - await verifyBeaconData(beacon_event.eventType, beacon_event.eventData); + await verifyBeaconData(beacon_event.eventType, beacon_event.eventData, + get_host_info().HTTPS_REMOTE_ORIGIN); // The second click should still have associated automatic beacon data, and a // beacon should be sent. @@ -41,7 +42,8 @@ promise_test(async(t) => { .pointerDown() .pointerUp() .send(); - await verifyBeaconData(beacon_event.eventType, beacon_event.eventData); + await verifyBeaconData(beacon_event.eventType, beacon_event.eventData, + get_host_info().HTTPS_REMOTE_ORIGIN); }, 'Set persisting automatic beacon but trigger two events in a click handler'); </script> diff --git a/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin-no-embedder-opt-in.https.html b/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin-no-embedder-opt-in.https.html index 954de240d93..422224ce2d4 100644 --- a/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin-no-embedder-opt-in.https.html +++ b/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin-no-embedder-opt-in.https.html @@ -43,8 +43,8 @@ promise_test(async(t) => { } window.fence.reportEvent(destination_url_event); }); - await verifyBeaconData("click", "enum", false, t); - await verifyBeaconData("url", "<No data>", false, t); + await verifyBeaconData("click", "enum", null, false, t); + await verifyBeaconData("url", "<No data>", null, false, t); }, 'Cross-origin window.fence.reportEvent without embedder opt-in'); </script> </body> diff --git a/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin-no-subframe-opt-in.https.html b/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin-no-subframe-opt-in.https.html index ea5d0cdcc25..229226d60f2 100644 --- a/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin-no-subframe-opt-in.https.html +++ b/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin-no-subframe-opt-in.https.html @@ -39,8 +39,8 @@ promise_test(async(t) => { }); // Check that both the destination enum and destination URL events were // reported. - await verifyBeaconData("click", "enum", false, t); - await verifyBeaconData("url", "<No data>", false, t); + await verifyBeaconData("click", "enum", null, false, t); + await verifyBeaconData("url", "<No data>", null, false, t); }, 'Cross-origin window.fence.reportEvent without subframe opt-in'); </script> </body> diff --git a/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin-urn-iframe-no-embedder-opt-in.https.html b/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin-urn-iframe-no-embedder-opt-in.https.html index 6f6835b3f59..6795af2f42e 100644 --- a/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin-urn-iframe-no-embedder-opt-in.https.html +++ b/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin-urn-iframe-no-embedder-opt-in.https.html @@ -43,8 +43,8 @@ promise_test(async(t) => { } window.fence.reportEvent(destination_url_event); }); - await verifyBeaconData("click", "enum", false, t); - await verifyBeaconData("url", "<No data>", false, t); + await verifyBeaconData("click", "enum", null, false, t); + await verifyBeaconData("url", "<No data>", null, false, t); }, 'Cross-origin window.fence.reportEvent without embedder opt-in'); </script> </body> diff --git a/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin-urn-iframe-no-subframe-opt-in.https.html b/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin-urn-iframe-no-subframe-opt-in.https.html index 855ad1f9cd0..1a701e25095 100644 --- a/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin-urn-iframe-no-subframe-opt-in.https.html +++ b/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin-urn-iframe-no-subframe-opt-in.https.html @@ -39,8 +39,8 @@ promise_test(async(t) => { }); // Check that both the destination enum and destination URL events were // reported. - await verifyBeaconData("click", "enum", false, t); - await verifyBeaconData("url", "<No data>", false, t); + await verifyBeaconData("click", "enum", null, false, t); + await verifyBeaconData("url", "<No data>", null, false, t); }, 'Cross-origin window.fence.reportEvent without subframe opt-in'); </script> </body> diff --git a/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin.https.html b/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin.sub.https.html index f198ea409f7..a54143cdb14 100644 --- a/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin.https.html +++ b/tests/wpt/tests/fenced-frame/fence-report-event-cross-origin.sub.https.html @@ -16,11 +16,12 @@ promise_test(async(t) => { headers: [[ 'Allow-Cross-Origin-Event-Reporting', '?1' ]], - register_beacon: true + register_beacon: true, + origin: 'https://{{hosts[alt][]}}:{{ports[https][0]}}', }); await fencedframe.execute(async () => { const iframe = await attachIFrameContext({ - origin: get_host_info().HTTPS_REMOTE_ORIGIN, + origin: 'https://{{hosts[alt][]}}:{{ports[https][1]}}' }); await iframe.execute(() => { const destination_url = new URL(BEACON_URL + "?type=url", @@ -39,8 +40,24 @@ promise_test(async(t) => { }); // Check that both the destination enum and destination URL events were // reported. - await nextBeacon("click", "enum"); - await nextBeacon("url", "<No data>"); + const [enum_origin, enum_referrer] = await nextBeacon("click", "enum") + .then(data => data.split(',')); + const [url_origin, url_referrer] = await nextBeacon("url", "<No data>") + .then(data => data.split(',')); + + // Check the "Origin" headers are set to the origin that supplied the + // reporting URL. For destination enum events, that's the origin of the + // worklet. For destination URL events, that's the origin of the iframe. + assert_equals(enum_origin, get_host_info().HTTPS_ORIGIN, + 'The enum origin should be correctly set.'); + assert_equals(url_origin, 'https://{{hosts[alt][]}}:{{ports[https][1]}}', + 'The url origin should be correctly set.'); + + assert_equals(enum_referrer, + 'https://{{hosts[alt][]}}:{{ports[https][1]}}/', + 'The enum referrer should be correctly set.'); + assert_equals(url_referrer, 'https://{{hosts[alt][]}}:{{ports[https][1]}}/', + 'The url referrer should be correctly set.'); }, 'window.fence.reportEvent from a cross-origin subframe'); </script> </body> diff --git a/tests/wpt/tests/fenced-frame/fence-report-event-sub-fencedframe.https.html b/tests/wpt/tests/fenced-frame/fence-report-event-sub-fencedframe.https.html index 558125d890b..b3516acf4bd 100644 --- a/tests/wpt/tests/fenced-frame/fence-report-event-sub-fencedframe.https.html +++ b/tests/wpt/tests/fenced-frame/fence-report-event-sub-fencedframe.https.html @@ -39,8 +39,8 @@ promise_test(async(t) => { }); // Check that both the destination enum and destination URL events were // reported. - await verifyBeaconData("click", "enum", false, t); - await verifyBeaconData("url", "<No data>", false, t); + await verifyBeaconData("click", "enum", null, false, t); + await verifyBeaconData("url", "<No data>", null, false, t); }, 'window.fence.reportEvent should not work in a nested fenced frame'); </script> </body> diff --git a/tests/wpt/tests/fenced-frame/parse-from-string-sandboxed-iframe.https.html b/tests/wpt/tests/fenced-frame/parse-from-string-sandboxed-iframe.https.html new file mode 100644 index 00000000000..01eae33ab02 --- /dev/null +++ b/tests/wpt/tests/fenced-frame/parse-from-string-sandboxed-iframe.https.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>Test HTML parsing a fencedframe element in a sandboxed iframe</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/utils.js"></script> +<script src="/common/dispatcher/dispatcher.js"></script> +<script src="resources/utils.js"></script> + +<body> +<script> +promise_test(async(t) => { + const iframe = document.createElement("iframe"); + iframe.sandbox = "allow-scripts allow-same-origin"; + document.body.appendChild(iframe); + const parser = new iframe.contentWindow.DOMParser(); + const parsed_value = + parser.parseFromString("<fencedframe></fencedframe>", 'text/html'); +}, 'Parsing HTML with a fencedframe element in a sandboxed iframe works ' + + 'without crashing.'); +</script> +</body> diff --git a/tests/wpt/tests/fenced-frame/report-event.https.html b/tests/wpt/tests/fenced-frame/report-event.https.html index c06765b8f9a..af9da69d29c 100644 --- a/tests/wpt/tests/fenced-frame/report-event.https.html +++ b/tests/wpt/tests/fenced-frame/report-event.https.html @@ -31,12 +31,22 @@ window.fence.reportEvent(destination_url_event); }); - let enum_data = await nextBeacon('click', 'enum'); - assert_equals(enum_data, location.origin); + const [enum_origin, enum_referrer] = await nextBeacon("click", "enum") + .then(data => data.split(',')); + const [url_origin, url_referrer] = await nextBeacon("url", "<No data>") + .then(data => data.split(',')); - let url_data = await nextBeacon('url', '<No data>'); - assert_equals(url_data, '<No data>'); + assert_equals(enum_origin, location.origin, + 'The enum origin should be correctly set.'); + // GET requests do not set an 'Origin' header if same-origin to the request's + // destination. + assert_equals(url_origin, '<No data>', + 'The url origin should be correctly set.'); + assert_equals(enum_referrer, location.origin + "/", + 'The enum referrer should be correctly set.'); + assert_equals(url_referrer, location.origin + "/", + 'The url referrer should be correctly set.'); }, 'Test that window.fence.reportEvent() succeeds in a fenced frame.'); </script> </body>
\ No newline at end of file diff --git a/tests/wpt/tests/fenced-frame/resources/automatic-beacon-helper.js b/tests/wpt/tests/fenced-frame/resources/automatic-beacon-helper.js index 8286c94fec1..36c10c904ed 100644 --- a/tests/wpt/tests/fenced-frame/resources/automatic-beacon-helper.js +++ b/tests/wpt/tests/fenced-frame/resources/automatic-beacon-helper.js @@ -84,20 +84,31 @@ async function setupAutomaticBeacon( // Checks if an automatic beacon of type `event_type` with contents `event_data` // was sent out or not. -// event_type: The automatic beacon type to check. -// event_data: The automatic beacon data to check. -// expected_success: Whether we expect the automatic beacon to be sent. -// t: The WPT's test object. Only required if +// event_type: The automatic beacon type to check. +// event_data: The automatic beacon data to check. +// expected_referrer: The expected referrer header, if different from origin. +// expected_success: Whether we expect the automatic beacon to be sent. +// t: The WPT's test object. Only required if // expected_success = false. async function verifyBeaconData( - event_type, event_data, expected_success = true, t) { + event_type, event_data, expected_referrer = null, expected_success = true, + t) { if (expected_success) { - const beacon_initiator_origin = await nextBeacon(event_type, event_data); - assert_equals(beacon_initiator_origin, get_host_info().HTTPS_ORIGIN); + const data = await nextBeacon(event_type, event_data); + const [beacon_initiator_origin, beacon_referrer] = + data.split(","); + assert_equals(beacon_initiator_origin, get_host_info().HTTPS_ORIGIN, + "The initiator origin should be set as expected."); + // The Referer header has a trailing '/' appended to the URL. + assert_equals(beacon_referrer, + (expected_referrer ? expected_referrer : + get_host_info().HTTPS_ORIGIN) + "/", + "The beacon referrer should be set as expected."); } else { const timeout = new Promise(r => t.step_timeout(r, 1000)); const result = await Promise.race([nextBeacon(event_type, event_data), timeout]); - assert_true(typeof result === 'undefined'); + assert_true(typeof result === 'undefined', + "The beacon should not have sent."); } } diff --git a/tests/wpt/tests/fenced-frame/resources/automatic-beacon-unfenced-page.html b/tests/wpt/tests/fenced-frame/resources/automatic-beacon-unfenced-page.html index 7f17c1a9042..c9561bec550 100644 --- a/tests/wpt/tests/fenced-frame/resources/automatic-beacon-unfenced-page.html +++ b/tests/wpt/tests/fenced-frame/resources/automatic-beacon-unfenced-page.html @@ -15,7 +15,8 @@ const beacon_data = "This is the beacon data!"; const beacon_initiator_origin = await nextBeacon( "reserved.top_navigation_commit", beacon_data); - assert_equals(beacon_initiator_origin, get_host_info().HTTPS_ORIGIN); + assert_equals(beacon_initiator_origin, get_host_info().HTTPS_ORIGIN + "," + + get_host_info().HTTPS_REMOTE_ORIGIN + "/"); }); </script> </body> diff --git a/tests/wpt/tests/fenced-frame/resources/beacon-store.py b/tests/wpt/tests/fenced-frame/resources/beacon-store.py index 4c89687f4a8..e4a4048de93 100644 --- a/tests/wpt/tests/fenced-frame/resources/beacon-store.py +++ b/tests/wpt/tests/fenced-frame/resources/beacon-store.py @@ -43,14 +43,18 @@ def main(request, response): # (either through reportEvent() or through an automatic beacon). if request.method == "POST" and event_type: request_body = request.body or NO_DATA_STRING - request_headers = request.headers.get("Origin") or NO_DATA_STRING + request_origin = request.headers.get("Origin") or NO_DATA_STRING + request_referrer = request.headers.get("Referer") or NO_DATA_STRING stash.put(string_to_uuid(event_type + request_body), - request_headers) + (request_origin + b"," + request_referrer)) return (200, [], b"") # GET requests without an 'expected_body' parameter imply they were sent # as a destination URL reporting beacon. if request.method == "GET" and event_type: - stash.put(string_to_uuid(event_type + NO_DATA_STRING), NO_DATA_STRING) + request_origin = request.headers.get("Origin") or NO_DATA_STRING + request_referrer = request.headers.get("Referer") or NO_DATA_STRING + stash.put(string_to_uuid(event_type + NO_DATA_STRING), + (request_origin + b"," + request_referrer)) return (200, [], b"") return (400, [], u"") diff --git a/tests/wpt/tests/fenced-frame/resources/utils.js b/tests/wpt/tests/fenced-frame/resources/utils.js index 49148025187..218ac281f65 100644 --- a/tests/wpt/tests/fenced-frame/resources/utils.js +++ b/tests/wpt/tests/fenced-frame/resources/utils.js @@ -283,13 +283,13 @@ function attachContext(object_constructor, html, headers, origin) { async function attachOpaqueContext( generator_api, resolve_to_config, ad_with_size, requested_size, register_beacon, object_constructor, html, headers, origin, - num_components) { + component_origin, num_components) { const [uuid, url] = generateRemoteContextURL(headers, origin); let components_list = []; for (let i = 0; i < num_components; i++) { let [component_uuid, component_url] = - generateRemoteContextURL(headers, origin); + generateRemoteContextURL(headers, component_origin); // This field will be read by attachComponentFrameContext() in order to // know what uuid to point to when building the remote context. html += '<input type=\'hidden\' id=\'component_uuid_' + i + '\' value=\'' + @@ -309,13 +309,14 @@ async function attachOpaqueContext( function attachPotentiallyOpaqueContext( generator_api, resolve_to_config, ad_with_size, requested_size, - register_beacon, frame_constructor, html, headers, origin, num_components) { + register_beacon, frame_constructor, html, headers, origin, + component_origin, num_components) { generator_api = generator_api.toLowerCase(); if (generator_api == 'fledge' || generator_api == 'sharedstorage') { return attachOpaqueContext( generator_api, resolve_to_config, ad_with_size, requested_size, register_beacon, frame_constructor, html, headers, origin, - num_components); + component_origin, num_components); } else { return attachContext(frame_constructor, html, headers, origin); } @@ -324,7 +325,7 @@ function attachPotentiallyOpaqueContext( function attachFrameContext( element_name, generator_api, resolve_to_config, ad_with_size, requested_size, register_beacon, html, headers, attributes, origin, - num_components) { + component_origin, num_components) { frame_constructor = (id) => { frame = document.createElement(element_name); attributes.forEach(attribute => { @@ -344,7 +345,7 @@ function attachFrameContext( return attachPotentiallyOpaqueContext( generator_api, resolve_to_config, ad_with_size, requested_size, register_beacon, frame_constructor, html, headers, origin, - num_components); + component_origin, num_components); } // Performs a content-initiated navigation of a frame proxy. This navigated page @@ -420,12 +421,13 @@ function attachFencedFrameContext({ headers = [], attributes = [], origin = '', + component_origin = '', num_components = 0 } = {}) { return attachFrameContext( 'fencedframe', generator_api, resolve_to_config, ad_with_size, requested_size, register_beacon, html, headers, attributes, origin, - num_components); + component_origin, num_components); } // Attach an iframe that waits for scripts to execute. @@ -437,12 +439,13 @@ function attachIFrameContext({ headers = [], attributes = [], origin = '', + component_origin = '', num_components = 0 } = {}) { return attachFrameContext( 'iframe', generator_api, resolve_to_config = false, ad_with_size = false, requested_size = null, register_beacon, html, headers, attributes, origin, - num_components); + component_origin, num_components); } // Open a window that waits for scripts to execute. diff --git a/tests/wpt/tests/fetch/fetch-later/README.md b/tests/wpt/tests/fetch/fetch-later/README.md index 661e2b91843..d70ad217b1c 100644 --- a/tests/wpt/tests/fetch/fetch-later/README.md +++ b/tests/wpt/tests/fetch/fetch-later/README.md @@ -1,3 +1,3 @@ # FetchLater Tests -These tests cover [FetchLater method](https://whatpr.org/fetch/1647/094ea69...152d725.html#fetch-later-method) related behaviors. +These tests cover [FetchLater method](https://whatpr.org/fetch/1647.html#dom-window-fetchlater) related behaviors. diff --git a/tests/wpt/tests/fetch/fetch-later/iframe.tentative.https.window.js b/tests/wpt/tests/fetch/fetch-later/iframe.tentative.https.window.js index 305272af419..4f261086360 100644 --- a/tests/wpt/tests/fetch/fetch-later/iframe.tentative.https.window.js +++ b/tests/wpt/tests/fetch/fetch-later/iframe.tentative.https.window.js @@ -51,13 +51,5 @@ parallelPromiseTest(async t => { await expectBeacon(uuid, {count: 1}); }, 'A same-origin iframe can trigger fetchLater.'); -parallelPromiseTest(async t => { - const uuid = token(); - const url = generateSetBeaconURL(uuid); - - // Loads a same-origin iframe that fires a fetchLater request. - await loadFetchLaterIframe(HTTPS_NOTSAMESITE_ORIGIN, url); - - // The iframe should have sent the request. - await expectBeacon(uuid, {count: 1}); -}, 'A cross-origin iframe can trigger fetchLater.'); +// The test to load a cross-origin iframe that fires a fetchLater request is in +// /fetch/fetch-later/permissions-policy/deferred-fetch-default-permissions-policy.tentative.https.window.js diff --git a/tests/wpt/tests/fetch/fetch-later/permissions-policy/README.md b/tests/wpt/tests/fetch/fetch-later/permissions-policy/README.md new file mode 100644 index 00000000000..a0a724a25e0 --- /dev/null +++ b/tests/wpt/tests/fetch/fetch-later/permissions-policy/README.md @@ -0,0 +1,8 @@ +# Permissions Policy: "deferred-fetch" Tests + +This folder contains tests to cover the permissions policy "deferred-fetch", +which is used to gate the `fetchLater()` API. + +The tests follow the patterns from +permissions-policy/README.md to cover all use cases of permissions policy for a +new feature. diff --git a/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute-redirect.tentative.https.window.js b/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute-redirect.tentative.https.window.js new file mode 100644 index 00000000000..2f168f06508 --- /dev/null +++ b/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute-redirect.tentative.https.window.js @@ -0,0 +1,31 @@ +// META: title=Permissions Policy "deferred-fetch" is allowed to redirect by allow attribute +// META: script=/permissions-policy/resources/permissions-policy.js +// META: script=/common/utils.js +// META: script=/common/get-host-info.sub.js +// META: script=/fetch/fetch-later/resources/fetch-later-helper.js +// META: script=/fetch/fetch-later/permissions-policy/resources/helper.js +// META: timeout=long +'use strict'; + +const { + HTTPS_ORIGIN, + HTTPS_NOTSAMESITE_ORIGIN, +} = get_host_info(); + +const baseUrl = '/permissions-policy/resources/redirect-on-load.html#'; +const description = 'Permissions policy allow="deferred-fetch"'; + +async_test(t => { + test_feature_availability( + 'fetchLater()', t, + getDeferredFetchPolicyInIframeHelperUrl(`${baseUrl}${HTTPS_ORIGIN}`), + expect_feature_available_default, /*feature_name=*/ 'deferred-fetch'); +}, `${description} allows same-origin navigation in an iframe.`); + +async_test(t => { + test_feature_availability( + 'fetchLater()', t, + getDeferredFetchPolicyInIframeHelperUrl( + `${baseUrl}${HTTPS_NOTSAMESITE_ORIGIN}`), + expect_feature_unavailable_default, /*feature_name=*/ 'deferred-fetch'); +}, `${description} disallows cross-origin navigation in an iframe.`); diff --git a/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute.tentative.https.window.js b/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute.tentative.https.window.js new file mode 100644 index 00000000000..c881609b4f1 --- /dev/null +++ b/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy-attribute.tentative.https.window.js @@ -0,0 +1,36 @@ +// META: title=Permissions Policy "deferred-fetch" is allowed by allow attribute +// META: script=/permissions-policy/resources/permissions-policy.js +// META: script=/common/utils.js +// META: script=/common/get-host-info.sub.js +// META: script=/fetch/fetch-later/resources/fetch-later-helper.js +// META: script=/fetch/fetch-later/permissions-policy/resources/helper.js +// META: timeout=long +'use strict'; + +const { + HTTPS_ORIGIN, + HTTPS_NOTSAMESITE_ORIGIN, +} = get_host_info(); + +const description = 'Permissions policy "deferred-fetch"'; +const attribute = 'allow="deferred-fetch" attribute'; + +async_test( + t => { + test_feature_availability( + 'fetchLater()', t, + getDeferredFetchPolicyInIframeHelperUrl(HTTPS_ORIGIN), + expect_feature_available_default, /*feature_name=*/ 'deferred-fetch'); + }, + `${description} can be enabled in the same-origin iframe using ${ + attribute}.`); + +async_test( + t => { + test_feature_availability( + 'fetchLater()', t, + getDeferredFetchPolicyInIframeHelperUrl(HTTPS_NOTSAMESITE_ORIGIN), + expect_feature_available_default, /*feature_name=*/ 'deferred-fetch'); + }, + `${description} can be enabled in the cross-origin iframe using ${ + attribute}.`); diff --git a/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy.tentative.https.window.js b/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy.tentative.https.window.js new file mode 100644 index 00000000000..b65013d177f --- /dev/null +++ b/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy.tentative.https.window.js @@ -0,0 +1,45 @@ +// META: title=Permissions Policy "deferred-fetch" is allowed +// META: script=/permissions-policy/resources/permissions-policy.js +// META: script=/common/utils.js +// META: script=/common/get-host-info.sub.js +// META: script=/fetch/fetch-later/resources/fetch-later-helper.js +// META: script=/fetch/fetch-later/permissions-policy/resources/helper.js +// META: timeout=long +'use strict'; + +const { + HTTPS_ORIGIN, + HTTPS_NOTSAMESITE_ORIGIN, +} = get_host_info(); + +const description = 'Permissions policy header: "deferred-fetch=*"'; + +parallelPromiseTest(async _ => { + const uuid = token(); + const url = generateSetBeaconURL(uuid); + + // Request the browser to fetchLater() immediately. + fetchLater(url, {activateAfter: 0}); + + await expectBeacon(uuid, {count: 1}); +}, `${description} allows fetchLater() in the top-level document.`); + +async_test(t => { + test_feature_availability( + 'fetchLater()', t, getDeferredFetchPolicyInIframeHelperUrl(HTTPS_ORIGIN), + expect_feature_available_default); +}, `${description} allows fetchLater() in the same-origin iframe.`); + +async_test(t => { + test_feature_availability( + 'fetchLater()', t, + getDeferredFetchPolicyInIframeHelperUrl(HTTPS_NOTSAMESITE_ORIGIN), + expect_feature_unavailable_default); +}, `${description} disallows fetchLater() in the cross-origin iframe.`); + +async_test(t => { + test_feature_availability( + 'fetchLater()', t, + getDeferredFetchPolicyInIframeHelperUrl(HTTPS_NOTSAMESITE_ORIGIN), + expect_feature_available_default, /*feature_name=*/ 'deferred-fetch'); +}, `${description} allow="deferred-fetch" allows fetchLater() in the cross-origin iframe.`); diff --git a/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy.tentative.https.window.js.headers b/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy.tentative.https.window.js.headers new file mode 100644 index 00000000000..cd356bd1a39 --- /dev/null +++ b/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-allowed-by-permissions-policy.tentative.https.window.js.headers @@ -0,0 +1 @@ +Permissions-Policy: deferred-fetch=* diff --git a/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-default-permissions-policy.tentative.https.window.js b/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-default-permissions-policy.tentative.https.window.js new file mode 100644 index 00000000000..51b7e518449 --- /dev/null +++ b/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-default-permissions-policy.tentative.https.window.js @@ -0,0 +1,38 @@ +// META: title=Permissions Policy "deferred-fetch" default behavior +// META: script=/permissions-policy/resources/permissions-policy.js +// META: script=/common/utils.js +// META: script=/common/get-host-info.sub.js +// META: script=/fetch/fetch-later/resources/fetch-later-helper.js +// META: script=/fetch/fetch-later/permissions-policy/resources/helper.js +// META: timeout=long +'use strict'; + +const { + HTTPS_ORIGIN, + HTTPS_NOTSAMESITE_ORIGIN, +} = get_host_info(); + +const description = 'Default "deferred-fetch" permissions policy ["self"]'; + +parallelPromiseTest(async _ => { + const uuid = token(); + const url = generateSetBeaconURL(uuid); + + // Request the browser to fetchLater() immediately. + fetchLater(url, {activateAfter: 0}); + + await expectBeacon(uuid, {count: 1}); +}, `${description} allows fetchLater() in the top-level document.`); + +async_test(t => { + test_feature_availability( + 'fetchLater()', t, getDeferredFetchPolicyInIframeHelperUrl(HTTPS_ORIGIN), + expect_feature_available_default); +}, `${description} allows fetchLater() in the same-origin iframe.`); + +async_test(t => { + test_feature_availability( + 'fetchLater()', t, + getDeferredFetchPolicyInIframeHelperUrl(HTTPS_NOTSAMESITE_ORIGIN), + expect_feature_unavailable_default); +}, `${description} disallows fetchLater() in the cross-origin iframe.`); diff --git a/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-disabled-by-permissions-policy.tentative.https.window.js b/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-disabled-by-permissions-policy.tentative.https.window.js new file mode 100644 index 00000000000..283f703a283 --- /dev/null +++ b/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-disabled-by-permissions-policy.tentative.https.window.js @@ -0,0 +1,34 @@ +// META: title=Permissions Policy "deferred-fetch" is disabled +// META: script=/permissions-policy/resources/permissions-policy.js +// META: script=/common/utils.js +// META: script=/common/get-host-info.sub.js +// META: script=/fetch/fetch-later/resources/fetch-later-helper.js +// META: script=/fetch/fetch-later/permissions-policy/resources/helper.js +// META: timeout=long +'use strict'; + +const { + HTTPS_ORIGIN, + HTTPS_NOTSAMESITE_ORIGIN, +} = get_host_info(); + +const description = 'Permissions policy header: "deferred-fetch=()"'; + +parallelPromiseTest(async _ => { + // Request the browser to fetchLater() immediately, which is not allowed. + assert_throws_dom( + 'NotAllowedError', () => fetchLater('/', {activateAfter: 0})); +}, `${description} disallows fetchLater() in the top-level document.`); + +async_test(t => { + test_feature_availability( + 'fetchLater()', t, getDeferredFetchPolicyInIframeHelperUrl(HTTPS_ORIGIN), + expect_feature_unavailable_default); +}, `${description} disallows fetchLater() in the same-origin iframe.`); + +async_test(t => { + test_feature_availability( + 'fetchLater()', t, + getDeferredFetchPolicyInIframeHelperUrl(HTTPS_NOTSAMESITE_ORIGIN), + expect_feature_unavailable_default); +}, `${description} disallows fetchLater() in the cross-origin iframe.`); diff --git a/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-disabled-by-permissions-policy.tentative.https.window.js.headers b/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-disabled-by-permissions-policy.tentative.https.window.js.headers new file mode 100644 index 00000000000..9c2b593ec80 --- /dev/null +++ b/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-disabled-by-permissions-policy.tentative.https.window.js.headers @@ -0,0 +1 @@ +Permissions-Policy: deferred-fetch=() diff --git a/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-supported-by-permissions-policy.tentative.window.js b/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-supported-by-permissions-policy.tentative.window.js new file mode 100644 index 00000000000..e89f1edb856 --- /dev/null +++ b/tests/wpt/tests/fetch/fetch-later/permissions-policy/deferred-fetch-supported-by-permissions-policy.tentative.window.js @@ -0,0 +1,8 @@ +// META: title=The feature list should advertise deferred-fetch +'use strict'; + +// https://w3c.github.io/webappsec-permissions-policy/#dom-permissions-policy-features +// https://wicg.github.io/local-fonts/#permissions-policy +test(() => { + assert_in_array('deferred-fetch', document.featurePolicy.features()); +}, 'document.featurePolicy.features should advertise deferred-fetch.'); diff --git a/tests/wpt/tests/fetch/fetch-later/permissions-policy/resources/helper.js b/tests/wpt/tests/fetch/fetch-later/permissions-policy/resources/helper.js new file mode 100644 index 00000000000..5cbb183acf1 --- /dev/null +++ b/tests/wpt/tests/fetch/fetch-later/permissions-policy/resources/helper.js @@ -0,0 +1,13 @@ +'use strict'; + +/** + * Returns an URL to a document that can be used to initialize an iframe to test + * whether the "deferred-fetch"policy is enabled. + */ +function getDeferredFetchPolicyInIframeHelperUrl(iframeOrigin) { + if (!iframeOrigin.endsWith('/')) { + iframeOrigin += '/'; + } + return `${ + iframeOrigin}fetch/fetch-later/permissions-policy/resources/permissions-policy-deferred-fetch.html`; +} diff --git a/tests/wpt/tests/fetch/fetch-later/permissions-policy/resources/permissions-policy-deferred-fetch.html b/tests/wpt/tests/fetch/fetch-later/permissions-policy/resources/permissions-policy-deferred-fetch.html new file mode 100644 index 00000000000..f5ce3178db4 --- /dev/null +++ b/tests/wpt/tests/fetch/fetch-later/permissions-policy/resources/permissions-policy-deferred-fetch.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<script> +'use strict'; + +window.onload = () => { + let enabled = true; + try { + fetchLater('/', {activateAfter: 0}); + } catch (e) { + enabled = false; + } + parent.postMessage({ type: 'availability-result', enabled }, '*'); +} +</script> diff --git a/tests/wpt/tests/geolocation-API/disabled-by-permissions-policy.https.sub.html b/tests/wpt/tests/geolocation-API/disabled-by-permissions-policy.https.sub.html index d3d94e1d3d7..ec34a4998da 100644 --- a/tests/wpt/tests/geolocation-API/disabled-by-permissions-policy.https.sub.html +++ b/tests/wpt/tests/geolocation-API/disabled-by-permissions-policy.https.sub.html @@ -19,9 +19,14 @@ }); promise_test(async (test) => { - const posError = await new Promise((resolve, reject) => { + // These operations are slow, so let's do them in parallel. + const getCurrentPositionPromise = new Promise((resolve, reject) => { navigator.geolocation.getCurrentPosition(reject, resolve); }); + const watchPositionPromise = new Promise((resolve, reject) => { + navigator.geolocation.watchPosition(reject, resolve); + }); + const posError = await getCurrentPositionPromise; assert_true( posError instanceof GeolocationPositionError, @@ -34,9 +39,7 @@ "Expected PERMISSION_DENIED" ); - const watchError = await new Promise((resolve, reject) => { - navigator.geolocation.watchPosition(reject, resolve); - }); + const watchError = await watchPositionPromise; assert_true( watchError instanceof GeolocationPositionError, "Expected instance of GeolocationPositionError" diff --git a/tests/wpt/tests/geolocation-API/non-fully-active.https.html b/tests/wpt/tests/geolocation-API/non-fully-active.https.html index 13853c0ef86..7b381be7fff 100644 --- a/tests/wpt/tests/geolocation-API/non-fully-active.https.html +++ b/tests/wpt/tests/geolocation-API/non-fully-active.https.html @@ -17,14 +17,13 @@ // Create the iframe, wait for it to load... const iframe = document.createElement("iframe"); - iframe.src = "resources/iframe.html"; - iframe.allow = "geolocation"; - document.body.appendChild(iframe); - // ...wait for the iframe to load... - await new Promise((resolve) => - iframe.addEventListener("load", resolve, { once: true }) - ); + await new Promise((resolve) => { + iframe.src = "resources/iframe.html"; + iframe.allow = "geolocation"; + iframe.addEventListener("load", resolve, { once: true }); + document.body.appendChild(iframe); + }); // Steal geolocation. const geo = iframe.contentWindow.navigator.geolocation; diff --git a/tests/wpt/tests/html/browsers/the-window-object/open-close/close_noopener_beforeunload-1.html b/tests/wpt/tests/html/browsers/the-window-object/open-close/close_noopener_beforeunload-1.html new file mode 100644 index 00000000000..fc114bc443e --- /dev/null +++ b/tests/wpt/tests/html/browsers/the-window-object/open-close/close_noopener_beforeunload-1.html @@ -0,0 +1,8 @@ +<!doctype html> +<script> +let chan = new BroadcastChannel("close_noopener_beforeunload" + location.search); +onload = function() { window.close(); }; +onbeforeunload = function() { + chan.postMessage({ name: "beforeunload", history: history.length }); +} +</script> diff --git a/tests/wpt/tests/html/browsers/the-window-object/open-close/close_noopener_beforeunload-2.html b/tests/wpt/tests/html/browsers/the-window-object/open-close/close_noopener_beforeunload-2.html new file mode 100644 index 00000000000..4cce1e2e6f7 --- /dev/null +++ b/tests/wpt/tests/html/browsers/the-window-object/open-close/close_noopener_beforeunload-2.html @@ -0,0 +1,6 @@ +<!doctype html> +<script> +onload = function() { + setTimeout(() => window.location = "close_noopener_beforeunload-1.html" + location.search, 0); +} +</script> diff --git a/tests/wpt/tests/html/browsers/the-window-object/open-close/close_noopener_beforeunload.html b/tests/wpt/tests/html/browsers/the-window-object/open-close/close_noopener_beforeunload.html new file mode 100644 index 00000000000..6862a70b8c1 --- /dev/null +++ b/tests/wpt/tests/html/browsers/the-window-object/open-close/close_noopener_beforeunload.html @@ -0,0 +1,24 @@ +<!doctype html> +<title>Running beforeunload handler in window.close() for noopener window</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<script> +async_test(t => { + window.open("close_noopener_beforeunload-2.html?2", "", "noopener"); + let chan = new BroadcastChannel("close_noopener_beforeunload?2"); + chan.onmessage = t.step_func_done(function(event) { + assert_equals(event.data.name, "beforeunload", "correct message received"); + assert_equals(event.data.history, 2, "session history has multiple entries"); + }); +}, "closing noopener window with 2 entries"); + +async_test(t => { + window.open("close_noopener_beforeunload-1.html?1", "", "noopener"); + let chan = new BroadcastChannel("close_noopener_beforeunload?1"); + chan.onmessage = t.step_func_done(function(event) { + assert_equals(event.data.name, "beforeunload", "correct message received"); + assert_equals(event.data.history, 1, "session history has a single entry"); + }); +}, "closing noopener window with 1 entry"); +</script> diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html deleted file mode 100644 index c56f13f2fd5..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html +++ /dev/null @@ -1,72 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform.html deleted file mode 100644 index 91decadfe2d..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform.html +++ /dev/null @@ -1,77 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html deleted file mode 100644 index e5f8ba0db43..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html +++ /dev/null @@ -1,76 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation.html deleted file mode 100644 index d6b28315f21..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation.html +++ /dev/null @@ -1,81 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html deleted file mode 100644 index debbd430c43..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html +++ /dev/null @@ -1,78 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform.html deleted file mode 100644 index e0b8e45b51a..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform.html +++ /dev/null @@ -1,83 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation-expected.html deleted file mode 100644 index 75a55e591b6..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation-expected.html +++ /dev/null @@ -1,82 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation.html deleted file mode 100644 index f3891369c94..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation.html +++ /dev/null @@ -1,87 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html deleted file mode 100644 index cf875595821..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html +++ /dev/null @@ -1,72 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform.html deleted file mode 100644 index 195905e16bf..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform.html +++ /dev/null @@ -1,77 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html deleted file mode 100644 index 2f9bb208fb0..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html +++ /dev/null @@ -1,76 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation.html deleted file mode 100644 index 905fd7637b8..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation.html +++ /dev/null @@ -1,81 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html deleted file mode 100644 index 2b4436806a4..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html +++ /dev/null @@ -1,78 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform.html deleted file mode 100644 index df008cf12e9..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform.html +++ /dev/null @@ -1,83 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation-expected.html deleted file mode 100644 index da144975a57..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation-expected.html +++ /dev/null @@ -1,82 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation.html deleted file mode 100644 index 99e1d954437..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation.html +++ /dev/null @@ -1,87 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html deleted file mode 100644 index 489d4322823..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html +++ /dev/null @@ -1,72 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform.html deleted file mode 100644 index 1720f20589f..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform.html +++ /dev/null @@ -1,77 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html deleted file mode 100644 index 63913ffb057..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html +++ /dev/null @@ -1,76 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation.html deleted file mode 100644 index 87cd91bb120..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation.html +++ /dev/null @@ -1,81 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html deleted file mode 100644 index 021581f8925..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html +++ /dev/null @@ -1,78 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform.html deleted file mode 100644 index e8d01065c1d..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform.html +++ /dev/null @@ -1,83 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation-expected.html deleted file mode 100644 index dd9a5c2a001..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation-expected.html +++ /dev/null @@ -1,82 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation.html deleted file mode 100644 index 5c7fa379f14..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation.html +++ /dev/null @@ -1,87 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html deleted file mode 100644 index 482ab25a855..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html +++ /dev/null @@ -1,98 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html deleted file mode 100644 index 188d5ea98be..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html +++ /dev/null @@ -1,77 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html deleted file mode 100644 index 3af6b863edd..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html +++ /dev/null @@ -1,102 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html deleted file mode 100644 index 849a0c997e6..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html +++ /dev/null @@ -1,81 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html deleted file mode 100644 index d530ef9d190..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html +++ /dev/null @@ -1,104 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html deleted file mode 100644 index 34ded8fef59..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html +++ /dev/null @@ -1,83 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html deleted file mode 100644 index 80705c36fdb..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html +++ /dev/null @@ -1,108 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation.html deleted file mode 100644 index 78407dd4596..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation.html +++ /dev/null @@ -1,87 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html deleted file mode 100644 index 2f513bff0a6..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html +++ /dev/null @@ -1,98 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html deleted file mode 100644 index e3c36d3c0e6..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html +++ /dev/null @@ -1,77 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html deleted file mode 100644 index 242973300fb..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html +++ /dev/null @@ -1,102 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html deleted file mode 100644 index 466513864ed..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html +++ /dev/null @@ -1,81 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html deleted file mode 100644 index c8926e5e15d..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html +++ /dev/null @@ -1,104 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html deleted file mode 100644 index bc7cfd314eb..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html +++ /dev/null @@ -1,83 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html deleted file mode 100644 index e70fe3e92d8..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html +++ /dev/null @@ -1,108 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation.html deleted file mode 100644 index f304e9c8e87..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation.html +++ /dev/null @@ -1,87 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html deleted file mode 100644 index 21aa241aca8..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html +++ /dev/null @@ -1,98 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html deleted file mode 100644 index ac5c7303a81..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html +++ /dev/null @@ -1,77 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html deleted file mode 100644 index b2b46ee039c..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html +++ /dev/null @@ -1,102 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html deleted file mode 100644 index 3158a2fff34..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html +++ /dev/null @@ -1,81 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html deleted file mode 100644 index d11326d5d68..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html +++ /dev/null @@ -1,104 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html deleted file mode 100644 index 839ab13add8..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html +++ /dev/null @@ -1,83 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html deleted file mode 100644 index 3ac098c3448..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html +++ /dev/null @@ -1,108 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation.html deleted file mode 100644 index 7c090165f59..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation.html +++ /dev/null @@ -1,87 +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.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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html deleted file mode 100644 index a445ae2c4a4..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html +++ /dev/null @@ -1,98 +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-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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html deleted file mode 100644 index d2b2d806c4b..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html +++ /dev/null @@ -1,77 +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-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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html deleted file mode 100644 index 610c601b1cb..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html +++ /dev/null @@ -1,102 +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-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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html deleted file mode 100644 index afc4ebbd405..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html +++ /dev/null @@ -1,81 +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-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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html deleted file mode 100644 index 6bd4501584a..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html +++ /dev/null @@ -1,104 +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-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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html deleted file mode 100644 index 93caac12fc9..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html +++ /dev/null @@ -1,83 +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-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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html deleted file mode 100644 index b60a5526d9d..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html +++ /dev/null @@ -1,108 +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-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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html deleted file mode 100644 index 6849a2f40de..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html +++ /dev/null @@ -1,87 +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-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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-transform-expected.html new file mode 100644 index 00000000000..c57e2568478 --- /dev/null +++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-transform-expected.html @@ -0,0 +1,770 @@ +<!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-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.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(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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> + <div>no-composite-op</div> + <div>no-shadow</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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</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'); + + 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> + <div>blending</div> + <div>no-shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</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'); + + 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> + <div>composite</div> + <div>no-shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</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'); + + 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> + <div>copy</div> + <div>no-shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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'); + + 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> + <div>no-composite-op</div> + <div>shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</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'); + + 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> + <div>blending</div> + <div>shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</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'); + + 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> + <div>composite</div> + <div>shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</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'); + + 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> + <div>copy</div> + <div>shadow</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'); + + 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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-transform.html new file mode 100644 index 00000000000..dc55eeb38cf --- /dev/null +++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-transform.html @@ -0,0 +1,595 @@ +<!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-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.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(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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> + <div>no-composite-op</div> + <div>no-shadow</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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</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'); + + // 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> + <div>blending</div> + <div>no-shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</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'); + + // 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> + <div>composite</div> + <div>no-shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</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'); + + // 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> + <div>copy</div> + <div>no-shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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'); + + // 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> + <div>no-composite-op</div> + <div>shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</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'); + + // 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> + <div>blending</div> + <div>shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</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'); + + // 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> + <div>composite</div> + <div>shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</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'); + + // 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> + <div>copy</div> + <div>shadow</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'); + + // 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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.rotation-expected.html new file mode 100644 index 00000000000..650a40bb80c --- /dev/null +++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.rotation-expected.html @@ -0,0 +1,802 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.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(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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> + <div>no-composite-op</div> + <div>no-shadow</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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</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'); + + 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> + <div>blending</div> + <div>no-shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</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'); + + 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> + <div>composite</div> + <div>no-shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</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'); + + 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> + <div>copy</div> + <div>no-shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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'); + + 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> + <div>no-composite-op</div> + <div>shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</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'); + + 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> + <div>blending</div> + <div>shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</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'); + + 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> + <div>composite</div> + <div>shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</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'); + + 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> + <div>copy</div> + <div>shadow</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'); + + 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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.rotation.html new file mode 100644 index 00000000000..49676d458ef --- /dev/null +++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.rotation.html @@ -0,0 +1,627 @@ +<!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.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.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(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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> + <div>no-composite-op</div> + <div>no-shadow</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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</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, 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> + <div>blending</div> + <div>no-shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</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, 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> + <div>composite</div> + <div>no-shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</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, 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> + <div>copy</div> + <div>no-shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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, 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> + <div>no-composite-op</div> + <div>shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</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, 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> + <div>blending</div> + <div>shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</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, 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> + <div>composite</div> + <div>shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</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, 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> + <div>copy</div> + <div>shadow</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, 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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html deleted file mode 100644 index d1a799707f5..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html +++ /dev/null @@ -1,72 +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-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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html deleted file mode 100644 index f0fd2d19e3b..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html +++ /dev/null @@ -1,77 +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-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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html deleted file mode 100644 index cc91a67faf8..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html +++ /dev/null @@ -1,76 +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-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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html deleted file mode 100644 index 7ab850023e0..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html +++ /dev/null @@ -1,81 +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-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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html deleted file mode 100644 index 02b239116c0..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html +++ /dev/null @@ -1,78 +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-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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html deleted file mode 100644 index 9da1936c5df..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html +++ /dev/null @@ -1,83 +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-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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html deleted file mode 100644 index 06f6a2dff3e..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html +++ /dev/null @@ -1,82 +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-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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html deleted file mode 100644 index 00ace7c54d8..00000000000 --- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html +++ /dev/null @@ -1,87 +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-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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-transform-expected.html new file mode 100644 index 00000000000..ad6f64043f6 --- /dev/null +++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-transform-expected.html @@ -0,0 +1,562 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.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(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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> + <div>no-composite-op</div> + <div>no-shadow</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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</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'); + + // 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> + <div>blending</div> + <div>no-shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</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'); + + // 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> + <div>composite</div> + <div>no-shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</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'); + + // 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> + <div>copy</div> + <div>no-shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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'); + + // 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> + <div>no-composite-op</div> + <div>shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</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'); + + // 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> + <div>blending</div> + <div>shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</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'); + + // 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> + <div>composite</div> + <div>shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</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'); + + // 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> + <div>copy</div> + <div>shadow</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'); + + // 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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-transform.html new file mode 100644 index 00000000000..cabbe954cee --- /dev/null +++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-transform.html @@ -0,0 +1,595 @@ +<!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-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.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(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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> + <div>no-composite-op</div> + <div>no-shadow</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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</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'); + + // 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> + <div>blending</div> + <div>no-shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</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'); + + // 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> + <div>composite</div> + <div>no-shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</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'); + + // 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> + <div>copy</div> + <div>no-shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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'); + + // 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> + <div>no-composite-op</div> + <div>shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</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'); + + // 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> + <div>blending</div> + <div>shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</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'); + + // 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> + <div>composite</div> + <div>shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</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'); + + // 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> + <div>copy</div> + <div>shadow</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'); + + // 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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.rotation-expected.html new file mode 100644 index 00000000000..376504488c3 --- /dev/null +++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.rotation-expected.html @@ -0,0 +1,594 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.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(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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> + <div>no-composite-op</div> + <div>no-shadow</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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</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, 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> + <div>blending</div> + <div>no-shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</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, 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> + <div>composite</div> + <div>no-shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</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, 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> + <div>copy</div> + <div>no-shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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, 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> + <div>no-composite-op</div> + <div>shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</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, 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> + <div>blending</div> + <div>shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</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, 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> + <div>composite</div> + <div>shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</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, 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> + <div>copy</div> + <div>shadow</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, 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/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.rotation.html new file mode 100644 index 00000000000..240a510b844 --- /dev/null +++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.rotation.html @@ -0,0 +1,627 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.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(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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> + <div>no-composite-op</div> + <div>no-shadow</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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</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, 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> + <div>blending</div> + <div>no-shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</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, 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> + <div>composite</div> + <div>no-shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</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, 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> + <div>copy</div> + <div>no-shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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, 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> + <div>no-composite-op</div> + <div>shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</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, 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> + <div>blending</div> + <div>shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</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, 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> + <div>composite</div> + <div>shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</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, 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> + <div>copy</div> + <div>shadow</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, 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/tests/wpt/tests/html/canvas/offscreen/canvas-host/2d.canvas.host.initial.reset.2dstate.html b/tests/wpt/tests/html/canvas/offscreen/canvas-host/2d.canvas.host.initial.reset.2dstate.html index 36230dab773..f6aaf9c9bbb 100644 --- a/tests/wpt/tests/html/canvas/offscreen/canvas-host/2d.canvas.host.initial.reset.2dstate.html +++ b/tests/wpt/tests/html/canvas/offscreen/canvas-host/2d.canvas.host.initial.reset.2dstate.html @@ -82,7 +82,6 @@ t.step(function() { ctx.globalCompositeOperation = "copy"; canvas.width = 100; _assertSame(ctx.globalCompositeOperation, default_val, "ctx.globalCompositeOperation", "default_val"); - t.done(); }); diff --git a/tests/wpt/tests/html/canvas/offscreen/canvas-host/2d.canvas.host.initial.reset.2dstate.worker.js b/tests/wpt/tests/html/canvas/offscreen/canvas-host/2d.canvas.host.initial.reset.2dstate.worker.js index df0bd9f63cb..fe0db573c6d 100644 --- a/tests/wpt/tests/html/canvas/offscreen/canvas-host/2d.canvas.host.initial.reset.2dstate.worker.js +++ b/tests/wpt/tests/html/canvas/offscreen/canvas-host/2d.canvas.host.initial.reset.2dstate.worker.js @@ -78,7 +78,6 @@ t.step(function() { ctx.globalCompositeOperation = "copy"; canvas.width = 100; _assertSame(ctx.globalCompositeOperation, default_val, "ctx.globalCompositeOperation", "default_val"); - t.done(); }); done(); diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html deleted file mode 100644 index c56f13f2fd5..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html +++ /dev/null @@ -1,72 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.html deleted file mode 100644 index 1f8736e0e4d..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.html +++ /dev/null @@ -1,85 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.w.html deleted file mode 100644 index 2bd46eee66e..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.w.html +++ /dev/null @@ -1,116 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html deleted file mode 100644 index e5f8ba0db43..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html +++ /dev/null @@ -1,76 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.html deleted file mode 100644 index 04707779884..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.html +++ /dev/null @@ -1,89 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.w.html deleted file mode 100644 index 4d33b3a638e..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.w.html +++ /dev/null @@ -1,120 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html deleted file mode 100644 index debbd430c43..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html +++ /dev/null @@ -1,78 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.html deleted file mode 100644 index c6f0239c394..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.html +++ /dev/null @@ -1,91 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.w.html deleted file mode 100644 index 0be246ebfb1..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.w.html +++ /dev/null @@ -1,122 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation-expected.html deleted file mode 100644 index 75a55e591b6..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation-expected.html +++ /dev/null @@ -1,82 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.html deleted file mode 100644 index aac9d86e660..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.html +++ /dev/null @@ -1,95 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.w.html deleted file mode 100644 index 86067b72994..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.w.html +++ /dev/null @@ -1,126 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html deleted file mode 100644 index cf875595821..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html +++ /dev/null @@ -1,72 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.html deleted file mode 100644 index 69dc916d7de..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.html +++ /dev/null @@ -1,85 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.w.html deleted file mode 100644 index aa358b57bcd..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.w.html +++ /dev/null @@ -1,116 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html deleted file mode 100644 index 2f9bb208fb0..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html +++ /dev/null @@ -1,76 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.html deleted file mode 100644 index d0d08f9835f..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.html +++ /dev/null @@ -1,89 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.w.html deleted file mode 100644 index 5e2cd0783df..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.w.html +++ /dev/null @@ -1,120 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html deleted file mode 100644 index 2b4436806a4..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html +++ /dev/null @@ -1,78 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.html deleted file mode 100644 index 8b79eba1285..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.html +++ /dev/null @@ -1,91 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.w.html deleted file mode 100644 index 47f2df391f6..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.w.html +++ /dev/null @@ -1,122 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation-expected.html deleted file mode 100644 index da144975a57..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation-expected.html +++ /dev/null @@ -1,82 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.html deleted file mode 100644 index 632d390986a..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.html +++ /dev/null @@ -1,95 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.w.html deleted file mode 100644 index dde0d8bec03..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.w.html +++ /dev/null @@ -1,126 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html deleted file mode 100644 index 489d4322823..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html +++ /dev/null @@ -1,72 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.html deleted file mode 100644 index 70b659f52ba..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.html +++ /dev/null @@ -1,85 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.w.html deleted file mode 100644 index 1db7f17a94d..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.w.html +++ /dev/null @@ -1,116 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html deleted file mode 100644 index 63913ffb057..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html +++ /dev/null @@ -1,76 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.html deleted file mode 100644 index 2151535015b..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.html +++ /dev/null @@ -1,89 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.w.html deleted file mode 100644 index 9c0cac99b91..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.w.html +++ /dev/null @@ -1,120 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html deleted file mode 100644 index 021581f8925..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html +++ /dev/null @@ -1,78 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.html deleted file mode 100644 index 42231fa61ee..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.html +++ /dev/null @@ -1,91 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.w.html deleted file mode 100644 index 20dc667ef87..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.w.html +++ /dev/null @@ -1,122 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation-expected.html deleted file mode 100644 index dd9a5c2a001..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation-expected.html +++ /dev/null @@ -1,82 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.html deleted file mode 100644 index 77158a9f962..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.html +++ /dev/null @@ -1,95 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.w.html deleted file mode 100644 index def6bc51e20..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.w.html +++ /dev/null @@ -1,126 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html deleted file mode 100644 index 482ab25a855..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html +++ /dev/null @@ -1,98 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html deleted file mode 100644 index 8acbfa668fb..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html +++ /dev/null @@ -1,85 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html deleted file mode 100644 index 93edfabdf3a..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html +++ /dev/null @@ -1,116 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html deleted file mode 100644 index 3af6b863edd..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html +++ /dev/null @@ -1,102 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html deleted file mode 100644 index 0a4a8c65d2f..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html +++ /dev/null @@ -1,89 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.w.html deleted file mode 100644 index 7caaf1edee3..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.w.html +++ /dev/null @@ -1,120 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html deleted file mode 100644 index d530ef9d190..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html +++ /dev/null @@ -1,104 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html deleted file mode 100644 index 1ee32543245..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html +++ /dev/null @@ -1,91 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.w.html deleted file mode 100644 index 3ec656c135d..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.w.html +++ /dev/null @@ -1,122 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html deleted file mode 100644 index 80705c36fdb..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html +++ /dev/null @@ -1,108 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.html deleted file mode 100644 index 62af08d2ac5..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.html +++ /dev/null @@ -1,95 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.w.html deleted file mode 100644 index d5693cdcdcc..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.w.html +++ /dev/null @@ -1,126 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html deleted file mode 100644 index 2f513bff0a6..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html +++ /dev/null @@ -1,98 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html deleted file mode 100644 index 17394aa4c84..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html +++ /dev/null @@ -1,85 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html deleted file mode 100644 index 386ad43b0fe..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html +++ /dev/null @@ -1,116 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html deleted file mode 100644 index 242973300fb..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html +++ /dev/null @@ -1,102 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html deleted file mode 100644 index 576283ea732..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html +++ /dev/null @@ -1,89 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.w.html deleted file mode 100644 index 6dd39d77e95..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.w.html +++ /dev/null @@ -1,120 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html deleted file mode 100644 index c8926e5e15d..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html +++ /dev/null @@ -1,104 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html deleted file mode 100644 index b574a819d60..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html +++ /dev/null @@ -1,91 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.w.html deleted file mode 100644 index 96ee1b027b3..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.w.html +++ /dev/null @@ -1,122 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html deleted file mode 100644 index e70fe3e92d8..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html +++ /dev/null @@ -1,108 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.html deleted file mode 100644 index b7b4312a359..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.html +++ /dev/null @@ -1,95 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.w.html deleted file mode 100644 index 1ae9f00a858..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.w.html +++ /dev/null @@ -1,126 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html deleted file mode 100644 index 21aa241aca8..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html +++ /dev/null @@ -1,98 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html deleted file mode 100644 index f08ba940af4..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html +++ /dev/null @@ -1,85 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html deleted file mode 100644 index 75fc90bae67..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html +++ /dev/null @@ -1,116 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html deleted file mode 100644 index b2b46ee039c..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html +++ /dev/null @@ -1,102 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html deleted file mode 100644 index 3f12cf0c4e4..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html +++ /dev/null @@ -1,89 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.w.html deleted file mode 100644 index 0a3ecee6698..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.w.html +++ /dev/null @@ -1,120 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html deleted file mode 100644 index d11326d5d68..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html +++ /dev/null @@ -1,104 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html deleted file mode 100644 index b4996deb6f3..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html +++ /dev/null @@ -1,91 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.w.html deleted file mode 100644 index 9c13a367b32..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.w.html +++ /dev/null @@ -1,122 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html deleted file mode 100644 index 3ac098c3448..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html +++ /dev/null @@ -1,108 +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.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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.html deleted file mode 100644 index eab5f8312bb..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.html +++ /dev/null @@ -1,95 +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.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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.w.html deleted file mode 100644 index aebd6cc00d4..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.w.html +++ /dev/null @@ -1,126 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html deleted file mode 100644 index a445ae2c4a4..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html +++ /dev/null @@ -1,98 +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-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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html deleted file mode 100644 index f86b0fd37d7..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html +++ /dev/null @@ -1,85 +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-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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html deleted file mode 100644 index ab0836af94b..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html +++ /dev/null @@ -1,116 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html deleted file mode 100644 index 610c601b1cb..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html +++ /dev/null @@ -1,102 +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-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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html deleted file mode 100644 index 5854af853cb..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html +++ /dev/null @@ -1,89 +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-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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html deleted file mode 100644 index c08f1f9f3c6..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html +++ /dev/null @@ -1,120 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html deleted file mode 100644 index 6bd4501584a..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html +++ /dev/null @@ -1,104 +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-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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html deleted file mode 100644 index f1dc725b83a..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html +++ /dev/null @@ -1,91 +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-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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html deleted file mode 100644 index f1917478053..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html +++ /dev/null @@ -1,122 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html deleted file mode 100644 index b60a5526d9d..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html +++ /dev/null @@ -1,108 +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-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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html deleted file mode 100644 index 76258b326d6..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html +++ /dev/null @@ -1,95 +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-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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html deleted file mode 100644 index 9a10fb569fe..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html +++ /dev/null @@ -1,126 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-transform-expected.html new file mode 100644 index 00000000000..c57e2568478 --- /dev/null +++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-transform-expected.html @@ -0,0 +1,770 @@ +<!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-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.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(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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> + <div>no-composite-op</div> + <div>no-shadow</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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</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'); + + 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> + <div>blending</div> + <div>no-shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</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'); + + 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> + <div>composite</div> + <div>no-shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</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'); + + 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> + <div>copy</div> + <div>no-shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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'); + + 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> + <div>no-composite-op</div> + <div>shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</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'); + + 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> + <div>blending</div> + <div>shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</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'); + + 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> + <div>composite</div> + <div>shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</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'); + + 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> + <div>copy</div> + <div>shadow</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'); + + 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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-transform.html new file mode 100644 index 00000000000..3afded00405 --- /dev/null +++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-transform.html @@ -0,0 +1,659 @@ +<!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-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.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(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas2"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>blending</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas3"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas4"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>composite</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas5"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas6"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>copy</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas7"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas8"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas9"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas10"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>blending</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas11"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas12"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>composite</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas13"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas14"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>copy</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas15"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-transform.w.html new file mode 100644 index 00000000000..7b925b2539a --- /dev/null +++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-transform.w.html @@ -0,0 +1,886 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 16;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</div> + <canvas id="canvas2" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker2" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker2').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas2'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>blending</div> + <div>no-shadow</div> + <canvas id="canvas3" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker3" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker3').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas3'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</div> + <canvas id="canvas4" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker4" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker4').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas4'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>composite</div> + <div>no-shadow</div> + <canvas id="canvas5" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker5" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker5').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas5'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</div> + <canvas id="canvas6" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker6" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker6').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas6'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>copy</div> + <div>no-shadow</div> + <canvas id="canvas7" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker7" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker7').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas7'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</div> + <canvas id="canvas8" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker8" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker8').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas8'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</div> + <canvas id="canvas9" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker9" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker9').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas9'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</div> + <canvas id="canvas10" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker10" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker10').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas10'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>blending</div> + <div>shadow</div> + <canvas id="canvas11" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker11" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker11').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas11'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</div> + <canvas id="canvas12" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker12" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker12').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas12'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>composite</div> + <div>shadow</div> + <canvas id="canvas13" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker13" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker13').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas13'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</div> + <canvas id="canvas14" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker14" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker14').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas14'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>copy</div> + <div>shadow</div> + <canvas id="canvas15" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker15" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker15').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas15'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.rotation-expected.html new file mode 100644 index 00000000000..650a40bb80c --- /dev/null +++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.rotation-expected.html @@ -0,0 +1,802 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.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(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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> + <div>no-composite-op</div> + <div>no-shadow</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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</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'); + + 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> + <div>blending</div> + <div>no-shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</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'); + + 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> + <div>composite</div> + <div>no-shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</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'); + + 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> + <div>copy</div> + <div>no-shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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'); + + 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> + <div>no-composite-op</div> + <div>shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</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'); + + 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> + <div>blending</div> + <div>shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</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'); + + 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> + <div>composite</div> + <div>shadow</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'); + + 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</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'); + + 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> + <div>copy</div> + <div>shadow</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'); + + 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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.rotation.html new file mode 100644 index 00000000000..851b24adbd5 --- /dev/null +++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.rotation.html @@ -0,0 +1,691 @@ +<!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.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.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(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas2"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>blending</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas3"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas4"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>composite</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas5"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas6"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>copy</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas7"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas8"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas9"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas10"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>blending</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas11"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas12"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>composite</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas13"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas14"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>copy</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas15"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.rotation.w.html new file mode 100644 index 00000000000..adb85393eb1 --- /dev/null +++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.rotation.w.html @@ -0,0 +1,918 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 16;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</div> + <canvas id="canvas2" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker2" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker2').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas2'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>blending</div> + <div>no-shadow</div> + <canvas id="canvas3" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker3" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker3').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas3'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</div> + <canvas id="canvas4" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker4" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker4').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas4'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>composite</div> + <div>no-shadow</div> + <canvas id="canvas5" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker5" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker5').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas5'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</div> + <canvas id="canvas6" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker6" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker6').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas6'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>copy</div> + <div>no-shadow</div> + <canvas id="canvas7" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker7" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker7').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas7'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</div> + <canvas id="canvas8" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker8" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker8').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas8'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</div> + <canvas id="canvas9" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker9" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker9').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas9'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</div> + <canvas id="canvas10" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker10" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker10').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas10'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>blending</div> + <div>shadow</div> + <canvas id="canvas11" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker11" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker11').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas11'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</div> + <canvas id="canvas12" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker12" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker12').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas12'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>composite</div> + <div>shadow</div> + <canvas id="canvas13" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker13" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker13').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas13'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</div> + <canvas id="canvas14" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker14" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker14').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas14'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>copy</div> + <div>shadow</div> + <canvas id="canvas15" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker15" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker15').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas15'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html deleted file mode 100644 index d1a799707f5..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html +++ /dev/null @@ -1,72 +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-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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html deleted file mode 100644 index 016f78a5d8f..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html +++ /dev/null @@ -1,85 +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-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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html deleted file mode 100644 index 2a450624f1f..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html +++ /dev/null @@ -1,116 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html deleted file mode 100644 index cc91a67faf8..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html +++ /dev/null @@ -1,76 +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-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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html deleted file mode 100644 index 12a1e64b423..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html +++ /dev/null @@ -1,89 +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-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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html deleted file mode 100644 index a0f5f760990..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html +++ /dev/null @@ -1,120 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html deleted file mode 100644 index 02b239116c0..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html +++ /dev/null @@ -1,78 +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-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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html deleted file mode 100644 index 99301fde096..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html +++ /dev/null @@ -1,91 +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-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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.w.html deleted file mode 100644 index 46375f290c8..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.w.html +++ /dev/null @@ -1,122 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html deleted file mode 100644 index 06f6a2dff3e..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html +++ /dev/null @@ -1,82 +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-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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html deleted file mode 100644 index 280cc1cceb2..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html +++ /dev/null @@ -1,95 +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-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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas0"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 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 = new OffscreenCanvas(90, 90); - 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(); - - const outputCanvas = document.getElementById("canvas1"); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(canvas, 0, 0); - </script> -</span> - -</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.w.html deleted file mode 100644 index 3192f79afa7..00000000000 --- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.w.html +++ /dev/null @@ -1,126 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<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> -<script>pending_tests = 2;</script> - -<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 id="myWorker0" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker0').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas0'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </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 id="myWorker1" type="text/worker"> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(90, 90); - 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(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; - </script> - <script type="module"> - const blob = new Blob([document.getElementById('myWorker1').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCanvas = document.getElementById('canvas1'); - const outputCtx = outputCanvas.getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - if (--pending_tests == 0) { - document.documentElement.classList.remove('reftest-wait'); - } - }); - worker.postMessage(null); - </script> -</span> - -</div> -</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-transform-expected.html new file mode 100644 index 00000000000..ad6f64043f6 --- /dev/null +++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-transform-expected.html @@ -0,0 +1,562 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.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(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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> + <div>no-composite-op</div> + <div>no-shadow</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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</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'); + + // 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> + <div>blending</div> + <div>no-shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</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'); + + // 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> + <div>composite</div> + <div>no-shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</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'); + + // 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> + <div>copy</div> + <div>no-shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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'); + + // 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> + <div>no-composite-op</div> + <div>shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</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'); + + // 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> + <div>blending</div> + <div>shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</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'); + + // 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> + <div>composite</div> + <div>shadow</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'); + + // 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</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'); + + // 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> + <div>copy</div> + <div>shadow</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'); + + // 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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.html new file mode 100644 index 00000000000..d80b669af92 --- /dev/null +++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.html @@ -0,0 +1,659 @@ +<!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-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.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(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas2"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>blending</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas3"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas4"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>composite</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas5"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas6"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>copy</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas7"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas8"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas9"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas10"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>blending</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas11"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas12"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>composite</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas13"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas14"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>copy</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas15"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.w.html new file mode 100644 index 00000000000..e9e1f753a3c --- /dev/null +++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-transform.w.html @@ -0,0 +1,886 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 16;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</div> + <canvas id="canvas2" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker2" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker2').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas2'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>blending</div> + <div>no-shadow</div> + <canvas id="canvas3" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker3" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker3').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas3'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</div> + <canvas id="canvas4" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker4" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker4').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas4'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>composite</div> + <div>no-shadow</div> + <canvas id="canvas5" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker5" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker5').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas5'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</div> + <canvas id="canvas6" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker6" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker6').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas6'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>copy</div> + <div>no-shadow</div> + <canvas id="canvas7" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker7" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker7').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas7'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</div> + <canvas id="canvas8" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker8" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker8').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas8'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</div> + <canvas id="canvas9" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker9" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker9').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas9'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</div> + <canvas id="canvas10" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker10" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker10').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas10'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>blending</div> + <div>shadow</div> + <canvas id="canvas11" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker11" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker11').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas11'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</div> + <canvas id="canvas12" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker12" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker12').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas12'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>composite</div> + <div>shadow</div> + <canvas id="canvas13" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker13" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker13').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas13'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</div> + <canvas id="canvas14" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker14" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker14').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas14'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>copy</div> + <div>shadow</div> + <canvas id="canvas15" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker15" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker15').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas15'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.rotation-expected.html new file mode 100644 index 00000000000..376504488c3 --- /dev/null +++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.rotation-expected.html @@ -0,0 +1,594 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.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(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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> + <div>no-composite-op</div> + <div>no-shadow</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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</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, 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> + <div>blending</div> + <div>no-shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</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, 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> + <div>composite</div> + <div>no-shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</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, 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> + <div>copy</div> + <div>no-shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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, 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> + <div>no-composite-op</div> + <div>shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</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, 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> + <div>blending</div> + <div>shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</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, 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> + <div>composite</div> + <div>shadow</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, 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> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</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, 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> + <div>copy</div> + <div>shadow</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, 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/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.rotation.html new file mode 100644 index 00000000000..30d0ef5aca5 --- /dev/null +++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.rotation.html @@ -0,0 +1,691 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.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(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas2"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>blending</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas3"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas4"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>composite</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas5"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas6"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>copy</div> + <div>no-shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas7"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas8"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas9"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas10"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>blending</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas11"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas12"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>composite</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas13"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas14"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>copy</div> + <div>shadow</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 = new OffscreenCanvas(90, 90); + 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(); + + const outputCanvas = document.getElementById("canvas15"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.rotation.w.html new file mode 100644 index 00000000000..7f947d8dba2 --- /dev/null +++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.rotation.w.html @@ -0,0 +1,918 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 16;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(8, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>no-composite-op</div> + <div>no-shadow</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>no-shadow</div> + <canvas id="canvas2" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker2" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker2').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas2'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>blending</div> + <div>no-shadow</div> + <canvas id="canvas3" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker3" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker3').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas3'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>no-shadow</div> + <canvas id="canvas4" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker4" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker4').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas4'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>composite</div> + <div>no-shadow</div> + <canvas id="canvas5" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker5" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker5').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas5'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>no-shadow</div> + <canvas id="canvas6" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker6" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker6').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas6'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>copy</div> + <div>no-shadow</div> + <canvas id="canvas7" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker7" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker7').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas7'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</div> + <canvas id="canvas8" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker8" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker8').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas8'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>no-composite-op</div> + <div>shadow</div> + <canvas id="canvas9" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker9" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker9').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas9'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>blending</div> + <div>shadow</div> + <canvas id="canvas10" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker10" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker10').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas10'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>blending</div> + <div>shadow</div> + <canvas id="canvas11" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker11" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker11').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas11'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>composite</div> + <div>shadow</div> + <canvas id="canvas12" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker12" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker12').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas12'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>composite</div> + <div>shadow</div> + <canvas id="canvas13" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker13" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker13').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas13'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>no-globalAlpha</div> + <div>copy</div> + <div>shadow</div> + <canvas id="canvas14" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker14" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker14').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas14'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <div>copy</div> + <div>shadow</div> + <canvas id="canvas15" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker15" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + 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(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker15').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas15'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/tests/wpt/tests/html/canvas/tools/gentestutilsunion.py b/tests/wpt/tests/html/canvas/tools/gentestutilsunion.py index 415090a14ab..28802407995 100644 --- a/tests/wpt/tests/html/canvas/tools/gentestutilsunion.py +++ b/tests/wpt/tests/html/canvas/tools/gentestutilsunion.py @@ -34,6 +34,7 @@ from typing import Optional, Set, Tuple import re import collections +import copy import dataclasses import enum import importlib @@ -344,8 +345,19 @@ class _Variant(): params = { 'desc': '', 'size': [100, 50], - 'variant_names': [], + # Test name, which ultimately is used as filename. File variant + # dimension names are appended to this to produce unique filenames. + 'name': '', + # List of this variant grid dimension names. This uniquely + # identifies a single variant in a variant grid file. 'grid_variant_names': [], + # List of this variant dimension names, including both file and grid + # dimensions. + 'variant_names': [], + # Same as `variant_names`, but concatenated into a single string. + # This is a useful shorthand for tests having a single variant + # dimension. + 'variant_name': '', 'images': [], 'svgimages': [], } @@ -354,26 +366,26 @@ class _Variant(): def merge_params(self, params: _TestParams) -> '_Variant': """Returns a new `_Variant` that merges `self.params` and `params`.""" - new_params = {} - new_params.update(self.params) + new_params = copy.deepcopy(self._params) new_params.update(params) return _Variant(new_params) + def _add_variant_name(self, name: str) -> None: + self._params['variant_name'] += ( + ('.' if self.params['variant_name'] else '') + name) + self._params['variant_names'] += [name] + def with_grid_variant_name(self, name: str) -> '_Variant': """Addend a variant name to include in the grid element label.""" - self._params.update({ - 'variant_names': (self.params['variant_names'] + [name]), - 'grid_variant_names': (self.params['grid_variant_names'] + [name]), - }) + self._add_variant_name(name) + self._params['grid_variant_names'] += [name] return self def with_file_variant_name(self, name: str) -> '_Variant': """Addend a variant name to include in the generated file name.""" - self._params.update({ - 'variant_names': (self.params['variant_names'] + [name]), - }) + self._add_variant_name(name) if self.params.get('append_variants_to_name', True): - self._params['name'] = self.params['name'] + '.' + name + self._params['name'] += '.' + name return self def _render_param(self, jinja_env: jinja2.Environment, diff --git a/tests/wpt/tests/html/canvas/tools/templates/testharness_element_grid.html b/tests/wpt/tests/html/canvas/tools/templates/testharness_element_grid.html index b8f0ffe0200..ee2360f72c2 100644 --- a/tests/wpt/tests/html/canvas/tools/templates/testharness_element_grid.html +++ b/tests/wpt/tests/html/canvas/tools/templates/testharness_element_grid.html @@ -42,7 +42,7 @@ test(t => { {% endif %} const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'{% - if attributes %}, {{ variant.attributes }}{% endif %}); + if variant.attributes %}, {{ variant.attributes }}{% endif %}); {{ variant.code_element | trim | indent(2) }} }, "{{ variant.desc | double_quote_escape }}"); diff --git a/tests/wpt/tests/html/canvas/tools/yaml-new/filters.yaml b/tests/wpt/tests/html/canvas/tools/yaml-new/filters.yaml index 9a738a37bdc..f83776e3888 100644 --- a/tests/wpt/tests/html/canvas/tools/yaml-new/filters.yaml +++ b/tests/wpt/tests/html/canvas/tools/yaml-new/filters.yaml @@ -88,7 +88,7 @@ ctx.filter = 'this string is not a filter and should do nothing'; @assert ctx.filter.toString() == '[object CanvasFilter]'; -- name: 2d.filter.{{ variant_names[0] }}.blur.exceptions{{ tentative }} +- name: 2d.filter.{{ variant_name }}.blur.exceptions{{ tentative }} desc: Test exceptions on gaussianBlur filter code: | @assert throws TypeError {{ filter_declaration | replace("param", @@ -115,7 +115,7 @@ param) tentative: .tentative -- name: 2d.filter.{{ variant_names[0] }}.colorMatrix{{ tentative }} +- name: 2d.filter.{{ variant_name }}.colorMatrix{{ tentative }} desc: Test the functionality of ColorMatrix filters code: | @assert throws TypeError {{ filter_declaration | replace("param", @@ -210,7 +210,7 @@ param) tentative: .tentative -- name: 2d.filter.{{ variant_names[0] }}.convolveMatrix.exceptions{{ tentative }} +- name: 2d.filter.{{ variant_name }}.convolveMatrix.exceptions{{ tentative }} desc: Test exceptions on CanvasFilter() convolveMatrix code: | @assert throws TypeError {{ filter_declaration | replace("param", @@ -263,7 +263,7 @@ tentative: .tentative - name: >- - 2d.filter.{{ variant_names[0] }}.componentTransfer.linear{{ tentative }} + 2d.filter.{{ variant_name }}.componentTransfer.linear{{ tentative }} desc: Test pixels on CanvasFilter() componentTransfer with linear type size: [100, 100] fuzzy: maxDifference=0-2; totalPixels=0-500 @@ -334,7 +334,7 @@ tentative: .tentative - name: >- - 2d.filter.{{ variant_names[0] }}.componentTransfer.identity{{ tentative }} + 2d.filter.{{ variant_name }}.componentTransfer.identity{{ tentative }} desc: Test pixels on CanvasFilter() componentTransfer with identity type size: [100, 100] code: | @@ -385,7 +385,7 @@ tentative: .tentative - name: >- - 2d.filter.{{ variant_names[0] }}.componentTransfer.gamma{{ tentative }} + 2d.filter.{{ variant_name }}.componentTransfer.gamma{{ tentative }} desc: Test pixels on CanvasFilter() componentTransfer with gamma type size: [100, 100] fuzzy: maxDifference=0-2; totalPixels=0-500 @@ -460,7 +460,7 @@ tentative: .tentative - name: >- - 2d.filter.{{ variant_names[0] }}.componentTransfer.table{{ tentative }} + 2d.filter.{{ variant_name }}.componentTransfer.table{{ tentative }} desc: Test pixels on CanvasFilter() componentTransfer with table type size: [100, 100] fuzzy: maxDifference=0-2; totalPixels=0-500 @@ -539,7 +539,7 @@ tentative: .tentative - name: >- - 2d.filter.{{ variant_names[0] }}.componentTransfer.discrete{{ tentative }} + 2d.filter.{{ variant_name }}.componentTransfer.discrete{{ tentative }} desc: Test pixels on CanvasFilter() componentTransfer with discrete type size: [100, 100] fuzzy: maxDifference=0-2; totalPixels=0-500 @@ -665,7 +665,7 @@ blur_x: 0 blur_y: 4 -- name: 2d.filter.{{ variant_names[0] }}.dropShadow{{ tentative }} +- name: 2d.filter.{{ variant_name }}.dropShadow{{ tentative }} desc: Test CanvasFilter() dropShadow object. size: [520, 420] code: | @@ -827,7 +827,7 @@ ctx.filter = new CanvasFilter(param); tentative: .tentative -- name: 2d.filter.{{ variant_names[0] }}.dropShadow.exceptions{{ tentative }} +- name: 2d.filter.{{ variant_name }}.dropShadow.exceptions{{ tentative }} desc: Test exceptions on CanvasFilter() dropShadow object code: | // Should not throw an error. @@ -874,7 +874,7 @@ param) tentative: .tentative -- name: 2d.filter.{{ variant_names[0] }}.turbulence.inputTypes{{ tentative }} +- name: 2d.filter.{{ variant_name }}.turbulence.inputTypes{{ tentative }} desc: Test exceptions on CanvasFilter() turbulence object code: | const errorTestCases = [ diff --git a/tests/wpt/tests/html/canvas/tools/yaml-new/layers.yaml b/tests/wpt/tests/html/canvas/tools/yaml-new/layers.yaml index e71155650b0..a915f391ec2 100644 --- a/tests/wpt/tests/html/canvas/tools/yaml-new/layers.yaml +++ b/tests/wpt/tests/html/canvas/tools/yaml-new/layers.yaml @@ -43,7 +43,8 @@ ctx2.fillRect(30, 5, 50, 40); ctx.drawImage(canvas2, 0, 0); - variants_layout: [single_file, multi_files, multi_files, multi_files] + variants_layout: [single_file, single_file, single_file, multi_files] + grid_width: 8 variants: &global-state-variants - no-globalAlpha: alpha_statement: // No globalAlpha. @@ -132,7 +133,8 @@ ctx.drawImage(img, 0, 0); }; img.src = 'data:image/svg+xml;base64,' + btoa(svg); - variants_layout: [single_file, multi_files, multi_files, multi_files] + variants_layout: [single_file, single_file, single_file, multi_files] + grid_width: 8 variants: *global-state-variants - name: 2d.layer.globalCompositeOperation @@ -148,7 +150,7 @@ ctx.fillRect(15, 15, 25, 25); ctx.globalAlpha = 0.75; - ctx.globalCompositeOperation = '{{ variant_names[0] }}'; + ctx.globalCompositeOperation = '{{ variant_name }}'; ctx.shadowOffsetX = 7; ctx.shadowOffsetY = 7; ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; @@ -171,7 +173,7 @@ ctx.fillRect(15, 15, 25, 25); ctx.globalAlpha = 0.75; - ctx.globalCompositeOperation = '{{ variant_names[0] }}'; + ctx.globalCompositeOperation = '{{ variant_name }}'; ctx.shadowOffsetX = 7; ctx.shadowOffsetY = 7; ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; @@ -632,7 +634,7 @@ ctx.fillRect(80, 40, 75, 50); - name: 2d.layer.malformed-operations - desc: Throws if {{ variant_names[0] }} is called while layers are open. + desc: Throws if {{ variant_name }} is called while layers are open. size: [200, 200] test_type: sync code: | @@ -672,7 +674,7 @@ operation: canvas.transferToImageBitmap() - name: 2d.layer.malformed-operations-with-promises - desc: Throws if {{ variant_names[0] }} is called while layers are open. + desc: Throws if {{ variant_name }} is called while layers are open. size: [200, 200] test_type: promise code: | diff --git a/tests/wpt/tests/html/canvas/tools/yaml-new/the-canvas-state.yaml b/tests/wpt/tests/html/canvas/tools/yaml-new/the-canvas-state.yaml index 04520861543..230e45f80a5 100644 --- a/tests/wpt/tests/html/canvas/tools/yaml-new/the-canvas-state.yaml +++ b/tests/wpt/tests/html/canvas/tools/yaml-new/the-canvas-state.yaml @@ -87,3 +87,72 @@ ctx.lineWidth = 0.5; ctx.restore(); @assert ctx.lineWidth === 0.5; + +- name: 2d.state.saverestore + desc: save()/restore() works for {{ variant_names[0] }} + code: | + // Test that restore() undoes any modifications + var old = ctx.{{ variant_names[0] }}; + ctx.save(); + ctx.{{ variant_names[0] }} = {{ value }}; + ctx.restore(); + _assertSame(ctx.{{ variant_names[0] }}, old, "ctx.{{ variant_names[0] }}", "old"); + + // Also test that save() doesn't modify the values + ctx.{{ variant_names[0] }} = {{ value }}; + old = ctx.{{ variant_names[0] }}; + // we're not interested in failures caused by get(set(x)) != x (e.g. + // from rounding), so compare against 'old' instead of against {{ value }} + ctx.save(); + _assertSame(ctx.{{ variant_names[0] }}, old, "ctx.{{ variant_names[0] }}", "old"); + ctx.restore(); + variants: + - &2d_state_test_cases + strokeStyle: + value: '"#ff0000"' + fillStyle: + value: '"#ff0000"' + globalAlpha: + value: 0.5 + lineWidth: + value: 0.5 + lineCap: + value: '"round"' + lineJoin: + value: '"round"' + miterLimit: + value: 0.5 + shadowOffsetX: + value: 5 + shadowOffsetY: + value: 5 + shadowBlur: + value: 5 + shadowColor: + value: '"#ff0000"' + globalCompositeOperation: + value: '"copy"' + font: + canvas_types: ['HtmlCanvas'] + value: '"25px serif"' + textAlign: + canvas_types: ['HtmlCanvas'] + value: '"center"' + textBaseline: + canvas_types: ['HtmlCanvas'] + value: '"bottom"' + +- name: 2d.canvas.host.initial.reset.2dstate + desc: Resetting the canvas state resets 2D state variables + code: | + canvas.width = 100; + var default_val; + {% for state, params in states.items() + if not params['canvas_types'] or canvas_type in params['canvas_types'] %} + + default_val = ctx.{{ state }}; + ctx.{{ state }} = {{ params['value'] }}; + canvas.width = 100; + @assert ctx.{{ state }} === default_val; + {% endfor %} + states: *2d_state_test_cases diff --git a/tests/wpt/tests/html/canvas/tools/yaml/element/meta.yaml b/tests/wpt/tests/html/canvas/tools/yaml/element/meta.yaml index 12852e200ad..358333d96e0 100644 --- a/tests/wpt/tests/html/canvas/tools/yaml/element/meta.yaml +++ b/tests/wpt/tests/html/canvas/tools/yaml/element/meta.yaml @@ -61,63 +61,6 @@ } ) - meta: | - state = [ # some non-default values to test with - ('strokeStyle', '"#ff0000"'), - ('fillStyle', '"#ff0000"'), - ('globalAlpha', 0.5), - ('lineWidth', 0.5), - ('lineCap', '"round"'), - ('lineJoin', '"round"'), - ('miterLimit', 0.5), - ('shadowOffsetX', 5), - ('shadowOffsetY', 5), - ('shadowBlur', 5), - ('shadowColor', '"#ff0000"'), - ('globalCompositeOperation', '"copy"'), - ('font', '"25px serif"'), - ('textAlign', '"center"'), - ('textBaseline', '"bottom"'), - ] - for key,value in state: - tests.append( { - 'name': '2d.state.saverestore.%s' % key, - 'desc': 'save()/restore() works for %s' % key, - 'code': - """// Test that restore() undoes any modifications - var old = ctx.%(key)s; - ctx.save(); - ctx.%(key)s = %(value)s; - ctx.restore(); - @assert ctx.%(key)s === old; - - // Also test that save() doesn't modify the values - ctx.%(key)s = %(value)s; - old = ctx.%(key)s; - // we're not interested in failures caused by get(set(x)) != x (e.g. - // from rounding), so compare against 'old' instead of against %(value)s - ctx.save(); - @assert ctx.%(key)s === old; - ctx.restore(); - """ % { 'key':key, 'value':value } - } ) - - tests.append( { - 'name': '2d.canvas.host.initial.reset.2dstate', - 'desc': 'Resetting the canvas state resets 2D state variables', - 'code': - """canvas.width = 100; - var default_val; - """ + "".join( - """ - default_val = ctx.%(key)s; - ctx.%(key)s = %(value)s; - canvas.width = 100; - @assert ctx.%(key)s === default_val; - """ % { 'key':key, 'value':value } - for key,value in state), - } ) - -- meta: | # Composite operation tests # <http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2007-March/010608.html> ops = [ @@ -530,4 +473,4 @@ @assert ctx.fillStyle =~ /^#(?!(FF0000|ff0000|f00)$)/; // test that it's not red """ % (string,), } - tests.append(test)
\ No newline at end of file + tests.append(test) diff --git a/tests/wpt/tests/html/canvas/tools/yaml/offscreen/meta.yaml b/tests/wpt/tests/html/canvas/tools/yaml/offscreen/meta.yaml index b07898224d2..9c1cfbfd0fc 100644 --- a/tests/wpt/tests/html/canvas/tools/yaml/offscreen/meta.yaml +++ b/tests/wpt/tests/html/canvas/tools/yaml/offscreen/meta.yaml @@ -1,59 +1,4 @@ - meta: | - state = [ # some non-default values to test with - ('strokeStyle', '"#ff0000"'), - ('fillStyle', '"#ff0000"'), - ('globalAlpha', 0.5), - ('lineWidth', 0.5), - ('lineCap', '"round"'), - ('lineJoin', '"round"'), - ('miterLimit', 0.5), - ('shadowOffsetX', 5), - ('shadowOffsetY', 5), - ('shadowBlur', 5), - ('shadowColor', '"#ff0000"'), - ('globalCompositeOperation', '"copy"'), - ] - for key,value in state: - tests.append( { - 'name': '2d.state.saverestore.%s' % key, - 'desc': 'save()/restore() works for %s' % key, - 'code': - """// Test that restore() undoes any modifications - var old = ctx.%(key)s; - ctx.save(); - ctx.%(key)s = %(value)s; - ctx.restore(); - @assert ctx.%(key)s === old; - - // Also test that save() doesn't modify the values - ctx.%(key)s = %(value)s; - old = ctx.%(key)s; - // we're not interested in failures caused by get(set(x)) != x (e.g. - // from rounding), so compare against 'old' instead of against %(value)s - ctx.save(); - @assert ctx.%(key)s === old; - ctx.restore(); - t.done(); - """ % { 'key':key, 'value':value } - } ) - - tests.append( { - 'name': '2d.canvas.host.initial.reset.2dstate', - 'desc': 'Resetting the canvas state resets 2D state variables', - 'code': - """canvas.width = 100; - var default_val; - """ + "".join( - """ - default_val = ctx.%(key)s; - ctx.%(key)s = %(value)s; - canvas.width = 100; - @assert ctx.%(key)s === default_val; - """ % { 'key':key, 'value':value } - for key,value in state) + "\nt.done();", - } ) - -- meta: | # Composite operation tests # <http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2007-March/010608.html> ops = [ diff --git a/tests/wpt/tests/html/document-isolation-policy/README.md b/tests/wpt/tests/html/document-isolation-policy/README.md new file mode 100644 index 00000000000..59f039ed3e0 --- /dev/null +++ b/tests/wpt/tests/html/document-isolation-policy/README.md @@ -0,0 +1 @@ +This directory contains tests for `Document-Isolation-Policy`. diff --git a/tests/wpt/tests/html/document-isolation-policy/isolate-and-require-corp.tentative.https.html b/tests/wpt/tests/html/document-isolation-policy/isolate-and-require-corp.tentative.https.html new file mode 100644 index 00000000000..df4bd47f28e --- /dev/null +++ b/tests/wpt/tests/html/document-isolation-policy/isolate-and-require-corp.tentative.https.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta name="timeout" content="long"> +<title>Document-Isolation-Policy: isolate-and-require-corp header and subresources</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src="/common/get-host-info.sub.js"></script> +<script src="/common/utils.js"></script> <!-- Use token() to allow running tests in parallel --> +<div id=log></div> +<script> +const HOST = get_host_info(); +const BASE = new URL("resources", location).pathname; + +promise_test(async t => { + const response = await fetch(get_host_info().HTTPS_REMOTE_ORIGIN+"/html/document-isolation-policy/resources/nothing-cross-origin-corp.js", {mode: "no-cors"}); + assert_equals(response.type, "opaque"); +}, `"isolate-and-require-corp" top-level: fetch() to CORP: cross-origin response should succeed`); + +promise_test(async t => { + return promise_rejects_js(t, TypeError, fetch(get_host_info().HTTPS_REMOTE_ORIGIN+"/html/document-isolation-policy/resources/nothing-no-corp.js", {mode: "no-cors"})); +}, `"isolate-and-require-corp" top-level: fetch() to cross-origin response without CORP should fail`); + +</script> diff --git a/tests/wpt/tests/html/document-isolation-policy/isolate-and-require-corp.tentative.https.html.headers b/tests/wpt/tests/html/document-isolation-policy/isolate-and-require-corp.tentative.https.html.headers new file mode 100644 index 00000000000..bcc6f0734d5 --- /dev/null +++ b/tests/wpt/tests/html/document-isolation-policy/isolate-and-require-corp.tentative.https.html.headers @@ -0,0 +1 @@ +Document-Isolation-Policy: isolate-and-require-corp diff --git a/tests/wpt/tests/html/document-isolation-policy/resources/fetch-and-create-url.html b/tests/wpt/tests/html/document-isolation-policy/resources/fetch-and-create-url.html new file mode 100644 index 00000000000..6b0f96221dc --- /dev/null +++ b/tests/wpt/tests/html/document-isolation-policy/resources/fetch-and-create-url.html @@ -0,0 +1,91 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Fetch and create Blob</title> +<script> + async function responseToBlob(response) { + let blob; + try { + blob = await response.blob(); + } catch (e) { + return { error: `blob error: ${e.name}` }; + } + + return { url: URL.createObjectURL(blob) }; + } + + async function responseToData(response) { + const mimeType = response.headers.get("content-type"); + + let text; + try { + text = await response.text(); + } catch(e) { + return { error: `text error: ${e.name}` }; + } + + return { url: `data:${mimeType},${encodeURIComponent(text)}` }; + } + + async function responseToFilesystem(response) { + if (!window.webkitRequestFileSystem) { + return { error: "unimplemented" }; + } + + let blob; + try { + blob = await response.blob(); + } catch (e) { + return { error: `blob error: ${e.name}` }; + } + + const fs = await new Promise(resolve => { + window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024, resolve); + }); + + const file = await new Promise(resolve => { + fs.root.getFile('fetch-and-create-url', { create: true }, resolve); + }); + + const writer = await new Promise(resolve => file.createWriter(resolve)); + + try { + await new Promise((resolve, reject) => { + writer.onwriteend = resolve; + writer.onerror = reject; + writer.write(blob); + }); + } catch (e) { + return { error: `file write error: ${e.name}` }; + } + + return { url: file.toURL() }; + } + + async function responseToScheme(response, scheme) { + switch (scheme) { + case "blob": + return responseToBlob(response); + case "data": + return responseToData(response); + case "filesystem": + return responseToFilesystem(response); + default: + return { error: `unknown scheme: ${scheme}` }; + } + } + + async function fetchToScheme(url, scheme) { + let response; + try { + response = await fetch(url); + } catch (e) { + return { error: `fetch error: ${e.name}` }; + } + + return responseToScheme(response, scheme); + } + + const params = new URL(window.location).searchParams; + fetchToScheme(params.get("url"), params.get("scheme")) + .then((message) => { parent.postMessage(message, "*"); }); +</script> diff --git a/tests/wpt/tests/html/document-isolation-policy/resources/nothing-cross-origin-corp.js b/tests/wpt/tests/html/document-isolation-policy/resources/nothing-cross-origin-corp.js new file mode 100644 index 00000000000..662e9364f99 --- /dev/null +++ b/tests/wpt/tests/html/document-isolation-policy/resources/nothing-cross-origin-corp.js @@ -0,0 +1 @@ +/* Just an empty JS file */ diff --git a/tests/wpt/tests/html/document-isolation-policy/resources/nothing-cross-origin-corp.js.headers b/tests/wpt/tests/html/document-isolation-policy/resources/nothing-cross-origin-corp.js.headers new file mode 100644 index 00000000000..1b88136c01c --- /dev/null +++ b/tests/wpt/tests/html/document-isolation-policy/resources/nothing-cross-origin-corp.js.headers @@ -0,0 +1 @@ +Cross-Origin-Resource-Policy: cross-origin diff --git a/tests/wpt/tests/html/document-isolation-policy/resources/nothing-no-corp.js b/tests/wpt/tests/html/document-isolation-policy/resources/nothing-no-corp.js new file mode 100644 index 00000000000..662e9364f99 --- /dev/null +++ b/tests/wpt/tests/html/document-isolation-policy/resources/nothing-no-corp.js @@ -0,0 +1 @@ +/* Just an empty JS file */ diff --git a/tests/wpt/tests/html/document-isolation-policy/resources/shared-worker-fetch.js.py b/tests/wpt/tests/html/document-isolation-policy/resources/shared-worker-fetch.js.py new file mode 100644 index 00000000000..bf46cd291d4 --- /dev/null +++ b/tests/wpt/tests/html/document-isolation-policy/resources/shared-worker-fetch.js.py @@ -0,0 +1,24 @@ +body = b''' +'use strict'; + +onconnect = (event) => { + const port = event.ports[0]; + + port.onmessage = (event) => { + fetch(event.data, { mode: 'no-cors' }) + .then( + () => port.postMessage('success'), + () => port.postMessage('failure') + ); + }; + + port.postMessage('ready'); +};''' + +def main(request, response): + headers = [(b'Content-Type', b'text/javascript')] + + for value in request.GET.get_list(b'value'): + headers.append((b'Document-Isolation-Policy', value)) + + return (200, headers, body) diff --git a/tests/wpt/tests/html/document-isolation-policy/resources/shared-worker.js b/tests/wpt/tests/html/document-isolation-policy/resources/shared-worker.js new file mode 100644 index 00000000000..c5f2c3cc2c3 --- /dev/null +++ b/tests/wpt/tests/html/document-isolation-policy/resources/shared-worker.js @@ -0,0 +1,7 @@ +onconnect = (event) => { + const port = event.ports[0]; + port.onmessage = (event) => { + eval(event.data); + }; + port.postMessage('ready'); +}; diff --git a/tests/wpt/tests/html/document-isolation-policy/resources/worker-support.js b/tests/wpt/tests/html/document-isolation-policy/resources/worker-support.js new file mode 100644 index 00000000000..349b4eb9117 --- /dev/null +++ b/tests/wpt/tests/html/document-isolation-policy/resources/worker-support.js @@ -0,0 +1,81 @@ +// Configures `url` such that the response carries a `COEP: ${value}` header. +// +// `url` must be a `URL` instance. +function setDip(url, value) { + url.searchParams + .set("pipe", `header(document-isolation-policy,${value})`); +} + +// Resolves the given `relativeUrl` relative to the current window's location. +// +// `options` can contain the following keys: +// +// - `dip`: value passed to `setDip()`, if present. +// - `host`: overrides the host of the returned URL. +// +// Returns a `URL` instance. +function resolveUrl(relativeUrl, options) { + const url = new URL(relativeUrl, window.location); + + if (options !== undefined) { + const { dip, host } = options; + if (dip !== undefined) { + setDip(url, dip); + } + if (host !== undefined) { + url.host = host; + } + } + + return url; +} + +// Adds an iframe loaded from `url` to the current document, waiting for it to +// load before returning. +// +// The returned iframe is removed from the document at the end of the test `t`. +async function withIframe(t, url) { + const frame = document.createElement("iframe"); + frame.src = url; + + t.add_cleanup(() => frame.remove()); + + const loadedPromise = new Promise(resolve => { + frame.addEventListener('load', resolve, {once: true}); + }); + document.body.append(frame); + await loadedPromise; + + return frame; +} + +// Asynchronously waits for a single "message" event on the given `target`. +function waitForMessage(target) { + return new Promise(resolve => { + target.addEventListener('message', resolve, {once: true}); + }); +} + +// Fetches `url` from a document with DIP `creatorDip`, then serializes it +// and returns a URL pointing to the fetched body with the given `scheme`. +// +// - `creatorDip` is passed to `setDip()`. +// - `scheme` may be one of: "blob", "data" or "filesystem". +// +// The returned URL is valid until the end of the test `t`. +async function createLocalUrl(t, { url, creatorDip, scheme }) { + const frameUrl = resolveUrl("resources/fetch-and-create-url.html", { + dip: creatorDip, + }); + frameUrl.searchParams.set("url", url); + frameUrl.searchParams.set("scheme", scheme); + + const messagePromise = waitForMessage(window); + const frame = await withIframe(t, frameUrl); + + const evt = await messagePromise; + const message = evt.data; + assert_equals(message.error, undefined, "url creation error"); + + return message.url; +} diff --git a/tests/wpt/tests/html/document-isolation-policy/shared-workers.tentative.https.html b/tests/wpt/tests/html/document-isolation-policy/shared-workers.tentative.https.html new file mode 100644 index 00000000000..d0a186f45e7 --- /dev/null +++ b/tests/wpt/tests/html/document-isolation-policy/shared-workers.tentative.https.html @@ -0,0 +1,235 @@ +<!doctype html> +<html> +<meta charset="utf-8"> +<title>COEP - policy derivation for Shared Workers</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/get-host-info.sub.js"></script> +<script src="resources/worker-support.js"></script> +<body> +<p>Verify the Document Isolation Policy for Shared Workers by performing a +cross-origin "fetch" request for a resource that does not specify CORP. Only +Shared Workers with the default DIP should be able to successfully perform +this operation.</p> +<script> +'use strict'; + +function makeWorkerUrl(options) { + return resolveUrl("resources/shared-worker-fetch.js.py", options); +} + +/** + * Create a Shared Worker within an iframe + * + * @param {object} t - a testharness.js subtest instance (used to reset global + * state) + * @param {string} url - the URL from which the Shared Worker should be + * created + * @param {string} options.ownerDip - the Document Isolation Policy of the + iframe + */ +async function createWorker(t, url, options) { + const { ownerDip } = options || {}; + const frameUrl = resolveUrl("/common/blank.html", { dip: ownerDip }); + + const iframe = await withIframe(t, frameUrl); + + const sw = new iframe.contentWindow.SharedWorker(url); + sw.onerror = t.unreached_func('SharedWorker.onerror should not be called'); + + await new Promise((resolve) => { + sw.port.addEventListener('message', resolve, { once: true }); + sw.port.start(); + }); + + return sw; +} + +/** + * Instruct a Shared Worker to fetch from a specified URL and report on the + * success of the operation. + * + * @param {SharedWorker} worker + * @param {string} url - the URL that the worker should fetch + */ +function fetchFromWorker(worker, url) { + return new Promise((resolve) => { + worker.port.postMessage(url); + worker.port.addEventListener( + 'message', (event) => resolve(event.data), { once: true } + ); + }); +}; + +promise_test(async (t) => { + const worker = await createWorker(t, makeWorkerUrl()); + const result = await fetchFromWorker(worker, + get_host_info().HTTPS_REMOTE_ORIGIN+"/html/document-isolation-policy/resources/nothing-no-corp.js"); + assert_equals(result, 'success'); +}, 'default policy (derived from response)'); + +promise_test(async (t) => { + const worker = await createWorker(t, makeWorkerUrl({ dip: 'isolate-and-require-corp' })); + const result = await fetchFromWorker(worker, + get_host_info().HTTPS_REMOTE_ORIGIN+"/html/document-isolation-policy/resources/nothing-no-corp.js"); + assert_equals(result, 'failure'); +}, '"isolate-and-require-corp" (derived from response)'); + +promise_test(async (t) => { + const blobUrl = await createLocalUrl(t, { + url: makeWorkerUrl(), + scheme: "blob", + }); + + const workers = await Promise.all([ + createWorker(t, blobUrl), + createWorker(t, blobUrl), + createWorker(t, blobUrl), + ]); + + const result = await fetchFromWorker(workers[0], + get_host_info().HTTPS_REMOTE_ORIGIN+"/html/document-isolation-policy/resources/nothing-no-corp.js"); + assert_equals(result, 'success'); +}, 'default policy (derived from owner set due to use of local scheme - blob URL)'); + +promise_test(async (t) => { + const blobUrl = await createLocalUrl(t, { + url: makeWorkerUrl(), + creatorDip: "isolate-and-require-corp", + scheme: "blob", + }); + + const workers = await Promise.all([ + createWorker(t, blobUrl), + createWorker(t, blobUrl), + createWorker(t, blobUrl), + ]); + + const result = await fetchFromWorker(workers[0], + get_host_info().HTTPS_REMOTE_ORIGIN+"/html/document-isolation-policy/resources/nothing-no-corp.js"); + assert_equals(result, 'failure'); +}, 'isolate-and-require-corp (derived from blob URL creator)'); + +promise_test(async (t) => { + const blobUrl = await createLocalUrl(t, { + url: makeWorkerUrl(), + scheme: "blob", + }); + + const workers = await Promise.all([ + createWorker(t, blobUrl), + createWorker(t, blobUrl, { ownerDip: 'isolate-and-require-corp' }), + createWorker(t, blobUrl), + ]); + + const result = await fetchFromWorker(workers[0], + get_host_info().HTTPS_REMOTE_ORIGIN+"/html/document-isolation-policy/resources/nothing-no-corp.js"); + assert_equals(result, 'failure'); +}, '"isolate-and-require-corp" (derived from owner set due to use of local scheme - blob URL)'); + +promise_test(async (t) => { + const dataUrl = await createLocalUrl(t, { + url: makeWorkerUrl(), + scheme: "data", + }); + + const workers = await Promise.all([ + createWorker(t, dataUrl), + createWorker(t, dataUrl), + createWorker(t, dataUrl), + ]); + + const result = await fetchFromWorker(workers[0], + get_host_info().HTTPS_REMOTE_ORIGIN+"/html/document-isolation-policy/resources/nothing-no-corp.js"); + assert_equals(result, 'success'); +}, 'default policy (derived from owner set due to use of local scheme - data URL)'); + +promise_test(async (t) => { + const dataUrl = await createLocalUrl(t, { + url: makeWorkerUrl(), + creatorDip: "isolate-and-require-corp", + scheme: "data", + }); + + const workers = await Promise.all([ + createWorker(t, dataUrl), + createWorker(t, dataUrl), + createWorker(t, dataUrl), + ]); + + const result = await fetchFromWorker(workers[0], + get_host_info().HTTPS_REMOTE_ORIGIN+"/html/document-isolation-policy/resources/nothing-no-corp.js"); + assert_equals(result, 'success'); +}, 'default policy (not derived from data URL creator)'); + +promise_test(async (t) => { + const dataUrl = await createLocalUrl(t, { + url: makeWorkerUrl(), + scheme: "data", + }); + + const workers = await Promise.all([ + createWorker(t, dataUrl), + createWorker(t, dataUrl, { ownerdip: 'isolate-and-require-corp' }), + createWorker(t, dataUrl), + ]); + + const result = await fetchFromWorker(workers[0], + get_host_info().HTTPS_REMOTE_ORIGIN+"/html/document-isolation-policy/resources/nothing-no-corp.js"); + assert_equals(result, 'failure'); +}, '"isolate-and-require-corp" (derived from owner set due to use of local scheme - data URL)'); + +promise_test(async (t) => { + const filesystemUrl = await createLocalUrl(t, { + url: makeWorkerUrl(), + scheme: "filesystem", + }); + + const workers = await Promise.all([ + createWorker(t, filesystemUrl), + createWorker(t, filesystemUrl), + createWorker(t, filesystemUrl), + ]); + + const result = await fetchFromWorker(workers[0], + get_host_info().HTTPS_REMOTE_ORIGIN+"/html/document-isolation-policy/resources/nothing-no-corp.js"); + assert_equals(result, 'success'); +}, 'default policy (derived from owner set due to use of local scheme - filesystem URL)'); + +promise_test(async (t) => { + const filesystemUrl = await createLocalUrl(t, { + url: makeWorkerUrl(), + creatorDip: "isolate-and-require-corp", + scheme: "filesystem", + }); + + const workers = await Promise.all([ + createWorker(t, filesystemUrl), + createWorker(t, filesystemUrl), + createWorker(t, filesystemUrl), + ]); + + const result = await fetchFromWorker(workers[0], + get_host_info().HTTPS_REMOTE_ORIGIN+"/html/document-isolation-policy/resources/nothing-no-corp.js"); + assert_equals(result, 'failure'); +}, 'isolate-and-require-corp (derived from filesystem URL creator)'); + +promise_test(async (t) => { + const filesystemUrl = await createLocalUrl(t, { + url: makeWorkerUrl(), + scheme: "filesystem", + }); + + const workers = await Promise.all([ + createWorker(t, filesystemUrl), + createWorker(t, filesystemUrl, { ownerDip: 'isolate-and-require-corp' }), + createWorker(t, filesystemUrl), + ]); + + const result = await fetchFromWorker(workers[0], + get_host_info().HTTPS_REMOTE_ORIGIN+"/html/document-isolation-policy/resources/nothing-no-corp.js"); + assert_equals(result, 'failure'); +}, '"isolate-and-require-corp" (derived from owner set due to use of local scheme - filesystem URL)'); +</script> +</body> +</html> diff --git a/tests/wpt/tests/html/rendering/the-details-element/details-blockification.html b/tests/wpt/tests/html/rendering/the-details-element/details-blockification.html index 960074854d8..2bd5aaf2e62 100644 --- a/tests/wpt/tests/html/rendering/the-details-element/details-blockification.html +++ b/tests/wpt/tests/html/rendering/the-details-element/details-blockification.html @@ -6,6 +6,14 @@ <meta name="assert" content="Ensure blockification of <details> children"> <script src=/resources/testharness.js></script> <script src=/resources/testharnessreport.js></script> +<style> + +/* continue testing the old behavior that this was intended to test */ +details[open]::details-content { + display: contents; +} + +</style> <div id="example1"> <details style="display: grid" open> diff --git a/tests/wpt/tests/html/rendering/the-details-element/details-display-type-001.tentative.html b/tests/wpt/tests/html/rendering/the-details-element/details-display-type-001.tentative.html index 81641355187..3188c1eafda 100644 --- a/tests/wpt/tests/html/rendering/the-details-element/details-display-type-001.tentative.html +++ b/tests/wpt/tests/html/rendering/the-details-element/details-display-type-001.tentative.html @@ -1,6 +1,7 @@ <!DOCTYPE HTML> <title>Details and summary and display property (subgrid)</title> <link rel="match" href="details-display-type-001-ref.html"> +<link rel="help" href="https://github.com/whatwg/html/pull/10265"> <link rel="help" href="https://github.com/dbaron/details-styling"> <link rel="help" href="https://crbug.com/1469418"> <style> @@ -30,6 +31,11 @@ details { grid-area: 2 / 2 / 4 / 4; } +details[open]::details-content { + /* continue testing the old behavior that this was written to test */ + display: contents; +} + summary { display: block; background: fuchsia; diff --git a/tests/wpt/tests/html/rendering/the-details-element/details-display-type-002.tentative.html b/tests/wpt/tests/html/rendering/the-details-element/details-display-type-002.tentative.html index 716221f7c5c..6426e1c524f 100644 --- a/tests/wpt/tests/html/rendering/the-details-element/details-display-type-002.tentative.html +++ b/tests/wpt/tests/html/rendering/the-details-element/details-display-type-002.tentative.html @@ -2,6 +2,7 @@ <meta charset="utf-8"> <title>Details display property (flex)</title> <link rel="match" href="details-display-type-002-ref.html"> +<link rel="help" href="https://github.com/whatwg/html/pull/10265"> <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1856374"> <link rel="help" href="https://github.com/dbaron/details-styling"> <style> diff --git a/tests/wpt/tests/html/rendering/the-details-element/details-pseudo-elements-001.tentative.html b/tests/wpt/tests/html/rendering/the-details-element/details-pseudo-elements-001.tentative.html index 1a9f7d6a023..8ea3d0f85af 100644 --- a/tests/wpt/tests/html/rendering/the-details-element/details-pseudo-elements-001.tentative.html +++ b/tests/wpt/tests/html/rendering/the-details-element/details-pseudo-elements-001.tentative.html @@ -2,6 +2,8 @@ <title>Details pseudo-elements</title> <!-- This test is (at time of writing) _EXTREMELY_ tentative. --> <link rel="match" href="details-pseudo-elements-001-ref.html"> +<link rel="help" href="https://github.com/whatwg/html/pull/10265"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#details-content-pseudo"> <link rel="help" href="https://github.com/dbaron/details-styling"> <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1469418"> <style> diff --git a/tests/wpt/tests/html/rendering/the-details-element/details-pseudo-elements-002.tentative.html b/tests/wpt/tests/html/rendering/the-details-element/details-pseudo-elements-002.tentative.html index e1493956651..0f1176a3316 100644 --- a/tests/wpt/tests/html/rendering/the-details-element/details-pseudo-elements-002.tentative.html +++ b/tests/wpt/tests/html/rendering/the-details-element/details-pseudo-elements-002.tentative.html @@ -2,6 +2,8 @@ <title>Details pseudo-elements</title> <!-- This test is (at time of writing) _EXTREMELY_ tentative. --> <link rel="match" href="details-pseudo-elements-002-ref.html"> +<link rel="help" href="https://github.com/whatwg/html/pull/10265"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#details-content-pseudo"> <link rel="help" href="https://github.com/dbaron/details-styling"> <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1469418"> <meta name="assert" content="Checks that the content-visibility property on the pseudo-element overrides the style attribute inside the shadow dom."> diff --git a/tests/wpt/tests/html/rendering/the-details-element/details-pseudo-elements-003-ref.html b/tests/wpt/tests/html/rendering/the-details-element/details-pseudo-elements-003-ref.html new file mode 100644 index 00000000000..e6c55cc141a --- /dev/null +++ b/tests/wpt/tests/html/rendering/the-details-element/details-pseudo-elements-003-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<title>::details-content pseudo element is display: block</title> +<style> + +#contents { opacity: 0.5; } + +details + +</style> + +<div> + <div>summary</div> + <div id="contents">contents</div> +</div> diff --git a/tests/wpt/tests/html/rendering/the-details-element/details-pseudo-elements-003.tentative.html b/tests/wpt/tests/html/rendering/the-details-element/details-pseudo-elements-003.tentative.html new file mode 100644 index 00000000000..ee5b42f13ac --- /dev/null +++ b/tests/wpt/tests/html/rendering/the-details-element/details-pseudo-elements-003.tentative.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<title>::details-content pseudo element is display: block</title> +<link rel="match" href="details-pseudo-elements-003-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#details-content-pseudo"> +<link rel="help" href="https://github.com/whatwg/html/pull/10265"> +<link rel="help" href="https://github.com/dbaron/details-styling"> +<link rel="help" href="https://crbug.com/1469418"> +<style> + +summary { display: block } +details::details-content { opacity: 0.5; } + +details + +</style> + +<details open> + <summary>summary</summary> + contents +</details> diff --git a/tests/wpt/tests/html/rendering/widgets/input-number-text-size-ref.html b/tests/wpt/tests/html/rendering/widgets/input-number-text-size-ref.html new file mode 100644 index 00000000000..4c9b244990d --- /dev/null +++ b/tests/wpt/tests/html/rendering/widgets/input-number-text-size-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<input type=number><br> +<input type=number><br> +<input type=number><br> +<input type=number><br> +<input type=number size=10><br> +<input type=number><br> +<input type=number size=1><br> +<input type=number size=2><br> +<input type=number size=3><br> +<input type=number size=4><br> diff --git a/tests/wpt/tests/html/rendering/widgets/input-number-text-size.tentative.html b/tests/wpt/tests/html/rendering/widgets/input-number-text-size.tentative.html new file mode 100644 index 00000000000..e7b1a1990dc --- /dev/null +++ b/tests/wpt/tests/html/rendering/widgets/input-number-text-size.tentative.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://html.spec.whatwg.org/C/#the-input-element-as-a-text-entry-widget"> +<link rel="help" href="https://github.com/whatwg/html/issues/10390"> +<title>Test `size` attribute behavior on number input</title> +<link rel="match" href="input-number-text-size-ref.html"> +<input type=number><br> +<input type=number size=20><br> +<input type=number min=0><br> +<input type=number max=1><br> +<input type=number size=10 min=0 max=1><br> +<input type=number min=0 max=1 step=any><br> +<input type=number min=0 max=1><br> +<input type=number min=-1 max=1><br> +<input type=number min=0 max=1 step=0.5><br> +<input type=number min=-1 max=1 step=0.5><br> diff --git a/tests/wpt/tests/html/rendering/widgets/input-text-size.html b/tests/wpt/tests/html/rendering/widgets/input-text-size.html index 4838399405a..fa69f997731 100644 --- a/tests/wpt/tests/html/rendering/widgets/input-text-size.html +++ b/tests/wpt/tests/html/rendering/widgets/input-text-size.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <link rel="help" href="https://html.spec.whatwg.org/C/#the-input-element-as-a-text-entry-widget"> -<title>Test `size` attribute behaivor</title> +<title>Test `size` attribute behavior</title> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <body> diff --git a/tests/wpt/tests/html/semantics/forms/the-datalist-element/input-text-datalist-appearance.html b/tests/wpt/tests/html/semantics/forms/the-datalist-element/input-text-datalist-appearance.html new file mode 100644 index 00000000000..c1663de2f2f --- /dev/null +++ b/tests/wpt/tests/html/semantics/forms/the-datalist-element/input-text-datalist-appearance.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=assert title="text inputs should show an indicator when they have a datalist."> +<link rel=mismatch href="input-text-focused-ref.html"> +<link rel=assert title="Text inputs should have different appearance when focused if they have a datalist." + +<input list=mydatalist> +<datalist id=mydatalist> + <option>option</option> +</datalist> + +<script> +document.querySelector('input').focus(); +</script> diff --git a/tests/wpt/tests/html/semantics/forms/the-datalist-element/input-text-datalist-removal.html b/tests/wpt/tests/html/semantics/forms/the-datalist-element/input-text-datalist-removal.html new file mode 100644 index 00000000000..c85bd288ed5 --- /dev/null +++ b/tests/wpt/tests/html/semantics/forms/the-datalist-element/input-text-datalist-removal.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://issues.chromium.org/issues/342660638"> +<link rel=match href="input-text-focused-ref.html"> +<link rel=assert title="Text inputs should reset their datalist related appearance when the list attribute is removed."> + +<input list=mydatalist> +<datalist id=mydatalist> + <option>option</option> +</datalist> + +<script> +const input = document.querySelector('input'); +(async () => { + input.focus(); + await new Promise(requestAnimationFrame); + input.removeAttribute('list'); + await new Promise(requestAnimationFrame); + input.focus(); + await new Promise(requestAnimationFrame); + document.documentElement.classList.remove('reftest-wait'); +})(); +</script> diff --git a/tests/wpt/tests/html/semantics/forms/the-datalist-element/input-text-focused-ref.html b/tests/wpt/tests/html/semantics/forms/the-datalist-element/input-text-focused-ref.html new file mode 100644 index 00000000000..df8ea576069 --- /dev/null +++ b/tests/wpt/tests/html/semantics/forms/the-datalist-element/input-text-focused-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<input> +<script> +document.querySelector('input').focus(); +</script> diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist-ref.html b/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist-ref.html deleted file mode 100644 index 6540e324b5d..00000000000 --- a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist-ref.html +++ /dev/null @@ -1,19 +0,0 @@ -<!DOCTYPE html> -<html class=reftest-wait> -<script src="/resources/testdriver.js"></script> -<script src="/resources/testdriver-vendor.js"></script> - -<select> - <option>one</option> - <hr> - <option>two</option> -</select> - -<script> -(async () => { - await test_driver.click(document.querySelector('select')); - document.activeElement.blur(); - await new Promise(requestAnimationFrame); - document.documentElement.classList.remove('reftest-wait'); -})(); -</script> diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html b/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html deleted file mode 100644 index 3ec54fa6526..00000000000 --- a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html +++ /dev/null @@ -1,27 +0,0 @@ -<!DOCTYPE html> -<html class=reftest-wait> -<link rel=author href="mailto:jarhar@chromium.org"> -<link rel=help href="https://github.com/whatwg/html/issues/9799"> -<link rel=match href="native-popup-with-datalist-ref.html"> -<link rel=assert title="The native popup of a select should show options descending from datalists"> -<script src="/resources/testdriver.js"></script> -<script src="/resources/testdriver-vendor.js"></script> - -<select> - <datalist> - <div> - <option>one</option> - <hr> - <option>two</option> - </div> - </datalist> -</select> - -<script> -(async () => { - await test_driver.click(document.querySelector('select')); - document.activeElement.blur(); - await new Promise(requestAnimationFrame); - document.documentElement.classList.remove('reftest-wait'); -})(); -</script> diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist-ref.html b/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist-ref.html deleted file mode 100644 index 10c966a107b..00000000000 --- a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist-ref.html +++ /dev/null @@ -1,14 +0,0 @@ -<!DOCTYPE html> -<link rel=stylesheet href="resources/stylable-select-styles.css"> - -<div id=container class=stylable-select-container> - <button>one</button> - <div id=popover popover=auto anchor=container class=stylable-select-datalist> - <div class=stylable-select-option>one</div> - <div class=stylable-select-option>two</div> - </div> -</div> - -<script> -document.getElementById('popover').showPopover(); -</script> diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html b/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html deleted file mode 100644 index aaceabcf051..00000000000 --- a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html +++ /dev/null @@ -1,21 +0,0 @@ -<!DOCTYPE html> -<html class=reftest-wait> -<link rel=author href="mailto:jarhar@chromium.org"> -<link rel=help href="https://github.com/whatwg/html/issues/9799"> -<link rel=match href="select-appearance-custom-button-no-datalist-ref.html"> -<script src="/resources/testdriver.js"></script> -<script src="/resources/testdriver-vendor.js"></script> - -<select style="appearance:base-select"> - <button type=popover>one</button> - <option>one</option> - <option>two</option> -</select> - -<script> -(async () => { - await test_driver.bless(); - document.querySelector('select').showPicker(); - document.documentElement.classList.remove('reftest-wait'); -})(); -</script> diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode-ref.html b/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode-ref.html deleted file mode 100644 index d4d4da5d48b..00000000000 --- a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode-ref.html +++ /dev/null @@ -1,25 +0,0 @@ -<!DOCTYPE html> -<link rel=stylesheet href="resources/stylable-select-styles.css"> -<script src="resources/stylable-select-utils.js"></script> - -<style> -:root { - color-scheme: dark; -} -</style> - -<div id=container class=stylable-select-container> - <button class=stylable-select-button popovertarget=popover id=button> - <span class=stylable-select-selectedoption>one</span> - <div class=stylable-select-button-icon></div> - </button> - <div id=popover popover=auto anchor=container class=stylable-select-datalist> - <div class=stylable-select-option>one</div> - <div class=stylable-select-option>two</div> - </div> -</div> - -<script> -populateFallbackButtonIcon(); -document.getElementById('popover').showPopover(); -</script> diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode.tentative.html b/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode.tentative.html deleted file mode 100644 index a121b0b864b..00000000000 --- a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode.tentative.html +++ /dev/null @@ -1,26 +0,0 @@ -<!DOCTYPE html> -<html class=reftest-wait> -<link rel=author href="mailto:jarhar@chromium.org"> -<link rel=help href="https://github.com/whatwg/html/issues/9799"> -<link rel=match href="select-appearance-dark-mode-ref.html"> -<script src="/resources/testdriver.js"></script> -<script src="/resources/testdriver-vendor.js"></script> - -<style> -:root { - color-scheme: dark; -} -</style> - -<select style="appearance:base-select"> - <option>one</option> - <option>two</option> -</select> - -<script> -(async () => { - await test_driver.bless(); - document.querySelector('select').showPicker(); - document.documentElement.classList.remove('reftest-wait'); -})(); -</script> diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html b/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html deleted file mode 100644 index cc8a4c60bd7..00000000000 --- a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html +++ /dev/null @@ -1,22 +0,0 @@ -<!DOCTYPE html> -<html class=reftest-wait> -<link rel=author href="mailto:jarhar@chromium.org"> -<link rel=help href="https://github.com/whatwg/html/issues/9799"> -<link rel=match href="select-appearance-no-button-no-datalist-ref.html"> -<script src="/resources/testdriver.js"></script> -<script src="/resources/testdriver-vendor.js"></script> - -<select style="appearance:base-select"> - <datalist> - <option>one</option> - <option>two</option> - </datalist> -</select> - -<script> -(async () => { - await test_driver.bless(); - document.querySelector('select').showPicker(); - document.documentElement.classList.remove('reftest-wait'); -})(); -</script> diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html b/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html deleted file mode 100644 index 79f1d662c57..00000000000 --- a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html +++ /dev/null @@ -1,19 +0,0 @@ -<!DOCTYPE html> -<link rel=stylesheet href="resources/stylable-select-styles.css"> -<script src="resources/stylable-select-utils.js"></script> - -<div id=container class=stylable-select-container> - <button class=stylable-select-button popovertarget=popover id=button> - <span class=stylable-select-selectedoption>one</span> - <div class=stylable-select-button-icon></div> - </button> - <div id=popover popover=auto anchor=container class=stylable-select-datalist> - <div class=stylable-select-option>one</div> - <div class=stylable-select-option>two</div> - </div> -</div> - -<script> -populateFallbackButtonIcon(); -document.getElementById('popover').showPopover(); -</script> diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html b/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html deleted file mode 100644 index 29261b7f255..00000000000 --- a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html +++ /dev/null @@ -1,20 +0,0 @@ -<!DOCTYPE html> -<html class=reftest-wait> -<link rel=author href="mailto:jarhar@chromium.org"> -<link rel=help href="https://github.com/whatwg/html/issues/9799"> -<link rel=match href="select-appearance-no-button-no-datalist-ref.html"> -<script src="/resources/testdriver.js"></script> -<script src="/resources/testdriver-vendor.js"></script> - -<select style="appearance:base-select"> - <option>one</option> - <option>two</option> -</select> - -<script> -(async () => { - await test_driver.bless(); - document.querySelector('select').showPicker(); - document.documentElement.classList.remove('reftest-wait'); -})(); -</script> diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html b/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html deleted file mode 100644 index 9f1976ba041..00000000000 --- a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html +++ /dev/null @@ -1,25 +0,0 @@ -<!DOCTYPE html> -<link rel=stylesheet href="resources/stylable-select-styles.css"> -<script src="resources/stylable-select-utils.js"></script> - -<style> -html { - writing-mode: vertical-lr; -} -</style> - -<div id=container class=stylable-select-container> - <button class=stylable-select-button popovertarget=popover id=button> - <span class=stylable-select-selectedoption>one</span> - <div class=stylable-select-button-icon></div> - </button> - <div id=popover popover=auto anchor=container class=stylable-select-datalist> - <div class=stylable-select-option>one</div> - <div class=stylable-select-option>two</div> - </div> -</div> - -<script> -populateFallbackButtonIcon(); -document.getElementById('popover').showPopover(); -</script> diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html b/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html deleted file mode 100644 index 2f8a6aa886e..00000000000 --- a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html +++ /dev/null @@ -1,29 +0,0 @@ -<!DOCTYPE html> -<html class=reftest-wait> -<link rel=author href="mailto:jarhar@chromium.org"> -<link rel=help href="https://github.com/whatwg/html/issues/9799"> -<link rel=match href="select-appearance-writing-mode-vertical-lr-ref.html"> -<script src="/resources/testdriver.js"></script> -<script src="/resources/testdriver-vendor.js"></script> - -<style> -html { - writing-mode: vertical-lr; -} -select { - appearance: base-select; -} -</style> - -<select> - <option>one</option> - <option>two</option> -</select> - -<script> -(async () => { - await test_driver.bless(); - document.querySelector('select').showPicker(); - document.documentElement.classList.remove('reftest-wait'); -})(); -</script> diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html b/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html deleted file mode 100644 index 3e67e99436f..00000000000 --- a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html +++ /dev/null @@ -1,25 +0,0 @@ -<!DOCTYPE html> -<link rel=stylesheet href="resources/stylable-select-styles.css"> -<script src="resources/stylable-select-utils.js"></script> - -<style> -html { - writing-mode: vertical-rl; -} -</style> - -<div id=container class=stylable-select-container> - <button class=stylable-select-button popovertarget=popover id=button> - <span class=stylable-select-selectedoption>one</span> - <div class=stylable-select-button-icon></div> - </button> - <div id=popover popover=auto anchor=container class=stylable-select-datalist> - <div class=stylable-select-option>one</div> - <div class=stylable-select-option>two</div> - </div> -</div> - -<script> -populateFallbackButtonIcon(); -document.getElementById('popover').showPopover(); -</script> diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html b/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html deleted file mode 100644 index c2ea647be95..00000000000 --- a/tests/wpt/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html +++ /dev/null @@ -1,29 +0,0 @@ -<!DOCTYPE html> -<html class=reftest-wait> -<link rel=author href="mailto:jarhar@chromium.org"> -<link rel=help href="https://github.com/whatwg/html/issues/9799"> -<link rel=match href="select-appearance-writing-mode-vertical-rl-ref.html"> -<script src="/resources/testdriver.js"></script> -<script src="/resources/testdriver-vendor.js"></script> - -<style> -html { - writing-mode: vertical-rl; -} -select { - appearance: base-select; -} -</style> - -<select> - <option>one</option> - <option>two</option> -</select> - -<script> -(async () => { - await test_driver.bless(); - document.querySelector('select').showPicker(); - document.documentElement.classList.remove('reftest-wait'); -})(); -</script> diff --git a/tests/wpt/tests/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed-ref.tentative.html b/tests/wpt/tests/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed-ref.tentative.html deleted file mode 100644 index 126bbc5dd76..00000000000 --- a/tests/wpt/tests/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed-ref.tentative.html +++ /dev/null @@ -1,44 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com"> -<link rel="stylesheet" href="/fonts/ahem.css"> - -<selectlist id="selectList0"> - <option>option with image displayed</option> -</selectlist> -<div id=fakelistbox> - option with image displayed - <img src="/images/green-256x256.png"> -</div> - -<style> - html,selectlist { - font-family: Ahem; - } - #fakelistbox { - /* Per spec: */ - display: block; - position: fixed; - top: 30px; - left: 0; - font-size: 0.765625em /* 0.875 * 0.875 */; - /* Per settings in test file: */ - width: fit-content; - height: fit-content; - background: light-dark(white, black); - color: light-dark(black, white); - border: 1px solid rgba(0, 0, 0, 1); - border-radius: 0px; - box-shadow: 0px 12.8px 28.8px rgba(0, 0, 0, 0.13), 0px 0px 9.2px rgba(0, 0, 0, 0.11); - box-sizing: border-box; - overflow: auto; - padding: 4px; - } - - selectlist { - position: absolute; - top: 0px; - left: 0px; - height: 30px; - } -</style> diff --git a/tests/wpt/tests/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html b/tests/wpt/tests/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html deleted file mode 100644 index 8c620baccad..00000000000 --- a/tests/wpt/tests/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html +++ /dev/null @@ -1,69 +0,0 @@ -<!DOCTYPE html> -<html class="reftest-wait"> -<title>HTMLSelectListElement Test: option arbitrary content displayed</title> -<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com"> -<link rel=match href="selectlist-option-arbitrary-content-displayed-ref.tentative.html"> -<!-- Tolerate slight differences in the shadow gradient. --> -<meta name=fuzzy content="maxDifference=0-1;totalPixels=0-200"> -<link rel="stylesheet" href="/fonts/ahem.css"> -<script src="/resources/testdriver.js"></script> -<script src="/resources/testdriver-actions.js"></script> -<script src="/resources/testdriver-vendor.js"></script> - -<style> - html,selectlist { - font-family: Ahem; - } - selectlist { - position: absolute; - top: 0px; - left: 0px; - height: 30px; - } - - [popover] { - width: fit-content; - height: fit-content; - background: white; - color: black; - border: 1px solid rgba(0, 0, 0, 1); - border-radius: 0px; - box-shadow: 0px 12.8px 28.8px rgba(0, 0, 0, 0.13), 0px 0px 9.2px rgba(0, 0, 0, 0.11); - box-sizing: border-box; - overflow: auto; - padding: 4px; - } - - option { - background-color: white !important; - padding: 0px; - } -</style> - -<selectlist id="selectList0"> - <div popover slot="listbox" behavior="listbox"> - <option> - option with image displayed - <img src="/images/green-256x256.png"> - </option> - </div> -</selectlist> - -<script> - function clickOn(element) { - const actions = new test_driver.Actions(); - return actions.pointerMove(0, 0, {origin: element}) - .pointerDown({button: actions.ButtonType.LEFT}) - .pointerUp({button: actions.ButtonType.LEFT}) - .send(); - } - - async function test() { - const selectList0 = document.getElementById("selectList0"); - - await clickOn(selectList0); - document.documentElement.classList.remove('reftest-wait'); - } - - test(); -</script> diff --git a/tests/wpt/tests/html/semantics/popovers/popover-dialog-crash.html b/tests/wpt/tests/html/semantics/popovers/popover-dialog-crash.html deleted file mode 100644 index e7579d5a386..00000000000 --- a/tests/wpt/tests/html/semantics/popovers/popover-dialog-crash.html +++ /dev/null @@ -1,26 +0,0 @@ -<!DOCTYPE html> -<html class="reftest-wait"> -<meta charset="utf-8" /> -<title>Dialog-Popover crash</title> -<link rel="author" href="mailto:masonf@chromium.org"> -<link rel=help href="https://open-ui.org/components/popover.research.explainer"> -<link rel=help href="https://html.spec.whatwg.org/multipage/popover.html"> -<script src="/resources/testdriver.js"></script> -<script src="/resources/testdriver-actions.js"></script> -<script src="/resources/testdriver-vendor.js"></script> -<script src="resources/popover-utils.js"></script> - -<p>This test passes if it does not crash.</p> -<dialog popover>This is a modal dialog</dialog> -<div popover>This is a popover</div> - -<script> - const dialog = document.querySelector('dialog[popover]'); - const popover = document.querySelector('div[popover]'); - dialog.showModal(); - popover.showPopover(); - clickOn(dialog) - .then(() => { - document.documentElement.classList.remove("reftest-wait"); - }); -</script> diff --git a/tests/wpt/tests/html/semantics/popovers/popover-hint-crash.tentative.html b/tests/wpt/tests/html/semantics/popovers/popover-hint-crash.tentative.html deleted file mode 100644 index 82f83538e93..00000000000 --- a/tests/wpt/tests/html/semantics/popovers/popover-hint-crash.tentative.html +++ /dev/null @@ -1,29 +0,0 @@ -<!DOCTYPE html> -<html class="reftest-wait"> -<meta charset="utf-8" /> -<title>Popover=hint crash test</title> -<link rel="author" href="mailto:masonf@chromium.org"> -<link rel=help href="https://open-ui.org/components/popover.research.explainer"> -<link rel=help href="https://html.spec.whatwg.org/multipage/popover.html"> -<script src="/resources/testdriver.js"></script> -<script src="/resources/testdriver-actions.js"></script> -<script src="/resources/testdriver-vendor.js"></script> -<script src="resources/popover-utils.js"></script> - -<p>This test passes if it does not crash.</p> - -<div popover id=popover1>Popover 1 - <div popover id=popover2 style="top:100px">Popover 2</div> -</div> -<div popover=manual id=popover3 style="top:200px">Popover 3</div> -<div popover=hint id=popover4 anchor=popover3 style="inset:0;top:300px">Popover 4 - Click me</div> -<script> -popover1.showPopover(); -popover2.showPopover(); -popover3.showPopover(); -popover4.showPopover(); -clickOn(popover4) - .then(() => { - document.documentElement.classList.remove("reftest-wait"); - }); -</script> diff --git a/tests/wpt/tests/html/semantics/popovers/popover-manual-crash.html b/tests/wpt/tests/html/semantics/popovers/popover-manual-crash.html deleted file mode 100644 index 535eb4c7d12..00000000000 --- a/tests/wpt/tests/html/semantics/popovers/popover-manual-crash.html +++ /dev/null @@ -1,32 +0,0 @@ -<!DOCTYPE html> -<html class="reftest-wait"> -<meta charset="utf-8" /> -<title>Popover=manual crash test</title> -<link rel="author" href="mailto:masonf@chromium.org"> -<link rel=help href="https://open-ui.org/components/popover.research.explainer"> -<link rel=help href="https://html.spec.whatwg.org/multipage/popover.html"> -<script src="/resources/testdriver.js"></script> -<script src="/resources/testdriver-actions.js"></script> -<script src="/resources/testdriver-vendor.js"></script> -<script src="resources/popover-utils.js"></script> - -<style> -[popover] {top: 100px; bottom: auto;} -[popover=""] {left: -200px} -[popover=auto] {left: 0; } -[popover=manual] {left: 200px; } -</style> - -<p>This test passes if it does not crash.</p> -<div popover>Auto1 - <div popover=auto>Auto2</div> -</div> -<div popover=manual>Manual</div> -<script> - document.querySelectorAll('[popover]').forEach(p => p.showPopover()); - const manual = document.querySelector('[popover=manual]'); - clickOn(manual) - .then(() => { - document.documentElement.classList.remove("reftest-wait"); - }); -</script> diff --git a/tests/wpt/tests/html/syntax/parsing/zero.html b/tests/wpt/tests/html/syntax/parsing/zero.html index 9ff793ae7c6..28e4f5310b3 100644 --- a/tests/wpt/tests/html/syntax/parsing/zero.html +++ b/tests/wpt/tests/html/syntax/parsing/zero.html @@ -54,6 +54,14 @@ test(function() { var div = document.getElementsByTagName("div")[0]; + div.innerHTML = "a\u0000b"; + assert_equals(div.firstChild.data, "ab"); + }, "U+0000 should be dropped in body"); + + + + test(function() { + var div = document.getElementsByTagName("div")[0]; div.innerHTML = "<span title='&\u0000auml;'>"; assert_equals(div.firstChild.title, "&\uFFFDauml;"); }, "U+0000 should get replaced with U+FFFD after ampersand"); diff --git a/tests/wpt/tests/infrastructure/metadata/infrastructure/testdriver/virtual_authenticator.html.ini b/tests/wpt/tests/infrastructure/metadata/infrastructure/testdriver/virtual_authenticator.html.ini index b5683f8fa99..542c40507bd 100644 --- a/tests/wpt/tests/infrastructure/metadata/infrastructure/testdriver/virtual_authenticator.html.ini +++ b/tests/wpt/tests/infrastructure/metadata/infrastructure/testdriver/virtual_authenticator.html.ini @@ -1,6 +1,6 @@ [virtual_authenticator.html] expected: - if product == "safari": ERROR + if product == "safari": CRASH [Can create an authenticator] expected: diff --git a/tests/wpt/tests/interfaces/webauthn.idl b/tests/wpt/tests/interfaces/webauthn.idl index cf1a2fbdc48..3d5a453addc 100644 --- a/tests/wpt/tests/interfaces/webauthn.idl +++ b/tests/wpt/tests/interfaces/webauthn.idl @@ -268,7 +268,7 @@ enum UserVerificationRequirement { enum ClientCapability { "conditionalCreate", - "conditionalMediation", + "conditionalGet", "hybridTransport", "passkeyPlatformAuthenticator", "userVerifyingPlatformAuthenticator", diff --git a/tests/wpt/tests/interfaces/webcodecs.idl b/tests/wpt/tests/interfaces/webcodecs.idl index c754b2b036c..690a8ac942e 100644 --- a/tests/wpt/tests/interfaces/webcodecs.idl +++ b/tests/wpt/tests/interfaces/webcodecs.idl @@ -229,7 +229,7 @@ dictionary EncodedAudioChunkInit { required EncodedAudioChunkType type; [EnforceRange] required long long timestamp; // microseconds [EnforceRange] unsigned long long duration; // microseconds - required BufferSource data; + required AllowSharedBufferSource data; sequence<ArrayBuffer> transfer = []; }; diff --git a/tests/wpt/tests/lint.ignore b/tests/wpt/tests/lint.ignore index df9b2f87ca0..31ce1ab3a96 100644 --- a/tests/wpt/tests/lint.ignore +++ b/tests/wpt/tests/lint.ignore @@ -805,19 +805,6 @@ TESTDRIVER-IN-UNSUPPORTED-TYPE: fullscreen/rendering/backdrop-inherit.html TESTDRIVER-IN-UNSUPPORTED-TYPE: fullscreen/rendering/backdrop-object.html TESTDRIVER-IN-UNSUPPORTED-TYPE: fullscreen/rendering/fullscreen-root-fills-page.html TESTDRIVER-IN-UNSUPPORTED-TYPE: html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/crashtests/fieldset-middleclick.html -TESTDRIVER-IN-UNSUPPORTED-TYPE: html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist-ref.html -TESTDRIVER-IN-UNSUPPORTED-TYPE: html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html -TESTDRIVER-IN-UNSUPPORTED-TYPE: html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html -TESTDRIVER-IN-UNSUPPORTED-TYPE: html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode.tentative.html -TESTDRIVER-IN-UNSUPPORTED-TYPE: html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html -TESTDRIVER-IN-UNSUPPORTED-TYPE: html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html -TESTDRIVER-IN-UNSUPPORTED-TYPE: html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html -TESTDRIVER-IN-UNSUPPORTED-TYPE: html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html -TESTDRIVER-IN-UNSUPPORTED-TYPE: html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode.tentative.html -TESTDRIVER-IN-UNSUPPORTED-TYPE: html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html -TESTDRIVER-IN-UNSUPPORTED-TYPE: html/semantics/popovers/popover-dialog-crash.html -TESTDRIVER-IN-UNSUPPORTED-TYPE: html/semantics/popovers/popover-hint-crash.tentative.html -TESTDRIVER-IN-UNSUPPORTED-TYPE: html/semantics/popovers/popover-manual-crash.html TESTDRIVER-IN-UNSUPPORTED-TYPE: infrastructure/testdriver/click_child_crossorigin.html TESTDRIVER-IN-UNSUPPORTED-TYPE: infrastructure/testdriver/click_child_testdriver.html TESTDRIVER-IN-UNSUPPORTED-TYPE: mediacapture-streams/MediaStreamTrack-end-manual.https.html diff --git a/tests/wpt/tests/loading/early-hints/preload-fetchpriority.h2.window.js b/tests/wpt/tests/loading/early-hints/preload-fetchpriority.h2.window.js new file mode 100644 index 00000000000..480e70f1d9f --- /dev/null +++ b/tests/wpt/tests/loading/early-hints/preload-fetchpriority.h2.window.js @@ -0,0 +1,11 @@ +// META: script=/common/utils.js +// META: script=resources/early-hints-helpers.sub.js + +test(() => { + const preloads = ["low", "high", "auto"].map(fetchpriority => { return { + "url": "empty.js?" + token() + fetchpriority, + "as_attr": "script", + "fetchpriority_attr": fetchpriority, + }}); + navigateToTestWithEarlyHints("resources/preload-fetchpriority.html", preloads); +}); diff --git a/tests/wpt/tests/loading/early-hints/resources/early-hints-helpers.sub.js b/tests/wpt/tests/loading/early-hints/resources/early-hints-helpers.sub.js index faf6119cf1e..e41832c8ea5 100644 --- a/tests/wpt/tests/loading/early-hints/resources/early-hints-helpers.sub.js +++ b/tests/wpt/tests/loading/early-hints/resources/early-hints-helpers.sub.js @@ -16,17 +16,22 @@ const CROSS_ORIGIN_RESOURCES_URL = CROSS_ORIGIN + RESOURCES_PATH; * @property {string} as_attr - `as` attribute of this preload. * @property {string} [crossorigin_attr] - `crossorigin` attribute of this * preload. + * @property {string} [fetchpriority_attr] - `fetchpriority` attribute of this + * preload. * * @param {string} test_url - URL of a test after the Early Hints response. * @param {Array<Preload>} preloads - Preloads included in the Early Hints response. + * @param {bool} exclude_preloads_from_ok_response - Whether to exclude the preloads from the 200 OK reponse. */ -function navigateToTestWithEarlyHints(test_url, preloads) { +function navigateToTestWithEarlyHints(test_url, preloads, exclude_preloads_from_ok_response) { const params = new URLSearchParams(); params.set("test_url", test_url); + params.set("exclude_preloads_from_ok_response", + (!!exclude_preloads_from_ok_response).toString()); for (const preload of preloads) { params.append("preloads", JSON.stringify(preload)); } - const url = "resources/early-hints-test-loader.h2.py?" + params.toString(); + const url = RESOURCES_PATH +"/early-hints-test-loader.h2.py?" + params.toString(); window.location.replace(new URL(url, window.location)); } diff --git a/tests/wpt/tests/loading/early-hints/resources/early-hints-test-loader.h2.py b/tests/wpt/tests/loading/early-hints/resources/early-hints-test-loader.h2.py index bb987209c50..263cd64a622 100644 --- a/tests/wpt/tests/loading/early-hints/resources/early-hints-test-loader.h2.py +++ b/tests/wpt/tests/loading/early-hints/resources/early-hints-test-loader.h2.py @@ -24,6 +24,10 @@ def handle_headers(frame, request, response): header += "; crossorigin={}".format(crossorigin) else: header += "; crossorigin" + if "fetchpriority_attr" in preload: + fetchpriority = preload["fetchpriority_attr"] + if fetchpriority: + header += "; fetchpriority={}".format(fetchpriority) preload_headers.append(header.encode()) # Send a 103 response. @@ -37,8 +41,9 @@ def handle_headers(frame, request, response): time.sleep(0.2) response.status = 200 response.headers[b"content-type"] = "text/html" - for header in preload_headers: - response.headers.append(b"link", header) + if request.GET[b"exclude_preloads_from_ok_response"].decode("utf-8") != "true": + for header in preload_headers: + response.headers.append(b"link", header) response.write_status_headers() diff --git a/tests/wpt/tests/loading/early-hints/resources/preload-fetchpriority.html b/tests/wpt/tests/loading/early-hints/resources/preload-fetchpriority.html new file mode 100644 index 00000000000..38e56a9b67d --- /dev/null +++ b/tests/wpt/tests/loading/early-hints/resources/preload-fetchpriority.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="early-hints-helpers.sub.js"></script> +<body> +<script> +const preloads = getPreloadsFromSearchParams(); +["low", "high", "auto"].forEach((fetchpriority, i) => { + promise_test(() => { + return new Promise((resolve, reject) => { + assert_greater_than(preloads.length, i); + const preload = preloads[i]; + assert_equals(preload.fetchpriority_attr, fetchpriority); + const el = document.createElement("script"); + el.src = preload.url; + el.onload = () => { + const name = new URL(preload.url, window.location); + assert_true(isPreloadedByEarlyHints(name)); + resolve(); + }; + el.onerror = reject; + document.body.appendChild(el); + }); + }, `fetchpriority='${fetchpriority}' in early hints preload headers does cause not any error`); +}); +</script> +</body> diff --git a/tests/wpt/tests/mediasession/mediametadata.html b/tests/wpt/tests/mediasession/mediametadata.html index d73a4312516..8dcf7dc25c6 100644 --- a/tests/wpt/tests/mediasession/mediametadata.html +++ b/tests/wpt/tests/mediasession/mediametadata.html @@ -294,7 +294,7 @@ test(function() { var metadata = 42; assert_throws_js(TypeError, _ => { - metadata + metadata = new MediaMetadata({ artwork: [ { src: 'http://[example.com]' }] }); }); assert_equals(metadata, 42); @@ -311,7 +311,7 @@ test(function() { assert_equals(metadata.artwork.length, 0); assert_throws_js(TypeError, _ => { - metadata + metadata = new MediaMetadata({ chapterInfo: [{ title: 'Chapter 1', @@ -345,7 +345,7 @@ test(function() { }); assert_throws_js(TypeError, _ => { - metadata + metadata = new MediaMetadata({ chapterInfo: [{ title: 'Chapter 1', diff --git a/tests/wpt/tests/notifications/registration-association.https.window.js b/tests/wpt/tests/notifications/registration-association.https.window.js new file mode 100644 index 00000000000..61be5f62cd7 --- /dev/null +++ b/tests/wpt/tests/notifications/registration-association.https.window.js @@ -0,0 +1,31 @@ +// META: script=/resources/testdriver.js +// META: script=/resources/testdriver-vendor.js +// META: script=resources/helpers.js + +"use strict"; + +/** @type {ServiceWorkerRegistration} */ +let registration; + +promise_setup(async () => { + registration = await getActiveServiceWorker("noop-sw.js"); + await trySettingPermission("granted"); +}); + +promise_test(async (t) => { + t.add_cleanup(closeAllNotifications); + + await registration.showNotification("foo"); + await registration.unregister(); + const newRegistration = await getActiveServiceWorker("noop-sw.js"); + const notifications = await newRegistration.getNotifications(); + + // The spec says notifications should be associated with service worker registration + // and thus unregistering should dissociate the notification. + // + // (Step 5.2 of https://notifications.spec.whatwg.org/#dom-serviceworkerregistration-getnotifications) + // > Let notifications be a list of all notifications in the list of notifications whose origin + // > is same origin with origin, whose service worker registration is this, and whose tag, if tag + // > is not the empty string, is tag. + assert_equals(notifications.length, 0, "Should return zero notification"); +}, "A new SW registration gets no previous notification"); diff --git a/tests/wpt/tests/permissions-policy/resources/permissions-policy-geolocation.html b/tests/wpt/tests/permissions-policy/resources/permissions-policy-geolocation.html index b858a52392b..e32dde3845b 100644 --- a/tests/wpt/tests/permissions-policy/resources/permissions-policy-geolocation.html +++ b/tests/wpt/tests/permissions-policy/resources/permissions-policy-geolocation.html @@ -1,22 +1,11 @@ -<script src="/resources/testdriver.js"></script> -<script src="/resources/testdriver-vendor.js"></script> <script> - "use strict"; - - Promise.resolve().then(async () => { - test_driver.set_test_context(window.parent); - await test_driver.set_permission( - { name: "geolocation" }, - "granted" - ); - let enabled = true; - try { - await new Promise((resolve, reject) => { - navigator.geolocation.getCurrentPosition(resolve, reject); - }); - } catch (e) { - enabled = false; + const type = "availability-result"; + navigator.geolocation.getCurrentPosition( + () => { + window.parent.postMessage({ type, enabled: true }, "*"); + }, + () => { + window.parent.postMessage({ type, enabled: false }, "*"); } - window.parent.postMessage({ type: "availability-result", enabled }, "*"); - }); + ); </script> diff --git a/tests/wpt/tests/resources/chromium/webxr-test.js b/tests/wpt/tests/resources/chromium/webxr-test.js index a0713e03cce..49938dc3ec1 100644 --- a/tests/wpt/tests/resources/chromium/webxr-test.js +++ b/tests/wpt/tests/resources/chromium/webxr-test.js @@ -1188,16 +1188,18 @@ class MockRuntime { const enabled_features = []; for (let i = 0; i < sessionOptions.requiredFeatures.length; i++) { - if (this.supportedFeatures_.indexOf(sessionOptions.requiredFeatures[i]) !== -1) { - enabled_features.push(sessionOptions.requiredFeatures[i]); + const feature = sessionOptions.requiredFeatures[i]; + if (this._runtimeSupportsFeature(feature, sessionOptions)) { + enabled_features.push(feature); } else { return Promise.resolve({session: null}); } } for (let i =0; i < sessionOptions.optionalFeatures.length; i++) { - if (this.supportedFeatures_.indexOf(sessionOptions.optionalFeatures[i]) !== -1) { - enabled_features.push(sessionOptions.optionalFeatures[i]); + const feature = sessionOptions.optionalFeatures[i]; + if (this._runtimeSupportsFeature(feature, sessionOptions)) { + enabled_features.push(feature); } } @@ -1234,20 +1236,31 @@ class MockRuntime { _runtimeSupportsSession(options) { let result = this.supportedModes_.includes(options.mode); - - if (options.requiredFeatures.includes(xrSessionMojom.XRSessionFeature.DEPTH) - || options.optionalFeatures.includes(xrSessionMojom.XRSessionFeature.DEPTH)) { - result &= options.depthOptions.usagePreferences.includes( - xrSessionMojom.XRDepthUsage.kCPUOptimized); - result &= options.depthOptions.dataFormatPreferences.includes( - xrSessionMojom.XRDepthDataFormat.kLuminanceAlpha); - } - return Promise.resolve({ supportsSession: result, }); } + _runtimeSupportsFeature(feature, options) { + if (this.supportedFeatures_.indexOf(feature) === -1) { + return false; + } + + switch (feature) { + case xrSessionMojom.XRSessionFeature.DEPTH: + // This matches what Chrome can currently support. + return options.depthOptions && + (options.depthOptions.usagePreferences.length == 0 || + options.depthOptions.usagePreferences.includes( + xrSessionMojom.XRDepthUsage.kCPUOptimized)) && + (options.depthOptions.dataFormatPreferences.length == 0 || + options.depthOptions.dataFormatPreferences.includes( + xrSessionMojom.XRDepthDataFormat.kLuminanceAlpha)); + default: + return true; + } + } + // Private functions - utilities: _nativeOriginKnown(nativeOriginInformation){ diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/direct.css b/tests/wpt/tests/service-workers/service-worker/resources/direct.css index c812213f530..c812213f530 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/direct.css +++ b/tests/wpt/tests/service-workers/service-worker/resources/direct.css diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/direct.html b/tests/wpt/tests/service-workers/service-worker/resources/direct.html index e98d70207af..e98d70207af 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/direct.html +++ b/tests/wpt/tests/service-workers/service-worker/resources/direct.html diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/direct.js b/tests/wpt/tests/service-workers/service-worker/resources/direct.js index ed6f0e5f980..ed6f0e5f980 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/direct.js +++ b/tests/wpt/tests/service-workers/service-worker/resources/direct.js diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/direct.py b/tests/wpt/tests/service-workers/service-worker/resources/direct.py index d30d41b44e2..d30d41b44e2 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/direct.py +++ b/tests/wpt/tests/service-workers/service-worker/resources/direct.py diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/direct.txt b/tests/wpt/tests/service-workers/service-worker/resources/direct.txt index f3d9861c137..f3d9861c137 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/direct.txt +++ b/tests/wpt/tests/service-workers/service-worker/resources/direct.txt diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/imported-sw.js b/tests/wpt/tests/service-workers/service-worker/resources/imported-sw.js index 04a894d77f8..04a894d77f8 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/imported-sw.js +++ b/tests/wpt/tests/service-workers/service-worker/resources/imported-sw.js diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/or-test/direct1.text b/tests/wpt/tests/service-workers/service-worker/resources/or-test/direct1.text index f3d9861c137..f3d9861c137 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/or-test/direct1.text +++ b/tests/wpt/tests/service-workers/service-worker/resources/or-test/direct1.text diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/or-test/direct1.text.headers b/tests/wpt/tests/service-workers/service-worker/resources/or-test/direct1.text.headers index 156209f9c81..156209f9c81 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/or-test/direct1.text.headers +++ b/tests/wpt/tests/service-workers/service-worker/resources/or-test/direct1.text.headers diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/or-test/direct2.text b/tests/wpt/tests/service-workers/service-worker/resources/or-test/direct2.text index f3d9861c137..f3d9861c137 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/or-test/direct2.text +++ b/tests/wpt/tests/service-workers/service-worker/resources/or-test/direct2.text diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/or-test/direct2.text.headers b/tests/wpt/tests/service-workers/service-worker/resources/or-test/direct2.text.headers index 156209f9c81..156209f9c81 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/or-test/direct2.text.headers +++ b/tests/wpt/tests/service-workers/service-worker/resources/or-test/direct2.text.headers diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/router-rules.js b/tests/wpt/tests/service-workers/service-worker/resources/router-rules.js index fdc1c9e0637..fdc1c9e0637 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/router-rules.js +++ b/tests/wpt/tests/service-workers/service-worker/resources/router-rules.js diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/simple-test-for-condition-main-resource.html b/tests/wpt/tests/service-workers/service-worker/resources/simple-test-for-condition-main-resource.html index 0c3e3e78707..0c3e3e78707 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/simple-test-for-condition-main-resource.html +++ b/tests/wpt/tests/service-workers/service-worker/resources/simple-test-for-condition-main-resource.html diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/simple.csv b/tests/wpt/tests/service-workers/service-worker/resources/simple.csv index ecbef786e73..ecbef786e73 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/simple.csv +++ b/tests/wpt/tests/service-workers/service-worker/resources/simple.csv diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/static-router-helpers.sub.js b/tests/wpt/tests/service-workers/service-worker/resources/static-router-helpers.sub.js index cf34e98635f..0ab1f1fae1d 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/static-router-helpers.sub.js +++ b/tests/wpt/tests/service-workers/service-worker/resources/static-router-helpers.sub.js @@ -31,15 +31,21 @@ const reset_info_in_worker = await promise; } +// This script's directory name. It is used for specifying test files. +const scriptDir = document.currentScript.src.match(/.*\//)[0]; + // Register the ServiceWorker and wait until activated. // {ruleKey} represents the key of routerRules defined in router-rules.js. // {swScript} represents the service worker source URL. -const registerAndActivate = async (test, ruleKey, swScript) => { +// {swScope} represents the service worker resource scope. +const registerAndActivate = async (test, ruleKey, swScript, swScope) => { if (!swScript) { - swScript = 'resources/static-router-sw.js' + swScript = scriptDir + 'static-router-sw.js' + } + if (!swScope) { + swScope = scriptDir; } const swURL = `${swScript}?key=${ruleKey}`; - const swScope = 'resources/'; const reg = await service_worker_unregister_and_register( test, swURL, swScope, { type: 'module' }); add_completion_callback(() => reg.unregister()); diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/static-router-no-fetch-handler-sw.js b/tests/wpt/tests/service-workers/service-worker/resources/static-router-no-fetch-handler-sw.js index 1ba5fd7d463..1ba5fd7d463 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/static-router-no-fetch-handler-sw.js +++ b/tests/wpt/tests/service-workers/service-worker/resources/static-router-no-fetch-handler-sw.js diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/static-router-race-network-and-fetch-handler-sw.js b/tests/wpt/tests/service-workers/service-worker/resources/static-router-race-network-and-fetch-handler-sw.js index 468116eea80..468116eea80 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/static-router-race-network-and-fetch-handler-sw.js +++ b/tests/wpt/tests/service-workers/service-worker/resources/static-router-race-network-and-fetch-handler-sw.js diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/static-router-sw.js b/tests/wpt/tests/service-workers/service-worker/resources/static-router-sw.js index c0bd683f918..c0bd683f918 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/static-router-sw.js +++ b/tests/wpt/tests/service-workers/service-worker/resources/static-router-sw.js diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/static-router-sw.sub.js b/tests/wpt/tests/service-workers/service-worker/resources/static-router-sw.sub.js index 04f9c5533a4..04f9c5533a4 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/static-router-sw.sub.js +++ b/tests/wpt/tests/service-workers/service-worker/resources/static-router-sw.sub.js diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-fetch-event.https.html b/tests/wpt/tests/service-workers/service-worker/static-router-fetch-event.https.html index 167e3af0090..167e3af0090 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-fetch-event.https.html +++ b/tests/wpt/tests/service-workers/service-worker/static-router-fetch-event.https.html diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-invalid-rules.https.html b/tests/wpt/tests/service-workers/service-worker/static-router-invalid-rules.https.html index 15b8ef5742d..15b8ef5742d 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-invalid-rules.https.html +++ b/tests/wpt/tests/service-workers/service-worker/static-router-invalid-rules.https.html diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-main-resource.https.html b/tests/wpt/tests/service-workers/service-worker/static-router-main-resource.https.html index 71bc0697f9c..71bc0697f9c 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-main-resource.https.html +++ b/tests/wpt/tests/service-workers/service-worker/static-router-main-resource.https.html diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-multiple-router-registrations.https.html b/tests/wpt/tests/service-workers/service-worker/static-router-multiple-router-registrations.https.html index dd7ff1e4e9d..dd7ff1e4e9d 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-multiple-router-registrations.https.html +++ b/tests/wpt/tests/service-workers/service-worker/static-router-multiple-router-registrations.https.html diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-mutiple-conditions.https.html b/tests/wpt/tests/service-workers/service-worker/static-router-mutiple-conditions.https.html index 3d69411843c..3d69411843c 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-mutiple-conditions.https.html +++ b/tests/wpt/tests/service-workers/service-worker/static-router-mutiple-conditions.https.html diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-no-fetch-handler.https.html b/tests/wpt/tests/service-workers/service-worker/static-router-no-fetch-handler.https.html index e98dd08a90a..e98dd08a90a 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-no-fetch-handler.https.html +++ b/tests/wpt/tests/service-workers/service-worker/static-router-no-fetch-handler.https.html diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-race-network-and-fetch-handler.https.html b/tests/wpt/tests/service-workers/service-worker/static-router-race-network-and-fetch-handler.https.html index 0dad64ad992..0dad64ad992 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-race-network-and-fetch-handler.https.html +++ b/tests/wpt/tests/service-workers/service-worker/static-router-race-network-and-fetch-handler.https.html diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-request-destination.https.html b/tests/wpt/tests/service-workers/service-worker/static-router-request-destination.https.html index 55ad6da31aa..55ad6da31aa 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-request-destination.https.html +++ b/tests/wpt/tests/service-workers/service-worker/static-router-request-destination.https.html diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-request-method.https.html b/tests/wpt/tests/service-workers/service-worker/static-router-request-method.https.html index 8e219532a3e..8e219532a3e 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-request-method.https.html +++ b/tests/wpt/tests/service-workers/service-worker/static-router-request-method.https.html diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-subresource.https.html b/tests/wpt/tests/service-workers/service-worker/static-router-subresource.https.html index ab05a3d2528..ab05a3d2528 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-subresource.https.html +++ b/tests/wpt/tests/service-workers/service-worker/static-router-subresource.https.html diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/README.md b/tests/wpt/tests/service-workers/service-worker/tentative/static-router/README.md index 5429b61d40e..33e508aba2c 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/README.md +++ b/tests/wpt/tests/service-workers/service-worker/tentative/static-router/README.md @@ -1,4 +1,4 @@ -A test suite for the ServiceWorker Static Routing API. +A test suite for the ServiceWorker Static Routing API Resource Timing. -WICG proposal: https://github.com/WICG/proposals/issues/102 -Specification PR: https://github.com/w3c/ServiceWorker/pull/1686 +Explainer: https://github.com/WICG/service-worker-static-routing-api/blob/main/resource-timing-api.md +Resource-Timing Proposal: https://github.com/w3c/resource-timing/issues/389 diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/simple.html b/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/simple.html deleted file mode 100644 index 0c3e3e78707..00000000000 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/simple.html +++ /dev/null @@ -1,3 +0,0 @@ -<!DOCTYPE html> -<title>Simple</title> -Here's a simple html file. diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/test-helpers.sub.js b/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/test-helpers.sub.js deleted file mode 100644 index 64a7f7d24fd..00000000000 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/resources/test-helpers.sub.js +++ /dev/null @@ -1,303 +0,0 @@ -// Copied from -// service-workers/service-worker/resources/testharness-helpers.js to be used under tentative. - -// Adapter for testharness.js-style tests with Service Workers - -/** - * @param options an object that represents RegistrationOptions except for scope. - * @param options.type a WorkerType. - * @param options.updateViaCache a ServiceWorkerUpdateViaCache. - * @see https://w3c.github.io/ServiceWorker/#dictdef-registrationoptions - */ -function service_worker_unregister_and_register(test, url, scope, options) { - if (!scope || scope.length == 0) - return Promise.reject(new Error('tests must define a scope')); - - if (options && options.scope) - return Promise.reject(new Error('scope must not be passed in options')); - - options = Object.assign({ scope: scope }, options); - return service_worker_unregister(test, scope) - .then(function() { - return navigator.serviceWorker.register(url, options); - }) - .catch(unreached_rejection(test, - 'unregister and register should not fail')); -} - -// This unregisters the registration that precisely matches scope. Use this -// when unregistering by scope. If no registration is found, it just resolves. -function service_worker_unregister(test, scope) { - var absoluteScope = (new URL(scope, window.location).href); - return navigator.serviceWorker.getRegistration(scope) - .then(function(registration) { - if (registration && registration.scope === absoluteScope) - return registration.unregister(); - }) - .catch(unreached_rejection(test, 'unregister should not fail')); -} - -function service_worker_unregister_and_done(test, scope) { - return service_worker_unregister(test, scope) - .then(test.done.bind(test)); -} - -function unreached_fulfillment(test, prefix) { - return test.step_func(function(result) { - var error_prefix = prefix || 'unexpected fulfillment'; - assert_unreached(error_prefix + ': ' + result); - }); -} - -// Rejection-specific helper that provides more details -function unreached_rejection(test, prefix) { - return test.step_func(function(error) { - var reason = error.message || error.name || error; - var error_prefix = prefix || 'unexpected rejection'; - assert_unreached(error_prefix + ': ' + reason); - }); -} - -/** - * Adds an iframe to the document and returns a promise that resolves to the - * iframe when it finishes loading. The caller is responsible for removing the - * iframe later if needed. - * - * @param {string} url - * @returns {HTMLIFrameElement} - */ -function with_iframe(url) { - return new Promise(function(resolve) { - var frame = document.createElement('iframe'); - frame.className = 'test-iframe'; - frame.src = url; - frame.onload = function() { resolve(frame); }; - document.body.appendChild(frame); - }); -} - -function normalizeURL(url) { - return new URL(url, self.location).toString().replace(/#.*$/, ''); -} - -function wait_for_update(test, registration) { - if (!registration || registration.unregister == undefined) { - return Promise.reject(new Error( - 'wait_for_update must be passed a ServiceWorkerRegistration')); - } - - return new Promise(test.step_func(function(resolve) { - var handler = test.step_func(function() { - registration.removeEventListener('updatefound', handler); - resolve(registration.installing); - }); - registration.addEventListener('updatefound', handler); - })); -} - -// Return true if |state_a| is more advanced than |state_b|. -function is_state_advanced(state_a, state_b) { - if (state_b === 'installing') { - switch (state_a) { - case 'installed': - case 'activating': - case 'activated': - case 'redundant': - return true; - } - } - - if (state_b === 'installed') { - switch (state_a) { - case 'activating': - case 'activated': - case 'redundant': - return true; - } - } - - if (state_b === 'activating') { - switch (state_a) { - case 'activated': - case 'redundant': - return true; - } - } - - if (state_b === 'activated') { - switch (state_a) { - case 'redundant': - return true; - } - } - return false; -} - -function wait_for_state(test, worker, state) { - if (!worker || worker.state == undefined) { - return Promise.reject(new Error( - 'wait_for_state needs a ServiceWorker object to be passed.')); - } - if (worker.state === state) - return Promise.resolve(state); - - if (is_state_advanced(worker.state, state)) { - return Promise.reject(new Error( - `Waiting for ${state} but the worker is already ${worker.state}.`)); - } - return new Promise(test.step_func(function(resolve, reject) { - worker.addEventListener('statechange', test.step_func(function() { - if (worker.state === state) - resolve(state); - - if (is_state_advanced(worker.state, state)) { - reject(new Error( - `The state of the worker becomes ${worker.state} while waiting` + - `for ${state}.`)); - } - })); - })); -} - -// Declare a test that runs entirely in the ServiceWorkerGlobalScope. The |url| -// is the service worker script URL. This function: -// - Instantiates a new test with the description specified in |description|. -// The test will succeed if the specified service worker can be successfully -// registered and installed. -// - Creates a new ServiceWorker registration with a scope unique to the current -// document URL. Note that this doesn't allow more than one -// service_worker_test() to be run from the same document. -// - Waits for the new worker to begin installing. -// - Imports tests results from tests running inside the ServiceWorker. -function service_worker_test(url, description) { - // If the document URL is https://example.com/document and the script URL is - // https://example.com/script/worker.js, then the scope would be - // https://example.com/script/scope/document. - var scope = new URL('scope' + window.location.pathname, - new URL(url, window.location)).toString(); - promise_test(function(test) { - return service_worker_unregister_and_register(test, url, scope) - .then(function(registration) { - add_completion_callback(function() { - registration.unregister(); - }); - return wait_for_update(test, registration) - .then(function(worker) { - return fetch_tests_from_worker(worker); - }); - }); - }, description); -} - -function base_path() { - return location.pathname.replace(/\/[^\/]*$/, '/'); -} - -function test_login(test, origin, username, password, cookie) { - return new Promise(function(resolve, reject) { - with_iframe( - origin + base_path() + - 'resources/fetch-access-control-login.html') - .then(test.step_func(function(frame) { - var channel = new MessageChannel(); - channel.port1.onmessage = test.step_func(function() { - frame.remove(); - resolve(); - }); - frame.contentWindow.postMessage( - {username: username, password: password, cookie: cookie}, - origin, [channel.port2]); - })); - }); -} - -function test_websocket(test, frame, url) { - return new Promise(function(resolve, reject) { - var ws = new frame.contentWindow.WebSocket(url, ['echo', 'chat']); - var openCalled = false; - ws.addEventListener('open', test.step_func(function(e) { - assert_equals(ws.readyState, 1, "The WebSocket should be open"); - openCalled = true; - ws.close(); - }), true); - - ws.addEventListener('close', test.step_func(function(e) { - assert_true(openCalled, "The WebSocket should be closed after being opened"); - resolve(); - }), true); - - ws.addEventListener('error', reject); - }); -} - -function login_https(test) { - var host_info = get_host_info(); - return test_login(test, host_info.HTTPS_REMOTE_ORIGIN, - 'username1s', 'password1s', 'cookie1') - .then(function() { - return test_login(test, host_info.HTTPS_ORIGIN, - 'username2s', 'password2s', 'cookie2'); - }); -} - -function websocket(test, frame) { - return test_websocket(test, frame, get_websocket_url()); -} - -function get_websocket_url() { - return 'wss://{{host}}:{{ports[wss][0]}}/echo'; -} - -// The navigator.serviceWorker.register() method guarantees that the newly -// installing worker is available as registration.installing when its promise -// resolves. However some tests test installation using a <link> element where -// it is possible for the installing worker to have already become the waiting -// or active worker. So this method is used to get the newest worker when these -// tests need access to the ServiceWorker itself. -function get_newest_worker(registration) { - if (registration.installing) - return registration.installing; - if (registration.waiting) - return registration.waiting; - if (registration.active) - return registration.active; -} - -function register_using_link(script, options) { - var scope = options.scope; - var link = document.createElement('link'); - link.setAttribute('rel', 'serviceworker'); - link.setAttribute('href', script); - link.setAttribute('scope', scope); - document.getElementsByTagName('head')[0].appendChild(link); - return new Promise(function(resolve, reject) { - link.onload = resolve; - link.onerror = reject; - }) - .then(() => navigator.serviceWorker.getRegistration(scope)); -} - -function with_sandboxed_iframe(url, sandbox) { - return new Promise(function(resolve) { - var frame = document.createElement('iframe'); - frame.sandbox = sandbox; - frame.src = url; - frame.onload = function() { resolve(frame); }; - document.body.appendChild(frame); - }); -} - -// Registers, waits for activation, then unregisters on a sample scope. -// -// This can be used to wait for a period of time needed to register, -// activate, and then unregister a service worker. When checking that -// certain behavior does *NOT* happen, this is preferable to using an -// arbitrary delay. -async function wait_for_activation_on_sample_scope(t, window_or_workerglobalscope) { - const script = '/service-workers/service-worker/resources/empty-worker.js'; - const scope = 'resources/there/is/no/there/there?' + Date.now(); - let registration = await window_or_workerglobalscope.navigator.serviceWorker.register(script, { scope }); - await wait_for_state(t, registration.installing, 'activated'); - await registration.unregister(); -} - diff --git a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-resource-timing.https.html b/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-resource-timing.https.html index e99c2d3d0b3..c85c5ea3b9a 100644 --- a/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-resource-timing.https.html +++ b/tests/wpt/tests/service-workers/service-worker/tentative/static-router/static-router-resource-timing.https.html @@ -6,8 +6,8 @@ <script src="/common/get-host-info.sub.js"></script> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> -<script src="resources/test-helpers.sub.js"></script> -<script src="resources/static-router-helpers.sub.js"></script> +<script src="/service-workers/service-worker/resources/test-helpers.sub.js"></script> +<script src="/service-workers/service-worker/resources/static-router-helpers.sub.js"></script> <body> <script> const ROUTER_RULE_KEY = 'condition-urlpattern-constructed-source-network'; @@ -17,20 +17,19 @@ const ROUTER_RULE_KEY_REQUEST_CACHE = 'condition-request-navigate-source-cache'; const ROUTER_RULE_KEY_URL_PATTERN_CONSTRUCTED_MATCH_ALL_CACHE = 'condition-urlpattern-constructed-match-all-source-cache'; const ROUTER_RULE_KEY_REQUEST_FETCH = 'condition-urlpattern-string-source-fetch-event'; -const REGISTERED_ROUTE = 'resources/direct.txt'; -const CACHED_ROUTE = 'resources/cache.txt'; -const NON_REGISTERED_ROUTE = 'resources/simple.html'; +const REGISTERED_ROUTE = '/service-workers/service-worker/resources/direct.txt'; +const CACHED_ROUTE = '/service-workers/service-worker/resources/cache.txt'; +const NON_REGISTERED_ROUTE = '/service-workers/service-worker/resources/simple.html'; const RACE_ROUTER_KEY = 'condition-urlpattern-string-source-race-network-and-fetch-handler'; -const RACE_SW_SRC = 'resources/static-router-race-network-and-fetch-handler-sw.js'; -const RACE_ROUTE = 'resources/direct.py'; +const RACE_SW_SRC = '/service-workers/service-worker/resources/static-router-race-network-and-fetch-handler-sw.js'; +const RACE_ROUTE = '/service-workers/service-worker/resources/direct.py'; const host_info = get_host_info(); -const path = new URL(".", window.location).pathname; function resourceUrl(resource) { - return `${host_info['HTTPS_ORIGIN']}${path}${resource}`; + return `${host_info['HTTPS_ORIGIN']}${resource}`; } // Verify existance of a PerformanceEntry and the order between the timings of diff --git a/tests/wpt/tests/shared-storage/cross-origin-worklet-in-sandboxed-frame.tentative.https.sub.html b/tests/wpt/tests/shared-storage/cross-origin-worklet-in-sandboxed-frame.tentative.https.sub.html new file mode 100644 index 00000000000..f44a356bf83 --- /dev/null +++ b/tests/wpt/tests/shared-storage/cross-origin-worklet-in-sandboxed-frame.tentative.https.sub.html @@ -0,0 +1,60 @@ +<!doctype html> +<body> + <script src=/resources/testharness.js></script> + <script src=/resources/testharnessreport.js></script> + <script src=/common/utils.js></script> + <script src=/fenced-frame/resources/utils.js></script> + <script src=/shared-storage/resources/util.js></script> + <script> + promise_test(async t => { + const cross_origin = 'https://{{domains[www]}}:{{ports[https][0]}}'; + const ancestor_token = token(); + const set_key = 'a'; + const set_value = 'b'; + + // Create sandboxed iframe. + let frame = document.createElement('iframe'); + frame.sandbox = 'allow-scripts'; + frame.src = '/shared-storage/resources/' + + 'cross-origin-worklet-in-sandboxed-frame-inner.https.sub.html' + + `?cross_origin=${cross_origin}` + + `&ancestor_token=${ancestor_token}` + + `&mock_select_url_result_index=0` + + `&set_key=${set_key}` + + `&set_value=${set_value}`; + + let select_url_result_urn; + + // We expect a message to bubble up via the sandboxed iframe. + const createWorkletAndSelectUrlInsideSandboxedFramePromise = new Promise((resolve, reject) => { + window.addEventListener('message', async function handler(evt) { + if (evt.source === frame.contentWindow) { + assert_true(evt.data.success, + "createWorklet() failed inside the sandboxed iframe"); + select_url_result_urn = evt.data.selectUrlResultUrn; + + document.body.removeChild(frame); + window.removeEventListener('message', handler); + resolve(); + } + }); + window.addEventListener('error', () => { + reject(new Error('Navigation error')); + }); + }); + + // Navigate and wait for notification. + document.body.appendChild(frame); + await createWorkletAndSelectUrlInsideSandboxedFramePromise; + + attachFencedFrame(select_url_result_urn, 'opaque-ads'); + const result0 = await nextValueFromServer(ancestor_token); + assert_equals(result0, "frame0_loaded"); + + await verifyKeyValueForOrigin(set_key, set_value, cross_origin); + + // Clean up and finish. + await sharedStorage.delete(set_key); + }, 'test createWorklet() in sandboxed iframe and verify its data origin'); + </script> +</body>
\ No newline at end of file diff --git a/tests/wpt/tests/shared-storage/resources/cross-origin-worklet-in-sandboxed-frame-inner.https.sub.html b/tests/wpt/tests/shared-storage/resources/cross-origin-worklet-in-sandboxed-frame-inner.https.sub.html new file mode 100644 index 00000000000..498fda30780 --- /dev/null +++ b/tests/wpt/tests/shared-storage/resources/cross-origin-worklet-in-sandboxed-frame-inner.https.sub.html @@ -0,0 +1,51 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/utils.js"></script> +<script src="/shared-storage/resources/util.js"></script> +<script src="/fenced-frame/resources/utils.js"></script> + +<body> +<script> +'use strict'; + +async function test() { + const url = new URL(location.href); + const cross_origin = url.searchParams.get('cross_origin'); + const ancestor_token = url.searchParams.get('ancestor_token'); + const mock_select_url_result_index = url.searchParams.get('mock_select_url_result_index'); + const set_key = url.searchParams.get('set_key'); + const set_value = url.searchParams.get('set_value'); + + const script_url = cross_origin + + `/shared-storage/resources/simple-module.js`; + + const worklet = await sharedStorage.createWorklet( + script_url, + { credentials: "omit" }); + + let url0 = generateURL("/shared-storage/resources/frame0.html", + [ancestor_token]); + + let select_url_result_urn = await worklet.selectURL( + "test-url-selection-operation", + [{ url: url0 }], { + data: { + 'mockResult': mock_select_url_result_index, + 'setKey': set_key, + 'setValue': set_value + }, + resolveToConfig: false, + keepAlive: true + }); + + assert_true(validateSelectURLResult(select_url_result_urn, /*resolve_to_config=*/false)); + + let parentOrOpener = window.opener || window.parent; + parentOrOpener.postMessage({success: true, selectUrlResultUrn: select_url_result_urn}, "*"); +} + +test(); + +</script> +</body>
\ No newline at end of file diff --git a/tests/wpt/tests/shared-storage/shared-storage-in-sandboxed-iframe.tentative.https.html b/tests/wpt/tests/shared-storage/shared-storage-in-sandboxed-iframe.tentative.https.html index 662d0ff6344..537f2e99d38 100644 --- a/tests/wpt/tests/shared-storage/shared-storage-in-sandboxed-iframe.tentative.https.html +++ b/tests/wpt/tests/shared-storage/shared-storage-in-sandboxed-iframe.tentative.https.html @@ -52,7 +52,7 @@ test_shared_storage_in_sandboxed_iframe(t, /*sandbox_flags=*/'allow-scripts', /*method=*/'createWorklet', - /*expect_success=*/false); + /*expect_success=*/true); }, 'test sharedStorage.createWorklet() in sandboxed iframe without "allow-same-origin"'); async_test(t => { diff --git a/tests/wpt/tests/speculation-rules/prefetch/cookie-indices.https.html b/tests/wpt/tests/speculation-rules/prefetch/cookie-indices.https.html new file mode 100644 index 00000000000..f5fac65822e --- /dev/null +++ b/tests/wpt/tests/speculation-rules/prefetch/cookie-indices.https.html @@ -0,0 +1,154 @@ +<!DOCTYPE html> +<meta name="timeout" content="long"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src='/resources/testdriver-vendor.js'></script> +<script src="/common/dispatcher/dispatcher.js"></script> +<script src="/common/subset-tests-by-key.js"></script> +<script src="/common/utils.js"></script> +<script src="../resources/utils.js"></script> +<script src="resources/utils.sub.js"></script> +<meta name="variant" content="?include=unchanged"> +<meta name="variant" content="?include=changed"> +<meta name="variant" content="?include=unchangedWithRedirect"> +<meta name="variant" content="?include=changedWithRedirect"> +<meta name="variant" content="?include=changedWithRedirect2"> +<meta name="variant" content="?include=changedWithRedirect3"> +<script> +setup(() => assertSpeculationRulesIsSupported()); + +subsetTestByKey("unchanged", promise_test, async t => { + await test_driver.delete_all_cookies(); + document.cookie = 'vary1=hello'; + + let agent = await spawnWindow(t); + + let nextUrl = agent.getExecutorURL({ executor: "cookies.py", cookieindices: "1" }); + await agent.forceSinglePrefetch(nextUrl); + await agent.navigate(nextUrl); + + assert_prefetched(await agent.getRequestHeaders()); + let request_cookies = await agent.getRequestCookies(); + let response_cookies = await agent.getResponseCookies(); + assert_equals(request_cookies.vary1, "hello"); + assert_equals(request_cookies.vary2, undefined); + assert_equals(response_cookies.vary1, "hello"); + assert_equals(response_cookies.vary2, undefined); +}, "Cookie-Indices should not prevent a prefetch from succeeding if the cookie has not changed."); + +subsetTestByKey("changed", promise_test, async t => { + await test_driver.delete_all_cookies(); + document.cookie = 'vary1=hello'; + + let agent = await spawnWindow(t); + + let nextUrl = agent.getExecutorURL({ executor: "cookies.py", cookieindices: "1" }); + await agent.forceSinglePrefetch(nextUrl); + document.cookie = 'vary1=two'; + await agent.navigate(nextUrl); + + assert_not_prefetched(await agent.getRequestHeaders()); + let request_cookies = await agent.getRequestCookies(); + let response_cookies = await agent.getResponseCookies(); + assert_equals(request_cookies.vary1, "two"); + assert_equals(request_cookies.vary2, undefined); + assert_equals(response_cookies.vary1, "two"); + assert_equals(response_cookies.vary2, undefined); +}, "Cookie-Indices should prevent a prefetch from being used if the cookie has changed."); + +subsetTestByKey("unchangedWithRedirect", promise_test, async t => { + await test_driver.delete_all_cookies(); + + document.cookie = 'vary1=hello'; + + let agent = await spawnWindow(t); + + let finalUrl = agent.getExecutorURL({ executor: "cookies.py", cookieindices: "1" }); + let nextUrl = new URL("/common/redirect.py?location=" + encodeURIComponent(finalUrl), document.baseURI); + await agent.forceSinglePrefetch(nextUrl); + await agent.navigate(nextUrl, {expectedDestinationUrl: finalUrl}); + + assert_prefetched(await agent.getRequestHeaders()); + let request_cookies = await agent.getRequestCookies(); + let response_cookies = await agent.getResponseCookies(); + assert_equals(request_cookies.vary1, "hello"); + assert_equals(request_cookies.vary2, undefined); + assert_equals(response_cookies.vary1, "hello"); + assert_equals(response_cookies.vary2, undefined); +}, "Cookie-Indices should not prevent a prefetch from succeeding with unchanged cookies, even with redirect"); + +subsetTestByKey("changedWithRedirect", promise_test, async t => { + await test_driver.delete_all_cookies(); + + document.cookie = 'vary1=hello'; + + let agent = await spawnWindow(t); + + let finalUrl = agent.getExecutorURL({ executor: "cookies.py", cookieindices: "1" }); + let nextUrl = new URL("/common/redirect.py?location=" + encodeURIComponent(finalUrl), document.baseURI); + await agent.forceSinglePrefetch(nextUrl); + document.cookie = 'vary1=two'; + await agent.navigate(nextUrl, {expectedDestinationUrl: finalUrl}); + + assert_not_prefetched(await agent.getRequestHeaders()); + let request_cookies = await agent.getRequestCookies(); + let response_cookies = await agent.getResponseCookies(); + assert_equals(request_cookies.vary1, "two"); + assert_equals(request_cookies.vary2, undefined); + assert_equals(response_cookies.vary1, "two"); + assert_equals(response_cookies.vary2, undefined); +}, "Cookie-Indices should prevent a prefetch from succeeding if the cookie changed, with a redirect"); + +subsetTestByKey("changedWithRedirect2", promise_test, async t => { + await test_driver.delete_all_cookies(); + + document.cookie = 'vary1=hello'; + + let agent = await spawnWindow(t); + + // One subtlety here: the wptserve pipe parser doesn't allow commas inside + // the header value (since that delimits the pipe arguments). + // There is currently no way around this, so we simply don't use a value with a comma. + let finalUrl = agent.getExecutorURL({ executor: "cookies.py" }); + let pipe = "header(Cache-Control,no-store)|header(Vary,Cookie)|header(Cookie-Indices,\"vary1\")"; + let nextUrl = new URL(`/common/redirect.py?location=${encodeURIComponent(finalUrl)}&pipe=${encodeURIComponent(pipe)}`, document.baseURI); + await agent.forceSinglePrefetch(nextUrl); + document.cookie = 'vary1=two'; + await agent.navigate(nextUrl, {expectedDestinationUrl: finalUrl}); + + assert_prefetched(await agent.getRequestHeaders()); + let request_cookies = await agent.getRequestCookies(); + let response_cookies = await agent.getResponseCookies(); + assert_equals(request_cookies.vary1, "hello"); + assert_equals(request_cookies.vary2, undefined); + assert_equals(response_cookies.vary1, "two"); + assert_equals(response_cookies.vary2, undefined); +}, "If the redirect needs to be rerequested but goes to the same place and that one doesn't vary, we actually can use the prefetched final response."); + +subsetTestByKey("changedWithRedirect3", promise_test, async t => { + await test_driver.delete_all_cookies(); + + document.cookie = 'vary1=hello'; + + let agent = await spawnWindow(t); + + // One subtlety here: the wptserve pipe parser doesn't allow commas inside + // the header value (since that delimits the pipe arguments). + // There is currently no way around this, so we simply don't use a value with a comma. + let finalUrl = agent.getExecutorURL({ executor: "cookies.py" }); + let pipe = "header(Cache-Control,no-store)|header(Vary,Cookie)|header(Cookie-Indices,\"vary1\")"; + let nextUrl = new URL(`resources/random_redirect.py?location=${encodeURIComponent(finalUrl)}&pipe=${encodeURIComponent(pipe)}`, document.baseURI); + await agent.forceSinglePrefetch(nextUrl); + document.cookie = 'vary1=two'; + await agent.navigate(nextUrl, {expectedDestinationUrl: null}); + + assert_not_prefetched(await agent.getRequestHeaders()); + let request_cookies = await agent.getRequestCookies(); + let response_cookies = await agent.getResponseCookies(); + assert_equals(request_cookies.vary1, "two"); + assert_equals(request_cookies.vary2, undefined); + assert_equals(response_cookies.vary1, "two"); + assert_equals(response_cookies.vary2, undefined); +}, "If the redirect needs to be rerequested and goes elsewhere, we cannot can use the prefetched final response."); +</script> diff --git a/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/hint-test-inputs.js b/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/hint-test-inputs.js new file mode 100644 index 00000000000..258fb8e8573 --- /dev/null +++ b/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/hint-test-inputs.js @@ -0,0 +1,306 @@ +// Test inputs: +// - description: a description of the test. +// - noVarySearch: No-Vary-Search header value for the response. +// - noVarySearchHint: No-Vary-Search hint to include in prefetch +// speculation rules +// - prefetchQuery: added to query part of prefetch-executor when prefetching +// - navigateQuery: added to query part of prefetch-executor when navigating +// - shouldUse: if the test case expects the prefetched entry to be used or not. +const hint_test_inputs = [ + { + description: + 'Use in-flight prefetch as query parameter b has the same value.', + noVarySearch: 'params=("a")', + noVarySearchHint: 'params=("a")', + prefetchQuery: 'a=2&b=3', + navigateQuery: 'b=3', + shouldUse: true + }, + + { + description: + 'Don\'t use in-flight prefetch as there is no No-Vary-Search hint.', + noVarySearch: 'params=("a")', + noVarySearchHint: '', + prefetchQuery: 'a=2&b=3', + navigateQuery: 'b=3', + shouldUse: false + }, + + { + description: + 'Don\'t use in-flight prefetch as the prefetched URL has the extra "a" query parameter.', + noVarySearch: 'params=("b")', + noVarySearchHint: 'params=("b")', + prefetchQuery: 'a=2&b=3', + navigateQuery: 'b=2', + shouldUse: false + }, + + { + description: 'Use in-flight prefetch as the URLs do not vary by a and b.', + noVarySearch: 'params=("a" "b")', + noVarySearchHint: 'params=("a" "b")', + prefetchQuery: 'a=2&b=3', + navigateQuery: 'b=2', + shouldUse: true + }, + + { + description: 'Do not use in-flight prefetch as the navigation URL has' + + ' a different value for the "b" query parameter.', + noVarySearch: 'params=("a" "b")', + noVarySearchHint: 'params=("a")', + prefetchQuery: 'a=2&b=3', + navigateQuery: 'b=2', + shouldUse: false + }, + + { + description: + 'Use in-flight prefetch as the URLs have the same values for all keys, only differing by order.', + noVarySearch: 'key-order', + noVarySearchHint: 'key-order', + prefetchQuery: 'b=5&a=3&a=4&d=6&c=5&b=3', + navigateQuery: 'd=6&a=3&b=5&b=3&c=5&a=4', + shouldUse: true + }, + + { + description: + 'Use in-flight prefetch as the URLs have the same values for all keys, only differing by order and using ?1 for specifying a true value.', + noVarySearch: 'key-order=?1', + noVarySearchHint: 'key-order=?1', + prefetchQuery: 'b=5&a=3&a=4&d=6&c=5&b=3', + navigateQuery: 'd=6&a=3&b=5&b=3&c=5&a=4', + shouldUse: true + }, + + { + description: + 'Don\'t use in-flight prefetch as key-order is set to false and the URLs are not identical.', + noVarySearch: 'key-order=?0', + noVarySearchHint: 'key-order=?1', + prefetchQuery: 'b=5&a=3&a=4&d=6&c=5&b=3', + navigateQuery: 'd=6&a=3&b=5&b=3&c=5&a=4', + shouldUse: false + }, + + { + description: + 'Use in-flight prefetch as all query parameters except c can be ignored.', + noVarySearch: 'params, except=("c")', + noVarySearchHint: 'params, except=("c")', + prefetchQuery: 'b=5&a=3&d=6&c=3', + navigateQuery: 'a=1&b=2&c=3', + shouldUse: true + }, + + { + description: + 'Use in-flight prefetch as all query parameters except c can be ignored.' + + ' Only the last except matters.', + noVarySearch: 'params, except=("b"), except=("c")', + noVarySearchHint: 'params, except=("b"), except=("c")', + prefetchQuery: 'b=5&a=3&d=6&c=3', + navigateQuery: 'a=1&b=2&c=3', + shouldUse: true + }, + + { + description: + 'Don\'t use in-flight prefetch as even though all query parameters' + + ' except c can be ignored, c has different value.', + noVarySearch: 'params, except=("c")', + noVarySearchHint: 'params', + prefetchQuery: 'b=5&a=3&d=6&c=3', + navigateQuery: 'a=1&b=2&c=5', + shouldUse: false + }, + + { + description: 'Use in-flight prefetch as even though all query parameters' + + ' except c and d can be ignored, c value matches and d value matches.', + noVarySearch: 'params, except=("c" "d")', + noVarySearchHint: 'params, except=("c" "d")', + prefetchQuery: 'b=5&a=3&d=6&c=5', + navigateQuery: 'd=6&a=1&b=2&c=5', + shouldUse: true + }, + + { + description: + 'Use in-flight prefetch as even though all query parameters except' + + ' c and d can be ignored, c value matches and d value matches.' + + ' Some query parameters to be ignored appear multiple times in the query.', + noVarySearch: 'params, except=("c" "d")', + noVarySearchHint: 'params', + prefetchQuery: 'b=5&a=3&a=4&d=6&c=5', + navigateQuery: 'd=6&a=1&a=2&b=2&b=3&c=5', + shouldUse: true + }, + + { + description: + 'Use in-flight prefetch as all query parameters except c can be ignored.' + + ' Allow extension via parameters.', + noVarySearch: 'params, except=("c";unknown)', + noVarySearchHint: 'params, except=("c";unknown)', + prefetchQuery: 'b=5&a=3&d=6&c=3', + navigateQuery: 'a=1&b=2&c=3', + shouldUse: true + }, + + { + description: 'Use in-flight prefetch as query parameter c can be ignored.' + + ' Allow extension via parameters.', + noVarySearch: 'params=("c";unknown)', + noVarySearchHint: 'params=("c";unknown)', + prefetchQuery: 'a=2&b=2&c=5', + navigateQuery: 'a=2&c=3&b=2', + shouldUse: true + }, + + { + description: + 'Use in-flight prefetch as the URLs have the values in different order for a.' + + ' Allow extension via parameters.', + noVarySearch: 'key-order;unknown', + noVarySearchHint: 'key-order;unknown', + prefetchQuery: 'b=5&a=3&a=4&d=6&c=5&b=3', + navigateQuery: 'd=6&a=3&b=5&b=3&c=5&a=4', + shouldUse: true + }, + + { + description: + 'Use in-flight prefetch as the URLs do not vary on any query parameters.' + + ' Allow extension via parameters.', + noVarySearch: 'params;unknown', + noVarySearchHint: 'params;unknown', + prefetchQuery: '', + navigateQuery: 'b=4&c=5', + shouldUse: true + }, + + { + description: + 'Use in-flight prefetch as all query parameters except c can be ignored.' + + ' Allow extension via parameters.', + noVarySearch: 'params;unknown, except=("c");unknown', + noVarySearchHint: 'params;unknown, except=("c");unknown', + prefetchQuery: 'b=5&a=3&d=6&c=3', + navigateQuery: 'a=1&b=2&c=3', + shouldUse: true + }, + + { + description: + 'Don\'t use the in-flight prefetched URL. Empty No-Vary-Search means default URL variance.' + + ' The prefetched and the navigated URLs have to be the same.', + noVarySearch: '', + noVarySearchHint: 'params', + prefetchQuery: 'b=5&a=3&d=6&c=3', + navigateQuery: 'a=1&b=2&c=3', + shouldUse: false + }, + + { + description: + 'Use the in-flight prefetch. Empty No-Vary-Search means default URL variance.' + + ' The prefetched and the navigated URLs have to be the same.', + noVarySearch: '', + noVarySearchHint: '', + prefetchQuery: 'b=5&a=3&d=6&c=3', + navigateQuery: 'b=5&a=3&d=6&c=3', + shouldUse: true + }, + + { + description: + 'Use the in-flight prefetch. Invalid No-Vary-Search means default URL variance.' + + ' The prefetched and the navigated URLs have to be the same.', + noVarySearch: '', + noVarySearchHint: 'params=(a)', + prefetchQuery: 'b=5&a=3&d=6&c=3', + navigateQuery: 'b=5&a=3&d=6&c=3', + shouldUse: true + }, + + { + description: + 'Don\'t use the in-flight prefetch. Invalid No-Vary-Search means default URL variance.' + + ' The prefetched and the navigated URLs are not the same.', + noVarySearch: '', + noVarySearchHint: 'params=(a)', + prefetchQuery: 'b=5&a=3&d=6&c=3', + navigateQuery: 'b=5&a=4&d=6&c=3', + shouldUse: false + }, + + { + description: + 'No-Vary-Search hint must be a string so the speculation rule will be ignored.' + + ' There is no prefetch happening.', + noVarySearch: '', + noVarySearchHint: 0, + prefetchQuery: 'b=5&a=3&d=6&c=3', + navigateQuery: 'b=5&a=3&d=6&c=3', + shouldUse: false + }, + + { + description: + 'Use the in-flight prefetch. Empty No-Vary-Search means default URL variance.' + + ' The prefetched and the navigated URLs have to be the same.', + noVarySearch: '', + noVarySearchHint: '', + prefetchQuery: '', + navigateQuery: '', + shouldUse: true + }, + + { + description: + 'Use the in-flight prefetch. Non-ASCII key - 2 UTF-8 code units.' + + ' Don\'t vary the response on the non-ASCII key.', + noVarySearch: 'params=("%C2%A2")', + noVarySearchHint: 'params=("%C2%A2")', + prefetchQuery: '¢=3', + navigateQuery: '¢=4', + shouldUse: true + }, + + { + description: + 'Use the in-flight prefetch. Non-ASCII key - 2 UTF-8 code units.' + + ' Don\'t vary the response on the non-ASCII key.', + noVarySearch: 'params=("%C2%A2")', + noVarySearchHint: 'params=("%C2%A2")', + prefetchQuery: 'a=2&¢=3', + navigateQuery: '¢=4&a=2', + shouldUse: true + }, + + { + description: + 'Don\'t use the in-flight prefetch. Non-ASCII key - 2 UTF-8 code units.' + + ' Vary the response on the non-ASCII key.', + noVarySearch: 'params, except=("%C2%A2")', + noVarySearchHint: 'params', + prefetchQuery: '¢=3', + navigateQuery: '¢=4', + shouldUse: false + }, + + { + description: + 'Use the in-flight prefetch. Non-ASCII key - 2 UTF-8 code units.' + + ' Vary the response on the non-ASCII key.', + noVarySearch: 'params, except=("%C2%A2")', + noVarySearchHint: 'params, except=("%C2%A2")', + prefetchQuery: '¢=3&a=4', + navigateQuery: 'a=5&¢=3', + shouldUse: true + }, +]; diff --git a/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/prefetch-single-with-hint.https.html b/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/prefetch-single-with-hint.https.html index 1cbd7e8e717..f2d8b3090e1 100644 --- a/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/prefetch-single-with-hint.https.html +++ b/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/prefetch-single-with-hint.https.html @@ -9,6 +9,7 @@ No-Vary-Search headers also match during navigation</title> <script src="../../resources/utils.js"></script> <script src="../resources/utils.sub.js"></script> <script src="/common/subset-tests.js"></script> +<script src="hint-test-inputs.js"></script> <meta name="variant" content="?1-1"> <meta name="variant" content="?2-2"> @@ -102,7 +103,7 @@ No-Vary-Search headers also match during navigation</title> await remoteAgent.navigate(navigateToUrl); } - function prefetch_no_vary_search_test(description, noVarySearch, noVarySearchHint, prefetchQuery, navigateQuery, shouldUsePrefetch){ + function prefetch_no_vary_search_test(description, noVarySearch, noVarySearchHint, prefetchQuery, navigateQuery, shouldUse){ promise_test(async t => { const agent = await spawnWindow(t, {}); await prefetchAndNavigate(agent, @@ -111,7 +112,7 @@ No-Vary-Search headers also match during navigation</title> prefetchQuery, navigateQuery); - if(shouldUsePrefetch){ + if (shouldUse) { assert_prefetched(await agent.getRequestHeaders(), "Navigation didn't use the prefetched response!"); } @@ -122,236 +123,10 @@ No-Vary-Search headers also match during navigation</title> }, description); } - // Test inputs: - // - description: a description of the test. - // - noVarySearch: No-Vary-Search header value for the response. - // - noVarySearchHint: No-Vary-Search hint to include in prefetch - // speculation rules - // - prefetchQuery: added to query part of prefetch-executor when prefetching - // - navigateQuery: added to query part of prefetch-executor when navigating - // - shouldUsePrefetch: if the test case expects the prefetched entry to be - // used or not. - [{description:"Use in-flight prefetch as query parameter b has the same value.", - noVarySearch: 'params=("a")', - noVarySearchHint: 'params=("a")', - prefetchQuery: "a=2&b=3", - navigateQuery: "b=3", - shouldUsePrefetch: true}, - - {description:"Don't use in-flight prefetch as there is no No-Vary-Search hint.", - noVarySearch: 'params=("a")', - noVarySearchHint: '', - prefetchQuery: "a=2&b=3", - navigateQuery: "b=3", - shouldUsePrefetch: false}, - - {description:"Don't use in-flight prefetch as the prefetched URL has the extra \"a\" query parameter.", - noVarySearch: 'params=("b")', - noVarySearchHint: 'params=("b")', - prefetchQuery: "a=2&b=3", - navigateQuery: "b=2", - shouldUsePrefetch: false}, - - {description:"Use in-flight prefetch as the URLs do not vary by a and b.", - noVarySearch: 'params=("a" "b")', - noVarySearchHint: 'params=("a" "b")', - prefetchQuery: "a=2&b=3", - navigateQuery: "b=2", - shouldUsePrefetch: true}, - - {description:"Do not use in-flight prefetch as the navigation URL has" + - " a different value for the \"b\" query parameter.", - noVarySearch: 'params=("a" "b")', - noVarySearchHint: 'params=("a")', - prefetchQuery: "a=2&b=3", - navigateQuery: "b=2", - shouldUsePrefetch: false}, - - {description:"Use in-flight prefetch as the URLs have the same values for all keys, only differing by order.", - noVarySearch: "key-order", - noVarySearchHint: "key-order", - prefetchQuery: "b=5&a=3&a=4&d=6&c=5&b=3", - navigateQuery: "d=6&a=3&b=5&b=3&c=5&a=4", - shouldUsePrefetch: true}, - - {description:"Use in-flight prefetch as the URLs have the same values for all keys, only differing by order and using ?1 for specifying a true value.", - noVarySearch: "key-order=?1", - noVarySearchHint: "key-order=?1", - prefetchQuery: "b=5&a=3&a=4&d=6&c=5&b=3", - navigateQuery: "d=6&a=3&b=5&b=3&c=5&a=4", - shouldUsePrefetch: true}, - - {description:"Don't use in-flight prefetch as key-order is set to false and the URLs are not identical.", - noVarySearch: "key-order=?0", - noVarySearchHint: "key-order=?1", - prefetchQuery: "b=5&a=3&a=4&d=6&c=5&b=3", - navigateQuery: "d=6&a=3&b=5&b=3&c=5&a=4", - shouldUsePrefetch: false}, - - {description:"Use in-flight prefetch as all query parameters except c can be ignored.", - noVarySearch: 'params, except=("c")', - noVarySearchHint: 'params, except=("c")', - prefetchQuery: "b=5&a=3&d=6&c=3", - navigateQuery: "a=1&b=2&c=3", - shouldUsePrefetch: true}, - - {description:"Use in-flight prefetch as all query parameters except c can be ignored." + - " Only the last except matters.", - noVarySearch: 'params, except=("b"), except=("c")', - noVarySearchHint: 'params, except=("b"), except=("c")', - prefetchQuery: "b=5&a=3&d=6&c=3", - navigateQuery: "a=1&b=2&c=3", - shouldUsePrefetch: true}, - - {description:"Don't use in-flight prefetch as even though all query parameters" + - " except c can be ignored, c has different value.", - noVarySearch: 'params, except=("c")', - noVarySearchHint: "params", - prefetchQuery: "b=5&a=3&d=6&c=3", - navigateQuery: "a=1&b=2&c=5", - shouldUsePrefetch: false}, - - {description:"Use in-flight prefetch as even though all query parameters" + - " except c and d can be ignored, c value matches and d value matches.", - noVarySearch: 'params, except=("c" "d")', - noVarySearchHint: 'params, except=("c" "d")', - prefetchQuery: "b=5&a=3&d=6&c=5", - navigateQuery: "d=6&a=1&b=2&c=5", - shouldUsePrefetch: true}, - - {description:"Use in-flight prefetch as even though all query parameters except" + - " c and d can be ignored, c value matches and d value matches." + - " Some query parameters to be ignored appear multiple times in the query.", - noVarySearch: 'params, except=("c" "d")', - noVarySearchHint: 'params', - prefetchQuery: "b=5&a=3&a=4&d=6&c=5", - navigateQuery: "d=6&a=1&a=2&b=2&b=3&c=5", - shouldUsePrefetch: true}, - - {description:"Use in-flight prefetch as all query parameters except c can be ignored." + - " Allow extension via parameters.", - noVarySearch: 'params, except=("c";unknown)', - noVarySearchHint: 'params, except=("c";unknown)', - prefetchQuery: "b=5&a=3&d=6&c=3", - navigateQuery: "a=1&b=2&c=3", - shouldUsePrefetch: true}, - - {description:"Use in-flight prefetch as query parameter c can be ignored." + - " Allow extension via parameters.", - noVarySearch: 'params=("c";unknown)', - noVarySearchHint: 'params=("c";unknown)', - prefetchQuery: "a=2&b=2&c=5", - navigateQuery: "a=2&c=3&b=2", - shouldUsePrefetch: true}, - - {description:"Use in-flight prefetch as the URLs have the values in different order for a." + - " Allow extension via parameters.", - noVarySearch: "key-order;unknown", - noVarySearchHint: "key-order;unknown", - prefetchQuery: "b=5&a=3&a=4&d=6&c=5&b=3", - navigateQuery: "d=6&a=3&b=5&b=3&c=5&a=4", - shouldUsePrefetch: true}, - - {description:"Use in-flight prefetch as the URLs do not vary on any query parameters." + - " Allow extension via parameters.", - noVarySearch: "params;unknown", - noVarySearchHint: "params;unknown", - prefetchQuery: "", - navigateQuery: "b=4&c=5", - shouldUsePrefetch: true}, - - {description:"Use in-flight prefetch as all query parameters except c can be ignored." + - " Allow extension via parameters.", - noVarySearch: 'params;unknown, except=("c");unknown', - noVarySearchHint: 'params;unknown, except=("c");unknown', - prefetchQuery: "b=5&a=3&d=6&c=3", - navigateQuery: "a=1&b=2&c=3", - shouldUsePrefetch: true}, - - {description:"Don't use the in-flight prefetched URL. Empty No-Vary-Search means default URL variance." + - " The prefetched and the navigated URLs have to be the same.", - noVarySearch: "", - noVarySearchHint: "params", - prefetchQuery: "b=5&a=3&d=6&c=3", - navigateQuery: "a=1&b=2&c=3", - shouldUsePrefetch: false}, - - {description:"Use the in-flight prefetch. Empty No-Vary-Search means default URL variance." + - " The prefetched and the navigated URLs have to be the same.", - noVarySearch: "", - noVarySearchHint: "", - prefetchQuery: "b=5&a=3&d=6&c=3", - navigateQuery: "b=5&a=3&d=6&c=3", - shouldUsePrefetch: true}, - - {description:"Use the in-flight prefetch. Invalid No-Vary-Search means default URL variance." + - " The prefetched and the navigated URLs have to be the same.", - noVarySearch: "", - noVarySearchHint: "params=(a)", - prefetchQuery: "b=5&a=3&d=6&c=3", - navigateQuery: "b=5&a=3&d=6&c=3", - shouldUsePrefetch: true}, - - {description:"Don't use the in-flight prefetch. Invalid No-Vary-Search means default URL variance." + - " The prefetched and the navigated URLs are not the same.", - noVarySearch: "", - noVarySearchHint: "params=(a)", - prefetchQuery: "b=5&a=3&d=6&c=3", - navigateQuery: "b=5&a=4&d=6&c=3", - shouldUsePrefetch: false}, - - {description:"No-Vary-Search hint must be a string so the speculation rule will be ignored." + - " There is no prefetch happening.", - noVarySearch: "", - noVarySearchHint: 0, - prefetchQuery: "b=5&a=3&d=6&c=3", - navigateQuery: "b=5&a=3&d=6&c=3", - shouldUsePrefetch: false}, - - {description:"Use the in-flight prefetch. Empty No-Vary-Search means default URL variance." + - " The prefetched and the navigated URLs have to be the same.", - noVarySearch: "", - noVarySearchHint: "", - prefetchQuery: "", - navigateQuery: "", - shouldUsePrefetch: true}, - - {description:"Use the in-flight prefetch. Non-ASCII key - 2 UTF-8 code units." + - " Don't vary the response on the non-ASCII key.", - noVarySearch: 'params=("%C2%A2")', - noVarySearchHint: 'params=("%C2%A2")', - prefetchQuery: "¢=3", - navigateQuery: "¢=4", - shouldUsePrefetch: true}, - - {description:"Use the in-flight prefetch. Non-ASCII key - 2 UTF-8 code units." + - " Don't vary the response on the non-ASCII key.", - noVarySearch: 'params=("%C2%A2")', - noVarySearchHint: 'params=("%C2%A2")', - prefetchQuery: "a=2&¢=3", - navigateQuery: "¢=4&a=2", - shouldUsePrefetch: true}, - - {description:"Don't use the in-flight prefetch. Non-ASCII key - 2 UTF-8 code units." + - " Vary the response on the non-ASCII key.", - noVarySearch: 'params, except=("%C2%A2")', - noVarySearchHint: 'params', - prefetchQuery: "¢=3", - navigateQuery: "¢=4", - shouldUsePrefetch: false}, - - {description:"Use the in-flight prefetch. Non-ASCII key - 2 UTF-8 code units." + - " Vary the response on the non-ASCII key.", - noVarySearch: 'params, except=("%C2%A2")', - noVarySearchHint: 'params, except=("%C2%A2")', - prefetchQuery: "¢=3&a=4", - navigateQuery: "a=5&¢=3", - shouldUsePrefetch: true}, - - ].forEach(({description, noVarySearch, noVarySearchHint, prefetchQuery, navigateQuery, shouldUsePrefetch}) => { + hint_test_inputs.forEach(({description, noVarySearch, noVarySearchHint, prefetchQuery, navigateQuery, shouldUse}) => { subsetTest(prefetch_no_vary_search_test, description, noVarySearch, noVarySearchHint, prefetchQuery, navigateQuery, - shouldUsePrefetch); + shouldUse); }); </script> diff --git a/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/prefetch-single.https.html b/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/prefetch-single.https.html index 9cf136db26a..bea186759a0 100644 --- a/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/prefetch-single.https.html +++ b/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/prefetch-single.https.html @@ -8,6 +8,7 @@ <script src="../../resources/utils.js"></script> <script src="../resources/utils.sub.js"></script> <script src="/common/subset-tests.js"></script> +<script src="test-utils.js"></script> <script src="test-inputs.js"></script> <meta name="variant" content="?1-1"> diff --git a/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/test-inputs.js b/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/test-inputs.js index 7fd2e52b912..283ebaf596d 100644 --- a/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/test-inputs.js +++ b/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/test-inputs.js @@ -1,14 +1,3 @@ -function addNoVarySearchHeaderUsingPipe(searchParams, headerValue){ - // Use server pipes https://web-platform-tests.org/writing-tests/server-pipes.html - // to populate No-Vary-Search response header. - // The "," and ")" characters need to be escaped by using backslash - // (see https://web-platform-tests.org/writing-tests/server-pipes.html). - // E.g. params=("a") becomes params=("a"\), params=("a"),key-order becomes - // params=("a"\)\,key-order etc. - searchParams.append( - "pipe", `header(No-Vary-Search,${headerValue.replaceAll(/[,)]/g, '\\$&')})`); -} - // Test inputs: // - description: a description of the test. // - noVarySearch: No-Vary-Search header value for the response. diff --git a/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/test-utils.js b/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/test-utils.js new file mode 100644 index 00000000000..be9290fe50b --- /dev/null +++ b/tests/wpt/tests/speculation-rules/prefetch/no-vary-search/test-utils.js @@ -0,0 +1,12 @@ +function addNoVarySearchHeaderUsingPipe(searchParams, headerValue) { + // Use server pipes + // https://web-platform-tests.org/writing-tests/server-pipes.html to populate + // No-Vary-Search response header. The "," and ")" characters need to be + // escaped by using backslash (see + // https://web-platform-tests.org/writing-tests/server-pipes.html). E.g. + // params=("a") becomes params=("a"\), params=("a"),key-order becomes + // params=("a"\)\,key-order etc. + searchParams.append( + 'pipe', + `header(No-Vary-Search,${headerValue.replaceAll(/[,)]/g, '\\$&')})`); +} diff --git a/tests/wpt/tests/speculation-rules/prefetch/resources/cookies.py b/tests/wpt/tests/speculation-rules/prefetch/resources/cookies.py index 3ba9cd9270b..304f999570b 100644 --- a/tests/wpt/tests/speculation-rules/prefetch/resources/cookies.py +++ b/tests/wpt/tests/speculation-rules/prefetch/resources/cookies.py @@ -1,11 +1,10 @@ +import json def main(request, response): - def get_cookie(key): - key = key.encode("utf-8") - if key in request.cookies: - return f'"{request.cookies[key].value.decode("utf-8")}"' - else: - return "undefined" + cookies = json.dumps({ + key.decode("utf-8"): request.cookies[key].value.decode("utf-8") + for key in request.cookies + }) purpose = request.headers.get("Purpose", b"").decode("utf-8") sec_purpose = request.headers.get("Sec-Purpose", b"").decode("utf-8") @@ -19,6 +18,9 @@ def main(request, response): headers = [(b"Content-Type", b"text/html"), (b"Cache-Control", b"no-store")] + if b"cookieindices" in request.GET: + headers.extend([(b"Vary", b"Cookie"), (b"Cookie-Indices", b"\"vary1\", \"vary2\"")]) + content = f''' <!DOCTYPE html> <script src="/common/dispatcher/dispatcher.js"></script> @@ -29,10 +31,7 @@ def main(request, response): sec_purpose: "{sec_purpose}" }}; - window.requestCookies = {{ - count: {get_cookie("count")}, - type: {get_cookie("type")} - }}; + window.requestCookies = {cookies}; const uuid = new URLSearchParams(location.search).get('uuid'); window.executor = new Executor(uuid); diff --git a/tests/wpt/tests/speculation-rules/prefetch/resources/random_redirect.py b/tests/wpt/tests/speculation-rules/prefetch/resources/random_redirect.py new file mode 100644 index 00000000000..595096e0cac --- /dev/null +++ b/tests/wpt/tests/speculation-rules/prefetch/resources/random_redirect.py @@ -0,0 +1,12 @@ +import secrets +from urllib.parse import urlparse + +def main(request, response): + response.status = 302 + location = request.GET.first(b"location") + + # Add a query param. This is hacky but sufficient. + location += (b'&' if urlparse(location).query else b'?') + b'random=' + \ + secrets.token_urlsafe(32).encode('utf-8') + + response.headers.set(b"Location", location) diff --git a/tests/wpt/tests/speculation-rules/prefetch/resources/utils.sub.js b/tests/wpt/tests/speculation-rules/prefetch/resources/utils.sub.js index 73624c0c25b..0ab3f1ac341 100644 --- a/tests/wpt/tests/speculation-rules/prefetch/resources/utils.sub.js +++ b/tests/wpt/tests/speculation-rules/prefetch/resources/utils.sub.js @@ -54,22 +54,25 @@ class PrefetchAgent extends RemoteContext { // `url` is the URL to navigate. // // `expectedDestinationUrl` is the expected URL after navigation. - // When omitted, `url` is used. + // When omitted, `url` is used. When explicitly null, the destination URL is + // not validated. async navigate(url, {expectedDestinationUrl} = {}) { await this.execute_script((url) => { window.executor.suspend(() => { location.href = url; }); }, [url]); - if (!expectedDestinationUrl) { + if (expectedDestinationUrl === undefined) { expectedDestinationUrl = url; } - expectedDestinationUrl.username = ''; - expectedDestinationUrl.password = ''; - assert_equals( - await this.execute_script(() => location.href), - expectedDestinationUrl.toString(), - "expected navigation to reach destination URL"); + if (expectedDestinationUrl) { + expectedDestinationUrl.username = ''; + expectedDestinationUrl.password = ''; + assert_equals( + await this.execute_script(() => location.href), + expectedDestinationUrl.toString(), + "expected navigation to reach destination URL"); + } await this.execute_script(() => {}); } diff --git a/tests/wpt/tests/speculation-rules/prerender/no-vary-search-hint.https.html b/tests/wpt/tests/speculation-rules/prerender/no-vary-search-hint.https.html new file mode 100644 index 00000000000..3ac2757e665 --- /dev/null +++ b/tests/wpt/tests/speculation-rules/prerender/no-vary-search-hint.https.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta name="timeout" content="long"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/get-host-info.sub.js"></script> +<script src="/common/utils.js"></script> +<script src="/common/dispatcher/dispatcher.js"></script> +<script src="../resources/utils.js"></script> +<script src="resources/utils.js"></script> +<script src="/common/subset-tests.js"></script> +<script src="../prefetch/no-vary-search/test-utils.js"></script> +<script src="../prefetch/no-vary-search/hint-test-inputs.js"></script> + +<meta name="variant" content="?1-1"> +<meta name="variant" content="?2-2"> +<meta name="variant" content="?3-3"> +<meta name="variant" content="?4-4"> +<meta name="variant" content="?5-5"> +<meta name="variant" content="?6-6"> +<meta name="variant" content="?7-7"> +<meta name="variant" content="?8-8"> +<meta name="variant" content="?9-9"> +<meta name="variant" content="?10-10"> +<meta name="variant" content="?11-11"> +<meta name="variant" content="?12-12"> +<meta name="variant" content="?13-13"> +<meta name="variant" content="?14-14"> +<meta name="variant" content="?15-15"> +<meta name="variant" content="?16-16"> +<meta name="variant" content="?17-17"> +<meta name="variant" content="?18-18"> +<meta name="variant" content="?19-19"> +<meta name="variant" content="?20-20"> +<meta name="variant" content="?21-21"> +<meta name="variant" content="?22-22"> +<meta name="variant" content="?23-23"> +<meta name="variant" content="?24-24"> +<meta name="variant" content="?25-25"> +<meta name="variant" content="?26-26"> +<meta name="variant" content="?27-27"> +<meta name="variant" content="?28-last"> + +<body></body> +<script> +setup(() => assertSpeculationRulesIsSupported()); + +function prerender_no_vary_search_test(description, noVarySearch, noVarySearchHint, prefetchQuery, navigateQuery, shouldUse) { + promise_test(async t => { + const prefetchQueryParams = new URLSearchParams(prefetchQuery); + const navigateQueryParams = new URLSearchParams(navigateQuery); + + addNoVarySearchHeaderUsingPipe(prefetchQueryParams, noVarySearch); + addNoVarySearchHeaderUsingPipe(navigateQueryParams, noVarySearch); + + const params = { + 'prerendering': prefetchQueryParams, + 'activating': navigateQueryParams + }; + + const rule_extras = { + 'expects_no_vary_search': noVarySearchHint + }; + + // TODO(crbug.com/343754418): Block serving a response to prerendering + // request until `tryToActivate` processes the No-Vary-Search hint and + // starts waiting for the response. See prefetch-single-with-hint.https.html + // and prefetch_nvs_hint.py. Without that, the No-Vary-Search header may + // arrive before the hint is processed. The case is not what this test want + // to confirm. + const {tryToActivate, getNetworkRequestCount} = + await create_prerendered_page(t, params, undefined, rule_extras); + + if (shouldUse) { + // The request should be sent only one time for prerendering. + assert_equals(await tryToActivate(), 'activated'); + assert_equals(await getNetworkRequestCount(), '1'); + } else { + // The request should be sent twice for prerendering and real navigation + // that doesn't activate the prerendered page. + assert_equals(await tryToActivate(), 'discarded'); + assert_equals(await getNetworkRequestCount(), '2'); + } + }, description); +} + +hint_test_inputs.forEach(({description, noVarySearch, noVarySearchHint, prefetchQuery, navigateQuery, shouldUse}) => { + subsetTest(prerender_no_vary_search_test, description, noVarySearch, prefetchQuery, navigateQuery, shouldUse); +}); +</script> diff --git a/tests/wpt/tests/speculation-rules/prerender/no-vary-search.https.html b/tests/wpt/tests/speculation-rules/prerender/no-vary-search.https.html index 61d0d52b5fa..dc47ff7ca21 100644 --- a/tests/wpt/tests/speculation-rules/prerender/no-vary-search.https.html +++ b/tests/wpt/tests/speculation-rules/prerender/no-vary-search.https.html @@ -8,6 +8,7 @@ <script src="../resources/utils.js"></script> <script src="resources/utils.js"></script> <script src="/common/subset-tests.js"></script> +<script src="../prefetch/no-vary-search/test-utils.js"></script> <script src="../prefetch/no-vary-search/test-inputs.js"></script> <meta name="variant" content="?1-1"> diff --git a/tests/wpt/tests/streams/piping/abort.any.js b/tests/wpt/tests/streams/piping/abort.any.js index c9929df91cf..e813b017769 100644 --- a/tests/wpt/tests/streams/piping/abort.any.js +++ b/tests/wpt/tests/streams/piping/abort.any.js @@ -183,6 +183,46 @@ for (const reason of [null, undefined, error1]) { }, `(reason: '${reason}') all pending writes should complete on abort`); } +for (const reason of [null, undefined, error1]) { + promise_test(async t => { + let rejectPull; + const pullPromise = new Promise((_, reject) => { + rejectPull = reject; + }); + let rejectCancel; + const cancelPromise = new Promise((_, reject) => { + rejectCancel = reject; + }); + const rs = recordingReadableStream({ + async pull() { + await Promise.race([ + pullPromise, + cancelPromise, + ]); + }, + cancel(reason) { + rejectCancel(reason); + }, + }); + const ws = new WritableStream(); + const abortController = new AbortController(); + const signal = abortController.signal; + const pipeToPromise = rs.pipeTo(ws, { signal }); + pipeToPromise.catch(() => {}); // Prevent unhandled rejection. + await delay(0); + abortController.abort(reason); + rejectPull('should not catch pull rejection'); + await delay(0); + assert_equals(rs.eventsWithoutPulls.length, 2, 'cancel should have been called'); + assert_equals(rs.eventsWithoutPulls[0], 'cancel', 'first event should be cancel'); + if (reason !== undefined) { + await promise_rejects_exactly(t, reason, pipeToPromise, 'pipeTo rejects with abort reason'); + } else { + await promise_rejects_dom(t, 'AbortError', pipeToPromise, 'pipeTo rejects with AbortError'); + } + }, `(reason: '${reason}') underlyingSource.cancel() should called when abort, even with pending pull`); +} + promise_test(t => { const rs = new ReadableStream({ pull(controller) { diff --git a/tests/wpt/tests/streams/readable-streams/cancel.any.js b/tests/wpt/tests/streams/readable-streams/cancel.any.js index 9915c1fb633..d44222f1497 100644 --- a/tests/wpt/tests/streams/readable-streams/cancel.any.js +++ b/tests/wpt/tests/streams/readable-streams/cancel.any.js @@ -234,3 +234,28 @@ promise_test(() => { return Promise.all([rs.cancel(), rs.getReader().closed]); }, 'ReadableStream cancellation: cancelling before start finishes should prevent pull() from being called'); + +promise_test(async () => { + + const events = []; + + const pendingPromise = new Promise(() => {}); + + const rs = new ReadableStream({ + pull() { + events.push('pull'); + return pendingPromise; + }, + cancel() { + events.push('cancel'); + } + }); + + const reader = rs.getReader(); + reader.read().catch(() => {}); // No await. + await delay(0); + await Promise.all([reader.cancel(), reader.closed]); + + assert_array_equals(events, ['pull', 'cancel'], 'cancel should have been called'); + +}, 'ReadableStream cancellation: underlyingSource.cancel() should called, even with pending pull'); diff --git a/tests/wpt/tests/svg/painting/marker-007.svg b/tests/wpt/tests/svg/painting/marker-007.svg index c7812203787..e7df9945c48 100644 --- a/tests/wpt/tests/svg/painting/marker-007.svg +++ b/tests/wpt/tests/svg/painting/marker-007.svg @@ -8,6 +8,7 @@ <html:link rel="help" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/painting.html#Markers"/> <html:link rel="match" href="marker-007-ref.svg"/> <html:meta name="assert" content="Test marker element with 'display' set to 'none' is rendered when referenced."/> + <html:meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-10"/> <defs> <marker id="testMarker" markerWidth="100" markerHeight="100" display="none"> <path d="M 0 0 L 200 200 L 0 150 z" fill="green" /> diff --git a/tests/wpt/tests/svg/painting/reftests/non-scaling-stroke-002.html b/tests/wpt/tests/svg/painting/reftests/non-scaling-stroke-002.html new file mode 100644 index 00000000000..bdb31c28609 --- /dev/null +++ b/tests/wpt/tests/svg/painting/reftests/non-scaling-stroke-002.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>non-scaling-stroke with scaling</title> +<link rel="help" href="https://svgwg.org/svg2-draft/painting.html#PaintingVectorEffects" /> +<link rel="match" href="green-100x100.svg" /> +<script src="/common/reftest-wait.js"></script> +<body> + <style> + body { + border: none; + margin: 0; + width: 200px; + height: 200px; + transform: scale(2); + } + svg { + width: 100px; + height: 100px; + } + rect { + fill: red; + stroke: green; + stroke-width: 50px; + transform: scale(0); + animation: reset 0.01s ease-in-out 1 both; + vector-effect: non-scaling-stroke; + } + @keyframes reset { to { transform: none; }} + </style> + <svg> + <rect width="75" height="75"/> + <script> + document.querySelector('rect').onanimationend = takeScreenshot; + </script> + </svg> +</body> +</html> diff --git a/tests/wpt/tests/tools/serve/serve.py b/tests/wpt/tests/tools/serve/serve.py index 42d80918024..ee488841371 100644 --- a/tests/wpt/tests/tools/serve/serve.py +++ b/tests/wpt/tests/tools/serve/serve.py @@ -599,6 +599,7 @@ class RoutesBuilder: ("*", "/.well-known/attribution-reporting/debug/report-event-attribution", handlers.PythonScriptHandler), ("*", "/.well-known/attribution-reporting/report-aggregate-attribution", handlers.PythonScriptHandler), ("*", "/.well-known/attribution-reporting/debug/report-aggregate-attribution", handlers.PythonScriptHandler), + ("*", "/.well-known/attribution-reporting/debug/report-aggregate-debug", handlers.PythonScriptHandler), ("*", "/.well-known/attribution-reporting/debug/verbose", handlers.PythonScriptHandler), ("GET", "/.well-known/interest-group/permissions/", handlers.PythonScriptHandler), ("*", "/.well-known/private-aggregation/*", handlers.PythonScriptHandler), diff --git a/tests/wpt/tests/tools/webdriver/webdriver/bidi/error.py b/tests/wpt/tests/tools/webdriver/webdriver/bidi/error.py index bb3bd4d7fca..c77b2e41b3b 100644 --- a/tests/wpt/tests/tools/webdriver/webdriver/bidi/error.py +++ b/tests/wpt/tests/tools/webdriver/webdriver/bidi/error.py @@ -12,14 +12,14 @@ class BidiException(Exception): error_code: ClassVar[str] def __init__(self, message: str, stacktrace: Optional[str] = None): - super() + super().__init__() self.message = message self.stacktrace = stacktrace def __repr__(self): """Return the object representation in string format.""" - return f"{self.__class__.__name__}({self.error}, {self.message}, {self.stacktrace})" + return f"{self.__class__.__name__}({self.error_code}, {self.message}, {self.stacktrace})" def __str__(self): """Return the string representation of the object.""" diff --git a/tests/wpt/tests/tools/webdriver/webdriver/error.py b/tests/wpt/tests/tools/webdriver/webdriver/error.py index 25e4b39ae69..b19693e2d25 100644 --- a/tests/wpt/tests/tools/webdriver/webdriver/error.py +++ b/tests/wpt/tests/tools/webdriver/webdriver/error.py @@ -16,7 +16,7 @@ class WebDriverException(Exception): status_code: ClassVar[str] def __init__(self, http_status=None, status_code=None, message=None, stacktrace=None): - super() + super().__init__() if http_status is not None: self.http_status = http_status diff --git a/tests/wpt/tests/tools/wptrunner/wptrunner/executors/executorwebdriver.py b/tests/wpt/tests/tools/wptrunner/wptrunner/executors/executorwebdriver.py index 69013e5e796..3e221b89798 100644 --- a/tests/wpt/tests/tools/wptrunner/wptrunner/executors/executorwebdriver.py +++ b/tests/wpt/tests/tools/wptrunner/wptrunner/executors/executorwebdriver.py @@ -517,7 +517,7 @@ class WebDriverProtocol(Protocol): # 5 seconds of extra_timeout we have as maximum to end the test before # the external timeout from testrunner triggers. self.webdriver.send_session_command("GET", "window", timeout=2) - except (socket.timeout, error.UnknownErrorException, error.InvalidSessionIdException): + except (OSError, error.WebDriverException): return False return True @@ -630,11 +630,7 @@ class WebDriverTestharnessExecutor(TestharnessExecutor): # # https://github.com/w3c/webdriver/issues/1308 if not isinstance(result, list) or len(result) != 3: - try: - is_alive = self.is_alive() - except error.WebDriverException: - is_alive = False - + is_alive = self.is_alive() if not is_alive: raise Exception("Browser crashed during script execution.") diff --git a/tests/wpt/tests/tools/wptrunner/wptrunner/executors/protocol.py b/tests/wpt/tests/tools/wptrunner/wptrunner/executors/protocol.py index 3d588738b6e..5ebdeed3599 100644 --- a/tests/wpt/tests/tools/wptrunner/wptrunner/executors/protocol.py +++ b/tests/wpt/tests/tools/wptrunner/wptrunner/executors/protocol.py @@ -776,9 +776,12 @@ class WdspecProtocol(ConnectionlessProtocol): proof enough to us that the server is alive and kicking. """ conn = HTTPConnection(self.browser.host, self.browser.port) - conn.request("HEAD", "/invalid") - res = conn.getresponse() - return res.status == 404 + try: + conn.request("HEAD", "/invalid") + res = conn.getresponse() + return res.status == 404 + except OSError: + return False class VirtualSensorProtocolPart(ProtocolPart): diff --git a/tests/wpt/tests/url/a-element.html b/tests/wpt/tests/url/a-element.html index 3429e07ec3f..3428fa00574 100644 --- a/tests/wpt/tests/url/a-element.html +++ b/tests/wpt/tests/url/a-element.html @@ -11,3 +11,13 @@ <div id=log></div> <script src=resources/a-element.js></script> <!-- Other dependencies: resources/urltestdata.json --> + + +<a id="multline-entity" download="multline-entity.txt" href="data:text/plain;charset=utf-8,first%20line second%20line"> Link with embedded \n is parsed correctly </a> + +<script type="text/javascript"> +test(function() { + const link = document.getElementById("multline-entity"); + assert_equals(link.href, "data:text/plain;charset=utf-8,first%20linesecond%20line"); +}, "Test that embedded 0x0A is stripped"); +</script> diff --git a/tests/wpt/tests/web-animations/responsive/toggle-animated-iframe-visibility.html b/tests/wpt/tests/web-animations/responsive/toggle-animated-iframe-visibility.html index b5c32f26d8d..df1287d40be 100644 --- a/tests/wpt/tests/web-animations/responsive/toggle-animated-iframe-visibility.html +++ b/tests/wpt/tests/web-animations/responsive/toggle-animated-iframe-visibility.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class="reftest-wait"> <meta name="assert" content="This should resume the animation after unhiding the iframe."> -<meta name="fuzzy" content="1;0-50"> +<meta name="fuzzy" content="0-25;0-50"> <title>CSS Test (Animations): Unhiding iframe visibility should restart animation. </title> <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=616270"> <link rel="match" href="toggle-animated-iframe-visibility-ref.html"> diff --git a/tests/wpt/tests/webcodecs/temporal-svc-encoding.https.any.js b/tests/wpt/tests/webcodecs/temporal-svc-encoding.https.any.js index 7cf7225e5db..4d5da00cfe9 100644 --- a/tests/wpt/tests/webcodecs/temporal-svc-encoding.https.any.js +++ b/tests/wpt/tests/webcodecs/temporal-svc-encoding.https.any.js @@ -1,3 +1,4 @@ +// META: timeout=long // META: global=window,dedicatedworker // META: script=/webcodecs/video-encoder-utils.js // META: variant=?av1 diff --git a/tests/wpt/tests/webdriver/tests/bidi/browsing_context/locate_nodes/locator.py b/tests/wpt/tests/webdriver/tests/bidi/browsing_context/locate_nodes/locator.py index 66c512d792a..f2782509d93 100644 --- a/tests/wpt/tests/webdriver/tests/bidi/browsing_context/locate_nodes/locator.py +++ b/tests/wpt/tests/webdriver/tests/bidi/browsing_context/locate_nodes/locator.py @@ -85,55 +85,54 @@ async def test_find_by_locator(bidi_session, inline, top_context, type, value): "matchType": "full", "maxDepth": 0, "value": "foobarbarbaz" - }, ["body"]), + }, ["html"]), ({ "type": "innerText", "ignoreCase": False, "matchType": "full", "maxDepth": 0, "value": "foobarBARbaz" - }, ["body"]), + }, ["html"]), ({ "type": "innerText", "ignoreCase": True, "matchType": "partial", "maxDepth": 0, "value": "bar" - }, ["body"]), + }, ["html"]), ({ "type": "innerText", "ignoreCase": False, "matchType": "partial", "maxDepth": 0, "value": "BAR" - }, ["body"]), + }, ["html"]), ({ - "type": "innerText", "ignoreCase": True, "matchType": "full", - "maxDepth": 1, + "maxDepth": 2, "value": "foobarbarbaz" }, ["div"]), ({ "type": "innerText", "ignoreCase": False, "matchType": "full", - "maxDepth": 1, + "maxDepth": 2, "value": "foobarBARbaz" }, ["div"]), ({ "type": "innerText", "ignoreCase": True, "matchType": "partial", - "maxDepth": 1, + "maxDepth": 2, "value": "bar" }, ["div"]), ({ "type": "innerText", "ignoreCase": False, "matchType": "partial", - "maxDepth": 1, + "maxDepth": 2, "value": "BAR" }, ["div"]), ], ids=[ @@ -145,10 +144,10 @@ async def test_find_by_locator(bidi_session, inline, top_context, type, value): "ignore_case_false_full_match_max_depth_zero", "ignore_case_true_partial_match_max_depth_zero", "ignore_case_false_partial_match_max_depth_zero", - "ignore_case_true_full_match_max_depth_one", - "ignore_case_false_full_match_max_depth_one", - "ignore_case_true_partial_match_max_depth_one", - "ignore_case_false_partial_match_max_depth_one", + "ignore_case_true_full_match_max_depth_two", + "ignore_case_false_full_match_max_depth_two", + "ignore_case_true_partial_match_max_depth_two", + "ignore_case_false_partial_match_max_depth_two", ]) @pytest.mark.asyncio async def test_find_by_inner_text(bidi_session, inline, top_context, locator, expected_nodes_values): diff --git a/tests/wpt/tests/webdriver/tests/bidi/network/__init__.py b/tests/wpt/tests/webdriver/tests/bidi/network/__init__.py index 2e6376287b9..c1b4c1dd54b 100644 --- a/tests/wpt/tests/webdriver/tests/bidi/network/__init__.py +++ b/tests/wpt/tests/webdriver/tests/bidi/network/__init__.py @@ -329,6 +329,7 @@ PAGE_REDIRECT_HTTP_EQUIV = ( "/webdriver/tests/bidi/network/support/redirect_http_equiv.html" ) PAGE_REDIRECTED_HTML = "/webdriver/tests/bidi/network/support/redirected.html" +PAGE_SERVICEWORKER_HTML = "/webdriver/tests/bidi/network/support/serviceworker.html" AUTH_REQUIRED_EVENT = "network.authRequired" BEFORE_REQUEST_SENT_EVENT = "network.beforeRequestSent" diff --git a/tests/wpt/tests/webdriver/tests/bidi/network/before_request_sent/before_request_sent.py b/tests/wpt/tests/webdriver/tests/bidi/network/before_request_sent/before_request_sent.py index 95a790e37cd..22588b7013a 100644 --- a/tests/wpt/tests/webdriver/tests/bidi/network/before_request_sent/before_request_sent.py +++ b/tests/wpt/tests/webdriver/tests/bidi/network/before_request_sent/before_request_sent.py @@ -12,6 +12,7 @@ from .. import ( PAGE_EMPTY_TEXT, PAGE_REDIRECT_HTTP_EQUIV, PAGE_REDIRECTED_HTML, + PAGE_SERVICEWORKER_HTML, BEFORE_REQUEST_SENT_EVENT, ) @@ -396,6 +397,48 @@ async def test_redirect_navigation( @pytest.mark.asyncio +async def test_serviceworker_request( + bidi_session, + new_tab, + url, + wait_for_event, + wait_for_future_safe, + fetch, + setup_network_test, +): + serviceworker_url = url(PAGE_SERVICEWORKER_HTML) + await bidi_session.browsing_context.navigate( + context=new_tab["context"], + url=serviceworker_url, + wait="complete", + ) + + await bidi_session.script.evaluate( + expression="registerServiceWorker()", + target=ContextTarget(new_tab["context"]), + await_promise=True, + ) + + network_events = await setup_network_test(events=[BEFORE_REQUEST_SENT_EVENT]) + events = network_events[BEFORE_REQUEST_SENT_EVENT] + + on_before_request_sent = wait_for_event(BEFORE_REQUEST_SENT_EVENT) + + # Make a request to serviceworker_url via fetch on the page, but any url + # would work here as this should be intercepted by the serviceworker. + await fetch(serviceworker_url, context=new_tab, method="GET") + await wait_for_future_safe(on_before_request_sent) + + assert len(events) == 1 + + assert_before_request_sent_event( + events[0], + expected_request={"method": "GET", "url": serviceworker_url}, + redirect_count=0, + ) + + +@pytest.mark.asyncio async def test_url_with_fragment( url, wait_for_event, wait_for_future_safe, fetch, setup_network_test ): diff --git a/tests/wpt/tests/webdriver/tests/bidi/network/combined/network_events.py b/tests/wpt/tests/webdriver/tests/bidi/network/combined/network_events.py index 7b6d99727ae..e58b5aa7fd9 100644 --- a/tests/wpt/tests/webdriver/tests/bidi/network/combined/network_events.py +++ b/tests/wpt/tests/webdriver/tests/bidi/network/combined/network_events.py @@ -2,6 +2,8 @@ import asyncio import pytest +from tests.support.sync import AsyncPoll + from .. import ( assert_before_request_sent_event, assert_response_event, @@ -267,3 +269,56 @@ async def test_subscribe_to_one_context( assert len(network_events[BEFORE_REQUEST_SENT_EVENT]) == 1 assert len(network_events[RESPONSE_STARTED_EVENT]) == 1 assert len(network_events[RESPONSE_COMPLETED_EVENT]) == 1 + + +@pytest.mark.asyncio +async def test_event_order_with_redirect( + bidi_session, top_context, subscribe_events, url, fetch +): + events = [ + BEFORE_REQUEST_SENT_EVENT, + RESPONSE_STARTED_EVENT, + RESPONSE_COMPLETED_EVENT, + ] + await subscribe_events(events=events, contexts=[top_context["context"]]) + + network_events = [] + listeners = [] + response_completed_events = [] + for event in events: + + async def on_event(method, data, event=event): + network_events.append({"event": event, "url": data["request"]["url"]}) + + if event == RESPONSE_COMPLETED_EVENT: + response_completed_events.append(data) + + listeners.append(bidi_session.add_event_listener(event, on_event)) + + text_url = url(PAGE_EMPTY_TEXT) + redirect_url = url( + f"/webdriver/tests/support/http_handlers/redirect.py?location={text_url}" + ) + + await fetch(redirect_url, method="GET") + + # Wait until we receive two events, one for the initial request and one for + # the redirection. + wait = AsyncPoll(bidi_session, timeout=2) + await wait.until(lambda _: len(response_completed_events) >= 2) + + events_in_expected_order = [ + {"event": "network.beforeRequestSent", "url": redirect_url}, + {"event": "network.responseStarted", "url": redirect_url}, + {"event": "network.responseCompleted", "url": redirect_url}, + {"event": "network.beforeRequestSent", "url": text_url}, + {"event": "network.responseStarted", "url": text_url}, + {"event": "network.responseCompleted", "url": text_url}, + ] + + for index in range(len(events_in_expected_order)): + assert events_in_expected_order[index] == network_events[index] + + # cleanup + for remove_listener in listeners: + remove_listener() diff --git a/tests/wpt/tests/webdriver/tests/bidi/network/response_completed/response_completed.py b/tests/wpt/tests/webdriver/tests/bidi/network/response_completed/response_completed.py index f17a522766e..30b35ef7e0d 100644 --- a/tests/wpt/tests/webdriver/tests/bidi/network/response_completed/response_completed.py +++ b/tests/wpt/tests/webdriver/tests/bidi/network/response_completed/response_completed.py @@ -3,6 +3,8 @@ from urllib.parse import quote import pytest +from webdriver.bidi.modules.script import ContextTarget + from tests.support.sync import AsyncPoll from .. import ( @@ -13,6 +15,7 @@ from .. import ( PAGE_EMPTY_SCRIPT, PAGE_EMPTY_SVG, PAGE_EMPTY_TEXT, + PAGE_SERVICEWORKER_HTML, RESPONSE_COMPLETED_EVENT, ) @@ -371,6 +374,52 @@ async def test_redirect_document( @pytest.mark.asyncio +async def test_serviceworker_request( + bidi_session, + new_tab, + url, + wait_for_event, + wait_for_future_safe, + fetch, + setup_network_test, +): + serviceworker_url = url(PAGE_SERVICEWORKER_HTML) + await bidi_session.browsing_context.navigate( + context=new_tab["context"], + url=serviceworker_url, + wait="complete", + ) + + await bidi_session.script.evaluate( + expression="registerServiceWorker()", + target=ContextTarget(new_tab["context"]), + await_promise=True, + ) + + network_events = await setup_network_test(events=[RESPONSE_COMPLETED_EVENT]) + events = network_events[RESPONSE_COMPLETED_EVENT] + + on_response_completed = wait_for_event(RESPONSE_COMPLETED_EVENT) + + # Make a request to serviceworker_url via fetch on the page, but any url + # would work here as this should be intercepted by the serviceworker. + await fetch(serviceworker_url, context=new_tab, method="GET") + await wait_for_future_safe(on_response_completed) + + assert len(events) == 1 + + assert_response_event( + events[0], + expected_request={"method": "GET", "url": serviceworker_url}, + expected_response={ + "url": serviceworker_url, + "statusText": "OK from serviceworker", + }, + redirect_count=0, + ) + + +@pytest.mark.asyncio async def test_url_with_fragment( url, wait_for_event, wait_for_future_safe, fetch, setup_network_test ): diff --git a/tests/wpt/tests/webdriver/tests/bidi/network/response_started/response_started.py b/tests/wpt/tests/webdriver/tests/bidi/network/response_started/response_started.py index 9aa77739abc..030d9168a1d 100644 --- a/tests/wpt/tests/webdriver/tests/bidi/network/response_started/response_started.py +++ b/tests/wpt/tests/webdriver/tests/bidi/network/response_started/response_started.py @@ -2,6 +2,8 @@ import asyncio import pytest +from webdriver.bidi.modules.script import ContextTarget + from tests.support.sync import AsyncPoll from .. import ( @@ -12,6 +14,7 @@ from .. import ( PAGE_EMPTY_SCRIPT, PAGE_EMPTY_SVG, PAGE_EMPTY_TEXT, + PAGE_SERVICEWORKER_HTML, RESPONSE_STARTED_EVENT, ) @@ -340,6 +343,52 @@ async def test_redirect(bidi_session, url, fetch, setup_network_test): @pytest.mark.asyncio +async def test_serviceworker_request( + bidi_session, + new_tab, + url, + wait_for_event, + wait_for_future_safe, + fetch, + setup_network_test, +): + serviceworker_url = url(PAGE_SERVICEWORKER_HTML) + await bidi_session.browsing_context.navigate( + context=new_tab["context"], + url=serviceworker_url, + wait="complete", + ) + + await bidi_session.script.evaluate( + expression="registerServiceWorker()", + target=ContextTarget(new_tab["context"]), + await_promise=True, + ) + + network_events = await setup_network_test(events=[RESPONSE_STARTED_EVENT]) + events = network_events[RESPONSE_STARTED_EVENT] + + on_response_started = wait_for_event(RESPONSE_STARTED_EVENT) + + # Make a request to serviceworker_url via fetch on the page, but any url + # would work here as this should be intercepted by the serviceworker. + await fetch(serviceworker_url, context=new_tab, method="GET") + await wait_for_future_safe(on_response_started) + + assert len(events) == 1 + + assert_response_event( + events[0], + expected_request={"method": "GET", "url": serviceworker_url}, + expected_response={ + "url": serviceworker_url, + "statusText": "OK from serviceworker", + }, + redirect_count=0, + ) + + +@pytest.mark.asyncio async def test_url_with_fragment( url, wait_for_event, wait_for_future_safe, fetch, setup_network_test ): diff --git a/tests/wpt/tests/webdriver/tests/bidi/network/support/serviceworker.html b/tests/wpt/tests/webdriver/tests/bidi/network/support/serviceworker.html new file mode 100644 index 00000000000..c7ca7448d05 --- /dev/null +++ b/tests/wpt/tests/webdriver/tests/bidi/network/support/serviceworker.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <body> + <p>Service worker test page</p> + + <script type="text/javascript"> + "use strict"; + + let swRegistration; + + async function registerServiceWorker() { + const sw = navigator.serviceWorker; + swRegistration = await sw.register("serviceworker.js"); + await sw.ready; + + // Wait until the page is controlled. + if (!sw.controller) { + await new Promise(resolve => { + sw.addEventListener("controllerchange", function() { + resolve(); + }, {once: true}); + }) + } + } + + addEventListener("beforeunload", (event) => { + swRegistration?.unregister(); + }); + </script> + </body> +</html> diff --git a/tests/wpt/tests/webdriver/tests/bidi/network/support/serviceworker.js b/tests/wpt/tests/webdriver/tests/bidi/network/support/serviceworker.js new file mode 100644 index 00000000000..d58241a97ed --- /dev/null +++ b/tests/wpt/tests/webdriver/tests/bidi/network/support/serviceworker.js @@ -0,0 +1,13 @@ +"use strict"; + +self.addEventListener("activate", event => { + // start controlling the already loaded page + event.waitUntil(self.clients.claim()); +}); + +self.addEventListener("fetch", event => { + const response = new Response("Service worker response", { + statusText: "OK from serviceworker", + }); + event.respondWith(response); +}); diff --git a/tests/wpt/tests/webdriver/tests/bidi/session/new/connect.py b/tests/wpt/tests/webdriver/tests/bidi/session/new/bidi_upgrade.py index 523899c3364..1060bef2be9 100644 --- a/tests/wpt/tests/webdriver/tests/bidi/session/new/connect.py +++ b/tests/wpt/tests/webdriver/tests/bidi/session/new/bidi_upgrade.py @@ -3,10 +3,11 @@ import websockets import webdriver +pytestmark = pytest.mark.asyncio -# classic session to enable bidi capability manually -# Intended to be the first test in this file -@pytest.mark.asyncio + +# WebDriver HTTP session with BiDi upgrade path. Intended to be the first +# test in this file. @pytest.mark.capabilities({"webSocketUrl": True}) async def test_websocket_url_connect(session): websocket_url = session.capabilities["webSocketUrl"] @@ -14,24 +15,19 @@ async def test_websocket_url_connect(session): await websocket.send("Hello world!") -# test bidi_session send -@pytest.mark.asyncio -async def test_bidi_session_send(bidi_session): +# Test bidi_session fixture to send a command. +async def test_bidi_session(bidi_session): await bidi_session.session.status() -# bidi session following a bidi session with a different capabilities -# to test session recreation -@pytest.mark.asyncio +# Test bidi_session fixture for session recreation. @pytest.mark.capabilities({"acceptInsecureCerts": True}) async def test_bidi_session_with_different_capability(bidi_session): await bidi_session.session.status() -# classic session following a bidi session to test session -# recreation -# Intended to be the last test in this file to make sure -# classic session is not impacted by bidi tests -@pytest.mark.asyncio -def test_classic_after_bidi_session(session): +# Test session fixture following an upgraded BiDi session to test session +# recreation without BiDi upgrade. Intended to be the last test in this file +# to make sure HTTP-only session is not impacted by BiDi tests. +async def test_classic_after_bidi_session(session): assert not isinstance(session, webdriver.bidi.BidiSession) diff --git a/tests/wpt/tests/webdriver/tests/classic/get_title/get.py b/tests/wpt/tests/webdriver/tests/classic/get_title/get.py index e696ec34033..1ee76219e10 100644 --- a/tests/wpt/tests/webdriver/tests/classic/get_title/get.py +++ b/tests/wpt/tests/webdriver/tests/classic/get_title/get.py @@ -54,3 +54,17 @@ def test_strip_and_collapse(session, inline): result = get_title(session) assert_success(result, "a b c d e") + + +def test_title_included_entity_references(session, inline): + session.url = inline("<title>® © ¢ £ ¥</title>") + + result = get_title(session) + assert_success(result, u'® © ¢ £ ¥') + + +def test_title_included_multibyte_char(session, inline): + session.url = inline(u"<title>日本語</title>") + + result = get_title(session) + assert_success(result, u"日本語") diff --git a/tests/wpt/tests/webdriver/tests/classic/new_session/websocket_url.py b/tests/wpt/tests/webdriver/tests/classic/new_session/websocket_url.py index 452decc90aa..9ae4bd2e1a0 100644 --- a/tests/wpt/tests/webdriver/tests/classic/new_session/websocket_url.py +++ b/tests/wpt/tests/webdriver/tests/classic/new_session/websocket_url.py @@ -1,7 +1,19 @@ +import pytest + from tests.support.asserts import assert_success -def test_websocket_url(new_session, add_browser_capabilities): + +@pytest.mark.parametrize("value", [None, False]) +def test_no_bidi_upgrade(new_session, add_browser_capabilities, value): + response, _ = new_session({"capabilities": { + "alwaysMatch": add_browser_capabilities({"webSocketUrl": value})}}) + value = assert_success(response) + assert value["capabilities"].get("webSocketUrl") == None + + +def test_bidi_upgrade(new_session, add_browser_capabilities): response, _ = new_session({"capabilities": { "alwaysMatch": add_browser_capabilities({"webSocketUrl": True})}}) value = assert_success(response) assert value["capabilities"]["webSocketUrl"].startswith("ws://") + assert value["sessionId"] in value["capabilities"]["webSocketUrl"] diff --git a/tests/wpt/tests/webdriver/tests/classic/permissions/set.py b/tests/wpt/tests/webdriver/tests/classic/permissions/set.py index 740b93d40e0..0bee5d39146 100644 --- a/tests/wpt/tests/webdriver/tests/classic/permissions/set.py +++ b/tests/wpt/tests/webdriver/tests/classic/permissions/set.py @@ -73,23 +73,6 @@ def test_invalid_parameters(session, url, parameters): assert_error(response, "invalid argument") -# > 6. If settings is a non-secure context and rootDesc.name isn't allowed in -# > non-secure contexts, return a WebDriver error with WebDriver error code -# > invalid argument. -@pytest.mark.parametrize("state", ["granted", "denied", "prompt"]) -def test_non_secure_context(session, url, state): - session.url = url("/common/blank.html", protocol="http") - response = session.transport.send( - "POST", "/session/{session_id}/permissions".format(**vars(session)), { - "descriptor": { - "name": "push" - }, - "state": state - }) - - assert_error(response, "invalid argument") - - @pytest.mark.parametrize("state", ["granted", "denied", "prompt"]) def test_set_to_state(session, url, state): session.url = url("/common/blank.html", protocol="https") diff --git a/tests/wpt/tests/webdriver/tests/support/fixtures.py b/tests/wpt/tests/webdriver/tests/support/fixtures.py index 5ab020ad008..55256425f39 100644 --- a/tests/wpt/tests/webdriver/tests/support/fixtures.py +++ b/tests/wpt/tests/webdriver/tests/support/fixtures.py @@ -174,12 +174,8 @@ async def session(capabilities, configuration): # Enforce a fixed default window size and position if _current_session.capabilities.get("setWindowRect"): - # Only resize and reposition if needed to workaround a bug for Chrome: - # https://bugs.chromium.org/p/chromedriver/issues/detail?id=4642#c4 - if _current_session.window.size != defaults.WINDOW_SIZE: - _current_session.window.size = defaults.WINDOW_SIZE - if _current_session.window.position != defaults.WINDOW_POSITION: - _current_session.window.position = defaults.WINDOW_POSITION + _current_session.window.size = defaults.WINDOW_SIZE + _current_session.window.position = defaults.WINDOW_POSITION # Set default timeouts multiplier = configuration["timeout_multiplier"] @@ -226,12 +222,8 @@ async def bidi_session(capabilities, configuration): # Enforce a fixed default window size and position if _current_session.capabilities.get("setWindowRect"): - # Only resize and reposition if needed to workaround a bug for Chrome: - # https://bugs.chromium.org/p/chromedriver/issues/detail?id=4642#c4 - if _current_session.window.size != defaults.WINDOW_SIZE: - _current_session.window.size = defaults.WINDOW_SIZE - if _current_session.window.position != defaults.WINDOW_POSITION: - _current_session.window.position = defaults.WINDOW_POSITION + _current_session.window.size = defaults.WINDOW_SIZE + _current_session.window.position = defaults.WINDOW_POSITION yield _current_session.bidi_session diff --git a/tests/wpt/tests/webdriver/tests/support/fixtures_bidi.py b/tests/wpt/tests/webdriver/tests/support/fixtures_bidi.py index c76b369f21c..a9cefd004b1 100644 --- a/tests/wpt/tests/webdriver/tests/support/fixtures_bidi.py +++ b/tests/wpt/tests/webdriver/tests/support/fixtures_bidi.py @@ -2,8 +2,6 @@ import asyncio import base64 import copy import json -import time -from datetime import datetime, timedelta from typing import Any, Coroutine, Mapping import pytest @@ -87,13 +85,9 @@ async def set_cookie(bidi_session): yield set_cookie - yesterday = datetime.now() - timedelta(1) - yesterday_timestamp = time.mktime(yesterday.timetuple()) - for cookie, partition in reversed(cookies): try: - cookie["expiry"] = yesterday_timestamp - await bidi_session.storage.set_cookie(cookie=cookie, partition=partition) + await bidi_session.storage.delete_cookies(filter=cookie, partition=partition) except (InvalidArgumentException, UnableToSetCookieException, UnderspecifiedStoragePartitionException): pass diff --git a/tests/wpt/tests/webdriver/tests/support/helpers.py b/tests/wpt/tests/webdriver/tests/support/helpers.py index 678733e951f..2b810be8a99 100644 --- a/tests/wpt/tests/webdriver/tests/support/helpers.py +++ b/tests/wpt/tests/webdriver/tests/support/helpers.py @@ -55,19 +55,10 @@ def cleanup_session(session): """Reset window to an acceptable size. This also includes bringing it out of maximized, minimized, - or fullscreened state. + or fullscreen state. """ if session.capabilities.get("setWindowRect"): - # Only restore if needed to workaround a bug for Chrome: - # https://bugs.chromium.org/p/chromedriver/issues/detail?id=4642#c4 - if ( - session.capabilities.get("browserName") != "chrome" or - session.window.size != defaults.WINDOW_SIZE - or document_hidden(session) - or is_fullscreen(session) - or is_maximized(session) - ): - session.window.size = defaults.WINDOW_SIZE + session.window.size = defaults.WINDOW_SIZE @ignore_exceptions def _restore_windows(session): diff --git a/tests/wpt/tests/webnn/conformance_tests/arg_min_max.https.any.js b/tests/wpt/tests/webnn/conformance_tests/arg_min_max.https.any.js index 0f9e590fc88..dd6cd6d9181 100644 --- a/tests/wpt/tests/webnn/conformance_tests/arg_min_max.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/arg_min_max.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/batch_normalization.https.any.js b/tests/wpt/tests/webnn/conformance_tests/batch_normalization.https.any.js index d3107820dbc..569881f94f6 100644 --- a/tests/wpt/tests/webnn/conformance_tests/batch_normalization.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/batch_normalization.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/buffer.https.any.js b/tests/wpt/tests/webnn/conformance_tests/buffer.https.any.js index 51804e7224f..9b4c43198b4 100644 --- a/tests/wpt/tests/webnn/conformance_tests/buffer.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/buffer.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/cast.https.any.js b/tests/wpt/tests/webnn/conformance_tests/cast.https.any.js index 086428dd964..29f197a1aa6 100644 --- a/tests/wpt/tests/webnn/conformance_tests/cast.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/cast.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/clamp.https.any.js b/tests/wpt/tests/webnn/conformance_tests/clamp.https.any.js index ab47ac9c5c7..15777271872 100644 --- a/tests/wpt/tests/webnn/conformance_tests/clamp.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/clamp.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/compute-arraybufferview-with-bigger-arraybuffer.https.any.js b/tests/wpt/tests/webnn/conformance_tests/compute-arraybufferview-with-bigger-arraybuffer.https.any.js index 96a20f1fe57..1380b604dac 100644 --- a/tests/wpt/tests/webnn/conformance_tests/compute-arraybufferview-with-bigger-arraybuffer.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/compute-arraybufferview-with-bigger-arraybuffer.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js 'use strict'; diff --git a/tests/wpt/tests/webnn/conformance_tests/concat.https.any.js b/tests/wpt/tests/webnn/conformance_tests/concat.https.any.js index 619f20fe1c6..3898ee7d6d8 100644 --- a/tests/wpt/tests/webnn/conformance_tests/concat.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/concat.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/constant.https.any.js b/tests/wpt/tests/webnn/conformance_tests/constant.https.any.js index 79362947f1d..acc24e7772b 100644 --- a/tests/wpt/tests/webnn/conformance_tests/constant.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/constant.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/conv2d.https.any.js b/tests/wpt/tests/webnn/conformance_tests/conv2d.https.any.js index 34af583162b..f6e5ec0fa1d 100644 --- a/tests/wpt/tests/webnn/conformance_tests/conv2d.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/conv2d.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/conv_transpose2d.https.any.js b/tests/wpt/tests/webnn/conformance_tests/conv_transpose2d.https.any.js index 2943e67851c..9e741a45d09 100644 --- a/tests/wpt/tests/webnn/conformance_tests/conv_transpose2d.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/conv_transpose2d.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/elementwise_binary.https.any.js b/tests/wpt/tests/webnn/conformance_tests/elementwise_binary.https.any.js index a85a06e1d21..0124077773d 100644 --- a/tests/wpt/tests/webnn/conformance_tests/elementwise_binary.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/elementwise_binary.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/elementwise_logical.https.any.js b/tests/wpt/tests/webnn/conformance_tests/elementwise_logical.https.any.js index 3d3a825f9c0..826b21dd8fe 100644 --- a/tests/wpt/tests/webnn/conformance_tests/elementwise_logical.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/elementwise_logical.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/elementwise_unary.https.any.js b/tests/wpt/tests/webnn/conformance_tests/elementwise_unary.https.any.js index f202af01e51..54406005e89 100644 --- a/tests/wpt/tests/webnn/conformance_tests/elementwise_unary.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/elementwise_unary.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/elu.https.any.js b/tests/wpt/tests/webnn/conformance_tests/elu.https.any.js index ac1c19a80bc..b16cf04b624 100644 --- a/tests/wpt/tests/webnn/conformance_tests/elu.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/elu.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/expand.https.any.js b/tests/wpt/tests/webnn/conformance_tests/expand.https.any.js index e7bf106f961..1535bb76a90 100644 --- a/tests/wpt/tests/webnn/conformance_tests/expand.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/expand.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/gather.https.any.js b/tests/wpt/tests/webnn/conformance_tests/gather.https.any.js index 504f2dd792e..68d33bbf748 100644 --- a/tests/wpt/tests/webnn/conformance_tests/gather.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/gather.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/gemm.https.any.js b/tests/wpt/tests/webnn/conformance_tests/gemm.https.any.js index 03a836a44a6..0af471753e0 100644 --- a/tests/wpt/tests/webnn/conformance_tests/gemm.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/gemm.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/hard_sigmoid.https.any.js b/tests/wpt/tests/webnn/conformance_tests/hard_sigmoid.https.any.js index 55391e7f1c9..cfc726a57be 100644 --- a/tests/wpt/tests/webnn/conformance_tests/hard_sigmoid.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/hard_sigmoid.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/hard_swish.https.any.js b/tests/wpt/tests/webnn/conformance_tests/hard_swish.https.any.js index 24b8c413bba..229e1b56108 100644 --- a/tests/wpt/tests/webnn/conformance_tests/hard_swish.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/hard_swish.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/instance_normalization.https.any.js b/tests/wpt/tests/webnn/conformance_tests/instance_normalization.https.any.js index fc339e5bab4..4c5d33bbf70 100644 --- a/tests/wpt/tests/webnn/conformance_tests/instance_normalization.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/instance_normalization.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/layer_normalization.https.any.js b/tests/wpt/tests/webnn/conformance_tests/layer_normalization.https.any.js index ea3cd04240b..f5bfb8c2cc8 100644 --- a/tests/wpt/tests/webnn/conformance_tests/layer_normalization.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/layer_normalization.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/leaky_relu.https.any.js b/tests/wpt/tests/webnn/conformance_tests/leaky_relu.https.any.js index b2a4055bde7..9012f02a5ed 100644 --- a/tests/wpt/tests/webnn/conformance_tests/leaky_relu.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/leaky_relu.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/linear.https.any.js b/tests/wpt/tests/webnn/conformance_tests/linear.https.any.js index 0e22f7a0360..c011229db8f 100644 --- a/tests/wpt/tests/webnn/conformance_tests/linear.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/linear.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/matmul.https.any.js b/tests/wpt/tests/webnn/conformance_tests/matmul.https.any.js index da782305792..50930d1b0f7 100644 --- a/tests/wpt/tests/webnn/conformance_tests/matmul.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/matmul.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/pad.https.any.js b/tests/wpt/tests/webnn/conformance_tests/pad.https.any.js index d733cbb6edb..ec9c106e633 100644 --- a/tests/wpt/tests/webnn/conformance_tests/pad.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/pad.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/parallel-compute.https.any.js b/tests/wpt/tests/webnn/conformance_tests/parallel-compute.https.any.js index 642fec9f731..ea1b5dbdc44 100644 --- a/tests/wpt/tests/webnn/conformance_tests/parallel-compute.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/parallel-compute.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/pooling.https.any.js b/tests/wpt/tests/webnn/conformance_tests/pooling.https.any.js index de2ae35a9c1..83eea50a12f 100644 --- a/tests/wpt/tests/webnn/conformance_tests/pooling.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/pooling.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/prelu.https.any.js b/tests/wpt/tests/webnn/conformance_tests/prelu.https.any.js index 9337211e548..3b4717663fa 100644 --- a/tests/wpt/tests/webnn/conformance_tests/prelu.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/prelu.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/reduction.https.any.js b/tests/wpt/tests/webnn/conformance_tests/reduction.https.any.js index c291906ba1c..f5247ee137c 100644 --- a/tests/wpt/tests/webnn/conformance_tests/reduction.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/reduction.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/relu.https.any.js b/tests/wpt/tests/webnn/conformance_tests/relu.https.any.js index 7cb23eea1bd..458cd61d82c 100644 --- a/tests/wpt/tests/webnn/conformance_tests/relu.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/relu.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/resample2d.https.any.js b/tests/wpt/tests/webnn/conformance_tests/resample2d.https.any.js index b5bdda7197e..4d68f9f51bd 100644 --- a/tests/wpt/tests/webnn/conformance_tests/resample2d.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/resample2d.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/reshape.https.any.js b/tests/wpt/tests/webnn/conformance_tests/reshape.https.any.js index a7d03b2a0c2..de9953e6f82 100644 --- a/tests/wpt/tests/webnn/conformance_tests/reshape.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/reshape.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/sigmoid.https.any.js b/tests/wpt/tests/webnn/conformance_tests/sigmoid.https.any.js index 9730b548b56..154e68e4299 100644 --- a/tests/wpt/tests/webnn/conformance_tests/sigmoid.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/sigmoid.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/slice.https.any.js b/tests/wpt/tests/webnn/conformance_tests/slice.https.any.js index b316ea58c4b..b39eade98f2 100644 --- a/tests/wpt/tests/webnn/conformance_tests/slice.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/slice.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/softmax.https.any.js b/tests/wpt/tests/webnn/conformance_tests/softmax.https.any.js index a68a32c45f0..75893eb34cb 100644 --- a/tests/wpt/tests/webnn/conformance_tests/softmax.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/softmax.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/softplus.https.any.js b/tests/wpt/tests/webnn/conformance_tests/softplus.https.any.js index 7d89b117eb5..a2f90bd23d5 100644 --- a/tests/wpt/tests/webnn/conformance_tests/softplus.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/softplus.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/softsign.https.any.js b/tests/wpt/tests/webnn/conformance_tests/softsign.https.any.js index e175e0de56c..1e9c9f77fee 100644 --- a/tests/wpt/tests/webnn/conformance_tests/softsign.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/softsign.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/split.https.any.js b/tests/wpt/tests/webnn/conformance_tests/split.https.any.js index 78d707687f0..84fee2f6651 100644 --- a/tests/wpt/tests/webnn/conformance_tests/split.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/split.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/tanh.https.any.js b/tests/wpt/tests/webnn/conformance_tests/tanh.https.any.js index e3ab5e9192d..d7d1b597518 100644 --- a/tests/wpt/tests/webnn/conformance_tests/tanh.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/tanh.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/transpose.https.any.js b/tests/wpt/tests/webnn/conformance_tests/transpose.https.any.js index 83bd7a45c18..82abef96ea2 100644 --- a/tests/wpt/tests/webnn/conformance_tests/transpose.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/transpose.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/triangular.https.any.js b/tests/wpt/tests/webnn/conformance_tests/triangular.https.any.js index 499f60ed366..9919110e9b1 100644 --- a/tests/wpt/tests/webnn/conformance_tests/triangular.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/triangular.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/conformance_tests/where.https.any.js b/tests/wpt/tests/webnn/conformance_tests/where.https.any.js index 4ab453ab245..fa920ac2519 100644 --- a/tests/wpt/tests/webnn/conformance_tests/where.https.any.js +++ b/tests/wpt/tests/webnn/conformance_tests/where.https.any.js @@ -2,6 +2,7 @@ // META: global=window,dedicatedworker // META: variant=?cpu // META: variant=?gpu +// META: variant=?npu // META: script=../resources/utils.js // META: timeout=long diff --git a/tests/wpt/tests/webnn/resources/test_data/batch_normalization.json b/tests/wpt/tests/webnn/resources/test_data/batch_normalization.json index 192985f5f4d..f1d445e3724 100644 --- a/tests/wpt/tests/webnn/resources/test_data/batch_normalization.json +++ b/tests/wpt/tests/webnn/resources/test_data/batch_normalization.json @@ -982,94 +982,6 @@ } }, { - "name": "batchNormalization float32 4D NCHW tensor options.activation relu", - "inputs": { - "input": { - "shape": [2, 3, 2, 2], - "data": [ - -41.30732967168238, - 64.08864045143429, - -63.376671841233104, - -46.7903680211994, - 83.0222726565018, - -80.08049213079853, - -62.144380499565784, - -0.10012771650340824, - -40.902161220312074, - 56.963061967558474, - 37.37249789808206, - 57.04647733193906, - 82.05679802728304, - -86.11642850667623, - 76.88317547014259, - 97.03362133579051, - -21.35103988063949, - -96.93823797160586, - -9.359310262561493, - 80.2082435478892, - -85.36802529512583, - 62.35185227095363, - -68.4724340974042, - -12.107167478351585 - ], - "type": "float32" - }, - "mean": { - "shape": [3], - "data": [ - 51.62914995931095, - 99.36075401019252, - -96.14736495234415 - ], - "type": "float32", - "constant": true - }, - "variance": { - "shape": [3], - "data": [ - 30.448016067921067, - 86.36218998771075, - 73.88454888724165 - ], - "type": "float32", - "constant": true - } - }, - "options": { - "activation": "relu" - }, - "expected": { - "shape": [2, 3, 2, 2], - "data": [ - 0, - 2.2579827308654785, - 0, - 0, - 0, - 0, - 0, - 0, - 6.4271392822265625, - 17.812623977661133, - 15.533489227294922, - 17.822328567504883, - 5.514280319213867, - 0, - 4.576685905456543, - 8.228469848632812, - 0, - 0, - 0, - 0, - 1.2540507316589355, - 18.43954849243164, - 3.2196571826934814, - 9.777103424072266 - ], - "type": "float32" - } - }, - { "name": "batchNormalization float32 4D NHWC tensor all options", "inputs": { "input": { @@ -1143,36 +1055,35 @@ "type": "float32" }, "axis": 3, - "epsilon": 1e-6, - "activation": "relu" + "epsilon": 1e-6 }, "expected": { "shape": [2, 2, 2, 3], "data": [ - 0, - 200.12615966796875, - 0, - 212.10623168945312, - 1446.3731689453125, - 0, - 0, - 1309.32568359375, - 0, - 0, - 835.2536010742188, - 0, - 425.39935302734375, - 997.6290893554688, - 0, - 0, - 1575.1810302734375, - 0, - 363.98529052734375, - 906.0018310546875, - 0, - 603.1834106445312, - 221.62777709960938, - 0 + -1039.0085734071204, + 200.12613597546277, + -120.36987167541395, + 212.10626540432202, + 1446.3732126569944, + -183.78396479879416, + -1300.9852072279227, + 1309.3257094058545, + -171.08979404258523, + -1104.0956031373803, + 835.2536189871761, + -183.83801576309426, + 425.3993215144054, + 997.6290832897452, + -91.55716013805052, + -1570.920072497096, + 1575.1810627320297, + -187.2757593197739, + 363.98524710447384, + 906.0018322105, + -102.5050592863526, + 603.1834043179756, + 221.6277675074517, + -139.02827100419768 ], "type": "float32" } diff --git a/tests/wpt/tests/webnn/resources/test_data/conv2d.json b/tests/wpt/tests/webnn/resources/test_data/conv2d.json index 13e6b172428..e6e36021333 100644 --- a/tests/wpt/tests/webnn/resources/test_data/conv2d.json +++ b/tests/wpt/tests/webnn/resources/test_data/conv2d.json @@ -1399,170 +1399,6 @@ } }, { - "name": "conv2d float32 4D input and filter tensors options.activation=relu", - "inputs": { - "input": { - "shape": [2, 1, 3, 3], - "data": [ - 0.7529087201709872, - 0.7520291960017611, - 0.594952773514815, - 0.21631854011984264, - 0.07589348976741683, - 0.15106785419828572, - 0.12124850358598671, - 0.5364335407319905, - 0.5937089927693522, - 0.9910031422560608, - 0.36309423611370084, - 0.9289673923363004, - 0.22727376737331384, - 0.5414123970044269, - 0.0844534212564596, - 0.6765284772046276, - 0.619325655574763, - 0.39292160755260475 - ], - "type": "float32" - }, - "filter": { - "shape": [3, 1, 2, 2], - "data": [ - 0.14543837927656278, - 0.9671129790291346, - 0.10836050336762582, - 0.320230810822804, - 0.6952692250382182, - 0.5070913293589028, - 0.0813970738017622, - 0.5303338853508432, - 0.30721364807734, - 0.4324123448833208, - 0.9849002194630809, - 0.4281076188358701 - ], - "type": "float32", - "constant": true - } - }, - "options": { - "activation": "relu" // relu operator - }, - "expected": { - "name": "output", - "shape": [2, 3, 2, 2], - "data": [ - 0.8845428228378296, - 0.7413608431816101, - 0.2897796928882599, - 0.4053896367549896, - 0.9626783132553101, - 0.9108520746231079, - 0.4832426905632019, - 0.4878997206687927, - 0.8020333051681519, - 0.6277193427085876, - 0.4483422338962555, - 0.8711439371109009, - 0.6932874917984009, - 1.0369365215301514, - 0.8282973766326904, - 0.35335418581962585, - 1.1787647008895874, - 0.8123774528503418, - 0.816078782081604, - 0.6780439019203186, - 0.9170808792114258, - 1.082636833190918, - 1.2353861331939697, - 0.9810346961021423 - ], - "type": "float32" - } - }, - { - "name": "conv2d float32 4D input and filter tensors options.activation=sigmoid", - "inputs": { - "input": { - "shape": [2, 1, 3, 3], - "data": [ - 0.7529087201709872, - 0.7520291960017611, - 0.594952773514815, - 0.21631854011984264, - 0.07589348976741683, - 0.15106785419828572, - 0.12124850358598671, - 0.5364335407319905, - 0.5937089927693522, - 0.9910031422560608, - 0.36309423611370084, - 0.9289673923363004, - 0.22727376737331384, - 0.5414123970044269, - 0.0844534212564596, - 0.6765284772046276, - 0.619325655574763, - 0.39292160755260475 - ], - "type": "float32" - }, - "filter": { - "shape": [3, 1, 2, 2], - "data": [ - 0.14543837927656278, - 0.9671129790291346, - 0.10836050336762582, - 0.320230810822804, - 0.6952692250382182, - 0.5070913293589028, - 0.0813970738017622, - 0.5303338853508432, - 0.30721364807734, - 0.4324123448833208, - 0.9849002194630809, - 0.4281076188358701 - ], - "type": "float32", - "constant": true - } - }, - "options": { - "activation": "sigmoid" // sigmoid operator - }, - "expected": { - "name": "output", - "shape": [2, 3, 2, 2], - "data": [ - 0.7077627182006836, - 0.6772933602333069, - 0.5719422101974487, - 0.5999819040298462, - 0.7236577272415161, - 0.7131744623184204, - 0.618513286113739, - 0.6196115612983704, - 0.690409243106842, - 0.6519721746444702, - 0.6102449893951416, - 0.704983651638031, - 0.6666978597640991, - 0.7382584810256958, - 0.6959947943687439, - 0.5874307155609131, - 0.7647256255149841, - 0.6926159262657166, - 0.6934033632278442, - 0.6633020043373108, - 0.7144469618797302, - 0.7469926476478577, - 0.7747598886489868, - 0.7273134589195251 - ], - "type": "float32" - } - }, - { "name": "conv2d float32 4D input and filter tensors all options", "inputs": { "input": { @@ -1651,8 +1487,7 @@ 0.8406119024104419 ], "type": "float32" - }, - "activation": "relu" // relu operator + } }, "expected": { "name": "output", diff --git a/tests/wpt/tests/webnn/resources/test_data/conv_transpose2d.json b/tests/wpt/tests/webnn/resources/test_data/conv_transpose2d.json index 241faf52633..d15c4a84615 100644 --- a/tests/wpt/tests/webnn/resources/test_data/conv_transpose2d.json +++ b/tests/wpt/tests/webnn/resources/test_data/conv_transpose2d.json @@ -1959,76 +1959,6 @@ ], "type": "float32" } - }, - { - "name": "convTranspose2d float32 4D input and filter tensors options.activation=relu", - "inputs": { - "input": { - "shape": [1, 1, 3, 3], - "data": [ - 0.11095754619056808, - 0.8681362056660518, - 0.7342095941654914, - 0.43077004493855875, - 0.5981626867187566, - 0.1232164990736122, - 0.16109748910776922, - 0.08840264384189989, - 0.2910097194319563 - ], - "type": "float32" - }, - "filter": { - "shape": [1, 1, 3, 3], - "data": [ - 0.6161394585554596, - 0.262246148184051, - 0.7951397994036709, - 0.87305609470791, - 0.8309101763741125, - 0.8549605393357718, - 0.5552039743814143, - 0.8400921243865438, - 0.8530843869413023 - ], - "type": "float32", - "constant": true - } - }, - "options": { - "activation": "relu" // relu operator - }, - "expected": { - "shape": [1, 1, 5, 5], - "data": [ - 0.06836532801389694, - 0.5639911890029907, - 0.7682676911354065, - 0.8828333020210266, - 0.5837992429733276, - 0.36228659749031067, - 1.3316468000411987, - 2.0325205326080322, - 1.8602205514907837, - 0.7256945967674255, - 0.5369489789009094, - 1.5520836114883423, - 2.5350732803344727, - 2.117793083190918, - 0.963081419467926, - 0.3798123896121979, - 0.9050268530845642, - 1.403659701347351, - 0.9311801791191101, - 0.35391589999198914, - 0.08944196254014969, - 0.1844182312488556, - 0.3732658624649048, - 0.3198899030685425, - 0.24825584888458252 - ], - "type": "float32" - } } ] }
\ No newline at end of file diff --git a/tests/wpt/tests/webnn/resources/test_data/gather.json b/tests/wpt/tests/webnn/resources/test_data/gather.json index acd7ad8775e..a67e708ae20 100644 --- a/tests/wpt/tests/webnn/resources/test_data/gather.json +++ b/tests/wpt/tests/webnn/resources/test_data/gather.json @@ -1313,6 +1313,183 @@ ], "type": "float32" } + }, + { + "name": "gather float32 2D tensor and int32 0D negative indices default options", + "inputs": { + "input": { + "shape": [2, 12], + "data": [ + -66.05901336669922, + -68.9197006225586, + -77.02045440673828, + -26.158037185668945, + 89.0337142944336, + -45.89653396606445, + 43.84803771972656, + 48.81806945800781, + 51.79948425292969, + 41.94132614135742, + -1.1303654909133911, + -50.42131042480469, + 90.2870101928711, + 55.620765686035156, + 44.92119598388672, + 56.828636169433594, + 10.829925537109375, + -19.693084716796875, + -37.696800231933594, + 43.11057662963867, + 0.9129875898361206, + -7.699817180633545, + 25.76774024963379, + 73.60064697265625 + ], + "type": "float32" + }, + "indices": { + "shape": [], + "data": [-2], + "type": "int32" + } + }, + "expected": { + "name": "output", + "shape": [12], + "data": [ + -66.05901336669922, + -68.9197006225586, + -77.02045440673828, + -26.158037185668945, + 89.0337142944336, + -45.89653396606445, + 43.84803771972656, + 48.81806945800781, + 51.79948425292969, + 41.94132614135742, + -1.1303654909133911, + -50.42131042480469 + ], + "type": "float32" + } + }, + { + "name": "gather float32 2D tensor and int32 0D out-of-bound positive indices default options", + "inputs": { + "input": { + "shape": [2, 12], + "data": [ + -66.05901336669922, + -68.9197006225586, + -77.02045440673828, + -26.158037185668945, + 89.0337142944336, + -45.89653396606445, + 43.84803771972656, + 48.81806945800781, + 51.79948425292969, + 41.94132614135742, + -1.1303654909133911, + -50.42131042480469, + 90.2870101928711, + 55.620765686035156, + 44.92119598388672, + 56.828636169433594, + 10.829925537109375, + -19.693084716796875, + -37.696800231933594, + 43.11057662963867, + 0.9129875898361206, + -7.699817180633545, + 25.76774024963379, + 73.60064697265625 + ], + "type": "float32" + }, + "indices": { + "shape": [], + "data": [10], + "type": "int32" + } + }, + "expected": { + "name": "output", + "shape": [12], + "data": [ + 90.2870101928711, + 55.620765686035156, + 44.92119598388672, + 56.828636169433594, + 10.829925537109375, + -19.693084716796875, + -37.696800231933594, + 43.11057662963867, + 0.9129875898361206, + -7.699817180633545, + 25.76774024963379, + 73.60064697265625 + ], + "type": "float32" + } + }, + { + "name": "gather float32 2D tensor and int32 0D out-of-bound negative indices default options", + "inputs": { + "input": { + "shape": [2, 12], + "data": [ + -66.05901336669922, + -68.9197006225586, + -77.02045440673828, + -26.158037185668945, + 89.0337142944336, + -45.89653396606445, + 43.84803771972656, + 48.81806945800781, + 51.79948425292969, + 41.94132614135742, + -1.1303654909133911, + -50.42131042480469, + 90.2870101928711, + 55.620765686035156, + 44.92119598388672, + 56.828636169433594, + 10.829925537109375, + -19.693084716796875, + -37.696800231933594, + 43.11057662963867, + 0.9129875898361206, + -7.699817180633545, + 25.76774024963379, + 73.60064697265625 + ], + "type": "float32" + }, + "indices": { + "shape": [], + "data": [-10], + "type": "int32" + } + }, + "expected": { + "name": "output", + "shape": [12], + "data": [ + -66.05901336669922, + -68.9197006225586, + -77.02045440673828, + -26.158037185668945, + 89.0337142944336, + -45.89653396606445, + 43.84803771972656, + 48.81806945800781, + 51.79948425292969, + 41.94132614135742, + -1.1303654909133911, + -50.42131042480469 + ], + "type": "float32" + } } ] }
\ No newline at end of file diff --git a/tests/wpt/tests/webnn/resources/utils.js b/tests/wpt/tests/webnn/resources/utils.js index eba8b10182d..3cfcf579a50 100644 --- a/tests/wpt/tests/webnn/resources/utils.js +++ b/tests/wpt/tests/webnn/resources/utils.js @@ -19,7 +19,10 @@ const kContextOptionsForVariant = { }, gpu: { deviceType: 'gpu', - } + }, + npu: { + deviceType: 'npu', + }, }; // The maximum index to validate for the output's expected value. @@ -655,9 +658,6 @@ const buildBatchNorm = (operationName, builder, resources) => { if (batchNormOptions.bias) { batchNormOptions.bias = createConstantOperand(builder, batchNormOptions.bias); } - if (batchNormOptions.activation) { - batchNormOptions.activation = builder[batchNormOptions.activation](); - } // invoke builder.batchNormalization() namedOutputOperand[resources.expected.name] = builder[operationName](inputOperand, meanOperand, varianceOperand, batchNormOptions); @@ -706,9 +706,6 @@ const buildConvTranspose2d = (operationName, builder, resources) => { if (convTranspose2dOptions.bias) { convTranspose2dOptions.bias = createConstantOperand(builder, convTranspose2dOptions.bias); } - if (convTranspose2dOptions.activation) { - convTranspose2dOptions.activation = builder[convTranspose2dOptions.activation](); - } namedOutputOperand[resources.expected.name] = builder[operationName](inputOperand, filterOperand, convTranspose2dOptions); return namedOutputOperand; }; @@ -721,9 +718,6 @@ const buildConv2d = (operationName, builder, resources) => { if (conv2dOptions.bias) { conv2dOptions.bias = createConstantOperand(builder, conv2dOptions.bias); } - if (conv2dOptions.activation) { - conv2dOptions.activation = builder[conv2dOptions.activation](); - } namedOutputOperand[resources.expected.name] = builder[operationName](inputOperand, filterOperand, conv2dOptions); return namedOutputOperand; }; diff --git a/tests/wpt/tests/webnn/validation_tests/batchNormalization.https.any.js b/tests/wpt/tests/webnn/validation_tests/batchNormalization.https.any.js index a1c79000d20..7a2755927ca 100644 --- a/tests/wpt/tests/webnn/validation_tests/batchNormalization.https.any.js +++ b/tests/wpt/tests/webnn/validation_tests/batchNormalization.https.any.js @@ -76,18 +76,6 @@ multi_builder_test(async (t, builder, otherBuilder) => { () => builder.batchNormalization(input, mean, variance, options)); }, '[batchNormalization] throw if bias option is from another builder'); -multi_builder_test(async (t, builder, otherBuilder) => { - const activationFromOtherBuilder = otherBuilder.clamp(); - const options = {activation: activationFromOtherBuilder}; - - const input = builder.input('input', kExampleInputDescriptor); - const mean = builder.input('mean', kExample1DTensorDescriptor); - const variance = builder.input('variance', kExample1DTensorDescriptor); - assert_throws_js( - TypeError, - () => builder.batchNormalization(input, mean, variance, options)); -}, '[batchNormalization] throw if activation option is from another builder'); - const tests = [ { name: '[batchNormalization] Test with default options.', diff --git a/tests/wpt/tests/webnn/validation_tests/conv2d.https.any.js b/tests/wpt/tests/webnn/validation_tests/conv2d.https.any.js index 7dac654951b..55615faed9d 100644 --- a/tests/wpt/tests/webnn/validation_tests/conv2d.https.any.js +++ b/tests/wpt/tests/webnn/validation_tests/conv2d.https.any.js @@ -47,15 +47,6 @@ multi_builder_test(async (t, builder, otherBuilder) => { assert_throws_js(TypeError, () => builder.conv2d(input, filter, options)); }, '[conv2d] throw if bias option is from another builder'); -multi_builder_test(async (t, builder, otherBuilder) => { - const activationFromOtherBuilder = otherBuilder.clamp(); - const options = {activation: activationFromOtherBuilder}; - - const input = builder.input('input', kExampleInputDescriptor); - const filter = builder.input('filter', kExampleFilterDescriptor); - assert_throws_js(TypeError, () => builder.conv2d(input, filter, options)); -}, '[conv2d] throw if activation option is from another builder'); - const tests = [ { name: '[conv2d] Test with default options.', diff --git a/tests/wpt/tests/webnn/validation_tests/convTranspose2d.https.any.js b/tests/wpt/tests/webnn/validation_tests/convTranspose2d.https.any.js index 02822c52749..c4717a7c538 100644 --- a/tests/wpt/tests/webnn/validation_tests/convTranspose2d.https.any.js +++ b/tests/wpt/tests/webnn/validation_tests/convTranspose2d.https.any.js @@ -48,16 +48,6 @@ multi_builder_test(async (t, builder, otherBuilder) => { TypeError, () => builder.convTranspose2d(input, filter, options)); }, '[convTranspose2d] throw if bias option is from another builder'); -multi_builder_test(async (t, builder, otherBuilder) => { - const activationFromOtherBuilder = otherBuilder.clamp(); - const options = {activation: activationFromOtherBuilder}; - - const input = builder.input('input', kExampleInputDescriptor); - const filter = builder.input('filter', kExampleFilterDescriptor); - assert_throws_js( - TypeError, () => builder.convTranspose2d(input, filter, options)); -}, '[convTranspose2d] throw if activation option is from another builder'); - const tests = [ { name: '[convTranspose2d] Test with default options.', diff --git a/tests/wpt/tests/webnn/validation_tests/reduction.https.any.js b/tests/wpt/tests/webnn/validation_tests/reduction.https.any.js index e9643c0f8a5..219a60076af 100644 --- a/tests/wpt/tests/webnn/validation_tests/reduction.https.any.js +++ b/tests/wpt/tests/webnn/validation_tests/reduction.https.any.js @@ -24,7 +24,7 @@ const kFloatRestrictReductionOperators = [ 'reduceMean', ]; -const kFloatInt32Uint32RestrictReductionOperators = [ +const kFloatInt32Uint32Int64Uint64RestrictReductionOperators = [ 'reduceL1', 'reduceProduct', 'reduceSum', @@ -87,7 +87,7 @@ const kFloatRestrictOperatorsTests = [ }, ]; -const kFloatInt32Uint32RestrictOperatorsTests = [ +const kFloatInt32Uint32Int64Uint64RestrictOperatorsTests = [ { name: '[reduce] Test reduce when input\'s datatype is int32.', input: {dataType: 'int32', dimensions: [1, 2, 5, 5]}, @@ -99,9 +99,19 @@ const kFloatInt32Uint32RestrictOperatorsTests = [ output: {dataType: 'uint32', dimensions: []} }, { - name: - '[reduce] Throw if the input data type is not one of the {float32, float16, int32, uint32}.', + name: '[reduce] Test reduce when input\'s datatype is int64.', input: {dataType: 'int64', dimensions: [1, 2, 5, 5]}, + output: {dataType: 'int64', dimensions: []} + }, + { + name: '[reduce] Test reduce when input\'s datatype is uint64.', + input: {dataType: 'uint64', dimensions: [1, 2, 5, 5]}, + output: {dataType: 'uint64', dimensions: []} + }, + { + name: + '[reduce] Throw if the input data type is not one of the {float32, float16, int32, uint32, int64, uint64}.', + input: {dataType: 'int8', dimensions: [1, 2, 5, 5]}, options: { axes: [0, 1], }, @@ -159,9 +169,11 @@ kFloatRestrictReductionOperators.forEach((operatorName) => { runReductionTests(operatorName, kFloatRestrictOperatorsTests); }); -kFloatInt32Uint32RestrictReductionOperators.forEach((operatorName) => { - runReductionTests(operatorName, kFloatInt32Uint32RestrictOperatorsTests); -}); +kFloatInt32Uint32Int64Uint64RestrictReductionOperators.forEach( + (operatorName) => { + runReductionTests( + operatorName, kFloatInt32Uint32Int64Uint64RestrictOperatorsTests); + }); kNoTypeRestrictReductionOperators.forEach((operatorName) => { runReductionTests(operatorName, kNoTypeRestrictOperatorsTests); diff --git a/tests/wpt/tests/webrtc/RTCRtpParameters-codecs.html b/tests/wpt/tests/webrtc/RTCRtpParameters-codecs.html index f5fa65e2ac9..97f519a45e4 100644 --- a/tests/wpt/tests/webrtc/RTCRtpParameters-codecs.html +++ b/tests/wpt/tests/webrtc/RTCRtpParameters-codecs.html @@ -5,6 +5,8 @@ <script src="/resources/testharnessreport.js"></script> <script src="dictionary-helper.js"></script> <script src="RTCRtpParameters-helper.js"></script> +<script src="RTCPeerConnection-helper.js"></script> +<script src="./third_party/sdp/sdp.js"></script> <script> 'use strict'; @@ -71,6 +73,61 @@ return codecs[0]; } + function compareCodecParam(observed, expected) { + assert_equals(observed.payloadType, expected.payloadType); + assert_equals(observed.clockRate, expected.clockRate); + assert_equals(observed.channels, expected.channels); + // Comparisons of mime-type are case-insensitive (see + // https://datatracker.ietf.org/doc/html/rfc2045#section-5.1) + assert_equals(observed.mimeType.toLowerCase(), expected.mimeType.toLowerCase()); + // This is not ideal; Firefox does not store fmtp verbatim, it stores a + // reserialiaztion of the parsed form. We would like to be able to test + // the other fields without tripping over that. So, we only test + // sdpFmtpLine if it is a property of |expected|. + if (expected.hasOwnProperty('sdpFmtpLine')) { + assert_equals(observed.sdpFmtpLine, expected.sdpFmtpLine); + } + } + + function compareCodecParams(observed, expected) { + assert_equals(observed.length, expected.length); + for (let i = 0; i < observed.length; ++i) { + compareCodecParam(observed[i], expected[i]); + } + } + + // Does not support disregarding unsupported codecs in the SDP, so is not + // suitable for all test-cases. + function checkCodecsAgainstSDP(codecs, msection) { + const rtpParameters = SDPUtils.parseRtpParameters(msection); + const {kind} = SDPUtils.parseMLine(msection); + + assert_not_equals(codecs.length, 0); + assert_equals(codecs.length, rtpParameters.codecs.length); + for (let i = 0; i < codecs.length; ++i) { + const observed = codecs[i]; + const fromSdp = rtpParameters.codecs[i]; + const expected = { + payloadType: fromSdp.payloadType, + clockRate: fromSdp.clockRate, + mimeType: `${kind}/${fromSdp.name}`, + }; + if (kind == 'audio') { + expected.channels = fromSdp.channels; + } + const fmtps = SDPUtils.matchPrefixAndTrim(msection, `a=fmtp:${fromSdp.payloadType}`); + if (fmtps.length == 1) { + expected.sdpFmtpLine = fmtps[0]; + } else { + // compareCodecParam will check if observed.sdpFmtpLine is undefined if we + // set this, but will not perform any checks if we do not. + expected.sdpFmtpLine = undefined; + } + compareCodecParam(observed, expected); + } + } + +['audio', 'video'].forEach(kind => { /* 5.2. setParameters 7. If parameters.encodings.length is different from N, or if any parameter @@ -84,7 +141,7 @@ const pc = new RTCPeerConnection(); t.add_cleanup(() => pc.close()); - const { sender } = pc.addTransceiver('audio'); + const { sender } = pc.addTransceiver(kind); await doOfferAnswerExchange(t, pc); const param = sender.getParameters(); @@ -100,12 +157,12 @@ return promise_rejects_dom(t, 'InvalidModificationError', sender.setParameters(param)); - }, 'setParameters() with codec.payloadType modified should reject with InvalidModificationError'); + }, `setParameters() with codec.payloadType modified should reject with InvalidModificationError (${kind})`); promise_test(async t => { const pc = new RTCPeerConnection(); t.add_cleanup(() => pc.close()); - const { sender } = pc.addTransceiver('audio'); + const { sender } = pc.addTransceiver(kind); await doOfferAnswerExchange(t, pc); const param = sender.getParameters(); validateSenderRtpParameters(param); @@ -113,19 +170,19 @@ const codec = getFirstCodec(param); if(codec.mimeType === undefined) { - codec.mimeType = 'audio/piedpiper'; + codec.mimeType = `${kind}/piedpiper`; } else { codec.mimeType = `${codec.mimeType}-modified`; } return promise_rejects_dom(t, 'InvalidModificationError', sender.setParameters(param)); - }, 'setParameters() with codec.mimeType modified should reject with InvalidModificationError'); + }, `setParameters() with codec.mimeType modified should reject with InvalidModificationError (${kind})`); promise_test(async t => { const pc = new RTCPeerConnection(); t.add_cleanup(() => pc.close()); - const { sender } = pc.addTransceiver('audio'); + const { sender } = pc.addTransceiver(kind); await doOfferAnswerExchange(t, pc); const param = sender.getParameters(); validateSenderRtpParameters(param); @@ -140,12 +197,12 @@ return promise_rejects_dom(t, 'InvalidModificationError', sender.setParameters(param)); - }, 'setParameters() with codec.clockRate modified should reject with InvalidModificationError'); + }, `setParameters() with codec.clockRate modified should reject with InvalidModificationError (${kind})`); promise_test(async t => { const pc = new RTCPeerConnection(); t.add_cleanup(() => pc.close()); - const { sender } = pc.addTransceiver('audio'); + const { sender } = pc.addTransceiver(kind); await doOfferAnswerExchange(t, pc); const param = sender.getParameters(); validateSenderRtpParameters(param); @@ -160,12 +217,12 @@ return promise_rejects_dom(t, 'InvalidModificationError', sender.setParameters(param)); - }, 'setParameters() with codec.channels modified should reject with InvalidModificationError'); + }, `setParameters() with codec.channels modified should reject with InvalidModificationError (${kind})`); promise_test(async t => { const pc = new RTCPeerConnection(); t.add_cleanup(() => pc.close()); - const { sender } = pc.addTransceiver('audio'); + const { sender } = pc.addTransceiver(kind); await doOfferAnswerExchange(t, pc); const param = sender.getParameters(); validateSenderRtpParameters(param); @@ -180,12 +237,12 @@ return promise_rejects_dom(t, 'InvalidModificationError', sender.setParameters(param)); - }, 'setParameters() with codec.sdpFmtpLine modified should reject with InvalidModificationError'); + }, `setParameters() with codec.sdpFmtpLine modified should reject with InvalidModificationError (${kind})`); promise_test(async t => { const pc = new RTCPeerConnection(); t.add_cleanup(() => pc.close()); - const { sender } = pc.addTransceiver('audio'); + const { sender } = pc.addTransceiver(kind); await doOfferAnswerExchange(t, pc); const param = sender.getParameters(); validateSenderRtpParameters(param); @@ -194,13 +251,323 @@ codecs.push({ payloadType: 2, - mimeType: 'audio/piedpiper', + mimeType: `${kind}/piedpiper`, clockRate: 1000, channels: 2 }); return promise_rejects_dom(t, 'InvalidModificationError', sender.setParameters(param)); - }, 'setParameters() with new codecs inserted should reject with InvalidModificationError'); + }, `setParameters() with new codecs inserted should reject with InvalidModificationError (${kind})`); + + promise_test(async t => { + const pc = new RTCPeerConnection(); + t.add_cleanup(() => pc.close()); + const { sender } = pc.addTransceiver(kind); + await doOfferAnswerExchange(t, pc); + const param = sender.getParameters(); + validateSenderRtpParameters(param); + + const { codecs } = param; + codecs.pop(); + + return promise_rejects_dom(t, 'InvalidModificationError', + sender.setParameters(param)); + }, `setParameters() with codecs removed should reject with InvalidModificationError (${kind})`); + + promise_test(async t => { + const pc = new RTCPeerConnection(); + t.add_cleanup(() => pc.close()); + const { sender } = pc.addTransceiver(kind); + await doOfferAnswerExchange(t, pc); + const param = sender.getParameters(); + validateSenderRtpParameters(param); + + const { codecs } = param; + codecs.reverse(); + + return promise_rejects_dom(t, 'InvalidModificationError', + sender.setParameters(param)); + }, `setParameters() with codecs reordered should reject with InvalidModificationError (${kind})`); + + promise_test(async t => { + const pc = new RTCPeerConnection(); + t.add_cleanup(() => pc.close()); + const { sender } = pc.addTransceiver(kind); + await doOfferAnswerExchange(t, pc); + const param = sender.getParameters(); + validateSenderRtpParameters(param); + + delete param.codecs; + + return promise_rejects_dom(t, 'InvalidModificationError', + sender.setParameters(param)); + }, `setParameters() with codecs undefined should reject with InvalidModificationError (${kind})`); + + promise_test(async t => { + const pc1 = new RTCPeerConnection(); + t.add_cleanup(() => pc1.close()); + const pc2 = new RTCPeerConnection(); + t.add_cleanup(() => pc2.close()); + + const sender1 = pc1.addTransceiver(kind).sender; + let param = sender1.getParameters(); + assert_array_equals(param.codecs, [], 'No sender codecs in initial stable state'); + + const offer = await pc1.createOffer(); + param = sender1.getParameters(); + assert_array_equals(param.codecs, [], 'No sender codecs in initial stable state (after createOffer)'); + + await pc1.setLocalDescription(offer); + param = sender1.getParameters(); + assert_array_equals(param.codecs, [], 'No sender codecs in initial have-local-offer'); + + await pc2.setRemoteDescription(offer); + const [sender2] = pc2.getSenders(); + param = sender2.getParameters(); + assert_array_equals(param.codecs, [], 'No sender codecs in initial have-remote-offer'); + + const answer = await pc2.createAnswer(); + param = sender2.getParameters(); + assert_array_equals(param.codecs, [], 'No sender codecs in initial have-remote-offer (after createAnswer)'); + }, `RTCRtpSender.getParameters() should not have codecs before SDP negotiation completes (${kind})`); + + promise_test(async t => { + const pc1 = new RTCPeerConnection(); + t.add_cleanup(() => pc1.close()); + const pc2 = new RTCPeerConnection(); + t.add_cleanup(() => pc2.close()); + + const receiver1 = pc1.addTransceiver(kind).receiver; + let param = receiver1.getParameters(); + assert_array_equals(param.codecs, [], 'No receiver codecs in initial stable state'); + + const offer = await pc1.createOffer(); + param = receiver1.getParameters(); + assert_array_equals(param.codecs, [], 'No receiver codecs in initial stable state (after createOffer)'); + + await pc1.setLocalDescription(offer); + param = receiver1.getParameters(); + assert_array_equals(param.codecs, [], 'No receiver codecs in initial have-local-offer'); + + await pc2.setRemoteDescription(offer); + const [receiver2] = pc2.getReceivers(); + param = receiver2.getParameters(); + assert_array_equals(param.codecs, [], 'No receiver codecs in initial have-remote-offer'); + + const answer = await pc2.createAnswer(); + param = receiver2.getParameters(); + assert_array_equals(param.codecs, [], 'No receiver codecs in initial have-remote-offer (after createAnswer)'); + }, `RTCRtpReceiver.getParameters() should not have codecs before SDP negotiation completes (${kind})`); + + promise_test(async t => { + const pc1 = new RTCPeerConnection(); + t.add_cleanup(() => pc1.close()); + const pc2 = new RTCPeerConnection(); + t.add_cleanup(() => pc2.close()); + + const sender1 = pc1.addTransceiver(kind).sender; + await exchangeOfferAnswer(pc1, pc2); + const [sender2] = pc2.getSenders(); + + let param = sender1.getParameters(); + assert_array_field(param, 'codecs'); + assert_not_equals(param.codecs.length, 0); + for (const codec of param.codecs) { + validateCodecParameters(codec); + } + + param = sender2.getParameters(); + assert_array_field(param, 'codecs'); + assert_not_equals(param.codecs.length, 0); + for (const codec of param.codecs) { + validateCodecParameters(codec); + } + }, `RTCRtpSender.getParameters() should have codecs after negotiation (${kind})`); + + promise_test(async t => { + const pc1 = new RTCPeerConnection(); + t.add_cleanup(() => pc1.close()); + const pc2 = new RTCPeerConnection(); + t.add_cleanup(() => pc2.close()); + + const receiver1 = pc1.addTransceiver(kind).receiver; + await exchangeOfferAnswer(pc1, pc2); + const [receiver2] = pc2.getReceivers(); + + let param = receiver1.getParameters(); + assert_array_field(param, 'codecs'); + assert_not_equals(param.codecs.length, 0); + for (const codec of param.codecs) { + validateCodecParameters(codec); + } + + param = receiver2.getParameters(); + assert_array_field(param, 'codecs'); + assert_not_equals(param.codecs.length, 0); + for (const codec of param.codecs) { + validateCodecParameters(codec); + } + }, `RTCRtpReceiver.getParameters() should have codecs after negotiation (${kind})`); + + promise_test(async t => { + const pc = new RTCPeerConnection(); + t.add_cleanup(() => pc.close()); + + const { sender } = pc.addTransceiver(kind); + await doOfferAnswerExchange(t, pc); + + const {codecs} = pc.getReceivers()[0].getParameters(); + const sections = SDPUtils.splitSections(pc.localDescription.sdp); + checkCodecsAgainstSDP(codecs, sections[1]); + }, `RTCRtpReceiver.getParameters() codecs should match local SDP (${kind}, offerer)`); + + promise_test(async t => { + const pc1 = new RTCPeerConnection(); + t.add_cleanup(() => pc1.close()); + const pc2 = new RTCPeerConnection(); + t.add_cleanup(() => pc2.close()); + + pc1.addTransceiver(kind); + await exchangeOfferAnswer(pc1, pc2); + + const {codecs} = pc2.getReceivers()[0].getParameters(); + const sections = SDPUtils.splitSections(pc2.localDescription.sdp); + checkCodecsAgainstSDP(codecs, sections[1]); + }, `RTCRtpReceiver.getParameters() codecs should match local SDP (${kind}, answerer)`); +}); + + // SDP with unusual payload types and fmtp, and an unknown codec + const audioSdp = ` +v=0 +o=- 166855176514521964 2 IN IP4 127.0.0.1 +s=- +t=0 0 +m=audio 9 UDP/TLS/RTP/SAVPF 121 111 0 101 +c=IN IP4 0.0.0.0 +a=rtcp:9 IN IP4 0.0.0.0 +a=ice-ufrag:foobarba +a=ice-pwd:foobarba +a=fingerprint:sha-256 00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00 +a=setup:passive +a=mid:mid1 +a=sendrecv +a=rtcp-rsize +a=rtpmap:101 telephone-event/8000/1 +a=rtpmap:121 flarglblurp/8000/2 +a=rtpmap:111 opus/48000/2 +a=fmtp:111 maxaveragebitrate=20001;unknownparam=foo +`; + + // SDP with unusual payload types and fmtp, and an unknown codec + const videoSdp = ` +v=0 +o=- 1878890426675213188 2 IN IP4 127.0.0.1 +s=- +t=0 0 +m=video 9 UDP/TLS/RTP/SAVPF 116 117 120 124 119 123 122 121 118 +c=IN IP4 0.0.0.0 +a=sendrecv +a=fmtp:117 apt=116 +a=fmtp:120 max-fs=12277;max-fr=50;unknownparam=foo +a=fmtp:124 apt=120 +a=fmtp:119 max-fs=12266;max-fr=40 +a=fmtp:123 apt=119 +a=fmtp:118 apt=121 +a=ice-pwd:60840251a559417c253d68478b0020fb +a=ice-ufrag:741347dd +a=fingerprint:sha-256 00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00 +a=setup:passive +a=mid:mid1 +a=rtcp-mux +a=rtcp-rsize +a=rtpmap:116 flarglblurp/90000 +a=rtpmap:117 rtx/90000 +a=rtpmap:120 VP9/90000 +a=rtpmap:124 rtx/90000 +a=rtpmap:119 VP8/90000 +a=rtpmap:123 rtx/90000 +a=rtpmap:122 ulpfec/90000 +a=rtpmap:121 red/90000 +a=rtpmap:118 rtx/90000 +`; + + const remoteSdpParamsTests = [ + { + description: 'audio, no fmtp checks', + kind: 'audio', + sdp: audioSdp, + expectedCodecs: [ + {payloadType: 111, clockRate: 48000, channels: 2, mimeType: 'audio/opus'}, + {payloadType: 0, clockRate: 8000, channels: 1, mimeType: 'audio/pcmu'}, + {payloadType: 101, clockRate: 8000, channels: 1, mimeType: 'audio/telephone-event'}, + ] + }, + + { + description: 'audio, with fmtp checks', + kind: 'audio', + sdp: audioSdp, + expectedCodecs: [ + {payloadType: 111, clockRate: 48000, channels: 2, mimeType: 'audio/opus', sdpFmtpLine: 'maxaveragebitrate=20001;unknownparam=foo'}, + {payloadType: 0, clockRate: 8000, channels: 1, mimeType: 'audio/pcmu', sdpFmtpLine: undefined}, + {payloadType: 101, clockRate: 8000, channels: 1, mimeType: 'audio/telephone-event', sdpFmtpLine: undefined}, + ] + }, + + { + description: 'video, minimal fmtp checks', + kind: 'video', + sdp: videoSdp, + expectedCodecs: [ + {payloadType: 120, clockRate: 90000, mimeType: 'video/vp9'}, + {payloadType: 124, clockRate: 90000, mimeType: 'video/rtx', sdpFmtpLine: 'apt=120'}, + {payloadType: 119, clockRate: 90000, mimeType: 'video/vp8'}, + {payloadType: 123, clockRate: 90000, mimeType: 'video/rtx', sdpFmtpLine: 'apt=119'}, + {payloadType: 122, clockRate: 90000, mimeType: 'video/ulpfec'}, + {payloadType: 121, clockRate: 90000, mimeType: 'video/red'}, + {payloadType: 118, clockRate: 90000, mimeType: 'video/rtx', sdpFmtpLine: 'apt=121'}, + ] + }, + + { + description: 'video, with fmtp checks', + kind: 'video', + sdp: videoSdp, + expectedCodecs: [ + {payloadType: 120, clockRate: 90000, mimeType: 'video/vp9', sdpFmtpLine: 'max-fs=12277;max-fr=50;unknownparam=foo'}, + {payloadType: 124, clockRate: 90000, mimeType: 'video/rtx', sdpFmtpLine: 'apt=120'}, + {payloadType: 119, clockRate: 90000, mimeType: 'video/vp8', sdpFmtpLine: 'max-fs=12266;max-fr=40'}, + {payloadType: 123, clockRate: 90000, mimeType: 'video/rtx', sdpFmtpLine: 'apt=119'}, + {payloadType: 122, clockRate: 90000, mimeType: 'video/ulpfec', sdpFmtpLine: undefined}, + {payloadType: 121, clockRate: 90000, mimeType: 'video/red', sdpFmtpLine: undefined}, + {payloadType: 118, clockRate: 90000, mimeType: 'video/rtx', sdpFmtpLine: 'apt=121'}, + ] + }, + ]; + + remoteSdpParamsTests.forEach(test => { + promise_test(async t => { + const pc = new RTCPeerConnection(); + t.add_cleanup(() => pc.close()); + + pc.addTransceiver(test.kind, { direction: 'sendrecv'}); + await pc.setLocalDescription(); + const {sender, mid} = pc.getTransceivers()[0]; + await pc.setRemoteDescription({sdp: test.sdp.replace('mid1', mid), type: 'answer'}); + const {codecs} = sender.getParameters(); + compareCodecParams(codecs, test.expectedCodecs); + }, `RTCRtpSender.getParameters() codecs should match remote SDP (${test.description}, offerer)`); + + promise_test(async t => { + const pc = new RTCPeerConnection(); + t.add_cleanup(() => pc.close()); + + await pc.setRemoteDescription({sdp: test.sdp, type: 'offer'}); + await pc.setLocalDescription(); + const {codecs} = pc.getSenders()[0].getParameters(); + compareCodecParams(codecs, test.expectedCodecs); + }, `RTCRtpSender.getParameters() codecs should match remote SDP (${test.description}, answerer)`); + }); </script> diff --git a/tests/wpt/tests/webrtc/RTCRtpParameters-helper.js b/tests/wpt/tests/webrtc/RTCRtpParameters-helper.js index dd8ae0cc06d..8a6d7f63529 100644 --- a/tests/wpt/tests/webrtc/RTCRtpParameters-helper.js +++ b/tests/wpt/tests/webrtc/RTCRtpParameters-helper.js @@ -179,13 +179,13 @@ function validateHeaderExtensionParameters(headerExt) { /* dictionary RTCRtpCodecParameters { [readonly] - unsigned short payloadType; + required unsigned short payloadType; [readonly] - DOMString mimeType; + required DOMString mimeType; [readonly] - unsigned long clockRate; + required unsigned long clockRate; [readonly] unsigned short channels; @@ -195,9 +195,9 @@ function validateHeaderExtensionParameters(headerExt) { }; */ function validateCodecParameters(codec) { - assert_optional_unsigned_int_field(codec, 'payloadType'); - assert_optional_string_field(codec, 'mimeType'); - assert_optional_unsigned_int_field(codec, 'clockRate'); + assert_unsigned_int_field(codec, 'payloadType'); + assert_string_field(codec, 'mimeType'); + assert_unsigned_int_field(codec, 'clockRate'); assert_optional_unsigned_int_field(codec, 'channels'); assert_optional_string_field(codec, 'sdpFmtpLine'); } diff --git a/tests/wpt/tests/webrtc/protocol/rtp-demuxing.html b/tests/wpt/tests/webrtc/protocol/rtp-demuxing.html index de08b2197f2..e53f1ff76f4 100644 --- a/tests/wpt/tests/webrtc/protocol/rtp-demuxing.html +++ b/tests/wpt/tests/webrtc/protocol/rtp-demuxing.html @@ -56,6 +56,8 @@ promise_test(async t => { await caller.setRemoteDescription(answer); await callee.setLocalDescription(answer); + assert_equals(callee.getReceivers().length, 2); + await metadataToBeLoaded; }, 'Can demux two video tracks with different payload types on a bundled connection'); @@ -103,6 +105,8 @@ promise_test(async t => { await caller.setRemoteDescription(answer); await callee.setLocalDescription(answer); + assert_equals(callee.getReceivers().length, 2); + await metadataToBeLoaded; }, 'Can demux two video tracks with the same payload type on an unbundled connection'); diff --git a/tests/wpt/tests/webrtc/protocol/video-codecs.https.html b/tests/wpt/tests/webrtc/protocol/video-codecs.https.html index 4ce0618bca3..2fbb4ae28f6 100644 --- a/tests/wpt/tests/webrtc/protocol/video-codecs.https.html +++ b/tests/wpt/tests/webrtc/protocol/video-codecs.https.html @@ -65,8 +65,8 @@ function parseFmtp(fmtp) { } promise_test(async t => { const params = await negotiateParameters(); - assert_true(!!params.codecs.find(codec => codec.mimeType === 'video/H264')); - assert_true(!!params.codecs.find(codec => codec.mimeType === 'video/VP8')); + assert_true(!!params.codecs.find(codec => codec.mimeType.toLowerCase() === 'video/h264')); + assert_true(!!params.codecs.find(codec => codec.mimeType.toLowerCase() === 'video/vP8')); }, 'H.264 and VP8 should be negotiated after handshake'); // TODO: Section 6: Recipients MUST be able to decode 320x240@20 fps diff --git a/tests/wpt/tests/webrtc/protocol/vp8-fmtp.html b/tests/wpt/tests/webrtc/protocol/vp8-fmtp.html index 16ea635949f..f52d6b11fb5 100644 --- a/tests/wpt/tests/webrtc/protocol/vp8-fmtp.html +++ b/tests/wpt/tests/webrtc/protocol/vp8-fmtp.html @@ -34,8 +34,8 @@ promise_test(async t => { await pc.setRemoteDescription({type: 'offer', sdp}); await pc.setLocalDescription(); - const receiver = pc.getReceivers()[0]; - const parameters = receiver.getParameters(); + const sender = pc.getSenders()[0]; + const parameters = sender.getParameters(); const {sdpFmtpLine} = parameters.codecs[0]; assert_true(!!sdpFmtpLine); assert_true(sdpFmtpLine.split(';').includes('max-fr=30')); diff --git a/tests/wpt/tests/webrtc/simulcast/vp9-scalability-mode.https.html b/tests/wpt/tests/webrtc/simulcast/vp9-scalability-mode.https.html index 9dc8a3103d6..8d8f974fcdc 100644 --- a/tests/wpt/tests/webrtc/simulcast/vp9-scalability-mode.https.html +++ b/tests/wpt/tests/webrtc/simulcast/vp9-scalability-mode.https.html @@ -13,7 +13,7 @@ <script> promise_test(async t => { assert_implements('getCapabilities' in RTCRtpSender, 'RTCRtpSender.getCapabilities not supported'); - assert_implements(RTCRtpSender.getCapabilities('video').codecs.find(c => c.mimeType === 'video/VP9'), 'VP9 not supported'); + assert_implements(RTCRtpSender.getCapabilities('video').codecs.find(c => c.mimeType.toLowerCase() === 'video/vP9'), 'VP9 not supported'); const rids = [0, 1]; const pc1 = new RTCPeerConnection(); diff --git a/tests/wpt/tests/webrtc/third_party/sdp/sdp.js b/tests/wpt/tests/webrtc/third_party/sdp/sdp.js index a7538a671e7..d464ee168ee 100644 --- a/tests/wpt/tests/webrtc/third_party/sdp/sdp.js +++ b/tests/wpt/tests/webrtc/third_party/sdp/sdp.js @@ -47,6 +47,10 @@ SDPUtils.matchPrefix = function(blob, prefix) { }); }; +SDPUtils.matchPrefixAndTrim = function(blob, prefix) { + return SDPUtils.matchPrefix(blob, prefix).map(l => l.substr(prefix.length).trim()); +} + // Parses an ICE candidate line. Sample input: // candidate:702786350 2 udp 41819902 8.8.8.8 60769 typ relay raddr 8.8.8.8 // rport 55996" diff --git a/tests/wpt/tests/webxr/depth-sensing/depth_sensing_preferences.https.html b/tests/wpt/tests/webxr/depth-sensing/depth_sensing_preferences.https.html new file mode 100644 index 00000000000..f6392016d40 --- /dev/null +++ b/tests/wpt/tests/webxr/depth-sensing/depth_sensing_preferences.https.html @@ -0,0 +1,148 @@ +<!DOCTYPE html> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src="../resources/webxr_util.js"></script> +<script src="../resources/webxr_test_constants.js"></script> +<script src="../resources/webxr_test_constants_fake_depth.js"></script> +<script> + const depthConfigurationTestGenerator = + function (sessionOptions, shouldGrantSession, shouldDepthBeEnabled = true) { + return (t) => { + return navigator.xr.test.simulateDeviceConnection(IMMERSIVE_AR_DEVICE) + .then((controller) => new Promise((resolve, reject) => { + navigator.xr.test.simulateUserActivation(() => { + navigator.xr.requestSession('immersive-ar', sessionOptions) + .then((session) => { + return session.end().then(() => { + if (!shouldGrantSession) { + reject("Session granted when expected rejection."); + return; + } + + t.step(() => { + let depthEnabled = session.enabledFeatures.includes('depth-sensing'); + assert_true(depthEnabled == shouldDepthBeEnabled); + }); + + resolve(); + }); + }) + .catch((err) => { + if (shouldGrantSession) { + reject("Session rejected with error: " + err); + return; + } + + resolve(); + }); + }); + })); + }; + }; + + // Valid configurations when depth is a required feature + xr_promise_test( + "depthSensing - Required - Fully populated grants session", + depthConfigurationTestGenerator({ + 'requiredFeatures': ['depth-sensing'], + depthSensing: { + usagePreference: DEPTH_CONFIG_ALL_USAGES, + dataFormatPreference: DEPTH_CONFIG_ALL_FORMATS + }, + }, /*shouldGrantSession=*/true)); + + xr_promise_test( + "depthSensing - Required - Empty usage grants session", + depthConfigurationTestGenerator({ + 'requiredFeatures': ['depth-sensing'], + depthSensing: { + usagePreference: [], + dataFormatPreference: DEPTH_CONFIG_ALL_FORMATS + }, + }, /*shouldGrantSession=*/true)); + + xr_promise_test( + "depthSensing - Required - Empty format grants session", + depthConfigurationTestGenerator({ + 'requiredFeatures': ['depth-sensing'], + depthSensing: { + usagePreference: DEPTH_CONFIG_ALL_USAGES, + dataFormatPreference: [], + }, + }, /*shouldGrantSession=*/true)); + + xr_promise_test( + "depthSensing - Required - Empty usage and format grants session", + depthConfigurationTestGenerator({ + 'requiredFeatures': ['depth-sensing'], + depthSensing: { + usagePreference: [], + dataFormatPreference: [], + }, + }, /*shouldGrantSession=*/true)); + + // Invalid configurations when depth is a required feature + xr_promise_test( + "depthSensing - Required - Missing usage rejects session", + depthConfigurationTestGenerator({ + 'requiredFeatures': ['depth-sensing'], + depthSensing: { + dataFormatPreference: [], + }, + }, /*shouldGrantSession=*/false)); + + xr_promise_test( + "depthSensing - Required - Missing format rejects session", + depthConfigurationTestGenerator({ + 'requiredFeatures': ['depth-sensing'], + depthSensing: { + usagePreference: [], + }, + }, /*shouldGrantSession=*/false)); + + xr_promise_test( + "depthSensing - Required - Missing usage and format rejects session", + depthConfigurationTestGenerator({ + 'requiredFeatures': ['depth-sensing'], + depthSensing: {}, + }, /*shouldGrantSession=*/false)); + + xr_promise_test( + "depthSensing - Required - Missing configuration rejects session", + depthConfigurationTestGenerator({ + 'requiredFeatures': ['depth-sensing'], + }, /*shouldGrantSession=*/false)); + + // Invalid configurations when depth is an optional feature + xr_promise_test( + "depthSensing - Optional - Missing usage optional still rejects session", + depthConfigurationTestGenerator({ + 'optionalFeatures': ['depth-sensing'], + depthSensing: { + dataFormatPreference: [], + }, + }, /*shouldGrantSession=*/false)); + + xr_promise_test( + "depthSensing - Optional - Missing format optional still rejects session", + depthConfigurationTestGenerator({ + 'optionalFeatures': ['depth-sensing'], + depthSensing: { + usagePreference: [], + }, + }, /*shouldGrantSession=*/false)); + + xr_promise_test( + "depthSensing - Optional - Missing usage and format optional still rejects session", + depthConfigurationTestGenerator({ + 'optionalFeatures': ['depth-sensing'], + depthSensing: {}, + }, /*shouldGrantSession=*/false)); + + xr_promise_test( + "depthSensing - Optional - Missing configuration optional grants session without depth", + depthConfigurationTestGenerator({ + 'optionalFeatures': ['depth-sensing'], + }, /*shouldGrantSession=*/true, + /*shouldDepthBeEnabled=*/false)); +</script> diff --git a/tests/wpt/tests/webxr/resources/webxr_test_constants_fake_depth.js b/tests/wpt/tests/webxr/resources/webxr_test_constants_fake_depth.js index 36890d398de..b350db3a27a 100644 --- a/tests/wpt/tests/webxr/resources/webxr_test_constants_fake_depth.js +++ b/tests/wpt/tests/webxr/resources/webxr_test_constants_fake_depth.js @@ -67,12 +67,15 @@ const getExpectedValueAt = function(column, row) { return Math.pow(column+1, row) * RAW_VALUE_TO_METERS; }; +const DEPTH_CONFIG_ALL_FORMATS = ['luminance-alpha', 'float32', 'unsigned-short']; +const DEPTH_CONFIG_ALL_USAGES= ['gpu-optimized', 'cpu-optimized']; + const VALID_DEPTH_CONFIG_CPU_USAGE = { usagePreference: ['cpu-optimized'], - dataFormatPreference: ['luminance-alpha', 'float32'], + dataFormatPreference: ['luminance-alpha', 'float32', 'unsigned-short'], }; const VALID_DEPTH_CONFIG_GPU_USAGE = { usagePreference: ['gpu-optimized'], - dataFormatPreference: ['luminance-alpha', 'float32'], + dataFormatPreference: ['luminance-alpha', 'float32', 'unsigned-short'], }; |
