Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/fast/css-grid-layout/swap-lines-if-start-is-further-endward-than-end-line-expected.html 

<!DOCTYPE html>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
    grid-template-columns: [a] 50px [b] 50px [c] 50px [d];
    grid-auto-rows: 20px;
    grid-auto-columns: 20px;
}
</style>

<div class="grid">

    <div style="grid-column: 1 / 3; background-color: gray"></div>
    <div style="grid-column: 1 / -2; background-color: purple"></div>
    <div style="grid-column: -2 / 4; background-color: orange"></div>

    <div style="grid-column: 2 / d; background-color: gray"></div>
    <div style="grid-column: b / -1; background-color: purple"></div>
    <div style="grid-column: c / d; background-color: orange"></div>

    <div style="grid-column: a -1 / 3; background-color: gray"></div>
    <div style="grid-column: b 1 / -1; background-color: purple"></div>
    <div style="grid-column: c -1 / d; background-color: orange"></div>

    <div style="grid-column: 2 / 3; background-color: blue"></div>
    <div style="grid-column: 1 / 3; background-color: lightblue"></div>
    <div style="grid-column: 2 / 4; background-color: maroon"></div>

    <div style="grid-column: -3 / -3; background-color: lightgreen"></div>
    <div style="grid-column: 3 / 3; background-color: green"></div>

</div>