summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/cssom
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/cssom')
-rw-r--r--testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable-insertRule-base-uri-ref.html5
-rw-r--r--testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable-insertRule-base-uri.html17
-rw-r--r--testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable-invalidation.html49
-rw-r--r--testing/web-platform/tests/css/cssom/getComputedStyle-pseudo-with-argument.html64
4 files changed, 135 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable-insertRule-base-uri-ref.html b/testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable-insertRule-base-uri-ref.html
new file mode 100644
index 0000000000..2696593a45
--- /dev/null
+++ b/testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable-insertRule-base-uri-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<style>
+:root { background-color: lime }
+</style>
diff --git a/testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable-insertRule-base-uri.html b/testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable-insertRule-base-uri.html
new file mode 100644
index 0000000000..22f298a34e
--- /dev/null
+++ b/testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable-insertRule-base-uri.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSStyleSheet.insertRule() on a constructable stylesheet uses the right base uri, even if replace/Sync() hasn't been called yet</title>
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="help" href="https://drafts.csswg.org/cssom/">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1880718">
+<link rel="match" href="CSSStyleSheet-constructable-insertRule-base-uri-ref.html">
+<script>
+ const sheet = new CSSStyleSheet();
+ sheet.insertRule(`
+ :root {
+ background-image: url("../../images/green.png");
+ }
+ `);
+ document.adoptedStyleSheets.push(sheet);
+</script>
diff --git a/testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable-invalidation.html b/testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable-invalidation.html
new file mode 100644
index 0000000000..f63abaa80c
--- /dev/null
+++ b/testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable-invalidation.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSStyleSheet rule mutation invalidation</title>
+<link rel="author" href="mailto:wpt@keithcirkel.co.uk" title="Keith Cirkel">
+<link rel="help" href="https://drafts.csswg.org/cssom/#extensions-to-the-document-or-shadow-root-interface">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<span id="span1">Should be green.</span>
+<span id="span2">Should be green.</span>
+<script>
+promise_test(async function(t) {
+ const sheet = new CSSStyleSheet();
+ sheet.replaceSync('span {color:var(--color, red);}');
+ document.adoptedStyleSheets = [sheet];
+ t.add_cleanup(() => {
+ document.adoptedStyleSheets = [];
+ })
+ assert_equals(getComputedStyle(span1).color, "rgb(255, 0, 0)", "Sheet should apply");
+ sheet.rules[0].style.setProperty('--color', 'green');
+ assert_equals(getComputedStyle(span1).color, "rgb(0, 128, 0)", "Sheet should invalidate style");
+ document.adoptedStyleSheets = [];
+ assert_equals(getComputedStyle(span1).color, "rgb(0, 0, 0)", "Removing sheet should apply");
+}, "mutating constructed CSSStyleSheet applied to root invalidates styles");
+
+promise_test(async function() {
+ span1.attachShadow({mode:'open'})
+ span1.shadowRoot.append(document.createElement('slot'))
+ const sheet = new CSSStyleSheet();
+ sheet.replaceSync(':host {color:var(--color, red);}');
+ span1.shadowRoot.adoptedStyleSheets = [sheet];
+ assert_equals(getComputedStyle(span1).color, "rgb(255, 0, 0)", "Sheet should apply");
+ sheet.rules[0].style.setProperty('--color', 'green');
+ assert_equals(getComputedStyle(span1).color, "rgb(0, 128, 0)", "Sheet should invalidate style");
+}, "mutating constructed CSSStyleSheet applied to shadowdom invalidates styles");
+
+promise_test(async function() {
+ span2.attachShadow({mode:'open'})
+ span2.shadowRoot.append(document.createElement('slot'))
+ const sheet1 = new CSSStyleSheet();
+ const sheet2 = new CSSStyleSheet();
+ sheet1.replaceSync(':host {color:var(--color, hotpink);}');
+ sheet2.replaceSync(':host {--color: blue}');
+ const style2 = sheet2.rules[0].style;
+ span2.shadowRoot.adoptedStyleSheets = [sheet1, sheet2];
+ assert_equals(getComputedStyle(span2).color, "rgb(0, 0, 255)", "Sheet should apply");
+ style2.setProperty('--color', 'green');
+ assert_equals(getComputedStyle(span2).color, "rgb(0, 128, 0)", "Sheet should invalidate style");
+}, "mutating dependent constructed CSSStyleSheet applied to shadowdom invalidates styles");
+</script>
diff --git a/testing/web-platform/tests/css/cssom/getComputedStyle-pseudo-with-argument.html b/testing/web-platform/tests/css/cssom/getComputedStyle-pseudo-with-argument.html
new file mode 100644
index 0000000000..bc23ad180b
--- /dev/null
+++ b/testing/web-platform/tests/css/cssom/getComputedStyle-pseudo-with-argument.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSOM: Handling pseudo-elements with arguments</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<link rel=help href=https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle>
+<style>
+#pseudo-invalid::highlight(name) {
+ color: rgb(0, 128, 0);
+}
+#pseudo-invalid::view-transition-image-pair(name) {
+ color: rgb(0, 128, 0);
+}
+#pseudo-invalid::view-transition-group(name) {
+ color: rgb(0, 128, 0);
+}
+#pseudo-invalid::view-transition-old(name) {
+ color: rgb(0, 128, 0);
+}
+#pseudo-invalid::view-transition-new(name) {
+ color: rgb(0, 128, 0);
+}
+</style>
+<ul><li id="pseudo-invalid">Item</li></ul>
+<script>
+[
+ "::before(test)",
+ "::highlight",
+ "::highlight(",
+ "::highlight()",
+ "::highlight(1)",
+ "::highlight($)",
+ "::highlight (name)",
+ "::highlight(name)a",
+ ":highlight(name)",
+ "::view-transition-group(*)",
+ "::view-transition-image-pair(*)",
+ "::view-transition-old(*)",
+ "::view-transition-new(*)",
+ ":view-transition-group(name)",
+ ":view-transition-image-pair(name)",
+ ":view-transition-old(name)",
+ ":view-transition-new(name)",
+].forEach(nonParsablePseudoIdentifier => {
+ test(() => {
+ const li = document.querySelector('li');
+ assert_equals(getComputedStyle(li, nonParsablePseudoIdentifier).length, 0);
+ }, `This pseudo-element should not parse: ${nonParsablePseudoIdentifier}`)
+});
+
+[
+ "::highlight(name)",
+ "::highlight(\nname",
+ "::highlight(name\t",
+ "::highlight( name ",
+ "::highlight( n\\61me )"
+].forEach(parsablePseudoIdentifier => {
+ test(() => {
+ const li = document.querySelector('li');
+ assert_true(getComputedStyle(li, parsablePseudoIdentifier).length != 0);
+ assert_equals(getComputedStyle(li, parsablePseudoIdentifier).color, "rgb(0, 128, 0)");
+ }, `This pseudo-element should parse: ${parsablePseudoIdentifier}`);
+});
+</script>