Skip to content
Permalink
Browse files
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
  • Loading branch information
karlcow authored and nt1m committed Dec 12, 2022
1 parent ca8eebd commit 52052a276f0d26946f17681a53b2e2339d6b24ca
Show file tree
Hide file tree
Showing 6 changed files with 144 additions and 0 deletions.
@@ -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

@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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:

0 comments on commit 52052a2

Please sign in to comment.