WPT synchronize css/cssom

https://bugs.webkit.org/show_bug.cgi?id=266876 Reviewed by Tim Nguyen. Up to and including web-platform-tests/wpt#43788. * LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSConditionRule-conditionText-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSConditionRule-conditionText.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-concat-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-concat-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-concat.html: * LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-replace-cssRules-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-replace-cssRules.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/cssom/cssstyledeclaration-csstext-all-shorthand-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/cssom/cssstyledeclaration-csstext-all-shorthand.html: * LayoutTests/imported/w3c/web-platform-tests/css/cssom/getComputedStyle-pseudo-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/cssom/getComputedStyle-pseudo.html: * LayoutTests/imported/w3c/web-platform-tests/css/cssom/w3c-import.log: Canonical link: https://commits.webkit.org/272497@main
WebKit · Dec 25, 2023 · 4692c7c · 4692c7c
1 parent 5ce1686
commit 4692c7c
Show file tree

Hide file tree

Showing 12 changed files with 213 additions and 20 deletions.
diff --git a/...sts/imported/w3c/web-platform-tests/css/cssom/CSSConditionRule-conditionText-expected.txt b/...sts/imported/w3c/web-platform-tests/css/cssom/CSSConditionRule-conditionText-expected.txt
@@ -0,0 +1,3 @@
+
+PASS CSSConditionRule.conditionText
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSConditionRule-conditionText.html b/LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSConditionRule-conditionText.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<title>CSSConditionRule.conditionText</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.csswg.org/css-conditional-3/#cssconditionrule">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+@media not all {
+  :root { color: lime }
+}
+</style>
+<script>
+test(function(t) {
+  let rule = document.styleSheets[0].cssRules[0];
+  assert_true(rule instanceof CSSConditionRule);
+  assert_equals(rule.conditionText, "not all");
+  rule.conditionText = 1;
+  assert_equals(rule.conditionText, "not all");
+  rule.conditionText = "all";
+  assert_equals(rule.conditionText, "not all");
+  assert_not_equals(getComputedStyle(document.documentElement).color, "rgb(0, 255, 0)");
+});
+</script>
diff --git a/...mported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-concat-expected.html b/...mported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-concat-expected.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Adoptedstylesheets.concat should work when starting empty</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+<span>This should be green</span><br>
+<span>This should be green</span>
+<pre>Tests:
+PASS
+PASS
+PASS
+PASS
+</pre>
+
+<style>
+  span {
+    background-color:green;
+  }
+</style>
diff --git a/...sts/imported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-concat-ref.html b/...sts/imported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-concat-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Adoptedstylesheets.concat should work when starting empty</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+<span>This should be green</span><br>
+<span>This should be green</span>
+<pre>Tests:
+PASS
+PASS
+PASS
+PASS
+</pre>
+
+<style>
+  span {
+    background-color:green;
+  }
+</style>
diff --git a/...utTests/imported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-concat.html b/...utTests/imported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-concat.html
@@ -1,17 +1,22 @@
 <!DOCTYPE html>
+<html class="reftest-wait">
 <meta charset="utf-8">
 <title>Adoptedstylesheets.concat should work when starting empty</title>
 <link rel="author" href="mailto:masonf@chromium.org">
 <link rel="help" href="https://drafts.csswg.org/cssom/#extensions-to-the-document-or-shadow-root-interface">
 <link rel="match" href="CSSStyleSheet-constructable-concat-ref.html">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
 
 <span>This should be green</span>
 <div id=host></div>
+<pre id=tests>Tests:
+</pre>
 
 <script>
-test(function() {
+function assert_equals(val1,val2) {
+  const t = val1 === val2 ? 'PASS' : `FAIL! ${val1} !== ${val2}`;
+  tests.appendChild(document.createTextNode(`${t}\n`));
+}
+window.onload = () => {
   const sheet = new CSSStyleSheet();
   sheet.replaceSync('span {background-color:green;}');
   assert_equals(document.adoptedStyleSheets.length,0);
@@ -24,5 +29,6 @@
   assert_equals(shadow.adoptedStyleSheets.length,0);
   shadow.adoptedStyleSheets = shadow.adoptedStyleSheets.concat([sheet]);
   assert_equals(shadow.adoptedStyleSheets.length,1);
-}, "adoptedStyleSheets should allow .concat on empty starting values");
+  document.documentElement.classList.remove("reftest-wait");
+};
 </script>
diff --git a/...3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-replace-cssRules-expected.txt b/...3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-replace-cssRules-expected.txt
@@ -0,0 +1,4 @@
+
+PASS cssRules tests (sync: true)
+PASS cssRules tests (sync: false)
+
diff --git a/...ported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-replace-cssRules.html b/...ported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-replace-cssRules.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSStyleSheet.replace reflects the right cssRules.</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1864815">
+<link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstylesheet-replace">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<p></p>
+<script>
+async function runTest(sync) {
+  let sheet = new CSSStyleSheet();
+  let rules = sheet.cssRules;
+  function replace(text) {
+    return sync ? sheet.replaceSync(text) : sheet.replace(text);
+  }
+  function assert_color(color) {
+    assert_equals(sheet.cssRules, rules, "StyleSheet.cssRules is [SameObject]");
+    assert_equals(rules.length, 1, "Should have one rule");
+    assert_equals(rules[0].style.color, color, "Should be the right css rule");
+  }
+  async function replace_and_test(color) {
+    await replace(`p { color: ${color} }`);
+    assert_equals(sheet.cssRules, rules, "StyleSheet.cssRules is [SameObject]");
+    assert_equals(rules.length, 1, "Should have one rule");
+    assert_equals(rules[0].style.color, color, "Should be the right css rule");
+  }
+
+  await replace_and_test("red");
+  await replace_and_test("green");
+  document.adoptedStyleSheets.push(sheet);
+  assert_equals(getComputedStyle(document.querySelector("p")).color, "rgb(0, 128, 0)", "Sheet should apply");
+  document.adoptedStyleSheets.pop(sheet);
+  assert_not_equals(getComputedStyle(document.querySelector("p")).color, "rgb(0, 128, 0)", "Sheet should stop applying");
+}
+
+for (let sync of [true, false]) {
+  promise_test(() => runTest(sync), `cssRules tests (sync: ${sync})`);
+}
+</script>
diff --git a/...d/w3c/web-platform-tests/css/cssom/cssstyledeclaration-csstext-all-shorthand-expected.txt b/...d/w3c/web-platform-tests/css/cssom/cssstyledeclaration-csstext-all-shorthand-expected.txt
@@ -4,4 +4,5 @@ PASS 'all' shorthand with 'width' and 'height'
 PASS 'all' shorthand with 'direction' and 'unicode-bidi'
 PASS 'all' shorthand with 'width', 'height' and custom properties
 PASS 'all' shorthand with all longhands
+PASS all:initial should not exclude custom from cssText
 
diff --git a/.../imported/w3c/web-platform-tests/css/cssom/cssstyledeclaration-csstext-all-shorthand.html b/.../imported/w3c/web-platform-tests/css/cssom/cssstyledeclaration-csstext-all-shorthand.html
@@ -35,4 +35,9 @@
   style.cssText = cssText;
   assert_equals(style.cssText, "all: inherit; direction: inherit; unicode-bidi: inherit;");
 }, "'all' shorthand with all longhands");
+
+test(function() {
+  style.cssText = "--foo: bar; all: initial";
+  assert_true(style.cssText.includes("--foo: bar"), "cssText serialization includes custom property");
+}, "all:initial should not exclude custom from cssText");
 </script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/cssom/getComputedStyle-pseudo-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/cssom/getComputedStyle-pseudo-expected.txt
@@ -1,6 +1,7 @@
 Item
 
 PASS Resolution of width is correct for ::before and ::after pseudo-elements
+FAIL Pseudo-elements can use the full range of CSS syntax assert_equals: expected "50px" but got "100px"
 PASS Resolution of width is correct for ::before and ::after pseudo-elements of display: contents elements
 PASS Resolution of nonexistent pseudo-element styles
 PASS Resolution of pseudo-element styles in display: none elements
@@ -9,5 +10,16 @@ FAIL Item-based blockification of nonexistent pseudo-elements assert_equals: Pse
 PASS display: contents on pseudo-elements
 PASS Dynamically change to display: contents on pseudo-elements
 FAIL Unknown pseudo-elements assert_true: Should return an empty style for unknown pseudo-elements starting with double-colon expected true got false
-FAIL Unknown pseudo-element with a known string (ex: marker) assert_true: Should return an empty style for :marker expected true got false
+FAIL Unknown pseudo-element with a known identifier: backdrop assert_true: Should return an empty style for :backdrop expected true got false
+FAIL Unknown pseudo-element with a known identifier: file-selector-button assert_true: Should return an empty style for :file-selector-button expected true got false
+FAIL Unknown pseudo-element with a known identifier: grammar-error assert_true: Should return an empty style for :grammar-error expected true got false
+FAIL Unknown pseudo-element with a known identifier: highlight(name) assert_true: Should return an empty style for :highlight(name) expected true got false
+FAIL Unknown pseudo-element with a known identifier: marker assert_true: Should return an empty style for :marker expected true got false
+FAIL Unknown pseudo-element with a known identifier: placeholder assert_true: Should return an empty style for :placeholder expected true got false
+FAIL Unknown pseudo-element with a known identifier: spelling-error assert_true: Should return an empty style for :spelling-error expected true got false
+FAIL Unknown pseudo-element with a known identifier: view-transition assert_true: Should return an empty style for :view-transition expected true got false
+FAIL Unknown pseudo-element with a known identifier: view-transition-image-pair(name) assert_true: Should return an empty style for :view-transition-image-pair(name) expected true got false
+FAIL Unknown pseudo-element with a known identifier: view-transition-group(name) assert_true: Should return an empty style for :view-transition-group(name) expected true got false
+FAIL Unknown pseudo-element with a known identifier: view-transition-old(name) assert_true: Should return an empty style for :view-transition-old(name) expected true got false
+FAIL Unknown pseudo-element with a known identifier: view-transition-new(name) assert_true: Should return an empty style for :view-transition-new(name) expected true got false
 
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/cssom/getComputedStyle-pseudo.html b/LayoutTests/imported/w3c/web-platform-tests/css/cssom/getComputedStyle-pseudo.html
@@ -55,9 +55,42 @@
 #contents-pseudos-dynamic.contents::after {
   display: contents;
 }
