getComputedStyle() should reject legacy syntax...

for the new ::checkmark and ::picker-icon pseudo elements Bug: 382291440 Change-Id: Ie8d2f34a64b9c733dd863e53328ca4ec3a34347a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6075944 Reviewed-by: Rune Lillesveen <[email protected]> Commit-Queue: Traian Captan <[email protected]> Cr-Commit-Position: refs/heads/main@{#1392977}
web-platform-tests · Dec 6, 2024 · 5deaf2e · 5deaf2e
1 parent 9535d4d
commit 5deaf2e
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 0 deletions.
diff --git a/css/cssom/getComputedStyle-pseudo-checkmark.html b/css/cssom/getComputedStyle-pseudo-checkmark.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSOM: Correct resolution of resolved value for the checkmark pseudo-element</title>
+
+<link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle">
+<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values">
+<link rel="help" href="https://drafts.csswg.org/css-forms/#checkmark-element">
+
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+
+<style>
+select,
+select::picker(select) {
+  appearance: base-select;
+}
+
+#test-option {
+  width: 321px;
+}
+
+#test-option::checkmark {
+  width: 13px;
+}
+</style>
+
+<select>
+  <option id="test-option">The only option</option>
+</select>
+
+<script>
+test(() => {
+  const test_option = document.getElementById('test-option');
+  assert_equals(getComputedStyle(test_option, "checkmark").width, "321px");
+}, "Resolution of width is correct when pseudo-element argument is ignored (due to no colon)");
+
+test(() => {
+  const test_option = document.getElementById('test-option');
+  assert_equals(getComputedStyle(test_option, ":checkmark").width, "");
+}, "Resolution of width is correct when pseudo-element argument is ignored (due to single-colon)");
+
+test(() => {
+  const test_option = document.getElementById('test-option');
+  assert_equals(getComputedStyle(test_option, "::checkmark").width, "13px");
+}, "Resolution of width is correct for pseudo-element (due to double-colon)");
+</script>
diff --git a/css/cssom/getComputedStyle-pseudo-picker-icon.html b/css/cssom/getComputedStyle-pseudo-picker-icon.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSOM: Correct resolution of resolved value for the picker-icon pseudo-element</title>
+
+<link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle">
+<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values">
+<link rel="help" href="https://drafts.csswg.org/css-forms/#picker-icon-pseudo-element">
+
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+
+<style>
+select,
+select::picker(select) {
+  appearance: base-select;
+}
+
+#test-select {
+  width: 321px;
+}
+
+#test-select::picker-icon {
+  width: 13px;
+}
+</style>
+
+<select id="test-select">
+  <option>The only option</option>
+</select>
+
+<script>
+test(() => {
+  const test_select = document.getElementById('test-select');
+  assert_equals(getComputedStyle(test_select, "picker-icon").width, "321px");
+}, "Resolution of width is correct when pseudo-element argument is ignored (due to no colon)");
+
+test(() => {
+  const test_select = document.getElementById('test-select');
+  assert_equals(getComputedStyle(test_select, ":picker-icon").width, "");
+}, "Resolution of width is correct when pseudo-element argument is ignored (due to single-colon)");
+
+test(() => {
+  const test_select = document.getElementById('test-select');
+  assert_equals(getComputedStyle(test_select, "::picker-icon").width, "13px");
+}, "Resolution of width is correct for pseudo-element (due to double-colon)");
+</script>