swap-lines-if-start-is-further-endward-than-end-line.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: 3 / 1; background-color: gray"></div>
    <div style="grid-column: -2 / 1; background-color: purple"></div>
    <div style="grid-column: 4 / -2; background-color: orange"></div>

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

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

    <!-- Check that we do not break already valid use cases. -->
    <div style="grid-column: -3 / -2; background-color: blue"></div>
    <div style="grid-column: -4 / -2; background-color: lightblue"></div>
    <div style="grid-column: -3 / -1; background-color: maroon"></div>

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

</div>

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