Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/fast/css-grid-layout/grid-painting-respect-dom-order.html 

<!DOCTYPE html>
<html>
<head>
    <link href="resources/grid.css" rel="stylesheet">
    <style>
        .grid {
            display: grid;
            grid-template-columns: 50px;
            grid-template-rows: 50px 50px;
            width: 300px;
            height: 175px;
            background-color: transparent;
            float: left;
        }

        .item {
            width: 100px;
            height: 100px;
        }

        .grid :nth-child(1) {
            background-color: #CCC;
        }

        .grid :nth-child(2) {
            background-color: #999;
        }

        .grid :nth-child(3) {
            background-color: #333;
        }

        .secondRowFirstColumn {
            margin-left: 10px;
            margin-top: 10px;
        }

        .bothRowFirstColumn {
            margin-left: 20px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div>
        The test shows 6 grids each of them with 3 items sorted differently in the DOM.<br>
        Grid items should be painted from lighter (bottom) to darker (top) according to DOM ordering.
    </div>
    <div class="grid">
        <div class="item firstRowFirstColumn"></div>
        <div class="item secondRowFirstColumn"></div>
        <div class="item bothRowFirstColumn"></div>
    </div>
    <div class="grid">
        <div class="item secondRowFirstColumn"></div>
        <div class="item bothRowFirstColumn"></div>
        <div class="item firstRowFirstColumn"></div>
    </div>
    <div class="grid">
        <div class="item bothRowFirstColumn"></div>
        <div class="item firstRowFirstColumn"></div>
        <div class="item secondRowFirstColumn"></div>
    </div>
    <div class="grid">
        <div class="item secondRowFirstColumn"></div>
        <div class="item firstRowFirstColumn"></div>
        <div class="item bothRowFirstColumn"></div>
    </div>
    <div class="grid">
        <div class="item firstRowFirstColumn"></div>
        <div class="item bothRowFirstColumn"></div>
        <div class="item secondRowFirstColumn"></div>
    </div>
    <div class="grid">
        <div class="item bothRowFirstColumn"></div>
        <div class="item secondRowFirstColumn"></div>
        <div class="item firstRowFirstColumn"></div>
    </div>
</body>
</html>