+#pseudo-invalid::backdrop {
+  color: rgb(0, 128, 0);
+}
+#pseudo-invalid::file-selector-button {
+  color: rgb(0, 128, 0);
+}
+#pseudo-invalid::grammar-error {
+  color: rgb(0, 128, 0);
+}
+#pseudo-invalid::highlight(name) {
+  color: rgb(0, 128, 0);
+}
 #pseudo-invalid::marker {
   color: rgb(0, 128, 0);
 }
+#pseudo-invalid::placeholder {
+  color: rgb(0, 128, 0);
+}
+#pseudo-invalid::spelling-error {
+  color: rgb(0, 128, 0);
+}
+#pseudo-invalid::view-transition {
+  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);
+}
 #pseudo-invalid {
   color: rgb(255, 0, 0)
 }
@@ -78,6 +111,12 @@
     assert_equals(getComputedStyle(div, pseudo).width, "50px");
   });
 }, "Resolution of width is correct for ::before and ::after pseudo-elements");
+test(function() {
+  const div = document.getElementById('test');
+  [":bef\\oRE", "::\\000041fter"].forEach(pseudo => {
+    assert_equals(getComputedStyle(div, pseudo).width, "50px");
+  });
+}, "Pseudo-elements can use the full range of CSS syntax");
 test(function() {
   var contents = document.getElementById('contents');
   [":before", ":after"].forEach(function(pseudo) {
@@ -158,19 +197,38 @@
     getComputedStyle(div, ":totallynotapseudo").length == 0,
     "Should return an empty style for unknown pseudo-elements starting with colon");
 }, "Unknown pseudo-elements");
-test(function() {
-  let li = document.querySelector('li');
-  assert_true(
-    getComputedStyle(li, ':marker').length == 0,
-    "Should return an empty style for :marker");
-  assert_true(
-    getComputedStyle(li, 'marker').length != 0,
-    "Should return the element style for marker");
-  assert_equals(
-    getComputedStyle(li, 'marker').color, "rgb(255, 0, 0)",
-    "Should return the element style for marker (ex: color is rgb(255, 0, 0), not rgb(0, 128, 0)");
-  assert_equals(
-  getComputedStyle(li, '::marker').color, "rgb(0, 128, 0)",
-  "Should return the element style for marker (ex: color is rgb(0, 128, 0)");
-}, "Unknown pseudo-element with a known string (ex: marker)");
+
+// If you add a pseudo-element identifier here, don't forget to add the corresponding style rule in
+// <style> above.
+[
+  "backdrop",
+  "file-selector-button",
+  "grammar-error",
+  "highlight(name)",
+  "marker",
+  "placeholder",
+  "spelling-error",
+  "view-transition",
+  "view-transition-image-pair(name)",
+  "view-transition-group(name)",
+  "view-transition-old(name)",
+  "view-transition-new(name)"
+].forEach(pseudoIdentifier => {
+  test(function() {
+    assert_implements_optional(CSS.supports(`selector(::${pseudoIdentifier})`), `::${pseudoIdentifier}`);
+    const li = document.querySelector('li');
+    assert_true(
+      getComputedStyle(li, `:${pseudoIdentifier}`).length == 0,
+      `Should return an empty style for :${pseudoIdentifier}`);
+    assert_true(
+      getComputedStyle(li, pseudoIdentifier).length != 0,
+      `Should return the element style for ${pseudoIdentifier}`);
+    assert_equals(
+      getComputedStyle(li, pseudoIdentifier).color, "rgb(255, 0, 0)",
+      `Should return the element style for ${pseudoIdentifier}`);
+    assert_equals(
+    getComputedStyle(li, `::${pseudoIdentifier}`).color, "rgb(0, 128, 0)",
+    `Should return the ::${pseudoIdentifier} style`);
+  }, `Unknown pseudo-element with a known identifier: ${pseudoIdentifier}`);
+});
 </script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/cssom/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/cssom/w3c-import.log
@@ -15,6 +15,7 @@ None
 ------------------------------------------------------------------------
 List of files:
 /LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSS-namespace-object-class-string.html
+/LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSConditionRule-conditionText.html
 /LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSContainerRule.tentative.html
 /LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSCounterStyleRule.html
 /LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSFontFaceRule.html
@@ -36,6 +37,7 @@ List of files:
 /LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-disabled-regular-sheet-insertion.html
 /LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-disallow-import.tentative.html
 /LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-duplicate.html
+/LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-replace-cssRules.html
 /LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable-replace-on-regular-sheet.html
 /LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-constructable.html
 /LayoutTests/imported/w3c/web-platform-tests/css/cssom/CSSStyleSheet-modify-after-removal.html