diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-upstream.tar.xz firefox-esr-upstream.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting')
11 files changed, 197 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/conditionally-block-rendering-on-link-media-attr.html b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/conditionally-block-rendering-on-link-media-attr.html new file mode 100644 index 0000000000..d21df46d30 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/conditionally-block-rendering-on-link-media-attr.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src="support/utils.js"></script> + +<link rel=stylesheet href=stylesheet.py> +<link rel=stylesheet media="screen and (max-width:10px)" href=stylesheet.py?stylesNotMatchingEnvironment&delay=2> +<h1>Dominic Farolino</h1> +<script> + test(() => { + const h1 = document.querySelector('h1'); + const computedColor = getComputedStyle(h1).color; + const expectedColor = "rgb(128, 0, 128)"; + + assert_equals(computedColor, expectedColor); + assert_true(styleExists("h1 { color: purple; }")); // first style sheet + assert_false(styleExists("h1 { color: brown; }")); // second style sheet (should not be loaded yet) + }, "Only the style sheet loaded via a link element whose media attribute matches the environment should block following script execution"); + + const secondStylesheetTest = async_test("Both style sheets loaded via the link elements should be registered as style sheets for the document after 2 seconds"); + secondStylesheetTest.step_timeout(() => { + assert_true(styleExists("h1 { color: purple; }")); // first style sheet + assert_true(styleExists("h1 { color: brown; }")); // second style sheet (loaded now!) + secondStylesheetTest.done(); + }, 3000); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/dynamic-render-blocking-link-stylesheet-does-not-block-script.html b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/dynamic-render-blocking-link-stylesheet-does-not-block-script.html new file mode 100644 index 0000000000..bcc98050ac --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/dynamic-render-blocking-link-stylesheet-does-not-block-script.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>Script-created render-blocking link stylesheet is not script-blocking</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/utils.js"></script> +<script> +const link = document.createElement('link'); +link.rel = 'stylesheet'; +link.href = 'stylesheet.py?delay=1'; +link.blocking = 'render'; +document.head.appendChild(link); +</script> +<h1>Some text</h1> +<script> +test(() => { + assert_false(styleExists("h1 { color: purple; }"), + 'stylesheet should still be pending'); + const h1 = document.querySelector('h1'); + assert_equals(getComputedStyle(h1).color, 'rgb(0, 0, 0)'); +}); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/dynamic-render-blocking-style-element-does-not-block-script.html b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/dynamic-render-blocking-style-element-does-not-block-script.html new file mode 100644 index 0000000000..9a8c4b466b --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/dynamic-render-blocking-style-element-does-not-block-script.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>Script-created render-blocking style element is not script-blocking</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/utils.js"></script> +<script> +const style = document.createElement('style'); +const sheet = document.createTextNode('@import url(stylesheet.py?delay=1);'); +style.appendChild(sheet); +style.blocking = 'render'; +document.head.appendChild(style); +</script> +<h1>Some text</h1> +<script> +test(() => { + assert_false(styleExists("h1 { color: purple; }"), + 'stylesheet should still be pending'); + const h1 = document.querySelector('h1'); + assert_equals(getComputedStyle(h1).color, 'rgb(0, 0, 0)'); +}); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/link-stylesheet-with-non-match-media-does-not-block-render.tentative.html b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/link-stylesheet-with-non-match-media-does-not-block-render.tentative.html new file mode 100644 index 0000000000..7a881bcc3d --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/link-stylesheet-with-non-match-media-does-not-block-render.tentative.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title> + Delayed Stylesheet imported using link tag should not block rendering + or JS execution when media doesn't match. +</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/utils.js"></script> +<link rel="stylesheet" href="support/link-style.css?pipe=trickle(d1)" + media="print" onload="this.media='all'"> +<h1> + This text is black in color till stylesheet is fetched. +</h1> +<script> +test(() => { + assert_false(styleExists("h1 { color: purple; }"), + 'Stylesheet should still be pending due to delay'); + const h1 = document.querySelector('h1'); + assert_equals(getComputedStyle(h1).color, 'rgb(0, 0, 0)'); +}); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/script-created-link-stylesheet-does-not-block-script.html b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/script-created-link-stylesheet-does-not-block-script.html new file mode 100644 index 0000000000..2c27bd32f9 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/script-created-link-stylesheet-does-not-block-script.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>Script-created link stylesheet is not script-blocking</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/utils.js"></script> +<script> +const link = document.createElement('link'); +link.rel = 'stylesheet'; +link.href = 'stylesheet.py?delay=1'; +document.head.appendChild(link); +</script> +<h1>Some text</h1> +<script> +test(() => { + assert_false(styleExists("h1 { color: purple; }"), + 'stylesheet should still be pending'); + const h1 = document.querySelector('h1'); + assert_equals(getComputedStyle(h1).color, 'rgb(0, 0, 0)'); +}); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/script-created-style-element-does-not-block-script.html b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/script-created-style-element-does-not-block-script.html new file mode 100644 index 0000000000..f04c3f668f --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/script-created-style-element-does-not-block-script.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>Script-created style element is not script-blocking</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/utils.js"></script> +<script> +const style = document.createElement('style'); +const sheet = document.createTextNode('@import url(stylesheet.py?delay=1);'); +style.appendChild(sheet); +document.head.appendChild(style); +</script> +<h1>Some text</h1> +<script> +test(() => { + assert_false(styleExists("h1 { color: purple; }"), + 'stylesheet should still be pending'); + const h1 = document.querySelector('h1'); + assert_equals(getComputedStyle(h1).color, 'rgb(0, 0, 0)'); +}); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/style-element-media-match-block-script.html b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/style-element-media-match-block-script.html new file mode 100644 index 0000000000..17adfc1728 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/style-element-media-match-block-script.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>Style element is script-blocking when media matches</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/utils.js"></script> +<style> +@import url('stylesheet.py?delay=1'); +</style> +<h1>Some text</h1> +<script> +test(() => { + assert_true(styleExists("h1 { color: purple; }"), + 'script should be blocked until the stylesheet is loaded'); + const h1 = document.querySelector('h1'); + assert_equals(getComputedStyle(h1).color, 'rgb(128, 0, 128)'); +}); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/style-element-media-not-match-does-not-block-script.html b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/style-element-media-not-match-does-not-block-script.html new file mode 100644 index 0000000000..c05b6ed945 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/style-element-media-not-match-does-not-block-script.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>Style element is not script-blocking when media doesn't match</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/utils.js"></script> +<style media="print"> +@import url('stylesheet.py?delay=1'); +</style> +<h1>Some text</h1> +<script> +test(() => { + assert_false(styleExists("h1 { color: purple; }"), + 'stylesheet should still be pending'); + const h1 = document.querySelector('h1'); + assert_equals(getComputedStyle(h1).color, 'rgb(0, 0, 0)'); +}); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/stylesheet.py b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/stylesheet.py new file mode 100644 index 0000000000..d5ae5b9cca --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/stylesheet.py @@ -0,0 +1,10 @@ +from time import sleep +def main(request, response): + if b"delay" in request.GET: + delay = int(request.GET[b"delay"]) + sleep(delay) + + if b"stylesNotMatchingEnvironment" in request.GET: + return u'h1 {color: brown;}' + else: + return u'h1 {color: purple;}' diff --git a/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/support/link-style.css b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/support/link-style.css new file mode 100644 index 0000000000..1024df8792 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/support/link-style.css @@ -0,0 +1,3 @@ +h1 { + color: purple; +} diff --git a/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/support/utils.js b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/support/utils.js new file mode 100644 index 0000000000..02d3a095cd --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/support/utils.js @@ -0,0 +1,20 @@ +function styleExistsInSheet(styleText, sheet) { + for (let rule of sheet.cssRules) { + if (styleText == rule.cssText) + return true; + if (rule instanceof CSSImportRule) { + if (rule.styleSheet && styleExistsInSheet(styleText, rule.styleSheet)) + return true; + } + } + return false; +} + +function styleExists(styleText) { + for (let sheet of document.styleSheets) { + if (styleExistsInSheet(styleText, sheet)) + return true; + } + return false; +} + |