CSS ::marker does not support defining CSS variables

https://bugs.webkit.org/show_bug.cgi?id=241566 rdar://problem/95551387 Reviewed by Tim Nguyen and Antti Koivisto. This aligns WebKit with Firefox and Chrome. It adds CSSPropertyCustom into isValidMarkerStyleProperty and isValidCueStyleProperty. This also adds two new Web Platform Tests for css marker. * LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/marker-variable-computed-style-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/marker-variable-computed-style.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/marker-variable-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/marker-variable-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/marker-variable.html: Added. * Source/WebCore/style/PropertyAllowlist.cpp: (WebCore::Style::isValidMarkerStyleProperty): (WebCore::Style::isValidCueStyleProperty): Canonical link: https://commits.webkit.org/257711@main
WebKit · Dec 12, 2022 · 52052a2 · 52052a2
1 parent ca8eebd
commit 52052a2
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 0 deletions.
diff --git a/...mported/w3c/web-platform-tests/css/css-pseudo/marker-variable-computed-style-expected.txt b/...mported/w3c/web-platform-tests/css/css-pseudo/marker-variable-computed-style-expected.txt
@@ -0,0 +1,6 @@
+Item 1
+Item 2
+
+PASS getComputedStyle() for opacity defined by variable in ::marker
+PASS getComputedStyle() for color defined by variable in ::marker
+
diff --git a/...tTests/imported/w3c/web-platform-tests/css/css-pseudo/marker-variable-computed-style.html b/...tTests/imported/w3c/web-platform-tests/css/css-pseudo/marker-variable-computed-style.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <link rel="author" title="Karl Dubost" href="https://github.com/karlcow" />
+    <link rel="help" href="https://w3c.github.io/csswg-drafts/css-pseudo/#marker-pseudo" />
+    <link rel="help" href="https://w3c.github.io/csswg-drafts/css-variables/#defining-variables" />
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <title>::marker with variables</title>
+    <style>
+        .firstTest::marker {
+            --alpha: 0.75;
+            color: rgba(0 128 0 / var(--alpha));
+        }
+
+        .secondTest::marker {
+            --color: rgb(0 128 0);
+            color: var(--color);
+        }
+    </style>
+</head>
+
+<body>
+    <ul>
+        <li class="firstTest">Item 1</li>
+        <li class="secondTest">Item 2</li>
+    </ul>
+    <script>
+        test(() => {
+            let firstTest = document.querySelector('.firstTest');
+            let markerStyle = getComputedStyle(firstTest, '::marker');
+            assert_equals(markerStyle.color, "rgba(0, 128, 0, 0.75)", "color is green with 0.75 opacity.");
+        }, `getComputedStyle() for opacity defined by variable in ::marker`);
+        test(() => {
+            let secondTest = document.querySelector('.secondTest');
+            let markerStyle = getComputedStyle(secondTest, '::marker');
+            assert_equals(markerStyle.color, "rgb(0, 128, 0)", "color is green.");
+        }, `getComputedStyle() for color defined by variable in ::marker`);
+    </script>
+</body>
+
+</html>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/marker-variable-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/marker-variable-expected.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="author" title="Karl Dubost" href="https://github.com/karlcow" />
+    <link
+      rel="help"
+      href="https://w3c.github.io/csswg-drafts/css-pseudo/#marker-pseudo"
+    />
+    <link
+      rel="help"
+      href="https://w3c.github.io/csswg-drafts/css-variables/#defining-variables"
+    />
+    <title>::marker with variables</title>
+    <style>
+      .firstTest::marker {
+        color: rgb(255 119 0 / 0.75);
+      }
+
+      .secondTest::marker {
+        color: rgb(255 119 0);
+      }
+    </style>
+  </head>
+  <body>
+    <ul>
+      <li class="firstTest">Item 1</li>
+      <li class="secondTest">Item 2</li>
+    </ul>
+  </body>
+</html>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/marker-variable-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/marker-variable-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="author" title="Karl Dubost" href="https://github.com/karlcow" />
+    <link
+      rel="help"
+      href="https://w3c.github.io/csswg-drafts/css-pseudo/#marker-pseudo"
+    />
+    <link
+      rel="help"
+      href="https://w3c.github.io/csswg-drafts/css-variables/#defining-variables"
+    />
+    <title>::marker with variables</title>
+    <style>
+      .firstTest::marker {
+        color: rgb(255 119 0 / 0.75);
+      }
+
+      .secondTest::marker {
+        color: rgb(255 119 0);
+      }
+    </style>
+  </head>
+  <body>
+    <ul>
+      <li class="firstTest">Item 1</li>
+      <li class="secondTest">Item 2</li>
+    </ul>
+  </body>
+</html>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/marker-variable.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/marker-variable.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link rel="author" title="Karl Dubost" href="https://github.com/karlcow" />
+  <link rel="help" href="https://w3c.github.io/csswg-drafts/css-pseudo/#marker-pseudo" />
+  <link rel="help" href="https://w3c.github.io/csswg-drafts/css-variables/#defining-variables" />
+  <link rel="match" href="marker-variable-ref.html">
+  <title>::marker with variables</title>
+  <style>
+    .firstTest::marker {
+      --alpha: 0.75;
+      color: rgb(255 119 0 / var(--alpha));
+    }
+
+    .secondTest::marker {
+      --color: rgb(255 119 0);
+      color: var(--color);
+    }
+  </style>
+</head>
+
+<body>
+  <ul>
+    <li class="firstTest">Item 1</li>
+    <li class="secondTest">Item 2</li>
+  </ul>
+</body>
+
+</html>
diff --git a/Source/WebCore/style/PropertyAllowlist.cpp b/Source/WebCore/style/PropertyAllowlist.cpp
@@ -43,6 +43,7 @@ bool isValidMarkerStyleProperty(CSSPropertyID id)
     switch (id) {
     case CSSPropertyColor:
     case CSSPropertyContent:
+    case CSSPropertyCustom:
     case CSSPropertyDirection:
     case CSSPropertyFont:
     case CSSPropertyFontFamily:
@@ -122,6 +123,7 @@ bool isValidCueStyleProperty(CSSPropertyID id)
     case CSSPropertyBackgroundRepeat:
     case CSSPropertyBackgroundSize:
     case CSSPropertyColor:
+    case CSSPropertyCustom:
     case CSSPropertyFont:
     case CSSPropertyFontFamily:
     case CSSPropertyFontSize: