View All Attachments for Bug 243539

Attachment #463998
wpt test case	text/html	2022-12-11 20:24:59 PST	1.63 KB	no flags	Details

<!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 computed-style</title>
    <style>
        ::marker {
            color: rgb(0 128 0);
        }
        li {
            color: rgb(255 0 0)
        }
</style>
</head>

<body>
    <ul>
        <li>Item</li>
    </ul>
    <script>
        test(() => {
            let li = document.querySelector('li');
            let markerStyle = getComputedStyle(li, '::marker');
            assert_equals(markerStyle.color, "rgb(0, 128, 0)", "color is green.");
        }, `getComputedStyle() for ::marker returns the right value`);
        test(() => {
            let li = document.querySelector('li');
            let markerStyle = getComputedStyle(li, 'marker');
            assert_not_equals(markerStyle.color, "rgb(0, 128, 0)", "no value is returned.");
        }, `getComputedStyle() for invalid marker should not return the color of marker`);
        test(() => {
            let li = document.querySelector('li');
            let markerStyle = getComputedStyle(li, 'marker');
            assert_equals(markerStyle.color, "rgb(255, 0, 0)", "the returned value is the one of li.");
        }, `getComputedStyle() for invalid marker returns the value for the element`);
    </script>
</body>

</html>