grid-item-display.html | Explore in Territory

<!DOCTYPE html>
<html>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
    grid-template-columns: 50px 100px 200px;
    grid-template-rows: 50px 100px 200px;
    background-color: #aaa;
}
.grid > * {
    margin: 0; /* Disable any margins as they change the top / left offsets. */
    grid-column: 2;
    grid-row: 3;
}
</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid > *')">

<p>This test checks that the grid items' 'display' computed value matches the specification. It also checks that the grid items are placed in the right grid area.</p>

<div style="position: relative;">
    <div class="grid">
        <!-- These values are taken from the table in CSS 2.1 Chapter 9.7. -->
        <div data-expected-display="table" data-offset-x="50" data-offset-y="150" style="display: inline-table"></div>
        <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: inline"></div>
        <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-row-group"></div>
        <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-column"></div>
        <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-column-group"></div>
        <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-header-group"></div>
        <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-footer-group"></div>
        <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-row"></div>
        <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-cell"></div>
        <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-caption"></div>
        <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: inline-block"></div>

        <!-- Some extra values we support. -->
        <div data-expected-display="flex" data-offset-x="50" data-offset-y="150" style="display: flex"></div>
        <div data-expected-display="flex" data-offset-x="50" data-offset-y="150" style="display: flex"></div>
        <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: -webkit-inline-block"></div>
        <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: compact"></div>
        <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: run-in"></div>

        <!-- Elements with custom renderers. -->
        <button data-expected-display="block" data-offset-x="50" data-offset-y="150"></button>
        <canvas data-expected-display="block" data-offset-x="50" data-offset-y="150">canvas</canvas>
        <iframe data-expected-display="block" data-offset-x="50" data-offset-y="150" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe>
        <iframe seamless data-expected-display="block" data-offset-x="50" data-offset-y="150" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe>
        <object data-expected-display="block" data-offset-x="50" data-offset-y="150">object</object>
        <select data-expected-display="block" data-offset-x="50" data-offset-y="150">
            <option>select</option>
        </select>
        <textarea data-expected-display="block" data-offset-x="50" data-offset-y="150">textarea</textarea>
        <input data-expected-display="block" data-offset-x="50" data-offset-y="150" type="checkbox" value="radio"></input>
        <input data-expected-display="block" data-offset-x="50" data-offset-y="150" type="file" value="file"></input>
        <input data-expected-display="block" data-offset-x="50" data-offset-y="150" type="image" value="image"></input>
        <input data-expected-display="block" data-offset-x="50" data-offset-y="150" type="password" value="image"></input>
        <input data-expected-display="block" data-offset-x="50" data-offset-y="150" type="text" value="text"></input>

        <img data-expected-display="block" data-offset-x="50" data-offset-y="150" src="../../images/resources/green-256x256.png"></img>
        <img data-expected-display="block" data-offset-x="50" data-offset-y="150" src="nonexistent.png"></img>

        <svg data-expected-display="block" data-positioned-offset-x="50" data-positioned-offset-y="150">
            <circle cx="50" cy="50" r="50" fill="blue">
            </circle>
        </svg>

        <!-- Spans are common so they should be tested. -->
        <span data-expected-display="block" data-offset-x="50" data-offset-y="150"></span>
    </div>
</div>

</html>
chromium/third_party/blink/web_tests/fast/css-grid-layout/grid-item-display.html
