grid-painting-rtl.html | Explore in Territory

<!DOCTYPE html>

<p>This test verifies grid layout painting using RTL direction.</p>
<p>This test passes if it matches the reference. You should see green and blue boxes but not red.</p>

<iframe height="120px" width="300px" srcdoc="
    <style>
    .grid {
        display: grid;
        grid: 50px / 200px 100px 50px;
        width: 500px;
        direction: rtl;
    }
    </style>

    <div class='grid'>
        <div style='background: red;'></div>
        <div style='background: blue;'></div>
        <div style='background: green;'></div>
    </div>
">
</iframe>

<iframe height="120px" width="300px" srcdoc="
    <style>
    .grid {
        display: grid;
        grid: 50px / 200px 100px 50px;
        width: 500px;
        border: 5px solid;
        direction: rtl;
    }
    </style>

    <div class='grid'>
        <div style='background: red;'></div>
        <div style='background: blue;'></div>
        <div style='background: green;'></div>
    </div>
">
</iframe>

<iframe height="120px" width="300px" srcdoc="
    <style>
    .grid {
        display: grid;
        grid: 50px / 200px 100px 50px;
        width: 500px;
        border: 5px solid;
        padding: 10px;
        direction: rtl;
    }
    </style>

    <div class='grid'>
        <div style='background: red;'></div>
        <div style='background: blue;'></div>
        <div style='background: green;'></div>
    </div>
">
</iframe>

<iframe height="120px" width="300px" srcdoc="
    <style>
    .grid {
        display: grid;
        grid: 50px / 200px 100px 50px;
        width: 500px;
        border: 5px solid;
        border-right: 100px solid;
        padding: 10px;
        padding-right: 200px;
        direction: rtl;
    }
    </style>

    <div class='grid'>
        <div style='background: red;'></div>
        <div style='background: blue;'></div>
        <div style='background: green;'></div>
    </div>
">
</iframe>
chromium/third_party/blink/web_tests/fast/css-grid-layout/grid-painting-rtl.html
