relative-box-order-of-pseudo-elements.tentative.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Test: relative box order of pseudo elements</title>
    <link rel="author" href="mailto:[email protected]">
    <link rel="match" href="relative-box-order-of-pseudo-elements-ref.tentative.html">
    <link rel="help" href="https://github.com/flackr/carousel/tree/main/scroll-marker">
    <style>
        div {
            overflow: auto;
            scroll-marker-group: after;
        }

        div::scroll-prev-button {
            background: red;
            content: "";
            height: 20px;
            width: 100px;
            display: flex;
        }

        div::before {
            background: orange;
            content: "";
            height: 20px;
            width: 100px;
            display: flex;
        }

        div > li {
            background: yellow;
            height: 20px;
            width: 100px;
            display: flex;
        }

        div::after {
            background: green;
            content: "";
            height: 20px;
            width: 100px;
            display: flex;
        }

        div::scroll-next-button {
            content: "";
            background: blue;
            height: 20px;
            width: 100px;
            display: flex;
        }

        div::scroll-marker-group {
            background: purple;
            height: 20px;
            width: 100px;
            display: flex;
        }
    </style>
</head>

<body>
    <div>
        <li></li>
    </div>
</body>

</html>
chromium/third_party/blink/web_tests/wpt_internal/css/css-pseudo/relative-box-order-of-pseudo-elements.tentative.html
