diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:14:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:14:29 +0000 |
| commit | fbaf0bb26397aa498eb9156f06d5a6fe34dd7dd8 (patch) | |
| tree | 4c1ccaf5486d4f2009f9a338a98a83e886e29c97 /testing/web-platform/tests/css/css-scoping | |
| parent | Releasing progress-linux version 124.0.1-1~progress7.99u1. (diff) | |
| download | firefox-fbaf0bb26397aa498eb9156f06d5a6fe34dd7dd8.tar.xz firefox-fbaf0bb26397aa498eb9156f06d5a6fe34dd7dd8.zip | |
Merging upstream version 125.0.1.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-scoping')
11 files changed, 287 insertions, 11 deletions
diff --git a/testing/web-platform/tests/css/css-scoping/font-face-001.html b/testing/web-platform/tests/css/css-scoping/font-face-001.html new file mode 100644 index 0000000000..7e47d18cba --- /dev/null +++ b/testing/web-platform/tests/css/css-scoping/font-face-001.html @@ -0,0 +1,33 @@ +<!doctype html> +<title>CSS Test: @font-face applies in the shadow tree.</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"> +<link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names"> + +<style> +#in-document { + font-family: ff-16-wide; +} +</style> +<div id="host"><span id="in-document">1234567890</span></div> +<script> +test(function() { + host.attachShadow({ mode: "open" }).innerHTML = ` + <style> + @font-face { + font-family: ff-16-wide; + src: url(/fonts/Ahem.ttf); + } + #in-shadow { + font-family: ff-16-wide; + } + </style> + <slot></slot> + <span id="in-shadow">0123456789</span> + `; + + assert_not_equals(document.getElementById('in-document').offsetWidth, 160); + assert_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160); +}, "@font-face applies in the shadow tree") +</script> diff --git a/testing/web-platform/tests/css/css-scoping/font-face-002.html b/testing/web-platform/tests/css/css-scoping/font-face-002.html new file mode 100644 index 0000000000..2e3272c44f --- /dev/null +++ b/testing/web-platform/tests/css/css-scoping/font-face-002.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>CSS Test: @font-face from the document applies in the shadow tree.</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"> +<link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names"> + +<style> +@font-face { + font-family: ff-16-wide; + src: url(/fonts/Ahem.ttf); +} +</style> +<div id="host"><span id="in-document">1234567890</span></div> +<script> +test(function() { + host.attachShadow({ mode: "open" }).innerHTML = ` + <style> + #in-shadow { + font-family: ff-16-wide; + } + </style> + <slot></slot> + <span id="in-shadow">0123456789</span> + `; + + assert_not_equals(document.getElementById('in-document').offsetWidth, 160); + assert_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160); +}, "@font-face from the document applies in the shadow tree"); +</script> diff --git a/testing/web-platform/tests/css/css-scoping/font-face-003.html b/testing/web-platform/tests/css/css-scoping/font-face-003.html new file mode 100644 index 0000000000..d3f83e4ec3 --- /dev/null +++ b/testing/web-platform/tests/css/css-scoping/font-face-003.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>CSS Test: @font-face from document applies to :host.</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"> +<link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names"> + +<style> +@font-face { + font-family: ff-16-wide; + src: url(/fonts/Ahem.ttf); +} +</style> +<div id="host"><span id="in-document">1234567890</span></div> +<script> +test(function() { + host.attachShadow({ mode: "open" }).innerHTML = ` + <style> + :host { + font-family: ff-16-wide; + } + </style> + <slot></slot> + <span id="in-shadow">0123456789</span> + `; + + assert_equals(document.getElementById('in-document').offsetWidth, 160); + assert_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160); +}, "@font-face from document applies to :host"); +</script> diff --git a/testing/web-platform/tests/css/css-scoping/font-face-004.html b/testing/web-platform/tests/css/css-scoping/font-face-004.html new file mode 100644 index 0000000000..6ac50bd432 --- /dev/null +++ b/testing/web-platform/tests/css/css-scoping/font-face-004.html @@ -0,0 +1,31 @@ + +<!doctype html> +<title>CSS Test: @font-face from document applies to ::slotted.</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"> +<link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names"> + +<style> +@font-face { + font-family: ff-16-wide; + src: url(/fonts/Ahem.ttf); +} +</style> +<div id="host"><span id="in-document">1234567890</span></div> +<script> +test(function() { + host.attachShadow({ mode: "open" }).innerHTML = ` + <style> + ::slotted(#in-document) { + font-family: ff-16-wide; + } + </style> + <slot></slot> + <span id="in-shadow">0123456789</span> + `; + + assert_equals(document.getElementById('in-document').offsetWidth, 160); + assert_not_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160); +}, "@font-face from document applies to a slotted element"); +</script> diff --git a/testing/web-platform/tests/css/css-scoping/font-face-005.html b/testing/web-platform/tests/css/css-scoping/font-face-005.html new file mode 100644 index 0000000000..fdf86fb56e --- /dev/null +++ b/testing/web-platform/tests/css/css-scoping/font-face-005.html @@ -0,0 +1,33 @@ +<!doctype html> +<title>CSS Test: @font-face should not leak out of shadow tree.</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"> +<link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names"> + +<style> + #in-document { + font-family: ff-16-wide; + } +</style> +<div id="host"><span id="in-document">1234567890</span></div> +<script> +test(function() { + host.attachShadow({ mode: "open" }).innerHTML = ` + <style> + @font-face { + font-family: ff-16-wide; + src: url(/fonts/Ahem.ttf); + } + #in-shadow { + font-family: ff-16-wide; + } + </style> + <slot></slot> + <span id="in-shadow">0123456789</span> + `; + + assert_not_equals(document.getElementById('in-document').offsetWidth, 160); + assert_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160); +}, "@font-face should not leak out of shadow tree."); +</script> diff --git a/testing/web-platform/tests/css/css-scoping/font-face-006.html b/testing/web-platform/tests/css/css-scoping/font-face-006.html new file mode 100644 index 0000000000..5eabe6ab76 --- /dev/null +++ b/testing/web-platform/tests/css/css-scoping/font-face-006.html @@ -0,0 +1,34 @@ +<!doctype html> +<title>CSS Test: @font-face from document applies to :host::before/::after.</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"> +<link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names"> + +<style> +@font-face { + font-family: ff-16-wide; + src: url(/fonts/Ahem.ttf); +} +#host { + float: left; +} +</style> +<div id="host"></div> +<script> +test(function() { + host.attachShadow({ mode: "open" }).innerHTML = ` + <style> + :host::before, :host::after { + font-family: ff-16-wide; + content: "12345" + } + </style> + <slot></slot> + `; + + //shrinkwrapped size for a default font will be a bit more than 80-90 + //if the font is applied, it will be a bit more than 160 + assert_greater_than(document.getElementById('host').offsetWidth, 160); +}, "@font-face from document applies to to :host::before/::after."); +</script> diff --git a/testing/web-platform/tests/css/css-scoping/font-face-007.html b/testing/web-platform/tests/css/css-scoping/font-face-007.html new file mode 100644 index 0000000000..ae669f638f --- /dev/null +++ b/testing/web-platform/tests/css/css-scoping/font-face-007.html @@ -0,0 +1,28 @@ +<!doctype html> +<title>CSS Test: @font-face from shadow applies to :host.</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"> +<link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names"> + +<div id="host"><span id="in-document">1234567890</span></div> +<script> +test(function() { + host.attachShadow({ mode: "open" }).innerHTML = ` + <style> + @font-face { + font-family: ff-16-wide; + src: url(/fonts/Ahem.ttf); + } + :host { + font-family: ff-16-wide; + } + </style> + <slot></slot> + <span id="in-shadow">0123456789</span> + `; + + assert_equals(document.getElementById('in-document').offsetWidth, 160); + assert_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160); +}, "@font-face from shadow applies to :host"); +</script> diff --git a/testing/web-platform/tests/css/css-scoping/font-face-008.html b/testing/web-platform/tests/css/css-scoping/font-face-008.html new file mode 100644 index 0000000000..a40b0247d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-scoping/font-face-008.html @@ -0,0 +1,29 @@ + +<!doctype html> +<title>CSS Test: @font-face from shadow applies to ::slotted.</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"> +<link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names"> + +<div id="host"><span id="in-document">1234567890</span></div> +<script> +test(function() { + host.attachShadow({ mode: "open" }).innerHTML = ` + <style> + @font-face { + font-family: ff-16-wide; + src: url(/fonts/Ahem.ttf); + } + ::slotted(#in-document) { + font-family: ff-16-wide; + } + </style> + <slot></slot> + <span id="in-shadow">0123456789</span> + `; + + assert_equals(document.getElementById('in-document').offsetWidth, 160); + assert_not_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160); +}, "@font-face from shadow applies to a slotted element"); +</script> diff --git a/testing/web-platform/tests/css/css-scoping/font-face-009.html b/testing/web-platform/tests/css/css-scoping/font-face-009.html new file mode 100644 index 0000000000..5d770929ca --- /dev/null +++ b/testing/web-platform/tests/css/css-scoping/font-face-009.html @@ -0,0 +1,34 @@ +<!doctype html> +<title>CSS Test: @font-face from shadow applies to :host::before/::after.</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"> +<link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names"> + +<style> +#host { + float: left; +} +</style> +<div id="host"></div> +<script> +test(function() { + host.attachShadow({ mode: "open" }).innerHTML = ` + <style> + @font-face { + font-family: ff-16-wide; + src: url(/fonts/Ahem.ttf); + } + :host::before, :host::after { + font-family: ff-16-wide; + content: "12345" + } + </style> + <slot></slot> + `; + + //shrinkwrapped size for a default font will be a bit more than 80-90 + //if the font is applied, it will be a bit more than 160 + assert_greater_than(document.getElementById('host').offsetWidth, 160); +}, "@font-face from shadow applies to to :host::before/::after."); +</script> diff --git a/testing/web-platform/tests/css/css-scoping/keyframes-001.html b/testing/web-platform/tests/css/css-scoping/keyframes-001.html index b0a95ac686..56f0f32dcf 100644 --- a/testing/web-platform/tests/css/css-scoping/keyframes-001.html +++ b/testing/web-platform/tests/css/css-scoping/keyframes-001.html @@ -4,10 +4,7 @@ <script src="/resources/testharnessreport.js"></script> <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> <link rel="help" href="https://drafts.csswg.org/css-scoping/#selectors-data-model"> -<!-- - Beware of https://github.com/w3c/csswg-drafts/issues/1995 potentially, but - unlikely, changing the expected result of this test. ---> + <style> #in-document { width: 100px; diff --git a/testing/web-platform/tests/css/css-scoping/keyframes-002.html b/testing/web-platform/tests/css/css-scoping/keyframes-002.html index b80b250460..347adcb0f5 100644 --- a/testing/web-platform/tests/css/css-scoping/keyframes-002.html +++ b/testing/web-platform/tests/css/css-scoping/keyframes-002.html @@ -1,13 +1,10 @@ <!doctype html> -<title>CSS Test: @keyframes from the document don't apply in the shadow tree.</title> +<title>CSS Test: @keyframes from the document should apply in the shadow tree.</title> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> <link rel="help" href="https://drafts.csswg.org/css-scoping/#selectors-data-model"> -<!-- - Beware of https://github.com/w3c/csswg-drafts/issues/1995 potentially, but - unlikely, changing the expected result of this test. ---> + <style> @keyframes myanim { from { background: red; } @@ -29,6 +26,6 @@ test(function() { <div id="in-shadow"></div> `; - assert_equals(host.shadowRoot.getElementById('in-shadow').getAnimations().length, 0); -}, "@keyframes from the document don't apply in the shadow tree"); + assert_equals(host.shadowRoot.getElementById('in-shadow').getAnimations().length, 1); +}, "@keyframes from the document should apply in the shadow tree"); </script> |