diff options
Diffstat (limited to 'tests/wpt/web-platform-tests/css')
53 files changed, 495 insertions, 41 deletions
diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-animation.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-animation.html index e5ce4684d10..55618485d88 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-animation.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-animation.html @@ -5,6 +5,7 @@ <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that an element with mix-blend-mode and animation blends with the parent element."> + <meta name="fuzzy" content="0-2;0-11000"> <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> <link rel="match" href="reference/mix-blend-mode-animation-ref.html"> @@ -17,19 +18,20 @@ @keyframes changeOpacity { - from { opacity: 1; } + from { opacity: 0.9; } + 50% { opacity: 0.9; } to { opacity: 0.1; } } #blender { background: #F00; mix-blend-mode: difference; - animation: changeOpacity 1s; + animation: changeOpacity 10s; } </style> </head> <body> - <p>Test passes if you can see a fading green box.</p> + <p>Test passes if you can see a fading green box after 5 seconds.</p> <div><div id="blender"></div></div> </body> </html> diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-interposed.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-interposed.html index 66625478e7b..768352de020 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-interposed.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-interposed.html @@ -8,6 +8,7 @@ <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that an element with mix-blend-mode having a child blends with the parent element."> + <meta name="fuzzy" content="0-1;0-10"> <link rel="match" href="reference/green-square.html"> <style type="text/css"> div { diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-overflow-hidden-and-border-radius.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-overflow-hidden-and-border-radius.html index 147b148bad2..305e0e2e0c1 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-overflow-hidden-and-border-radius.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-overflow-hidden-and-border-radius.html @@ -8,6 +8,7 @@ <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that an element having mix-blend-mode, overflow:hidden and border-radius blends correctly with its parent element."> + <meta name="fuzzy" content="0-10;0-5"> <link rel="match" href="reference/mix-blend-mode-blended-element-overflow-hidden-and-border-radius-ref.html"> <style type="text/css"> .parent { diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-with-3D-transform.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-with-3D-transform.html index 4b4cf814121..1739e013824 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-with-3D-transform.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-with-3D-transform.html @@ -8,6 +8,7 @@ <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that the element with mix-blend-mode and 3D transform blends correctly with its parent"> + <meta name="fuzzy" content="0-255;0-350"> <link rel="match" href="reference/mix-blend-mode-blended-with-3D-transform-ref.html"> <style type="text/css"> .parent { diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-both-parent-and-blended-with-3D-transform.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-both-parent-and-blended-with-3D-transform.html index e388c0566b2..59fca74f840 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-both-parent-and-blended-with-3D-transform.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-both-parent-and-blended-with-3D-transform.html @@ -8,6 +8,7 @@ <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that the element with mix-blend-mode blends with the parent element (both with 3D transform)"> + <meta name="fuzzy" content="0-128;0-1000"> <link rel="match" href="reference/mix-blend-mode-both-parent-and-blended-with-3D-transform-ref.html"> <style type="text/css"> .parent { @@ -26,6 +27,9 @@ transform:rotateX(20deg); mix-blend-mode: difference; } + p { + will-change: transform; + } </style> </head> <body> diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-canvas-parent.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-canvas-parent.html index 3a0d6b18adc..5107207e360 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-canvas-parent.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-canvas-parent.html @@ -6,6 +6,7 @@ <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that a canvas element having mix-blend-mode applied blends with the content of the parent element."> <meta name="flags" content="dom"/> + <meta name="fuzzy" content="0-1;0-10"> <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> <link rel="match" href="reference/mix-blend-mode-canvas-parent-ref.html"> diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-canvas-sibling.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-canvas-sibling.html index 6d4bdc6200d..2ecffbf51e2 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-canvas-sibling.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-canvas-sibling.html @@ -6,6 +6,7 @@ <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that a canvas element having mix-blend-mode applied blends with a sibling element."> <meta name="flags" content="dom"/> + <meta name="fuzzy" content="0-1;0-10"> <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> <link rel="match" href="reference/mix-blend-mode-canvas-sibling-ref.html"> diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-iframe-parent.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-iframe-parent.html index 69c8cb8296a..a24a5f933ee 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-iframe-parent.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-iframe-parent.html @@ -5,6 +5,7 @@ <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that an iframe element blends with its parent element."> + <meta name="fuzzy" content="0-1;0-10"> <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> <link rel="match" href="reference/mix-blend-mode-iframe-parent-ref.html"> diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-iframe-sibling.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-iframe-sibling.html index 6f82c9195b2..d1a5518b8c8 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-iframe-sibling.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-iframe-sibling.html @@ -5,6 +5,7 @@ <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that an iframe element blends with a sibling element."> + <meta name="fuzzy" content="0-1;0-10"> <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> <link rel="match" href="reference/mix-blend-mode-iframe-sibling-ref.html"> diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius.html index 6d900540d86..83174738210 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius.html @@ -8,6 +8,7 @@ <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that the element with mix-blend-mode, overflow:hidden and border-radius blends correctly with its parent, as well as with the sibling element where they overlap."> + <meta name="fuzzy" content="0-10;0-50"> <link rel="match" href="reference/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius-ref.html"> <style type="text/css"> .parent { diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-mask.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-mask.html index 8bfeb08f8a3..2a7072febbe 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-mask.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-mask.html @@ -6,6 +6,7 @@ <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that an element having mask and mix-blend-mode blends with its parent element."> <meta name="flags" content="svg"> + <meta name="fuzzy" content="0-1;0-10"> <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> <link rel="match" href="reference/mix-blend-mode-mask-ref.html"> diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-paragraph-background-image.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-paragraph-background-image.html index a4f5c226da6..51744dc7838 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-paragraph-background-image.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-paragraph-background-image.html @@ -6,6 +6,7 @@ <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that test a paragraph element blends with the parent element having background image."> <meta name="flags" content="svg"> + <meta name="fuzzy" content="0-1;0-10"> <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> <link rel="match" href="reference/mix-blend-mode-paragraph-background-image-ref.html"> diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-paragraph.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-paragraph.html index 4b61d246546..e0f4e383a56 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-paragraph.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-paragraph.html @@ -5,6 +5,7 @@ <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that test a paragraph element blends with the parent element."> + <meta name="fuzzy" content="0-1;0-10"> <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> <link rel="match" href="reference/mix-blend-mode-paragraph-ref.html"> diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-element-overflow-hidden-and-border-radius.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-element-overflow-hidden-and-border-radius.html index c73516305a6..840d2626bc1 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-element-overflow-hidden-and-border-radius.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-element-overflow-hidden-and-border-radius.html @@ -8,6 +8,7 @@ <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that an element having mix-blend-mode blends with the parent element having overflow:hidden and border-radius"> + <meta name="fuzzy" content="0-128;0-400"> <link rel="match" href="reference/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-ref.html"> <style type="text/css"> .parent { diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-border-radius.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-border-radius.html index 9c4f918bc09..e6562706d8e 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-border-radius.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-border-radius.html @@ -10,6 +10,7 @@ <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that an element with mix-blend-mode blends with the parent element having border-radius."> + <meta name="fuzzy" content="0-5;0-200"> <link rel="match" href="reference/mix-blend-mode-parent-with-border-radius-ref.html"> <style type="text/css"> body { diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-text.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-text.html index 005b936e7e6..274bebe539f 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-text.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-text.html @@ -10,6 +10,7 @@ <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that an element with mix-blend-mode only blends with the contents of a parent that creates a stacking context."> + <meta name="fuzzy" content="0-1;0-10"> <link rel="match" href="reference/mix-blend-mode-parent-with-text-ref.html"> <style type="text/css"> .parent { diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-script.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-script.html index 1268a8dc3f8..e842d0b3956 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-script.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-script.html @@ -6,6 +6,7 @@ <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that mix-blend-mode is applied when set from script."> <meta name="flags" content="dom"/> + <meta name="fuzzy" content="0-1;0-10"> <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> <link rel="match" href="reference/mix-blend-mode-script-ref.html"> diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-simple.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-simple.html index 96d303df00f..b00f81694ed 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-simple.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-simple.html @@ -6,6 +6,7 @@ <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that an element with mix-blend-mode blends with its parent element."> + <meta name="fuzzy" content="0-1;0-10"> <link rel="match" href="reference/green-square.html"> <style type="text/css"> div { diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-svg.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-svg.html index c950e540fd6..b7b9f89e925 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-svg.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-svg.html @@ -6,6 +6,7 @@ <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that an SVG element blends with the parent container."> <meta name="flags" content="svg"> + <meta name="fuzzy" content="0-1;0-10"> <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> <link rel="match" href="reference/mix-blend-mode-svg-ref.html"> diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-with-transform-and-preserve-3D.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-with-transform-and-preserve-3D.html index c59835e9a7f..6d27a40ff27 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-with-transform-and-preserve-3D.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/mix-blend-mode-with-transform-and-preserve-3D.html @@ -8,6 +8,7 @@ <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> <meta name="assert" content="Test checks that mix-blend-mode overrides the behavior of transform-style:preserve-3d"> + <meta name="fuzzy" content="0-50;0-300"> <link rel="match" href="reference/mix-blend-mode-with-transform-and-preserve-3D-ref.html"> <style type="text/css"> div { diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-animation-ref.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-animation-ref.html index 0e94efa12d0..1dc65d81312 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-animation-ref.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-animation-ref.html @@ -12,18 +12,19 @@ @keyframes changeOpacity { - from { opacity: 1; } + from { opacity: 0.9; } + 50% { opacity: 0.9; } to { opacity: 0.1; } } #blender { background: #0F0; - animation: changeOpacity 1s; + animation: changeOpacity 10s; } </style> </head> <body> - <p>Test passes if you can see a fading green box.</p> + <p>Test passes if you can see a fading green box after 5 seconds.</p> <div><div id="blender"></div></div> </body> </html> diff --git a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-both-parent-and-blended-with-3D-transform-ref.html b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-both-parent-and-blended-with-3D-transform-ref.html index af2827b1c61..b59802a229f 100644 --- a/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-both-parent-and-blended-with-3D-transform-ref.html +++ b/tests/wpt/web-platform-tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-both-parent-and-blended-with-3D-transform-ref.html @@ -27,6 +27,9 @@ width: 120px; height: 122px; } + p { + will-change: transform; + } </style> </head> <body> diff --git a/tests/wpt/web-platform-tests/css/css-animations/Element-getAnimations.tentative.html b/tests/wpt/web-platform-tests/css/css-animations/Element-getAnimations.tentative.html index 284b2493403..651c9d89ed9 100644 --- a/tests/wpt/web-platform-tests/css/css-animations/Element-getAnimations.tentative.html +++ b/tests/wpt/web-platform-tests/css/css-animations/Element-getAnimations.tentative.html @@ -352,7 +352,7 @@ test(t => { assert_equals(animations.length, 1, 'Should find only the element even if it has a child'); assert_equals(animations[0].effect.target, parent, - 'Effect target shuld be the element'); + 'Effect target should be the element'); }, '{ subtree: false } on an element with a child returns only the element\'s' + ' animations'); diff --git a/tests/wpt/web-platform-tests/css/css-break/abspos-in-clipped-overflow-print-ref.html b/tests/wpt/web-platform-tests/css/css-break/abspos-in-clipped-overflow-print-ref.html new file mode 100644 index 00000000000..205856035b1 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-break/abspos-in-clipped-overflow-print-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +There should only be one page. diff --git a/tests/wpt/web-platform-tests/css/css-break/abspos-in-clipped-overflow-print.html b/tests/wpt/web-platform-tests/css/css-break/abspos-in-clipped-overflow-print.html new file mode 100644 index 00000000000..4510dd3cbc8 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-break/abspos-in-clipped-overflow-print.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399313"> +<link rel="match" href="abspos-in-clipped-overflow-print-ref.html"> +There should only be one page. +<div style="position:absolute; overflow:clip; width:10px; height:10px;"> + <div style="position:absolute; height:350vh;"></div> +</div> diff --git a/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-104.html b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-104.html new file mode 100644 index 00000000000..27363ad2b55 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-104.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1395037"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:3; column-fill:auto; height:100px;"> + <div style="overflow:clip; position:relative; width:100px; height:100px; background:green;"> + <div style="position:absolute; z-index:-1; width:5000px; height:100px; background:red;"></div> + </div> +</div> diff --git a/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-105-ref.html b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-105-ref.html new file mode 100644 index 00000000000..1230f8b2506 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-105-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <p>Test passes if there is a filled green square and <strong>no red</strong>, + and a vertical scrollbar (unless overlay scrollbars are enabled).</p> + <div id="scrollable" style="overflow:auto; width:200px; height:200px;"> + <div style="height:10000px;"> + <div style="height:9800px;"></div> + <div style="width:100px; height:100px; background:green;"></div> + </div> + </div> + <script> + scrollable.scrollTop = 100000; + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-105.html b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-105.html new file mode 100644 index 00000000000..b5cc802239e --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-105.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1395037"> + <link rel="match" href="out-of-flow-in-multicolumn-105-ref.html"> + <p>Test passes if there is a filled green square and <strong>no red</strong>, + and a vertical scrollbar (unless overlay scrollbars are enabled).</p> + <div id="scrollable" style="overflow:auto; width:200px; height:200px;"> + <div style="columns:2; column-fill:auto; height:100px;"> + <div style="overflow-x:clip; position:relative; width:100px; height:100px;"> + <div style="position:absolute; width:5000px;"> + <div style="contain:size; height:10000px;"> + <div style="height:9800px; background:red;"></div> + <div style="float:left; width:100px; height:100px; background:green;"></div> + <div style="float:left; width:100px; height:100px;"></div> + <div style="float:left; width:4800px; height:200px; background:red;"></div> + </div> + </div> + </div> + </div> + </div> + <script> + scrollable.scrollTop = 100000; + scrollable.scrollLeft = 100000; + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-106-ref.html b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-106-ref.html new file mode 100644 index 00000000000..65a93393741 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-106-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <p>Test passes if there is a filled green square and <strong>no red</strong>, + and a horizontal scrollbar (unless overlay scrollbars are enabled).</p> + <div id="scrollable" style="overflow:auto; width:200px; height:200px;"> + <div style="width:10000px;"> + <div style="float:left; width:9800px; height:1px;"></div> + <div style="float:left; width:100px; height:100px; background:green;"></div> + </div> + </div> + <script> + scrollable.scrollLeft = 100000; + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-106.html b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-106.html new file mode 100644 index 00000000000..e97d947ea1c --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-106.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1395037"> + <link rel="match" href="out-of-flow-in-multicolumn-106-ref.html"> + <p>Test passes if there is a filled green square and <strong>no red</strong>, + and a horizontal scrollbar (unless overlay scrollbars are enabled).</p> + <div id="scrollable" style="overflow:auto; width:200px; height:200px;"> + <div style="columns:2; column-fill:auto; height:100px;"> + <div style="overflow-y:clip; position:relative; width:100px; height:100px;"> + <div style="position:absolute; width:5000px;"> + <div style="contain:size; height:10000px;"> + <div style="float:left; width:4800px; height:200px; background:red;"></div> + <div style="float:left; width:100px; height:100px; background:green;"></div> + <div style="float:left; clear:left; width:5000px; height:9800px; background:red;"></div> + </div> + </div> + </div> + </div> + </div> + <script> + scrollable.scrollTop = 100000; + scrollable.scrollLeft = 100000; + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-107.html b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-107.html new file mode 100644 index 00000000000..76aa32bb9ce --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-107.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399313"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position:absolute; width:20px; height:100px; margin-left:20px; background:green;"></div> +<div style="position:absolute; width:20px; height:100px; margin-left:60px; background:green;"></div> +<div style="columns:3; width:100px; column-rule:20px solid red; gap:20px; column-fill:auto; height:100px; background:red;"> + <div style="overflow:clip;"> + <div style="position:relative; height:300px;"> + <div style="position:absolute; width:100%; height:100000px; background:green;"></div> + </div> + </div> +</div> diff --git a/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-108.html b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-108.html new file mode 100644 index 00000000000..de453c74696 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-108.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399313"> +<meta name="assert" content="For a non-OOF variant of this test, see //css/css-break/overflow-clip-007.html"> +<style> + body { margin: 0; } +</style> +<div style="columns:3; width:100px; gap:20px; column-fill:auto; height:100px;"> + <div style="overflow:clip;"> + <div style="position:relative; height:300px;"> + <div style="position:absolute; width:100%; height:100000px;"> + <div style="height:10050px;"></div> + <div id="target" style="height:1000px;"></div> + </div> + </div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + var rect = target.getBoundingClientRect(); + assert_equals(rect.left, 80); + assert_equals(rect.top, 9850); + assert_equals(rect.width, 20); + assert_equals(rect.height, 1000); + }, "Overflowing and clipped content doesn't fragment"); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-109.html b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-109.html new file mode 100644 index 00000000000..32707fe99a4 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-109.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399313"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Check that only clipping in the inline direction doesn't prevent an OOF from generating additional fragmentainers"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:3; width:100px; column-rule:20px solid green; gap:20px; column-fill:auto; height:100px; background:red;"> + <div style="overflow-x:clip;"> + <div style="position:relative;"> + <div style="position:absolute; width:100%; height:300px; background:green;"></div> + </div> + </div> +</div> diff --git a/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-110.html b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-110.html new file mode 100644 index 00000000000..9da905d075a --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-110.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399313"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position:absolute; width:20px; height:100px; margin-left:20px; background:green;"></div> +<div style="position:absolute; width:20px; height:100px; margin-left:60px; background:green;"></div> +<div style="columns:3; width:100px; column-rule:20px solid red; gap:20px; column-fill:auto; height:100px; background:red;"> + <div style="overflow:clip;"> + <div style="will-change:transform; height:300px;"> + <div style="position:fixed; width:100%; height:100000px; background:green;"></div> + </div> + </div> +</div> diff --git a/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-111.html b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-111.html new file mode 100644 index 00000000000..a7350ac0ada --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-111.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399313"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position:absolute; width:20px; height:100px; margin-left:20px; background:green;"></div> +<div style="position:absolute; width:20px; height:100px; margin-left:60px; background:green;"></div> +<div style="columns:3; width:100px; column-rule:20px solid red; gap:20px; column-fill:auto; height:100px; background:red;"> + <div style="overflow:clip;"> + <div style="will-change:transform; height:300px;"> + <div style="overflow:clip;"> + <div style="position:relative; height:250px;"> + <div style="position:absolute; width:100%; height:10000px; background:red;"> + <div style="height:250px; background:green;"></div> + </div> + <div style="position:fixed; width:100%; height:10000px; top:250px; background:red;"> + <div style="height:50px; background:green;"></div> + </div> + </div> + </div> + </div> + </div> +</div> diff --git a/tests/wpt/web-platform-tests/css/css-contain/container-queries/font-relative-units-dynamic.html b/tests/wpt/web-platform-tests/css/css-contain/container-queries/font-relative-units-dynamic.html index 67563417d7d..36faf67c6d5 100644 --- a/tests/wpt/web-platform-tests/css/css-contain/container-queries/font-relative-units-dynamic.html +++ b/tests/wpt/web-platform-tests/css/css-contain/container-queries/font-relative-units-dynamic.html @@ -111,6 +111,29 @@ test_template(document.currentScript.previousElementSibling, (t) => { <template> <style> + :root { font-size: 10px; } + :root.larger { font-size: 20px; } + @container (width <= 12rex) { + #test { color: green } + } + </style> + <div id="container"> + <div> + <div id="test"></div> + </div> + </div> +</template> +<script> +test_template(document.currentScript.previousElementSibling, (t) => { + t.add_cleanup(() => document.documentElement.classList.remove("larger")); + assert_equals(getComputedStyle(main.querySelector("#test")).color, red); + document.documentElement.classList.add("larger"); + assert_equals(getComputedStyle(main.querySelector("#test")).color, green); +}, 'rex units respond to changes'); +</script> + +<template> + <style> main { font-size: 10px; } main.larger { font-size: 20px; } @container (width <= 15ch) { diff --git a/tests/wpt/web-platform-tests/css/css-contain/container-queries/font-relative-units.html b/tests/wpt/web-platform-tests/css/css-contain/container-queries/font-relative-units.html index 59eec06d141..5724da2030c 100644 --- a/tests/wpt/web-platform-tests/css/css-contain/container-queries/font-relative-units.html +++ b/tests/wpt/web-platform-tests/css/css-contain/container-queries/font-relative-units.html @@ -15,6 +15,7 @@ container-type: inline-size; font-size: 50px; width: 10ex; + height: 50rex; } #ch_container { container-type: inline-size; @@ -40,6 +41,9 @@ @container (width: 10ex) { #ex_test { color: green } } + @container (49rex <= width <= 100rex) { + #rex_test { color: green } + } @container (width: 10ch) { #ch_test { color: green } } @@ -56,6 +60,7 @@ </div> <div id="ex_container"> <div id="ex_test"></div> + <div id="rex_test"></div> </div> <div id="ch_container"> <div id="ch_test"></div> @@ -73,6 +78,7 @@ test(() => assert_equals(getComputedStyle(em_test).color, green), "em relative inline-size"); test(() => assert_equals(getComputedStyle(rem_test).color, green), "rem relative inline-size"); test(() => assert_equals(getComputedStyle(ex_test).color, green), "ex relative inline-size"); + test(() => assert_equals(getComputedStyle(rex_test).color, green), "rex relative inline-size" + getComputedStyle(ex_container).width + getComputedStyle(ex_container).height); test(() => assert_equals(getComputedStyle(ch_test).color, green), "ch relative inline-size"); test(() => assert_equals(getComputedStyle(ic_test).color, green), "ic relative inline-size"); test(() => assert_equals(getComputedStyle(lh_test).color, green), "lh relative inline-size"); diff --git a/tests/wpt/web-platform-tests/css/css-contain/container-queries/pseudo-elements-003.html b/tests/wpt/web-platform-tests/css/css-contain/container-queries/pseudo-elements-003.html index fe68898b38e..2d7647f7104 100644 --- a/tests/wpt/web-platform-tests/css/css-contain/container-queries/pseudo-elements-003.html +++ b/tests/wpt/web-platform-tests/css/css-contain/container-queries/pseudo-elements-003.html @@ -60,7 +60,8 @@ test(() => { assert_equals(getComputedStyle(outer, "::first-letter").color, green); }, "Originating element container for outer ::first-letter"); - test(() => { + test((t) => { + t.add_cleanup(() => dialog.close()); assert_equals(getComputedStyle(dialog, "::backdrop").backgroundColor, lime, "::backdrop not rendered"); dialog.showModal(); assert_equals(getComputedStyle(dialog, "::backdrop").backgroundColor, green, "::backdrop rendered"); diff --git a/tests/wpt/web-platform-tests/css/css-contain/container-queries/pseudo-elements-006.html b/tests/wpt/web-platform-tests/css/css-contain/container-queries/pseudo-elements-006.html new file mode 100644 index 00000000000..65aee97f758 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-contain/container-queries/pseudo-elements-006.html @@ -0,0 +1,66 @@ +<!doctype html> +<title>@container: originating element container for pseudo elements</title> +<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/cq-testcommon.js"></script> +<style> + .container { container-type: inline-size; } + #target { display: list-item; } + @container (max-width: 200px) { + #target::before { content: "PASS"; font-size: 10cqw; } + #target::after { font-size: 10cqw; } + #target::marker { font-size: 10cqw; } + #target::first-line { font-size: 10cqw; } + #target::first-letter { font-size: 10cqw; } + } + @container ((min-width: 300px) and (max-width: 350px)) { + #outer::first-line { font-size: 10cqw; } + #outer::first-letter { font-size: 10cqw; } + } + dialog::backdrop { font-size: 0px; } + @container (max-width: 100px) { + dialog::backdrop { font-size: 10cqw; } + } +</style> +<div style="width: 400px" class="container"> + <div style="width: 300px" class="container"> + <div id="target" class="container" style="width: 200px">First-line</div> + <dialog id="dialog" class="container" style="width: 100px"></dialog> + </div> + <div style="width: 400px" class="container"> + <div id="outer" style="width: 300px" class="container"> + <div class="container" style="width: 200px">First-line</div> + </div> +</div> +<script> + setup(() => assert_implements_container_queries()); + + test(() => { + assert_equals(getComputedStyle(target, "::before").fontSize, "20px"); + }, "Originating element container for ::before"); + test(() => { + assert_equals(getComputedStyle(target, "::after").fontSize, "20px"); + }, "Originating element container for ::after"); + test(() => { + assert_equals(getComputedStyle(target, "::marker").fontSize, "20px"); + }, "Originating element container for ::marker"); + test(() => { + assert_equals(getComputedStyle(target, "::first-line").fontSize, "20px"); + }, "Originating element container for ::first-line"); + test(() => { + assert_equals(getComputedStyle(target, "::first-letter").fontSize, "20px"); + }, "Originating element container for ::first-letter"); + test(() => { + assert_equals(getComputedStyle(outer, "::first-line").fontSize, "30px"); + }, "Originating element container for outer ::first-line"); + test(() => { + assert_equals(getComputedStyle(outer, "::first-letter").fontSize, "30px"); + }, "Originating element container for outer ::first-letter"); + test((t) => { + t.add_cleanup(() => dialog.close()); + assert_equals(getComputedStyle(dialog, "::backdrop").fontSize, "0px", "::backdrop not rendered"); + dialog.showModal(); + assert_equals(getComputedStyle(dialog, "::backdrop").fontSize, "10px", "::backdrop rendered"); + }, "Originating element container for ::backdrop"); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-contain/container-queries/pseudo-elements-007.html b/tests/wpt/web-platform-tests/css/css-contain/container-queries/pseudo-elements-007.html new file mode 100644 index 00000000000..951f4226f49 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-contain/container-queries/pseudo-elements-007.html @@ -0,0 +1,49 @@ +<!doctype html> +<title>@container: originating element container for pseudo elements</title> +<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/cq-testcommon.js"></script> +<style> + #target { container-type: inline-size; } + #target::before, + #target::after, + #target::marker, + #target::first-line, + #target::first-letter, + #target::backdrop { + font-size: 0px; + } + @container (width >= 300px) { + #target::before, + #target::after, + #target::marker, + #target::first-line, + #target::first-letter, + #target::backdrop { + font-size: 10cqw; + } + } +</style> +<div id="outer" style="width: 200px"> + <div id="target"></div> +</div> +<script> + setup(() => assert_implements_container_queries()); + + const pseudo_elements = ["::before", "::after", "::marker", "::first-line", "::first-letter", "::backdrop"]; + + pseudo_elements.forEach((pseudo_element) => { + test(() => { + assert_equals(getComputedStyle(target, pseudo_element).fontSize, "0px"); + }, `Initial font-size for ${pseudo_element}`); + }); + + outer.style.width = "300px"; + + pseudo_elements.forEach((pseudo_element) => { + test(() => { + assert_equals(getComputedStyle(target, pseudo_element).fontSize, "30px"); + }, `font-size for ${pseudo_element} depending on container`); + }); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-overflow/table-header-group-overflow-crash.html b/tests/wpt/web-platform-tests/css/css-overflow/table-header-group-overflow-crash.html new file mode 100644 index 00000000000..1b0774129da --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-overflow/table-header-group-overflow-crash.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>Crash test: table-header-group with default overflow/clip margin</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + +<style type="text/css"> +*:last-child{ + display: table-header-group; +} +</style> + +<object> + <table> + <caption>Text</caption> + <tbody></tbody> + </table> +</object> diff --git a/tests/wpt/web-platform-tests/css/css-properties-values-api/at-property-animation.html b/tests/wpt/web-platform-tests/css/css-properties-values-api/at-property-animation.html index 89ed671fdf1..9f81ae846ef 100644 --- a/tests/wpt/web-platform-tests/css/css-properties-values-api/at-property-animation.html +++ b/tests/wpt/web-platform-tests/css/css-properties-values-api/at-property-animation.html @@ -258,7 +258,7 @@ test_with_at_property({ test(() => { let name = generate_name(); with_style_node(`div { ${name}: 100px; transition: ${name} steps(2, start) 100s; }`, () => { - assert_equals(getComputedStyle(div).getPropertyValue(name), ' 100px'); + assert_equals(getComputedStyle(div).getPropertyValue(name), '100px'); let style1 = document.createElement('style'); style1.textContent = ` @@ -287,7 +287,7 @@ test(() => { // (making the computed value a token sequence again). We should snap // to the new token sequence. style1.remove(); - assert_equals(getComputedStyle(div).getPropertyValue(name), ' 400px'); + assert_equals(getComputedStyle(div).getPropertyValue(name), '400px'); } finally { style1.remove(); style2.remove(); diff --git a/tests/wpt/web-platform-tests/css/css-properties-values-api/at-property-cssom.html b/tests/wpt/web-platform-tests/css/css-properties-values-api/at-property-cssom.html index bfcd05ac4e5..f7981f245af 100644 --- a/tests/wpt/web-platform-tests/css/css-properties-values-api/at-property-cssom.html +++ b/tests/wpt/web-platform-tests/css/css-properties-values-api/at-property-cssom.html @@ -180,18 +180,18 @@ test_inherits('--initial-value-only', false); // CSSPropertyRule.initialValue -test_initial_value('--valid', ' red'); -test_initial_value('--valid-reverse', ' 0px'); +test_initial_value('--valid', 'red'); +test_initial_value('--valid-reverse', '0px'); test_initial_value('--valid-universal', null); -test_initial_value('--valid-whitespace', ' red, blue'); -test_initial_value('--vALId', ' red'); +test_initial_value('--valid-whitespace', 'red, blue'); +test_initial_value('--vALId', 'red'); test_initial_value('--no-descriptors', null); -test_initial_value('--no-syntax', ' red'); -test_initial_value('--no-inherits', ' red'); +test_initial_value('--no-syntax', 'red'); +test_initial_value('--no-inherits', 'red'); test_initial_value('--no-initial-value', null); test_initial_value('--syntax-only', null); test_initial_value('--inherits-only', null); -test_initial_value('--initial-value-only', ' red'); +test_initial_value('--initial-value-only', 'red'); </script> diff --git a/tests/wpt/web-platform-tests/css/css-properties-values-api/at-property-shadow.html b/tests/wpt/web-platform-tests/css/css-properties-values-api/at-property-shadow.html index aaef2641a16..db282d10b0e 100644 --- a/tests/wpt/web-platform-tests/css/css-properties-values-api/at-property-shadow.html +++ b/tests/wpt/web-platform-tests/css/css-properties-values-api/at-property-shadow.html @@ -38,9 +38,9 @@ test(() => { root.append(template.content.cloneNode(true)); let inside = root.querySelector('#inside'); assert_equals(getComputedStyle(outside).getPropertyValue('--x'), '2px'); - assert_equals(getComputedStyle(outside).getPropertyValue('--y'), ' calc(1px + 1px)'); + assert_equals(getComputedStyle(outside).getPropertyValue('--y'), 'calc(1px + 1px)'); assert_equals(getComputedStyle(inside).getPropertyValue('--x'), '2px'); - assert_equals(getComputedStyle(inside).getPropertyValue('--y'), ' calc(1px + 1px)'); + assert_equals(getComputedStyle(inside).getPropertyValue('--y'), 'calc(1px + 1px)'); }, '@property rules in shadow trees should have no effect'); </script> diff --git a/tests/wpt/web-platform-tests/css/css-properties-values-api/determine-registration.html b/tests/wpt/web-platform-tests/css/css-properties-values-api/determine-registration.html index e6bbbec9640..20cddc48adc 100644 --- a/tests/wpt/web-platform-tests/css/css-properties-values-api/determine-registration.html +++ b/tests/wpt/web-platform-tests/css/css-properties-values-api/determine-registration.html @@ -101,7 +101,7 @@ test(() => { with_style_node(`div { ${name}: calc(1px + 1px); }`, () => { // ${name} should be a token sequence at this point. - assert_equals(getComputedStyle(div).getPropertyValue(name), ' calc(1px + 1px)'); + assert_equals(getComputedStyle(div).getPropertyValue(name), 'calc(1px + 1px)'); with_at_property({ name: name, @@ -114,7 +114,7 @@ test(() => { }); // ${name} should be a token sequence again. - assert_equals(getComputedStyle(div).getPropertyValue(name), ' calc(1px + 1px)'); + assert_equals(getComputedStyle(div).getPropertyValue(name), 'calc(1px + 1px)'); }); }, 'Computed value becomes token sequence when @property is removed'); @@ -122,7 +122,7 @@ test(() => { let name = generate_name(); with_style_node(`#outer { ${name}: 10px; }`, () => { - assert_equals(getComputedStyle(div).getPropertyValue(name), ' 10px'); + assert_equals(getComputedStyle(div).getPropertyValue(name), '10px'); with_at_property({ name: name, @@ -134,7 +134,7 @@ test(() => { assert_equals(getComputedStyle(div).getPropertyValue(name), '0px'); }); - assert_equals(getComputedStyle(div).getPropertyValue(name), ' 10px'); + assert_equals(getComputedStyle(div).getPropertyValue(name), '10px'); }); }, 'Inherited status is reflected in computed styles when @property is removed'); diff --git a/tests/wpt/web-platform-tests/css/css-properties-values-api/registered-property-cssom.html b/tests/wpt/web-platform-tests/css/css-properties-values-api/registered-property-cssom.html index d408fa98f9f..95c4c17b598 100644 --- a/tests/wpt/web-platform-tests/css/css-properties-values-api/registered-property-cssom.html +++ b/tests/wpt/web-platform-tests/css/css-properties-values-api/registered-property-cssom.html @@ -25,8 +25,8 @@ var sheetStyle = document.styleSheets[0].cssRules[0].style; test(function() { // Nothing registered yet, whatever you specify works - assert_equals(computedStyle.getPropertyValue('--length'), ' 10px'); - assert_equals(computedStyle.getPropertyValue('--color'), ' red'); + assert_equals(computedStyle.getPropertyValue('--length'), '10px'); + assert_equals(computedStyle.getPropertyValue('--color'), 'red'); inlineStyle.setProperty('--length', '5'); inlineStyle.setProperty('--color', 'hello'); diff --git a/tests/wpt/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html b/tests/wpt/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html index 050b5e2cf69..8adfb09666b 100644 --- a/tests/wpt/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html +++ b/tests/wpt/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html @@ -54,9 +54,9 @@ test(function() { assert_equals(computedStyle.getPropertyValue('--registered-length-5'), '70px'); assert_equals(computedStyle.getPropertyValue('--registered-length-6'), '80px'); assert_equals(computedStyle.getPropertyValue('--registered-length-7'), '123px'); - assert_equals(computedStyle.getPropertyValue('--length-1'), ' 20px'); - assert_equals(computedStyle.getPropertyValue('--length-2'), ' 10px'); - assert_equals(computedStyle.getPropertyValue('--length-3'), ' calc(123px + 123px)'); + assert_equals(computedStyle.getPropertyValue('--length-1'), '20px'); + assert_equals(computedStyle.getPropertyValue('--length-2'), '10px'); + assert_equals(computedStyle.getPropertyValue('--length-3'), 'calc(123px + 123px)'); assert_equals(computedStyle.getPropertyValue('--registered-length-invalid'), '15px'); assert_equals(computedStyle.getPropertyValue('--registered-token-stream-1'), ''); diff --git a/tests/wpt/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/background-repeat.html b/tests/wpt/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/background-repeat.html index bc50169c08c..a89e1f7c939 100644 --- a/tests/wpt/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/background-repeat.html +++ b/tests/wpt/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/background-repeat.html @@ -13,7 +13,7 @@ <script> 'use strict'; -runListValuedPropertyTests('background-position', [ +runListValuedPropertyTests('background-repeat', [ { syntax: 'repeat-x' }, { syntax: 'repeat-y' }, { syntax: 'repeat' }, @@ -22,7 +22,7 @@ runListValuedPropertyTests('background-position', [ { syntax: 'no-repeat' }, ]); -runUnsupportedPropertyTests('background-position', [ +runUnsupportedPropertyTests('background-repeat', [ 'space repeat' ]); diff --git a/tests/wpt/web-platform-tests/css/css-values/crashtests/viewport-unit-inline-style-crash.html b/tests/wpt/web-platform-tests/css/css-values/crashtests/viewport-unit-inline-style-crash.html new file mode 100644 index 00000000000..4c38e18781b --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-values/crashtests/viewport-unit-inline-style-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>Don't crash when setting viewport units on inline style</title> +<link rel="help" href="https://crbug.com/1402548"> +<div id="div"> + PASS if no crash +</div> +<script> + div.style.setProperty("margin-bottom", "1px"); + div.offsetTop; + div.style.setProperty("margin-bottom", "1vh"); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-values/negative-calc-to-non-negative-integer.html b/tests/wpt/web-platform-tests/css/css-values/negative-calc-to-non-negative-integer.html index b76859b352d..b38cb759ad8 100644 --- a/tests/wpt/web-platform-tests/css/css-values/negative-calc-to-non-negative-integer.html +++ b/tests/wpt/web-platform-tests/css/css-values/negative-calc-to-non-negative-integer.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org"> -<link rel="help" href="hhttps://drafts.csswg.org/css-values-4/#calc-range"> +<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-range"> <link rel="help" href="https://drafts.csswg.org/css-counter-styles/#the-counter-style-rule"> <link rel="match" href="negative-calc-to-non-negative-integer-ref.html"> <meta name="assert" content="Negative calc() passed to <non-negative-integer> property value as argument should be addressed properly."> diff --git a/tests/wpt/web-platform-tests/css/css-values/rex-invalidation.html b/tests/wpt/web-platform-tests/css/css-values/rex-invalidation.html new file mode 100644 index 00000000000..439106b54b2 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-values/rex-invalidation.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Values and Units Test: rex invalidation</title> +<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> +<link rel="help" href="https://drafts.csswg.org/css-values/#font-relative-lengths"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="assert" content="test rex invalidation"> +<style> + @import url("/fonts/ahem.css"); + html { + font-family: 'Ahem'; + font-size: 40px; + } + body { + font-family: monospace; + font-size: 20px; + } + div { + height: 10rex; + width: 10rex; + } +</style> + +<html> + <body> + <div id="div"></div> + </body> +</html> + +<script> + setup({ single_test: true }); + let old_width = div.getBoundingClientRect().width; + document.documentElement.style.fontFamily = "sans-serif"; + let new_width = div.getBoundingClientRect().width; + assert_not_equals(old_width, new_width, "expect the x-height of Ahem and sans-serif to be different"); + done(); +</script> diff --git a/tests/wpt/web-platform-tests/css/cssom-view/negativeMargins.html b/tests/wpt/web-platform-tests/css/cssom-view/negativeMargins.html index 0deb7ca623e..0616e8b4999 100644 --- a/tests/wpt/web-platform-tests/css/cssom-view/negativeMargins.html +++ b/tests/wpt/web-platform-tests/css/cssom-view/negativeMargins.html @@ -9,6 +9,7 @@ Hello </div> <script> + setup({explicit_done:true}); window.onload = function () { var outer = document.getElementById('outer'); var inner = document.getElementById('inner'); @@ -25,6 +26,7 @@ [inner, outer, document.body, document.querySelector('html')], "elementsFromPoint should get sequence [inner, outer, body, html]"); }); + done(); }; </script> </body> diff --git a/tests/wpt/web-platform-tests/css/mediaqueries/mq-negative-range-002.html b/tests/wpt/web-platform-tests/css/mediaqueries/mq-negative-range-002.html index d748b7cae0a..59a58a1d5c7 100644 --- a/tests/wpt/web-platform-tests/css/mediaqueries/mq-negative-range-002.html +++ b/tests/wpt/web-platform-tests/css/mediaqueries/mq-negative-range-002.html @@ -10,27 +10,27 @@ div { width: 100px; height: 100px; - background-color: green; + background-color: red; } @media - (max-width: -100px) + (not (max-width: -100px)) and - (max-height: -100px) + (not (max-height: -100px)) and - (max-resolution: -1dpi) + (not (max-resolution: -1dpi)) and - (max-color: -10) + (not (max-color: -10)) and - (max-color-index: -10) + (not (max-color-index: -10)) and - (max-monochrome: -10) + (not (max-monochrome: -10)) and - (max-device-width: -100px) + (not (max-device-width: -100px)) and - (max-device-height: -100px) + (not (max-device-height: -100px)) { - div { background-color: red; } + div { background-color: green; } } </style> |