forked from mirrors/gecko-dev
ac45bb0312
Automatic update from web-platform-tests Replace w3c.github.io/csswg-drafts links with drafts.csswg.org (#40148) -- wpt-commits: 57c5006103146974adb3af50d325c3b6ce7153d0 wpt-pr: 40148
44 lines
No EOL
1.5 KiB
HTML
44 lines
No EOL
1.5 KiB
HTML
<!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://drafts.csswg.org/css-pseudo/#marker-pseudo" />
|
|
<link rel="help" href="https://drafts.csswg.org/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> |