Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/wpt_internal/css/css-overflow/scroll-marker-group-009.tentative.html 

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Test: two scroll-marker-group with dynamic change</title>
    <link rel="author" href="mailto:[email protected]">
    <link rel="match" href="scroll-marker-group-009-ref.tentative.html">
    <link rel="help" href="https://github.com/flackr/carousel/tree/main/scroll-marker">
    <style>
        div::scroll-marker-group {
            display: flex;
            height: 50px;
            width: 100px;
        }

        div.scroll-marker-group-before {
            overflow: auto;
            scroll-marker-group: before;
        }

        div.scroll-marker-group-before::scroll-marker-group {
            background: green;
        }

        div.scroll-marker-group-after {
            overflow: auto;
            scroll-marker-group: after;
        }

        div.scroll-marker-group-after::scroll-marker-group {
            background: yellow;
        }
    </style>
</head>

<body>
    <div id="target1"></div>
    <div id="target2"></div>
</body>
<script>
    document.documentElement.offsetTop;
    target1.className = "scroll-marker-group-before";
    target2.className = "scroll-marker-group-after";
    document.documentElement.offsetTop;
    target1.className = "scroll-marker-group-after";
    document.documentElement.offsetTop;
    target1.className = "";
    document.documentElement.offsetTop;
    target1.className = "scroll-marker-group-before";
    target2.className = "";
    document.documentElement.offsetTop;
    target2.className = "scroll-marker-group-after";
    document.documentElement.offsetTop;
    target1.className = "scroll-marker-group-after";
    target2.className = "scroll-marker-group-before";
</script>

</html>