grid-painting-rtl-expected.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 {
        position: relative;
        width: 500px;
        height: 50px;
    }
    </style>

    <div class='grid'>
        <div style='background: green; position: absolute; width: 50px; height: 50px; left: 150px'></div>
        <div style='background: blue; position: absolute; width: 100px; height: 50px; left: 200px'></div>
    </div>
">
</iframe>

<iframe height="120px" width="300px" srcdoc="
    <style>
    .grid {
        position: relative;
        width: 500px;
        height: 50px;
        border: 5px solid;
    }
    </style>

    <div class='grid'>
        <div style='background: green; position: absolute; width: 50px; height: 50px; left: 150px'></div>
        <div style='background: blue; position: absolute; width: 100px; height: 50px; left: 200px'></div>
    </div>
">
</iframe>

<iframe height="120px" width="300px" srcdoc="
    <style>
    .grid {
        position: relative;
        width: 500px;
        height: 50px;
        border: 5px solid;
        padding: 10px;
    }
    </style>

    <div class='grid'>
        <div style='background: green; position: absolute; width: 50px; height: 50px; left: 160px'></div>
        <div style='background: blue; position: absolute; width: 100px; height: 50px; left: 210px'></div>
    </div>
">
</iframe>

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

    <div class='grid'>
        <div style='background: green; position: absolute; width: 50px; height: 50px; left: 160px'></div>
        <div style='background: blue; position: absolute; width: 100px; height: 50px; left: 210px'></div>
    </div>
">
</iframe>
chromium/third_party/blink/web_tests/fast/css-grid-layout/grid-painting-rtl-expected.html
