Blitz - WPT: grid-gutters-014.html

wpt / css / css-grid / alignment / grid-gutters-014.html

/css/css-grid/alignment/grid-gutters-014.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Percentage gap, content-based width/height (via float)</title>
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gaps">
<link rel="match" href="grid-gutters-014-ref.html">
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<meta name="assert" content="Tests that percentage gaps contribute zero to intrinsic sizing, then resolve against corresponding axis of containing block for layout.">

<style>
    #grid {
        display: grid;
        border: solid 5px teal;
        padding: 5px;
        grid-gap: 15% 10%;
        gap: 15% 10%;
        float: left;
        grid: auto auto / auto auto;
        /* content box width = 200px height = 100px -> gap x = 20px y = 15px */
        position: relative;
    }

    #grid > div {
        margin: 5px 10px;
        border: solid 5px aqua;
        width: 70px;
        height: 30px;
        /* margin box height = 50px width = 100px */
    }

    /* highlight manual pass condition */
    #grid > div:nth-child(even) {
        border-right-color: red;
    }
    #grid > div:nth-child(n + 3) {
        border-bottom-color: red;
    }
    #mask {
        position: absolute;
        border: 5px teal;
        border-style: none solid solid none;
        bottom: -5px; right: -5px;
        top: 10px; left: 15px;
    }
</style>

<p>Test passes if there is no red.
<div id="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <span id="mask"></span>
</div>

/css/css-grid/alignment/grid-gutters-014-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Reference: Percentage gap, content-based width/height (via float)</title>
<style>
    #grid {
        border: solid 5px teal;
        width: 200px;
        height: 100px;
        padding: 10px 0 0 10px;
    }

    #grid > div {
        float: left;
        border: solid 5px aqua;
        width: 70px;
        height: 30px;
        margin-left: 5px;
    }

    /* highlight manual pass condition */
    #grid > div:nth-child(even) {
        border-right: none;
        margin-left: 40px;
    }
    #grid > div:nth-child(n + 3) {
        border-bottom: none;
        margin-top: 25px;
    }
</style>

<p>Test passes if there is no red.

<div id="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>