diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/grid-items')
196 files changed, 14498 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/anonymous-grid-item-001.html b/testing/web-platform/tests/css/css-grid/grid-items/anonymous-grid-item-001.html new file mode 100644 index 0000000000..db88ce54b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/anonymous-grid-item-001.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Test: Anonymous grid items - non-contiguous text runs - position:absolute</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items"> +<link rel="match" href="/css/css-flexbox/anonymous-flex-item-split-ref.html"> +<p>The words "Two" and "lines" should not be on the same line.</p> +<div style="display:grid">Two <span style="position:absolute"></span>lines</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-001.html b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-001.html new file mode 100644 index 0000000000..6271a37b63 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-001.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview"> +<meta name="assert" content="An element with an aspect-ratio resolves its percentage against the definite row."> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: inline-grid; grid-template-rows: 100px; background: green;"> + <div style="aspect-ratio: 1/1; height: 100%;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-002.html b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-002.html new file mode 100644 index 0000000000..988814dc67 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-002.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview"> +<meta name="assert" content="An element with an aspect-ratio resolves its percentage against the definite row."> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: inline-grid; grid-template-rows: 50px 50px; background: green;"> + <div style="aspect-ratio: 1/1; height: 100%; grid-row-start: 1; grid-row-end: 3;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-003.html b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-003.html new file mode 100644 index 0000000000..45e7cce4d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-003.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview"> +<meta name="assert" content="An element with an aspect-ratio resolves its percentage against the definite row."> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: inline-grid; grid-template-rows: 100px; background: green;"> + <div style="aspect-ratio: 2/1; height: 50%;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-004.html b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-004.html new file mode 100644 index 0000000000..a7a6336c24 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-004.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview"> +<meta name="assert" content="An element with an aspect-ratio and stretch alignment stretches to the definite row, and transfers its size."> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: inline-grid; grid-template-rows: 100px; background: green;"> + <img src="support/50x50-green.png" style="align-self: stretch; opacity: 0;"> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-005.html b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-005.html new file mode 100644 index 0000000000..70f554ba37 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-005.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview"> +<meta name="assert" content="An element with an aspect-ratio resolves its percentage against the definite row and the track sizes get updated."> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<style> + body { overflow: hidden; } +</style> +<p>Test passes if there is a filled green square.</p> +<div style="display: inline-grid; grid-template-rows: 50px 50px; background: red; height: 100px;"> + <div style="grid-row: 1; background: green; aspect-ratio: 2/1; height: 100%;"></div> + <div style="grid-row: 2; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/explicitly-sized-grid-item-as-table.html b/testing/web-platform/tests/css/css-grid/grid-items/explicitly-sized-grid-item-as-table.html new file mode 100644 index 0000000000..53a0979622 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/explicitly-sized-grid-item-as-table.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Grid Layout Test: Explicitly sized grid item as table with narrow contents</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#grid-track-concept" title="3.2. Grid Tracks and Cells"> +<meta name="assert" content="A grid item as a table uses the sizing algorithm of the grid"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display:grid; grid-template-columns:50% 50%; width:200px;"> + <div style="display:table; background:green;"> + <div style="width:10px; height:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001-ref.html new file mode 100644 index 0000000000..3e08fdfbde --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: 100x100 green square image in the middle</title> +<link rel="author" title="Hyunjune Kim" href="mailto:hyunjune.kim@samsung.com"> +<style> + img { + display: block; + margin: auto; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div> + <img src="./support/100x100-green.png"> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001.html new file mode 100644 index 0000000000..ccf87024bc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Margin auto and replaced grid item</title> +<link rel="author" title="Hyunjune Kim" href="mailto:hyunjune.kim@samsung.com"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#alignment"> +<meta name="assert" content="Checks width of the nested grid container applied 'margin:auto' with a replaced item which has a property called max-height."> +<link rel="match" href="grid-auto-margin-and-replaced-item-001-ref.html"> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + left:0; + right:0; + margin: auto; + z-index: -1; + } + .grid { + display: grid; + } + .nested-grid { + display: grid; + margin: auto; + } + img { + max-height: 100%; + } +</style> + +<body onload="loadImage()"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class="grid"> + <div id="reference-overlapped-red"></div> + <div class="nested-grid"> + <img id="replaced"> + </div> +</div> + +<script> +function loadImage() { + // Use svg for a 100x100 green square so we don't have to wait for replaced.onload. + replaced.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'%3E%3Crect width='100%25' height='100%25' fill='green'/%3E%3C/svg%3E"; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-automatic-minimum-intrinsic-aspect-ratio-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-automatic-minimum-intrinsic-aspect-ratio-001.html new file mode 100644 index 0000000000..7d472716fb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-automatic-minimum-intrinsic-aspect-ratio-001.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<title>CSS Grid: automatic minimum for items with instrinsic aspect ratios</title> +<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> +<meta name="assert" content="Check how min-width|height:auto is computed for items with intrinsic aspect ratios."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> + +<style> +.container { + border: 5px solid orange; + display: grid; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.container')"> +<div id="log"></div> + +<div class="container min-content" data-expected-width="60" + data-expected-height="35"> + <img src="/images/green-100x50.png" style="height: 25px;" + data-expected-width="50" data-expected-height="25"/> +</div> + +<div class="container min-content" data-expected-width="150" + data-expected-height="80"> + <img src="/images/green-100x50.png" style="min-height: 70px;" + data-expected-width="140" data-expected-height="70"/> +</div> + +<div class="container min-content" data-expected-width="90" + data-expected-height="50"> + <img src="/images/green-100x50.png" style="max-height: 40px;" + data-expected-width="80" data-expected-height="40"/> +</div> + +<div class="container min-content" data-expected-width="70" + data-expected-height="40"> + <img src="/images/green-100x50.png" style="height: 25px; min-height: 30px;" + data-expected-width="60" data-expected-height="30"/> +</div> + +<div class="container min-content" data-expected-width="30" + data-expected-height="20"> + <img src="/images/green-100x50.png" style="height: 25px; max-height: 10px;" + data-expected-width="20" data-expected-height="10"/> +</div> + +<div class="container min-content" data-expected-width="50" + data-expected-height="35"> + <img src="/images/green-100x50.png" style="height: 25px; max-width: 40px;" + data-expected-width="40" data-expected-height="25"/> +</div> + +<div class="container min-content" data-expected-width="60" + data-expected-height="40"> + <img src="/images/green-100x50.png" + style="height: 25px; min-height: 30px; max-width: 50px;" + data-expected-width="50" data-expected-height="30"/> +</div> + +<div class="container min-content" data-expected-width="60" + data-expected-height="35"> + <img src="/images/green-100x50.png" style="width: 50px;" + data-expected-width="50" data-expected-height="25"/> +</div> + +<div class="container min-content" data-expected-width="70" + data-expected-height="40"> + <img src="/images/green-100x50.png" style="max-width: 60px;" + data-expected-width="60" data-expected-height="30"/> +</div> + +<div class="container min-content" data-expected-width="130" + data-expected-height="70"> + <img src="/images/green-100x50.png" style="min-width: 120px;" + data-expected-width="120" data-expected-height="60"/> +</div> + +<div class="container min-content" data-expected-width="90" + data-expected-height="50"> + <img src="/images/green-100x50.png" style="width: 60px; min-width: 80px;" + data-expected-width="80" data-expected-height="40"/> +</div> + +<div class="container min-content" data-expected-width="34" + data-expected-height="22"> + <img src="/images/green-100x50.png" style="width: 24px; max-width: 40px;" + data-expected-width="24" data-expected-height="12"/> +</div> + +<div class="container min-content" data-expected-width="130" + data-expected-height="35"> + <img src="/images/green-100x50.png" style="width: 120px; max-height: 25px;" + data-expected-width="120" data-expected-height="25"/> +</div> + +<div class="container min-content" data-expected-width="35" + data-expected-height="110"> + <img src="/images/green-100x50.png" style="width: 25px; min-height: 100px;" + data-expected-width="25" data-expected-height="100"/> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-img-item-percent-max-height-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-img-item-percent-max-height-001.html new file mode 100644 index 0000000000..d0d6d04dc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-img-item-percent-max-height-001.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: % max height of grid items</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="% max-height of replaced grid items is respected"> + +<p>Test passes if there is a filled green square.</p> + +<div style="display: grid; grid-template-rows: 200px;"> + <img src="support/200x200-green.png" style="max-height: 50%;"> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-001.html new file mode 100644 index 0000000000..09703be7f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Regular and anonymous grid items within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Checks that inline grid container children become grid items, and text that is directly contained inside the inline grid is wrapped in an anonymous grid item."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .test-inline-grid-overlapping-green { + display: inline-grid; + font: 25px/1 Ahem; + color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div class="test-inline-grid-overlapping-green"> + <div>it</div> + em + <div>it</div> + em +</div><div class="test-inline-grid-overlapping-green"> + it + <span>em</span> + it + <span>em</span> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-002.html new file mode 100644 index 0000000000..f95c441d7a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-002.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Children of grid items do not create new items within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Checks that the grid items do not split around blocks creating extra items within an inline grid."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .test-inline-grid-overlapping-green { + display: inline-grid; + font: 25px/1 Ahem; + color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div class="test-inline-grid-overlapping-green"> + <div> + <div>it</div> + em + </div> + <div> + it + <div>em</div> + </div> +</div><div class="test-inline-grid-overlapping-green"> + <span> + <span>i</span>t + </span> + <span> + e<span>m</span> + </span> + <span> + <span>i</span>t + </span> + <span> + e<span>m</span> + </span> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-003.html new file mode 100644 index 0000000000..8758a6a2d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-003.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with 'display:none' are not rendered within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .test-inline-grid-overlapping-green { + display: inline-grid; + font: 50px/1 Ahem; + color: green; + } + + .display-none-red { + display: none; + color: red; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div class="test-inline-grid-overlapping-green two-columns"> + <span>it</span> + <span class="display-none-red">hidden</span> + <span>em</span> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-inline-blocks-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-inline-blocks-001.html new file mode 100644 index 0000000000..7a7ac5cba9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-inline-blocks-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Paint order of grid items within an inline grid is the same as inline blocks</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="9.5 Z-axis Ordering: the z-index property"> +<link rel="help" href="http://www.w3.org/TR/CSS2/zindex.html#painting-order" title="E.2 Painting order"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #inline-grid { + display: inline-grid; + } + + #reference-overlapped-red { + color: red; + font: 100px/1 Ahem; + grid-row: 1; + grid-column: 1; + } + + #test-overlapping-green { + background-color: green; + width: 100px; + height: 100px; + grid-row: 1; + grid-column: 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="inline-grid"> + <div id="reference-overlapped-red">R</div> + <div id="test-overlapping-green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-001.html new file mode 100644 index 0000000000..5367ada129 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-001.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #inline-grid { + display: inline-grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + } + + #blue { + color: blue; + } + + #yellow { + color: yellow; + order: 1; + } + + #lime { + color: lime; + order: 5; + } + + #magenta { + color: magenta; + order: 10; + } +</style> +<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> +<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + +<div id="reference-overlapped-red"></div> +<div id="inline-grid"> + <div id="magenta">M</div> + <div id="lime">L</div> + <div id="yellow">Y</div> + <div id="blue">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-002.html new file mode 100644 index 0000000000..13f7c340fb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-002.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #inline-grid { + display: inline-grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + } + + #blue { + color: blue; + order: -10; + } + + #yellow { + color: yellow; + order: -5; + } + + #lime { + color: lime; + order: -1; + } + + #magenta { + color: magenta; + } +</style> +<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> +<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + +<div id="reference-overlapped-red"></div> +<div id="inline-grid"> + <div id="magenta">M</div> + <div id="lime">L</div> + <div id="yellow">Y</div> + <div id="blue">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-003.html new file mode 100644 index 0000000000..1cf446cf10 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-003.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #inline-grid { + display: inline-grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + } + + #blue { + color: blue; + order: -5; + } + + #yellow { + color: yellow; + order: -5; + } + + #lime { + color: lime; + } + + #magenta { + color: magenta; + order: 1; + } +</style> +<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> +<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + +<div id="reference-overlapped-red"></div> +<div id="inline-grid"> + <div id="lime">L</div> + <div id="magenta">M</div> + <div id="blue">B</div> + <div id="yellow">Y</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-004.html new file mode 100644 index 0000000000..3e9d6aba87 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-004.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #inline-grid { + display: inline-grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + } + + #blue { + color: blue; + order: 1; + } + + #yellow { + color: yellow; + order: 1; + } + + #lime { + color: lime; + order: 5; + } + + #magenta { + color: magenta; + order: 5; + } +</style> +<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> +<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + +<div id="reference-overlapped-red"></div> +<div id="inline-grid"> + <div id="blue">B</div> + <div id="lime">L</div> + <div id="magenta">M</div> + <div id="yellow">Y</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-005.html new file mode 100644 index 0000000000..2dd1b379e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-005.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #inline-grid { + display: inline-grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + } + + #blue { + color: blue; + order: -5; + } + + #yellow { + color: yellow; + order: -1; + } + + #lime { + color: lime; + order: 1; + } + + #magenta { + color: magenta; + order: 5; + } +</style> +<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> +<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + +<div id="reference-overlapped-red"></div> +<div id="inline-grid"> + <div id="yellow">Y</div> + <div id="magenta">M</div> + <div id="blue">B</div> + <div id="lime">L</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-001.html new file mode 100644 index 0000000000..00236a4c5c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + order: 1; + } + + #reference-item-overlapped-red { + color: red; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="inline-grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-002.html new file mode 100644 index 0000000000..ffcb8c7134 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + } + + #reference-item-overlapped-red { + color: red; + order: -1; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="inline-grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-003.html new file mode 100644 index 0000000000..e24cde00d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-003.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + order: 10; + } + + #reference-item-overlapped-red { + color: red; + order: 5; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="inline-grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-004.html new file mode 100644 index 0000000000..34cbce8fb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-004.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + order: -5; + } + + #reference-item-overlapped-red { + color: red; + order: -10; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="inline-grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-005.html new file mode 100644 index 0000000000..4ab1c4a465 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-005.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + order: 1; + } + + #reference-item-overlapped-red { + color: red; + order: -1; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="inline-grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-001.html new file mode 100644 index 0000000000..5fa16a50f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + z-index: 1; + } + + #reference-item-overlapped-red { + color: red; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="inline-grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-002.html new file mode 100644 index 0000000000..b6a59c0b22 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-002.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + } + + #reference-item-overlapped-red { + color: red; + z-index: -1; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="inline-grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-003.html new file mode 100644 index 0000000000..85d8425e31 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-003.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + z-index: 10; + } + + #reference-item-overlapped-red { + color: red; + z-index: 5; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="inline-grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-004.html new file mode 100644 index 0000000000..a1c84150a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + z-index: -5; + } + + #reference-item-overlapped-red { + color: red; + z-index: -10; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="inline-grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-005.html new file mode 100644 index 0000000000..c7ac09bfd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-005.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + z-index: 1; + } + + #reference-item-overlapped-red { + color: red; + z-index: -1; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="inline-grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-001.html new file mode 100644 index 0000000000..dcea53174f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + grid-template-columns: 25px 25px 25px 25px; + grid-template-rows: 25px 25px 25px 25px; + } + + #blue { + color: blue; + z-index: -1; + grid-column: 1; + grid-row: 1; + } + + #yellow { + color: yellow; + grid-column: 2; + grid-row: 2; + } + + #green { + color: green; + z-index: 1; + grid-column: 3; + grid-row: 3; + } +</style> +<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p> + +<div id="inline-grid"> + <div id="green">G</div> + <div id="yellow">Y</div> + <div id="blue">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-002.html new file mode 100644 index 0000000000..6f360e8a6a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-002.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + grid-template-columns: 25px 25px 25px 25px; + grid-template-rows: 25px 25px 25px 25px; + } + + #blue { + color: blue; + z-index: 1; + grid-column: 1; + grid-row: 1; + } + + #yellow { + color: yellow; + z-index: 5; + grid-column: 2; + grid-row: 2; + } + + #green { + color: green; + z-index: 10; + grid-column: 3; + grid-row: 3; + } +</style> +<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p> + +<div id="inline-grid"> + <div id="green">G</div> + <div id="yellow">Y</div> + <div id="blue">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-003.html new file mode 100644 index 0000000000..10ace57ce4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-003.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + grid-template-columns: 25px 25px 25px 25px; + grid-template-rows: 25px 25px 25px 25px; + } + + #blue { + color: blue; + z-index: -10; + grid-column: 1; + grid-row: 1; + } + + #yellow { + color: yellow; + z-index: -5; + grid-column: 2; + grid-row: 2; + } + + #green { + color: green; + z-index: -1; + grid-column: 3; + grid-row: 3; + } +</style> +<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p> + +<div id="inline-grid"> + <div id="green">G</div> + <div id="yellow">Y</div> + <div id="blue">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-004.html new file mode 100644 index 0000000000..5c61954895 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-004.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + grid-template-columns: 25px 25px 25px 25px; + grid-template-rows: 25px 25px 25px 25px; + } + + #blue { + color: blue; + grid-column: 1; + grid-row: 1; + } + + #yellow { + color: yellow; + z-index: 1; + grid-column: 2; + grid-row: 2; + } + + #green { + color: green; + z-index: 5; + grid-column: 3; + grid-row: 3; + } +</style> +<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p> + +<div id="inline-grid"> + <div id="green">G</div> + <div id="yellow">Y</div> + <div id="blue">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-005.html new file mode 100644 index 0000000000..271f4c01b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-005.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + grid-template-columns: 25px 25px 25px 25px; + grid-template-rows: 25px 25px 25px 25px; + } + + #blue { + color: blue; + z-index: -5; + grid-column: 1; + grid-row: 1; + } + + #yellow { + color: yellow; + z-index: -1; + grid-column: 2; + grid-row: 2; + } + + #green { + color: green; + grid-column: 3; + grid-row: 3; + } +</style> +<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p> + +<div id="inline-grid"> + <div id="green">G</div> + <div id="yellow">Y</div> + <div id="blue">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-006.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-006.html new file mode 100644 index 0000000000..87ed91cd79 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-006.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + grid-template-columns: 25px 25px 25px 25px; + grid-template-rows: 25px 25px 25px 25px; + } + + #blue { + color: blue; + z-index: -1; + grid-column: 2; + grid-row: 2; + margin-top: -25px; + margin-left: -25px; + } + + #yellow { + color: yellow; + grid-column: 4; + grid-row: 4; + margin-top: -50px; + margin-left: -50px; + } + + #green { + color: green; + z-index: 1; + grid-column: 1; + grid-row: 1; + margin-top: 50px; + margin-left: 50px; + } +</style> +<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p> + +<div id="inline-grid"> + <div id="green">G</div> + <div id="yellow">Y</div> + <div id="blue">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-intrinsic-maximums-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-intrinsic-maximums-ref.html new file mode 100644 index 0000000000..b90f15b597 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-intrinsic-maximums-ref.html @@ -0,0 +1,153 @@ +<!DOCTYPE html> +<html> +<title>CSS Grid: Grid item intrinsic maximum sizes</title> +<link rel="author" title="Serio Villar" href="mailto:svillar@igalia.com"> +<link href="/css/support/grid.css" rel="stylesheet"> +<link href="/css/support/width-keyword-classes.css" rel="stylesheet"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + +<style> + +.item { + font: 10px/1 Ahem; + background: cyan; + grid-column: 1 / -1; +} + +.abs { + width: 100%; + height: 5px; + position: absolute; +} + +.grid { + border: 2px solid black; + display: grid; + position: relative; + padding-top: 10px; + margin-bottom: 10px; + width: 100px; + justify-items: start; +} + +.float { + float: left; + width: 200px; +} + +.col1 { grid-column: 1 / 2; background: orange; } +.col2 { grid-column: 2 / 3; background: indigo; } +.col3 { grid-column: 3 / 4; background: green; } + +</style> + +<div class="float"> + +<div class="grid" style="grid-template: 20px / 35px 5px;"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="grid" style="grid-template: 20px / 50px 5px;"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="grid" style="grid-template: 20px / 85px 5px;"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="grid" style="grid-template: 20px / 5px 85px;"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="grid" style="grid-template: 20px / 5px 85px;"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="grid" style="grid-template: 20px / 5px 85px;"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +</div> + +<div class="float"> + +<div class="grid" style="grid-template: 20px / 17.5px 5px 67.5px;"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid" style="grid-template: 20px / 25px 5px 60px;"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid" style="grid-template: 20px / calc(85px / 2) 5px calc(85px / 2);"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid" style="grid-template: 20px / 77.5px 5px 17.5px;"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid" style="grid-template: 20px / 70px 5px 25px;"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid" style="grid-template: 20px / calc(105px/2) 5px calc(85px/2);" style="justify-items: start"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +</div> + +<div class="float"> + +<div class="grid" style="grid-template: 20px / calc(10px + (90px - 15px)/2) 5px calc((90px - 15px)/2 + 10px);"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid" style="grid-template: 20px / calc(50px + (90px - 55px)/2) 5px calc((90px - 55px)/2 + 10px);"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid" style="grid-template: 20px / 85px 5px 10px;"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-intrinsic-maximums.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-intrinsic-maximums.html new file mode 100644 index 0000000000..5b244d3c11 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-intrinsic-maximums.html @@ -0,0 +1,161 @@ +<!DOCTYPE html> +<html> +<title>CSS Grid: Grid item intrinsic maximum sizes</title> +<link rel="author" title="Serio Villar" href="mailto:svillar@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items"> +<link href="/css/support/grid.css" rel="stylesheet"> +<link href="/css/support/width-keyword-classes.css" rel="stylesheet"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="match" href="grid-intrinsic-maximums-ref.html"> + +<style> + +.item { + font: 10px/1 Ahem; + background: cyan; + grid-column: 1 / -1; +} + +.abs { + width: 100%; + height: 5px; + position: absolute; +} + +.grid { + border: 2px solid black; + display: grid; + position: relative; + padding-top: 10px; + margin-bottom: 10px; + width: 100px; + justify-items: start; +} + +.float { + float: left; + width: 200px; +} + +.col1 { grid-column: 1 / 2; background: orange; } +.col2 { grid-column: 2 / 3; background: indigo; } +.col3 { grid-column: 3 / 4; background: green; } + +.gridMinContent { grid-template: 20px / minmax(0px, min-content) 5px; } +.gridMaxContent { grid-template: 20px / 5px minmax(0px, max-content); } +.gridMinMaxContent { grid-template: 20px / minmax(0px, min-content) 5% minmax(0px, max-content); } +.gridAutoMinContent { grid-template: 20px / minmax(0px, auto) 5px minmax(0px, min-content); } +.gridFitContentAuto { grid-template: 20px / fit-content(100px) 5px minmax(0px, auto); } + +</style> + +<div class="float"> + +<div class="grid gridMinContent"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="grid gridMinContent"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="grid gridMinContent"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="grid gridMaxContent"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="grid gridMaxContent"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +<div class="grid gridMaxContent"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> +</div> + +</div> + +<div class="float"> + +<div class="grid gridMinMaxContent"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid gridMinMaxContent"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid gridMinMaxContent"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid gridAutoMinContent"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid gridAutoMinContent"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid gridAutoMinContent" style="justify-items: start"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +</div> + +<div class="float"> + +<div class="grid gridFitContentAuto"> + <div class="item" style="min-width: 15px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid gridFitContentAuto"> + <div class="item" style="min-width: 55px;">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +<div class="grid gridFitContentAuto"> + <div class="item min-width-max-content">XXXX XXXX</div> + <div class="abs col1"></div> + <div class="abs col2"></div> + <div class="abs col3"></div> +</div> + +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-001.html new file mode 100644 index 0000000000..1dca0dcaa1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-001.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid item sizing</title> +<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items"> +<meta name="assert" content="A grid item is sized within the containing block defined by its grid area"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #grid { + display: grid; + width: 200px; + height: 200px; + grid-template-rows: 100px; + grid-template-columns: 100px; + } + + #test-overlapped-red { + background-color: red; + width: 100%; + height: 100%; + } + + #test-overlapping-green { + background-color: green; + width: 100px; + height: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="grid"> + <div id="test-overlapped-red"> + <div id="test-overlapping-green"></div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-002.html new file mode 100644 index 0000000000..664e069103 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-002.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid item sizing</title> +<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items"> +<meta name="assert" content="A grid item is sized within the containing block defined by its grid area"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #grid { + display: grid; + width: 200px; + height: 200px; + grid-template-rows: 50%; + grid-template-columns: 50%; + } + + #test-overlapped-red { + background-color: red; + width: 100%; + height: 100%; + } + + #test-overlapping-green { + background-color: green; + width: 100px; + height: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="grid"> + <div id="test-overlapped-red"> + <div id="test-overlapping-green"></div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-003.html new file mode 100644 index 0000000000..0194f3cf6e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-003.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid item sizing</title> +<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items"> +<meta name="assert" content="A grid item is sized within the containing block defined by its grid area"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #grid { + display: grid; + width: 200px; + height: 200px; + grid-template-rows: 1fr 1fr; + grid-template-columns: 1fr 1fr; + } + + #test-overlapped-red { + background-color: red; + width: 100%; + height: 100%; + } + + #test-overlapping-green { + background-color: green; + width: 100px; + height: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="grid"> + <div id="test-overlapped-red"> + <div id="test-overlapping-green"></div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-004.html new file mode 100644 index 0000000000..b36fbb2bbc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-004.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid item sizing in a positioned grid container</title> +<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items"> +<meta name="assert" content="A grid item is sized within the containing block defined by its grid area that intersects flexible tracks"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #grid { + display: grid; + position: absolute; + height: 200px; + width: 200px; + grid-template-rows: 1fr 1fr; + grid-template-columns: 1fr 1fr; + } + + #test-item-overlapped-red { + background-color: red; + width: 100%; + height: 100%; + } + #reference-overlapping-green{ + background-color: green; + width: 100px; + height: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="grid"> + <div id="test-item-overlapped-red"> + <div id="reference-overlapping-green"> + </div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-dynamic-min-contribution-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-dynamic-min-contribution-001.html new file mode 100644 index 0000000000..c4ced6b2a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-dynamic-min-contribution-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Grid Layout Test: dynamic minimum contribution</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-contribution"> +<meta name="assert" content="This test checks that grid items are sized correctly when their minimum contribution is dynamically changed with JavaScript." /> +<style> +#grid { + display: grid; + height: 100px; + width: 100px; +} +</style> +<div id="log"></div> +<div id="grid"> + <div id="item"></div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +const tests = [ + ["auto", "100px"], + ["0%", "100px"], + ["100%", "100px"], + ["200%", "200px"], + ["300%", "300px"], + ["400px", "400px"], + ["500px", "500px"], +]; +const item = document.getElementById("item"); +for (let [minSize, expectedSize] of tests) { + test(() => { + item.style.minHeight = item.style.minWidth = minSize; + let cs = getComputedStyle(item); + assert_equals(cs.height, expectedSize, "height"); + assert_equals(cs.width, expectedSize, "width"); + }, `Minimum size: ${minSize}`); +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-flex-container-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-flex-container-001.html new file mode 100644 index 0000000000..56c999c558 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-flex-container-001.html @@ -0,0 +1,132 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid item which is also a flex container</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1"> +<meta name="assert" content="Checks that the grid is updated when the contents of the grid item flex container change their size dynamically."> +<style> +.grid { + display: grid; + width: 100px; + background: cyan; +} +.flex { + display: flex; + min-height: 0; + height: 100%; +} +.height200 { + height: 200px; +} +.height100 { + height: 100px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<div id="log"></div> + +<pre>grid-template-rows: minmax(auto, auto);</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, auto);" data-expected-height="100" > + <div class="flex"> + <div> + <div class="height200"></div> + </div> + </div> +</div> + +<pre>grid-template-rows: minmax(min-content, auto);</pre> + +<div class="grid" style="grid-template-rows: minmax(min-content, auto);" data-expected-height="100"> + <div class="flex"> + <div> + <div class="height200"></div> + </div> + </div> +</div> + +<pre>grid-template-rows: minmax(max-content, auto);</pre> + +<div class="grid" style="grid-template-rows: minmax(max-content, auto);" data-expected-height="100"> + <div class="flex"> + <div> + <div class="height200"></div> + </div> + </div> +</div> + +<pre>grid-template-rows: minmax(auto, min-content);</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, min-content);" data-expected-height="100"> + <div class="flex"> + <div> + <div class="height200"></div> + </div> + </div> +</div> + +<pre>grid-template-rows: minmax(min-content, min-content);</pre> + +<div class="grid" style="grid-template-rows: minmax(min-content, min-content);" data-expected-height="100"> + <div class="flex"> + <div> + <div class="height200"></div> + </div> + </div> +</div> + +<pre>grid-template-rows: minmax(max-content, min-content);</pre> + +<div class="grid" style="grid-template-rows: minmax(max-content, min-content);" data-expected-height="100"> + <div class="flex"> + <div> + <div class="height200"></div> + </div> + </div> +</div> + +<pre>grid-template-rows: minmax(auto, max-content);</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, max-content);" data-expected-height="100"> + <div class="flex"> + <div> + <div class="height200"></div> + </div> + </div> +</div> + +<pre>grid-template-rows: minmax(min-content, max-content);</pre> + +<div class="grid" style="grid-template-rows: minmax(min-content, max-content);" data-expected-height="100"> + <div class="flex"> + <div> + <div class="height200"></div> + </div> + </div> +</div> + +<pre>grid-template-rows: minmax(max-content, max-content);</pre> + +<div class="grid" style="grid-template-rows: minmax(max-content, max-content);" data-expected-height="100"> + <div class="flex"> + <div> + <div class="height200"></div> + </div> + </div> +</div> + +<script> +// Force layout +document.body.offsetLeft; + +// Change content sizes +for (let el of document.querySelectorAll(".height200")) { + el.className = "height100"; +} + +// Check final layout +checkLayout('.grid'); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-001.html new file mode 100644 index 0000000000..ebed26b332 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-001.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-overview"> +<meta name="assert" content="Tests the min-content contribution is using the correct block-size."> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: inline-grid; background: green; height: 100px; grid-template-rows: 50px;"> + <div style="height: 100%;"> <!-- This height should resolve against 50px - not 100px --> + <canvas width="20" height="10" style="height: 100%;"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-002.html new file mode 100644 index 0000000000..bcf4f5f867 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-002.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-overview"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6356#issuecomment-862800005"> +<meta name="assert" content="Tests the min-content contribution is re-resolved during a 2nd pass."> +<!-- + +" + Then, if the min-content contribution of any grid item has changed based on + the row sizes and alignment calculated in step 2, re-resolve the sizes of the + grid columns with the new min-content and max-content contributions (once + only). +" + +In this testcase initially the row size is indefinite, then resolves to 100px. +Using this information we re-resolve the columns, resulting in 100px for the +first column. + +--> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; width: 0; grid-template: auto / auto auto;"> + <div style="background: green; height: 100%;"> + <canvas width="10" height="10" style="height: 100%;"> + </div> + <div> + <div style="height: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-003.html new file mode 100644 index 0000000000..8432c1d5e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-003.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-overview"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6356#issuecomment-862800005"> +<meta name="assert" content="Tests the min-content contribution is re-resolved during a 2nd pass."> +<!-- + +" + Then, if the min-content contribution of any grid item has changed based on + the row sizes and alignment calculated in step 2, re-resolve the sizes of the + grid columns with the new min-content and max-content contributions (once + only). +" + +In this testcase initially the row size is indefinite, then resolves to 100px. +Using this information we re-resolve the columns, resulting in 100px for the +first column. + +--> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; width: 0; grid-template: auto / auto auto;"> + <div style="background: green;"> <!-- Has stretch alignment which the child should resolve against. --> + <canvas width="10" height="10" style="height: 100%;"> + </div> + <div> + <div style="height: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-margins-and-writing-modes-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-margins-and-writing-modes-001-ref.html new file mode 100644 index 0000000000..86553ef6f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-margins-and-writing-modes-001-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<link href="/css/support/grid.css" rel="stylesheet"> +<link href="/fonts/ahem.css" rel="stylesheet"/> +<style> +.block { + background-color: grey; + width: 80px; + height: 80px; + position: relative; + margin-bottom: 5px; + border: 1px solid; +} + +.item { + font: 15px/1 Ahem; + background-color: green; + width: 40px; + height: 20px; + margin: 4px 8px 12px 16px; +} +</style> + +<body> + <div class="block"> + <div class="item">X</div> + </div> + <div class="block verticalRL"> + <div class="item">X</div> + </div> + <div class="block verticalLR"> + <div class="item">X</div> + </div> + <div class="block directionRTL"> + <div class="item">X</div> + </div> + <div class="block directionRTL verticalRL"> + <div class="item">X</div> + </div> + <div class="block directionRTL verticalLR"> + <div class="item">X</div> + </div> +</body> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-margins-and-writing-modes-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-margins-and-writing-modes-001.html new file mode 100644 index 0000000000..5209940a96 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-margins-and-writing-modes-001.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<title>CSS Grid: Grid items and logical margins</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-column"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-row"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items"> +<link rel="match" href="grid-item-margins-and-writing-modes-001-ref.html"> +<meta name="assert" content="This test ensures that the border, margin, and padding +combining with RTL direction and different writing-modes generate the proper layout."/> +<link href="/css/support/grid.css" rel="stylesheet"> +<link href="/fonts/ahem.css" rel="stylesheet"/> +<style> +.grid { + grid-template-columns: 80px; +} + +.block { + background-color: grey; + width: 80px; + height: 80px; + position: relative; + margin-bottom: 5px; + border: 1px solid; +} + +.item { + font: 15px/1 Ahem; + background-color: green; + grid-column: 1 / 2; + grid-row: 1 / 2; + width: 40px; + height: 20px; + margin: 4px 8px 12px 16px; +} +</style> + +<body> + <div class="grid block"> + <div class="item">X</div> + </div> + <div class="grid block verticalRL"> + <div class="item">X</div> + </div> + <div class="grid block verticalLR"> + <div class="item">X</div> + </div> + <div class="grid block directionRTL"> + <div class="item">X</div> + </div> + <div class="grid block directionRTL verticalRL"> + <div class="item">X</div> + </div> + <div class="grid block directionRTL verticalLR"> + <div class="item">X</div> + </div> +</body> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-min-auto-size-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-min-auto-size-001.html new file mode 100644 index 0000000000..f50e9ef312 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-min-auto-size-001.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title>CSS Grid Test: computed style for auto minimum size</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .grid { display: grid } + .none { display: none } + .min-wh { + min-width: auto; + min-height: auto; + } + .contents { display: contents } +</style> +<div class="grid"> + <div class="min-wh"></div> +</div> +<div class="none"> + <div class="grid"> + <div class="min-wh"></div> + </div> +</div> +<div class="grid"> + <div class="contents"> + <div class="min-wh"></div> + </div> +</div> +<div class="grid"> + <div class="min-wh none"></div> +</div> +<script> + const tests = [ + { description: "Computed min-width/min-height of specified auto for grid item.", computed: "auto" }, + { description: "Computed min-width/min-height of specified auto inside display:none which would otherwise have been a grid item.", computed: "0px" }, + { description: "Computed min-width/min-height of specified auto for grid item inside display:contents.", computed: "auto" }, + { description: "Computed min-width/min-height of specified auto with display:none which would otherwise have been a grid item.", computed: "0px" } + ]; + + const testElements = document.querySelectorAll(".min-wh"); + let testNo = 0; + for (let testElement of testElements) { + test(() => { + assert_equals(getComputedStyle(testElement).minWidth, tests[testNo].computed); + assert_equals(getComputedStyle(testElement).minHeight, tests[testNo].computed); + }, tests[testNo].description); + testNo++; + } +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-overflow-auto-max-height-percentage-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-overflow-auto-max-height-percentage-ref.html new file mode 100644 index 0000000000..96a3ca1d50 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-overflow-auto-max-height-percentage-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Testcase for bug 1526567</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.webconsole-app { + display: grid; +} + +.sidebar { + display: flex; + flex: 1; + flex-direction: row; + background: blue; +} + +.controlled { + display: flex; + overflow: auto; +} + +.sidebar-wrapper { + display: grid; + grid-template-columns: 100px; + grid-template-rows: 50px 1fr; + overflow: hidden; +} + +.sidebar-contents { + grid-row: 2 / 3; + overflow: auto; +} + + </style> +</head> +<body> + +<div class="webconsole-app"> + <div class="sidebar"> + <div class="controlled"> + <div class="sidebar-wrapper"> + <div></div> + <div class="sidebar-contents"> + <div style="height:400px; background: grey"></div> + </div> + </div> + </div> + </div> +</div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-overflow-auto-max-height-percentage.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-overflow-auto-max-height-percentage.html new file mode 100644 index 0000000000..62273b87e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-overflow-auto-max-height-percentage.html @@ -0,0 +1,69 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1526567</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#behave-auto"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1526567"> + <link rel="match" href="grid-item-overflow-auto-max-height-percentage-ref.html"> + <meta name="assert" content="Check that max-height:100% has no effect on a grid item's max-content contribution, since the percentage basis is indefinite in this case."> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.webconsole-app { + display: grid; + height: 200px; +} + +.sidebar { + display: flex; + flex: 1; + flex-direction: row; + height: 100%; + background: blue; +} + +.controlled { + display: flex; + overflow: auto; +} + +.sidebar-wrapper { + display: grid; + grid-template-columns: 100px; + grid-template-rows: 50px 1fr; + overflow: hidden; +} + +.sidebar-contents { + grid-row: 2 / 3; + overflow: auto; + max-height: 100%; +} + + </style> +</head> +<body> + +<div class="webconsole-app"> + <div class="sidebar"> + <div class="controlled"> + <div class="sidebar-wrapper"> + <div></div> + <div class="sidebar-contents"> + <div style="height:400px; background: grey"></div> + </div> + </div> + </div> + </div> +</div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-001-ref.html new file mode 100644 index 0000000000..1090871575 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-001-ref.html @@ -0,0 +1,312 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Reference: item [min-|max-]*[width|height] percentages</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + height: 10px; + width: 10px; + grid: 1px auto 2px / 3px auto 4px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2; + height: 30px; + width: 30px; +} +.content { + height: 30px; + width: 30px; +} +.min { + height: 7px; + width: 3px; +} +.min:not(.max):not(.size) { + height: 30px; + width: 30px; +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-001.html new file mode 100644 index 0000000000..97532e495c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-001.html @@ -0,0 +1,318 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: item [min-|max-]*[width|height] percentages</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1526567"> +<link rel="match" href="grid-item-percentage-sizes-001-ref.html"> +<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=1 auto tracks."> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + height: 10px; + width: 10px; + grid: 1px auto 2px / 3px auto 4px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2; +} +.content { + height: 30px; + width: 30px; +} +.min { + min-height: 100%; + min-width: 100%; +} +.max { + max-height: 100%; + max-width: 100%; +} +.size { + height: 100%; + width: 100%; +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-002-ref.html new file mode 100644 index 0000000000..568642631b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-002-ref.html @@ -0,0 +1,312 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Reference: item [min-|max-]*[width|height] percentages</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + height: 10px; + width: 10px; + grid: 1px auto 2px 3px / 3px auto 4px 2px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2/span 2/span 2; + height: 30px; + width: 30px; +} +.content { + height: 30px; + width: 30px; +} +.min { + height: 6px; + width: 5px; +} +.min:not(.max):not(.size) { + height: 30px; + width: 30px; +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-002.html new file mode 100644 index 0000000000..2ceba537f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-002.html @@ -0,0 +1,318 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: item [min-|max-]*[width|height] percentages</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1526567"> +<link rel="match" href="grid-item-percentage-sizes-002-ref.html"> +<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=2 auto tracks."> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + height: 10px; + width: 10px; + grid: 1px auto 2px 3px / 3px auto 4px 2px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2/span 2/span 2; +} +.content { + height: 30px; + width: 30px; +} +.min { + min-height: 100%; + min-width: 100%; +} +.max { + max-height: 100%; + max-width: 100%; +} +.size { + height: 100%; + width: 100%; +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-003-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-003-ref.html new file mode 100644 index 0000000000..41070a8f01 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-003-ref.html @@ -0,0 +1,316 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Reference: item [min-|max-]*[width|height] calc() percentages</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + height: 10px; + width: 10px; + grid: 1px auto 2px / 3px auto 4px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2; + height: 30px; + width: 30px; +} +.content { + height: 30px; + width: 30px; +} +.min { + height: 9px; + width: 5px; +} +.min:not(.max):not(.size) { + height: 30px; + width: 30px; +} +.size:not(.min) { + height: 32px; + width: 32px; +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-003.html new file mode 100644 index 0000000000..fccf4fe0a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-003.html @@ -0,0 +1,318 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: item [min-|max-]*[width|height] calc() percentages</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1526567"> +<link rel="match" href="grid-item-percentage-sizes-003-ref.html"> +<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=1 auto tracks."> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + height: 10px; + width: 10px; + grid: 1px auto 2px / 3px auto 4px; + border: solid 1px; + margin: 0 20px 20px 0; + place-items: start; +} +.item { + background: cyan; + grid-area: 2/2; +} +.content { + height: 30px; + width: 30px; +} +.min { + min-height: calc(2px + 100%); + min-width: calc(2px + 100%); +} +.max { + max-height: calc(2px + 100%); + max-width: calc(2px + 100%); +} +.size { + height: calc(2px + 100%); + width: calc(2px + 100%); +} + +.hl .item { writing-mode: horizontal-tb; direction:ltr; } +.hr .item { writing-mode: horizontal-tb; direction:rtl; } +.vrl .item { writing-mode: vertical-rl; direction:ltr; } +.vrr .item { writing-mode: vertical-rl; direction:rtl; } +.vll .item { writing-mode: vertical-lr; direction:ltr; } +.vlr .item { writing-mode: vertical-lr; direction:rtl; } +.sll .item { writing-mode: sideways-lr; direction:ltr; } +.slr .item { writing-mode: sideways-lr; direction:rtl; } + +</style> +<div class="hl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vrr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vll"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="vlr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="slr"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> + +<div class="srl"> +<div class="grid"> + <div class="item max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item max size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min size"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max"> + <div class="content"></div> + </div> +</div> +<div class="grid"> + <div class="item min max size"> + <div class="content"></div> + </div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-001-ref.html new file mode 100644 index 0000000000..a6305e560e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-001-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>Reference: Rel.pos. grid item with style change.</title> +<link rel="author" title="James0x57" href="mailto:James0x57@gmail.com"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +.grid { + margin: 40px; + display: grid; + grid: auto / repeat(3,100px); + grid-gap: 20px; +} +span, even { + position: relative; + min-height: 20px; + background: grey; + left: 0px; +} +.offset even { + left: 50%; +} + +</style> + + +<div class="grid offset"> + <span></span><span></span><span></span> + <even></even><even></even><even></even> + <span></span><span></span><span></span> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-001.html new file mode 100644 index 0000000000..d72df4126d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Rel.pos. grid item with style change.</title> +<link rel="author" title="James0x57" href="mailto:James0x57@gmail.com"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="Grid Items"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1576355"> +<link rel="match" href="grid-item-rel-pos-001-ref.html"> +<meta name="assert" content="Checks that the rel.pos. grid items are positioned correctly after a 'left' style change."> +<style> +.grid { + margin: 40px; + display: grid; + grid: auto / repeat(3,100px); + grid-gap: 20px; +} +span, even { + position: relative; + min-height: 20px; + background: grey; + left: 0px; +} +.offset even { + left: 50%; +} + +</style> + + +<div class="grid offset"> + <span></span><span></span><span></span> + <even></even><even></even><even></even> + <span></span><span></span><span></span> +</div> + +<script> + document.body.offsetHeight; + let grid = document.querySelector('.grid'); + grid.classList.remove('offset') + document.body.offsetHeight; + grid.classList.add('offset') +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-002-ref.html new file mode 100644 index 0000000000..643b80e1ca --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-002-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>Reference: Rel.pos. centered grid item with style change.</title> +<link rel="author" title="James0x57" href="mailto:James0x57@gmail.com"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +.grid { + margin: 40px; + display: grid; + grid: auto / repeat(3,100px); + grid-gap: 20px; +} +span, even { + position: relative; + min-height: 20px; + background: grey; + left: 0px; + width: 30px; + justify-self: center; +} +.offset even { + left: 20%; +} + +</style> + +<div class="grid offset"> + <span></span><span></span><span></span> + <even></even><even></even><even></even> + <span></span><span></span><span></span> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-002.html new file mode 100644 index 0000000000..4a4d6c843a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-002.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Rel.pos. centered grid item with style change.</title> +<link rel="author" title="James0x57" href="mailto:James0x57@gmail.com"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="Grid Items"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1576355"> +<link rel="match" href="grid-item-rel-pos-002-ref.html"> +<meta name="assert" content="Checks that the rel.pos. grid items are positioned correctly after a 'left' style change."> +<style> +.grid { + margin: 40px; + display: grid; + grid: auto / repeat(3,100px); + grid-gap: 20px; +} +span, even { + position: relative; + min-height: 20px; + background: grey; + left: 0px; + width: 30px; + justify-self: center; +} +.offset even { + left: 20%; +} + +</style> + +<div class="grid offset"> + <span></span><span></span><span></span> + <even></even><even></even><even></even> + <span></span><span></span><span></span> +</div> + +<script> + document.body.offsetHeight; + let grid = document.querySelector('.grid'); + grid.classList.remove('offset') + document.body.offsetHeight; + grid.classList.add('offset') +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-script-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-script-001.html new file mode 100644 index 0000000000..323e9ba3c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-script-001.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS Grid Layout Test: Insert script as grid item</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item"> +<link rel="stylesheet" href="/css/support/grid.css"/> +<link rel="match" href="../reference/grid-item-script-001-ref.html"> +<meta name="assert" content="This test ensures that inserting a script element as grid item doesn't crash."> +<div class="grid"> +<script> + var grid = document.getElementsByClassName("grid")[0]; + grid.offsetTop; + grid.innerHTML = "Test passes if it doesn't crash."; +</script> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-001.html new file mode 100644 index 0000000000..fc9b27be4d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Regular and anonymous grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Checks that grid container children become grid items, and text that is directly contained inside the grid is wrapped in an anonymous grid item."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .test-grid-overlapping-green { + display: grid; + font: 25px/1 Ahem; + color: green; + grid-template-columns: auto auto; + justify-content: start; + align-content: start; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div class="test-grid-overlapping-green"> + <div>it</div> + em + <div>it</div> + em +</div> +<div class="test-grid-overlapping-green"> + it + <span>em</span> + it + <span>em</span> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-002.html new file mode 100644 index 0000000000..dbb67db859 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-002.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Children of grid items do not create new items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Checks that the grid items do not split around blocks creating extra items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .test-grid-overlapping-green { + display: grid; + font: 25px/1 Ahem; + color: green; + justify-content: start; + align-content: start; + } + + .two-columns { + grid-template-columns: auto auto; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div class="test-grid-overlapping-green two-columns"> + <div> + <div>it</div> + em + </div> + <div> + it + <div>em</div> + </div> +</div> +<div class="test-grid-overlapping-green"> + <span> + <span>it</span>em + </span> + <span> + it<span>em</span> + </span> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-003.html new file mode 100644 index 0000000000..1cfcbc563d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-003.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with 'display:none' are not rendered</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .test-grid-overlapping-green { + display: grid; + font: 50px/1 Ahem; + color: green; + } + + .display-none-red { + display: none; + color: red; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div class="test-grid-overlapping-green two-columns"> + <span>it</span> + <span class="display-none-red">hidden</span> + <span>em</span> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-contribution-negative-margins.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-contribution-negative-margins.html new file mode 100644 index 0000000000..7f55bea748 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-contribution-negative-margins.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items contribution with negative margin</title> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items"> +<meta name="assert" content="This test checks that grid items are properly placed with negative margin."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #grid { + background: red; + display: grid; + grid-auto-flow: column; + width: 100px; + height: 100px; + overflow: hidden; + } + + #grid > div { + width: 100px; + height: 100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="grid"> + <div style="background: blue; margin-left: -100px;"></div> + <div style="background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-inline-blocks-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-inline-blocks-001.html new file mode 100644 index 0000000000..2824bc5935 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-inline-blocks-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Paint order of grid items is the same as inline blocks</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="9.5 Z-axis Ordering: the z-index property"> +<link rel="help" href="http://www.w3.org/TR/CSS2/zindex.html#painting-order" title="E.2 Painting order"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + } + + #reference-overlapped-red { + color: red; + font: 100px/1 Ahem; + grid-row: 1; + grid-column: 1; + } + + #test-overlapping-green { + background-color: green; + width: 100px; + height: 100px; + grid-row: 1; + grid-column: 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="grid"> + <div id="reference-overlapped-red">R</div> + <div id="test-overlapping-green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-height-orthogonal-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-height-orthogonal-001.html new file mode 100644 index 0000000000..c8f4633671 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-height-orthogonal-001.html @@ -0,0 +1,365 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Mininum height of grid items orthogonal</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items"> +<meta name="assert" content="Checks that orthogonal grid items minimum height take into account borders, padding and margins for grid containers with definite height."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.grid { + display: inline-grid; + height: 100px; + border: solid thick; + grid: minmax(auto, 0px) / 10px 10px; +} + +.grid > div:nth-child(1) { background: cyan; writing-mode: vertical-lr; } +.grid > div:nth-child(2) { background: magenta; } + +.height60 { height: 60px; } +.minHeight60 { min-height: 60px; } + +.marginTop5 { margin-top: 5px; } +.marginBottom10 { margin-bottom: 10px; } +.marginLeftAuto { margin-left: auto } + +.paddingTop6 { padding-top: 6px; } +.paddingBottom3 { padding-bottom: 3px; } + +.borderTop2, .borderBottom4 { border: solid yellow 0px; } +.borderTop2 { border-top-width: 2px; } +.borderBottom4 { border-bottom-width: 4px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item height: 60px;</pre> + +<div class="grid"> + <div class="height60" data-expected-height="60"></div> + <div data-expected-height="60"></div> +</div> + +<pre>Item min-height: 60px;</pre> + +<div class="grid"> + <div class="minHeight60" data-expected-height="60"></div> + <div data-expected-height="60"></div> +</div> + +<pre>Item height: 60px; & margin-left: 5px;</pre> + +<div class="grid"> + <div class="height60 marginTop5" data-expected-height="60"></div> + <div data-expected-height="65"></div> +</div> + +<pre>Item min-height: 60px; & margin-left: 5px;</pre> + +<div class="grid"> + <div class="minHeight60 marginTop5" data-expected-height="60"></div> + <div data-expected-height="65"></div> +</div> + +<pre>Item min-height: 60px; & margin-top: 5px; & margin-left: auto</pre> + +<div class="grid"> + <div class="minHeight60 marginTop5 marginLeftAuto" data-expected-height="60"></div> + <div data-expected-height="65"></div> +</div> + +<pre>Item height: 60px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="height60 marginBottom10" data-expected-height="60"></div> + <div data-expected-height="70"></div> +</div> + +<pre>Item min-height: 60px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="minHeight60 marginBottom10" data-expected-height="60"></div> + <div data-expected-height="70"></div> +</div> + +<pre>Item height: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="height60 marginTop5 marginBottom10" data-expected-height="60"></div> + <div data-expected-height="75"></div> +</div> + +<pre>Item min-height: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="minHeight60 marginTop5 marginBottom10" data-expected-height="60"></div> + <div data-expected-height="75"></div> +</div> + +<pre>Item height: 60px; & padding-left: 6px;</pre> + +<div class="grid"> + <div class="height60 paddingTop6" data-expected-height="66"></div> + <div data-expected-height="66"></div> +</div> + +<pre>Item min-height: 60px; & padding-left: 6px;</pre> + +<div class="grid"> + <div class="minHeight60 paddingTop6" data-expected-height="66"></div> + <div data-expected-height="66"></div> +</div> + +<pre>Item height: 60px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="height60 paddingBottom3" data-expected-height="63"></div> + <div data-expected-height="63"></div> +</div> + +<pre>Item min-height: 60px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="minHeight60 paddingBottom3" data-expected-height="63"></div> + <div data-expected-height="63"></div> +</div> + +<pre>Item height: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="height60 paddingTop6 paddingBottom3" data-expected-height="69"></div> + <div data-expected-height="69"></div> +</div> + +<pre>Item min-height: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="minHeight60 paddingTop6 paddingBottom3" data-expected-height="69"></div> + <div data-expected-height="69"></div> +</div> + +<pre>Item height: 60px; & border-left-width: 2px;</pre> + +<div class="grid"> + <div class="height60 borderTop2" data-expected-height="62"></div> + <div data-expected-height="62"></div> +</div> + +<pre>Item min-height: 60px; & border-left-width: 2px;</pre> + +<div class="grid"> + <div class="minHeight60 borderTop2" data-expected-height="62"></div> + <div data-expected-height="62"></div> +</div> + +<pre>Item height: 60px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="height60 borderBottom4" data-expected-height="64"></div> + <div data-expected-height="64"></div> +</div> + +<pre>Item min-height: 60px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="minHeight60 borderBottom4" data-expected-height="64"></div> + <div data-expected-height="64"></div> +</div> + +<pre>Item height: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="height60 borderTop2 borderBottom4" data-expected-height="66"></div> + <div data-expected-height="66"></div> +</div> + +<pre>Item min-height: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="minHeight60 borderTop2 borderBottom4" data-expected-height="66"></div> + <div data-expected-height="66"></div> +</div> + +<pre>Item height: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="height60 marginTop5 marginBottom10 paddingTop6 paddingBottom3 borderTop2 borderBottom4" data-expected-height="75"></div> + <div data-expected-height="90"></div> +</div> + +<pre>Item min-height: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="minHeight60 marginTop5 marginBottom10 paddingTop6 paddingBottom3 borderTop2 borderBottom4" data-expected-height="75"></div> + <div data-expected-height="90"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item height: 60px;</pre> + +<div class="grid directionRTL"> + <div class="height60" data-expected-height="60"></div> + <div data-expected-height="60"></div> +</div> + +<pre>Item min-height: 60px;</pre> + +<div class="grid directionRTL"> + <div class="minHeight60" data-expected-height="60"></div> + <div data-expected-height="60"></div> +</div> + +<pre>Item height: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL"> + <div class="height60 marginTop5" data-expected-height="60"></div> + <div data-expected-height="65"></div> +</div> + +<pre>Item min-height: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL"> + <div class="minHeight60 marginTop5" data-expected-height="60"></div> + <div data-expected-height="65"></div> +</div> + +<pre>Item min-height: 60px; & margin-top: 5px; & margin-left: auto</pre> + +<div class="grid directionRTL"> + <div class="minHeight60 marginTop5 marginLeftAuto" data-expected-height="60"></div> + <div data-expected-height="65"></div> +</div> + +<pre>Item height: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="height60 marginBottom10" data-expected-height="60"></div> + <div data-expected-height="70"></div> +</div> + +<pre>Item min-height: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="minHeight60 marginBottom10" data-expected-height="60"></div> + <div data-expected-height="70"></div> +</div> + +<pre>Item height: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="height60 marginTop5 marginBottom10" data-expected-height="60"></div> + <div data-expected-height="75"></div> +</div> + +<pre>Item min-height: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="minHeight60 marginTop5 marginBottom10" data-expected-height="60"></div> + <div data-expected-height="75"></div> +</div> + +<pre>Item height: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL"> + <div class="height60 paddingTop6" data-expected-height="66"></div> + <div data-expected-height="66"></div> +</div> + +<pre>Item min-height: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL"> + <div class="minHeight60 paddingTop6" data-expected-height="66"></div> + <div data-expected-height="66"></div> +</div> + +<pre>Item height: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="height60 paddingBottom3" data-expected-height="63"></div> + <div data-expected-height="63"></div> +</div> + +<pre>Item min-height: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="minHeight60 paddingBottom3" data-expected-height="63"></div> + <div data-expected-height="63"></div> +</div> + +<pre>Item height: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="height60 paddingTop6 paddingBottom3" data-expected-height="69"></div> + <div data-expected-height="69"></div> +</div> + +<pre>Item min-height: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="minHeight60 paddingTop6 paddingBottom3" data-expected-height="69"></div> + <div data-expected-height="69"></div> +</div> + +<pre>Item height: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL"> + <div class="height60 borderTop2" data-expected-height="62"></div> + <div data-expected-height="62"></div> +</div> + +<pre>Item min-height: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL"> + <div class="minHeight60 borderTop2" data-expected-height="62"></div> + <div data-expected-height="62"></div> +</div> + +<pre>Item height: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="height60 borderBottom4" data-expected-height="64"></div> + <div data-expected-height="64"></div> +</div> + +<pre>Item min-height: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="minHeight60 borderBottom4" data-expected-height="64"></div> + <div data-expected-height="64"></div> +</div> + +<pre>Item height: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="height60 borderTop2 borderBottom4" data-expected-height="66"></div> + <div data-expected-height="66"></div> +</div> + +<pre>Item min-height: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="minHeight60 borderTop2 borderBottom4" data-expected-height="66"></div> + <div data-expected-height="66"></div> +</div> + +<pre>Item height: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="height60 marginTop5 marginBottom10 paddingTop6 paddingBottom3 borderTop2 borderBottom4" data-expected-height="75"></div> + <div data-expected-height="90"></div> +</div> + +<pre>Item min-height: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="minHeight60 marginTop5 marginBottom10 paddingTop6 paddingBottom3 borderTop2 borderBottom4" data-expected-height="75"></div> + <div data-expected-height="90"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-001.html new file mode 100644 index 0000000000..78bbfcbd2f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-001.html @@ -0,0 +1,349 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Mininum width of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items"> +<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with definite width."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.grid { + width: 100px; + border: solid thick; + grid: 10px 10px / minmax(auto, 0px); +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { background: magenta; } + +.width60 { width: 60px; } +.minWidth60 { min-width: 60px; } + +.marginLeft5 { margin-left: 5px; } +.marginRight10 { margin-right: 10px; } + +.paddingLeft6 { padding-left: 6px; } +.paddingRight3 { padding-right: 3px; } + +.borderLeft2, .borderRight4 { border: solid yellow 0px; } +.borderLeft2 { border-left-width: 2px; } +.borderRight4 { border-right-width: 4px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item width: 60px;</pre> + +<div class="grid"> + <div class="width60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item min-width: 60px;</pre> + +<div class="grid"> + <div class="minWidth60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px;</pre> + +<div class="grid"> + <div class="width60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px;</pre> + +<div class="grid"> + <div class="minWidth60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item width: 60px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="width60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item min-width: 60px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="minWidth60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px;</pre> + +<div class="grid"> + <div class="width60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px;</pre> + +<div class="grid"> + <div class="minWidth60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="width60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item min-width: 60px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="minWidth60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px;</pre> + +<div class="grid"> + <div class="width60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px;</pre> + +<div class="grid"> + <div class="minWidth60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item width: 60px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="width60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item min-width: 60px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="minWidth60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item width: 60px;</pre> + +<div class="grid directionRTL"> + <div class="width60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item min-width: 60px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL"> + <div class="width60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item width: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="width60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item min-width: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL"> + <div class="width60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="width60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item min-width: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL"> + <div class="width60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item width: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="width60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item min-width: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-002.html new file mode 100644 index 0000000000..8458e8e078 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-002.html @@ -0,0 +1,349 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Mininum width of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items"> +<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with indefinite width."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.grid { + display: inline-grid; + border: solid 5px; + grid: 10px 10px / minmax(auto, 0px); +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { background: magenta; } + +.width60 { width: 60px; } +.minWidth60 { min-width: 60px; } + +.marginLeft5 { margin-left: 5px; } +.marginRight10 { margin-right: 10px; } + +.paddingLeft6 { padding-left: 6px; } +.paddingRight3 { padding-right: 3px; } + +.borderLeft2, .borderRight4 { border: solid yellow 0px; } +.borderLeft2 { border-left-width: 2px; } +.borderRight4 { border-right-width: 4px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item width: 60px;</pre> + +<div class="grid" data-expected-width="70"> + <div class="width60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item min-width: 60px;</pre> + +<div class="grid" data-expected-width="70"> + <div class="minWidth60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px;</pre> + +<div class="grid" data-expected-width="75"> + <div class="width60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px;</pre> + +<div class="grid" data-expected-width="75"> + <div class="minWidth60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item width: 60px; & margin-right: 10px;</pre> + +<div class="grid" data-expected-width="80"> + <div class="width60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item min-width: 60px; & margin-right: 10px;</pre> + +<div class="grid" data-expected-width="80"> + <div class="minWidth60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid" data-expected-width="85"> + <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid" data-expected-width="85"> + <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px;</pre> + +<div class="grid" data-expected-width="76"> + <div class="width60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px;</pre> + +<div class="grid" data-expected-width="76"> + <div class="minWidth60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & padding-right: 3px;</pre> + +<div class="grid" data-expected-width="73"> + <div class="width60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item min-width: 60px; & padding-right: 3px;</pre> + +<div class="grid" data-expected-width="73"> + <div class="minWidth60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid" data-expected-width="79"> + <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid" data-expected-width="79"> + <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px;</pre> + +<div class="grid" data-expected-width="72"> + <div class="width60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px;</pre> + +<div class="grid" data-expected-width="72"> + <div class="minWidth60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item width: 60px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="74"> + <div class="width60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item min-width: 60px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="74"> + <div class="minWidth60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="76"> + <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="76"> + <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="100"> + <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="100"> + <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item width: 60px;</pre> + +<div class="grid directionRTL" data-expected-width="70"> + <div class="width60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item min-width: 60px;</pre> + +<div class="grid directionRTL" data-expected-width="70"> + <div class="minWidth60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL" data-expected-width="75"> + <div class="width60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL" data-expected-width="75"> + <div class="minWidth60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item width: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL" data-expected-width="80"> + <div class="width60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item min-width: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL" data-expected-width="80"> + <div class="minWidth60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL" data-expected-width="85"> + <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL" data-expected-width="85"> + <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL" data-expected-width="76"> + <div class="width60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL" data-expected-width="76"> + <div class="minWidth60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL" data-expected-width="73"> + <div class="width60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item min-width: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL" data-expected-width="73"> + <div class="minWidth60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL" data-expected-width="79"> + <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL" data-expected-width="79"> + <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL" data-expected-width="72"> + <div class="width60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL" data-expected-width="72"> + <div class="minWidth60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item width: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="74"> + <div class="width60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item min-width: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="74"> + <div class="minWidth60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="76"> + <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="76"> + <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="100"> + <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="100"> + <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-001.html new file mode 100644 index 0000000000..4f8e689113 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-001.html @@ -0,0 +1,364 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Mininum width of grid items orthogonal</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items"> +<meta name="assert" content="Checks that orthogonal grid items minimum width takes into account borders, padding and margins for grid containers with definite width."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.grid { + width: 100px; + border: solid thick; + grid: 10px 10px / minmax(auto, 0px); +} + +.grid > div:nth-child(1) { background: cyan; writing-mode: vertical-lr; } +.grid > div:nth-child(2) { background: magenta; } + +.width60 { width: 60px; } +.minWidth60 { min-width: 60px; } + +.marginLeft5 { margin-left: 5px; } +.marginRight10 { margin-right: 10px; } +.marginTopAuto { margin-top: auto } + +.paddingLeft6 { padding-left: 6px; } +.paddingRight3 { padding-right: 3px; } + +.borderLeft2, .borderRight4 { border: solid yellow 0px; } +.borderLeft2 { border-left-width: 2px; } +.borderRight4 { border-right-width: 4px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item width: 60px;</pre> + +<div class="grid"> + <div class="width60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item min-width: 60px;</pre> + +<div class="grid"> + <div class="minWidth60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px;</pre> + +<div class="grid"> + <div class="width60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px;</pre> + +<div class="grid"> + <div class="minWidth60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-top: auto</pre> + +<div class="grid"> + <div class="minWidth60 marginLeft5 marginTopAuto" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item width: 60px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="width60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item min-width: 60px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="minWidth60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px;</pre> + +<div class="grid"> + <div class="width60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px;</pre> + +<div class="grid"> + <div class="minWidth60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="width60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item min-width: 60px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="minWidth60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px;</pre> + +<div class="grid"> + <div class="width60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px;</pre> + +<div class="grid"> + <div class="minWidth60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item width: 60px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="width60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item min-width: 60px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="minWidth60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item width: 60px;</pre> + +<div class="grid directionRTL"> + <div class="width60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item min-width: 60px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL"> + <div class="width60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-top: auto</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 marginLeft5 marginTopAuto" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item width: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="width60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item min-width: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL"> + <div class="width60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="width60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item min-width: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL"> + <div class="width60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item width: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="width60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item min-width: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-002.html new file mode 100644 index 0000000000..ef22232567 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-002.html @@ -0,0 +1,349 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Mininum width of grid items orthogonal</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items"> +<meta name="assert" content="Checks that orthogonal grid items minimum width takes into account borders, padding and margins for grid containers with indefinite width."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.grid { + display: inline-grid; + border: solid 5px; + grid: 10px 10px / minmax(auto, 0px); +} + +.grid > div:nth-child(1) { background: cyan; writing-mode: vertical-lr; } +.grid > div:nth-child(2) { background: magenta; } + +.width60 { width: 60px; } +.minWidth60 { min-width: 60px; } + +.marginLeft5 { margin-left: 5px; } +.marginRight10 { margin-right: 10px; } + +.paddingLeft6 { padding-left: 6px; } +.paddingRight3 { padding-right: 3px; } + +.borderLeft2, .borderRight4 { border: solid yellow 0px; } +.borderLeft2 { border-left-width: 2px; } +.borderRight4 { border-right-width: 4px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item width: 60px;</pre> + +<div class="grid" data-expected-width="70"> + <div class="width60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item min-width: 60px;</pre> + +<div class="grid" data-expected-width="70"> + <div class="minWidth60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px;</pre> + +<div class="grid" data-expected-width="75"> + <div class="width60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px;</pre> + +<div class="grid" data-expected-width="75"> + <div class="minWidth60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item width: 60px; & margin-right: 10px;</pre> + +<div class="grid" data-expected-width="80"> + <div class="width60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item min-width: 60px; & margin-right: 10px;</pre> + +<div class="grid" data-expected-width="80"> + <div class="minWidth60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid" data-expected-width="85"> + <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid" data-expected-width="85"> + <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px;</pre> + +<div class="grid" data-expected-width="76"> + <div class="width60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px;</pre> + +<div class="grid" data-expected-width="76"> + <div class="minWidth60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & padding-right: 3px;</pre> + +<div class="grid" data-expected-width="73"> + <div class="width60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item min-width: 60px; & padding-right: 3px;</pre> + +<div class="grid" data-expected-width="73"> + <div class="minWidth60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid" data-expected-width="79"> + <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid" data-expected-width="79"> + <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px;</pre> + +<div class="grid" data-expected-width="72"> + <div class="width60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px;</pre> + +<div class="grid" data-expected-width="72"> + <div class="minWidth60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item width: 60px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="74"> + <div class="width60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item min-width: 60px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="74"> + <div class="minWidth60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="76"> + <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="76"> + <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="100"> + <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="100"> + <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item width: 60px;</pre> + +<div class="grid directionRTL" data-expected-width="70"> + <div class="width60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item min-width: 60px;</pre> + +<div class="grid directionRTL" data-expected-width="70"> + <div class="minWidth60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL" data-expected-width="75"> + <div class="width60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL" data-expected-width="75"> + <div class="minWidth60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item width: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL" data-expected-width="80"> + <div class="width60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item min-width: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL" data-expected-width="80"> + <div class="minWidth60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL" data-expected-width="85"> + <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL" data-expected-width="85"> + <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL" data-expected-width="76"> + <div class="width60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL" data-expected-width="76"> + <div class="minWidth60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL" data-expected-width="73"> + <div class="width60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item min-width: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL" data-expected-width="73"> + <div class="minWidth60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL" data-expected-width="79"> + <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL" data-expected-width="79"> + <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL" data-expected-width="72"> + <div class="width60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL" data-expected-width="72"> + <div class="minWidth60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item width: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="74"> + <div class="width60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item min-width: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="74"> + <div class="minWidth60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="76"> + <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="76"> + <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="100"> + <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="100"> + <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-001.html new file mode 100644 index 0000000000..f137a7e475 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-001.html @@ -0,0 +1,350 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Mininum width of grid items vertical-lr</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items"> +<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with definite width in vertical-lr."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.grid { + width: 100px; + border: solid thick; + grid: minmax(auto, 0px) / 10px 10px; + writing-mode: vertical-lr; +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { background: magenta; } + +.width60 { width: 60px; } +.minWidth60 { min-width: 60px; } + +.marginLeft5 { margin-left: 5px; } +.marginRight10 { margin-right: 10px; } + +.paddingLeft6 { padding-left: 6px; } +.paddingRight3 { padding-right: 3px; } + +.borderLeft2, .borderRight4 { border: solid yellow 0px; } +.borderLeft2 { border-left-width: 2px; } +.borderRight4 { border-right-width: 4px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item width: 60px;</pre> + +<div class="grid"> + <div class="width60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item min-width: 60px;</pre> + +<div class="grid"> + <div class="minWidth60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px;</pre> + +<div class="grid"> + <div class="width60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px;</pre> + +<div class="grid"> + <div class="minWidth60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item width: 60px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="width60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item min-width: 60px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="minWidth60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px;</pre> + +<div class="grid"> + <div class="width60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px;</pre> + +<div class="grid"> + <div class="minWidth60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="width60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item min-width: 60px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="minWidth60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px;</pre> + +<div class="grid"> + <div class="width60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px;</pre> + +<div class="grid"> + <div class="minWidth60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item width: 60px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="width60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item min-width: 60px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="minWidth60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item width: 60px;</pre> + +<div class="grid directionRTL"> + <div class="width60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item min-width: 60px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL"> + <div class="width60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item width: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="width60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item min-width: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL"> + <div class="width60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="width60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item min-width: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL"> + <div class="width60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item width: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="width60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item min-width: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-002.html new file mode 100644 index 0000000000..9f2a5a2dae --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-002.html @@ -0,0 +1,350 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Mininum width of grid items vertical-lr</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items"> +<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with indefinite width in vertical-lr."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.grid { + display: inline-grid; + border: solid 5px; + grid: minmax(auto, 0px) / 10px 10px; + writing-mode: vertical-lr; +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { background: magenta; } + +.width60 { width: 60px; } +.minWidth60 { min-width: 60px; } + +.marginLeft5 { margin-left: 5px; } +.marginRight10 { margin-right: 10px; } + +.paddingLeft6 { padding-left: 6px; } +.paddingRight3 { padding-right: 3px; } + +.borderLeft2, .borderRight4 { border: solid yellow 0px; } +.borderLeft2 { border-left-width: 2px; } +.borderRight4 { border-right-width: 4px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item width: 60px;</pre> + +<div class="grid" data-expected-width="70"> + <div class="width60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item min-width: 60px;</pre> + +<div class="grid" data-expected-width="70"> + <div class="minWidth60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px;</pre> + +<div class="grid" data-expected-width="75"> + <div class="width60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px;</pre> + +<div class="grid" data-expected-width="75"> + <div class="minWidth60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item width: 60px; & margin-right: 10px;</pre> + +<div class="grid" data-expected-width="80"> + <div class="width60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item min-width: 60px; & margin-right: 10px;</pre> + +<div class="grid" data-expected-width="80"> + <div class="minWidth60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid" data-expected-width="85"> + <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid" data-expected-width="85"> + <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px;</pre> + +<div class="grid" data-expected-width="76"> + <div class="width60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px;</pre> + +<div class="grid" data-expected-width="76"> + <div class="minWidth60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & padding-right: 3px;</pre> + +<div class="grid" data-expected-width="73"> + <div class="width60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item min-width: 60px; & padding-right: 3px;</pre> + +<div class="grid" data-expected-width="73"> + <div class="minWidth60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid" data-expected-width="79"> + <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid" data-expected-width="79"> + <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px;</pre> + +<div class="grid" data-expected-width="72"> + <div class="width60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px;</pre> + +<div class="grid" data-expected-width="72"> + <div class="minWidth60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item width: 60px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="74"> + <div class="width60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item min-width: 60px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="74"> + <div class="minWidth60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="76"> + <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="76"> + <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="100"> + <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="100"> + <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item width: 60px;</pre> + +<div class="grid directionRTL" data-expected-width="70"> + <div class="width60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item min-width: 60px;</pre> + +<div class="grid directionRTL" data-expected-width="70"> + <div class="minWidth60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL" data-expected-width="75"> + <div class="width60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL" data-expected-width="75"> + <div class="minWidth60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item width: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL" data-expected-width="80"> + <div class="width60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item min-width: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL" data-expected-width="80"> + <div class="minWidth60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL" data-expected-width="85"> + <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL" data-expected-width="85"> + <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL" data-expected-width="76"> + <div class="width60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL" data-expected-width="76"> + <div class="minWidth60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL" data-expected-width="73"> + <div class="width60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item min-width: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL" data-expected-width="73"> + <div class="minWidth60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL" data-expected-width="79"> + <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL" data-expected-width="79"> + <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL" data-expected-width="72"> + <div class="width60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL" data-expected-width="72"> + <div class="minWidth60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item width: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="74"> + <div class="width60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item min-width: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="74"> + <div class="minWidth60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="76"> + <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="76"> + <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="100"> + <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="100"> + <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-001.html new file mode 100644 index 0000000000..54a5a9187b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-001.html @@ -0,0 +1,350 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Mininum width of grid items vertical-rl</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items"> +<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with definite width in vertical-rl."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.grid { + width: 100px; + border: solid thick; + grid: minmax(auto, 0px) / 10px 10px; + writing-mode: vertical-rl; +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { background: magenta; } + +.width60 { width: 60px; } +.minWidth60 { min-width: 60px; } + +.marginLeft5 { margin-left: 5px; } +.marginRight10 { margin-right: 10px; } + +.paddingLeft6 { padding-left: 6px; } +.paddingRight3 { padding-right: 3px; } + +.borderLeft2, .borderRight4 { border: solid yellow 0px; } +.borderLeft2 { border-left-width: 2px; } +.borderRight4 { border-right-width: 4px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item width: 60px;</pre> + +<div class="grid"> + <div class="width60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item min-width: 60px;</pre> + +<div class="grid"> + <div class="minWidth60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px;</pre> + +<div class="grid"> + <div class="width60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px;</pre> + +<div class="grid"> + <div class="minWidth60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item width: 60px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="width60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item min-width: 60px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="minWidth60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid"> + <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px;</pre> + +<div class="grid"> + <div class="width60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px;</pre> + +<div class="grid"> + <div class="minWidth60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="width60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item min-width: 60px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="minWidth60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid"> + <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px;</pre> + +<div class="grid"> + <div class="width60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px;</pre> + +<div class="grid"> + <div class="minWidth60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item width: 60px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="width60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item min-width: 60px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="minWidth60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid"> + <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item width: 60px;</pre> + +<div class="grid directionRTL"> + <div class="width60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item min-width: 60px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL"> + <div class="width60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item width: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="width60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item min-width: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL"> + <div class="width60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="width60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item min-width: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL"> + <div class="width60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item width: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="width60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item min-width: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL"> + <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-002.html new file mode 100644 index 0000000000..0640dbfaee --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-002.html @@ -0,0 +1,350 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Mininum width of grid items vertical-rl</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items"> +<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with indefinite width in vertical-rl."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.grid { + display: inline-grid; + border: solid 5px; + grid: minmax(auto, 0px) / 10px 10px; + writing-mode: vertical-rl; +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { background: magenta; } + +.width60 { width: 60px; } +.minWidth60 { min-width: 60px; } + +.marginLeft5 { margin-left: 5px; } +.marginRight10 { margin-right: 10px; } + +.paddingLeft6 { padding-left: 6px; } +.paddingRight3 { padding-right: 3px; } + +.borderLeft2, .borderRight4 { border: solid yellow 0px; } +.borderLeft2 { border-left-width: 2px; } +.borderRight4 { border-right-width: 4px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item width: 60px;</pre> + +<div class="grid" data-expected-width="70"> + <div class="width60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item min-width: 60px;</pre> + +<div class="grid" data-expected-width="70"> + <div class="minWidth60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px;</pre> + +<div class="grid" data-expected-width="75"> + <div class="width60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px;</pre> + +<div class="grid" data-expected-width="75"> + <div class="minWidth60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item width: 60px; & margin-right: 10px;</pre> + +<div class="grid" data-expected-width="80"> + <div class="width60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item min-width: 60px; & margin-right: 10px;</pre> + +<div class="grid" data-expected-width="80"> + <div class="minWidth60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid" data-expected-width="85"> + <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid" data-expected-width="85"> + <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px;</pre> + +<div class="grid" data-expected-width="76"> + <div class="width60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px;</pre> + +<div class="grid" data-expected-width="76"> + <div class="minWidth60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & padding-right: 3px;</pre> + +<div class="grid" data-expected-width="73"> + <div class="width60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item min-width: 60px; & padding-right: 3px;</pre> + +<div class="grid" data-expected-width="73"> + <div class="minWidth60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid" data-expected-width="79"> + <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid" data-expected-width="79"> + <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px;</pre> + +<div class="grid" data-expected-width="72"> + <div class="width60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px;</pre> + +<div class="grid" data-expected-width="72"> + <div class="minWidth60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item width: 60px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="74"> + <div class="width60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item min-width: 60px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="74"> + <div class="minWidth60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="76"> + <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="76"> + <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="100"> + <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid" data-expected-width="100"> + <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item width: 60px;</pre> + +<div class="grid directionRTL" data-expected-width="70"> + <div class="width60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item min-width: 60px;</pre> + +<div class="grid directionRTL" data-expected-width="70"> + <div class="minWidth60" data-expected-width="60"></div> + <div data-expected-width="60"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL" data-expected-width="75"> + <div class="width60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px;</pre> + +<div class="grid directionRTL" data-expected-width="75"> + <div class="minWidth60 marginLeft5" data-expected-width="60"></div> + <div data-expected-width="65"></div> +</div> + +<pre>Item width: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL" data-expected-width="80"> + <div class="width60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item min-width: 60px; & margin-right: 10px;</pre> + +<div class="grid directionRTL" data-expected-width="80"> + <div class="minWidth60 marginRight10" data-expected-width="60"></div> + <div data-expected-width="70"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL" data-expected-width="85"> + <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre> + +<div class="grid directionRTL" data-expected-width="85"> + <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div> + <div data-expected-width="75"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL" data-expected-width="76"> + <div class="width60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px;</pre> + +<div class="grid directionRTL" data-expected-width="76"> + <div class="minWidth60 paddingLeft6" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL" data-expected-width="73"> + <div class="width60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item min-width: 60px; & padding-right: 3px;</pre> + +<div class="grid directionRTL" data-expected-width="73"> + <div class="minWidth60 paddingRight3" data-expected-width="63"></div> + <div data-expected-width="63"></div> +</div> + +<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL" data-expected-width="79"> + <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre> + +<div class="grid directionRTL" data-expected-width="79"> + <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div> + <div data-expected-width="69"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL" data-expected-width="72"> + <div class="width60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px;</pre> + +<div class="grid directionRTL" data-expected-width="72"> + <div class="minWidth60 borderLeft2" data-expected-width="62"></div> + <div data-expected-width="62"></div> +</div> + +<pre>Item width: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="74"> + <div class="width60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item min-width: 60px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="74"> + <div class="minWidth60 borderRight4" data-expected-width="64"></div> + <div data-expected-width="64"></div> +</div> + +<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="76"> + <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="76"> + <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div> + <div data-expected-width="66"></div> +</div> + +<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="100"> + <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> + +<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> + +<div class="grid directionRTL" data-expected-width="100"> + <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div> + <div data-expected-width="90"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-001.html new file mode 100644 index 0000000000..dc1602ab17 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-001.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a fixed size track)."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + font: 10px/1 Ahem; + grid-template-columns: 100px; + width: 500px; + justify-items: start; + position: relative; +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { + background: magenta; + width: 100%; + height: 10px; +} + +.marginLeft50Percent { margin-left: 50%; } +.marginRight50Percent { margin-right: 50%; } +.marginTop50Percent { margin-top: 50%; } +.marginBottom50Percent { margin-bottom: 50%; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item margin-left: 50%;</pre> + +<div class="grid"> + <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item margin-right: 50%;</pre> + +<div class="grid"> + <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item margin-top: 50%;</pre> + +<div class="grid"> + <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item margin-bottom: 50%;</pre> + +<div class="grid"> + <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item margin-left: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="490" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item margin-right: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="440" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item margin-top: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item margin-bottom: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-002.html new file mode 100644 index 0000000000..6ff78b4bb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-002.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min)."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + font: 10px/1 Ahem; + grid-template-columns: minmax(auto, 100px); + width: 500px; + justify-items: start; + position: relative; +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { + background: magenta; + width: 100%; + height: 10px; +} + +.marginLeft50Percent { margin-left: 50%; } +.marginRight50Percent { margin-right: 50%; } +.marginTop50Percent { margin-top: 50%; } +.marginBottom50Percent { margin-bottom: 50%; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item margin-left: 50%;</pre> + +<div class="grid"> + <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item margin-right: 50%;</pre> + +<div class="grid"> + <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item margin-top: 50%;</pre> + +<div class="grid"> + <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item margin-bottom: 50%;</pre> + +<div class="grid"> + <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item margin-left: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="490" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item margin-right: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="440" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item margin-top: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item margin-bottom: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-003.html new file mode 100644 index 0000000000..d6805b7b35 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-003.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + font: 25px/1 Ahem; + width: 100px; +} +.child { + margin: 50px; + color: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; +} +#item { + margin: 50%; + color: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child">X</div></div> +<div class="container grid"><div class="child" id="item">X</div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "auto"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-004.html new file mode 100644 index 0000000000..009d655832 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-004.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 25px; + height: 25px; + margin: 50px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; +} +#item { + margin: 50%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "25px"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-005.html new file mode 100644 index 0000000000..4b86153e1b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-005.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 25px; + height: 25px; + margin: 50px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; +} +#item { + margin: 50%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.margin = "100%"; + item.offsetLeft; + item.style.margin = "50%"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-006.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-006.html new file mode 100644 index 0000000000..290f3fd781 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-006.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + min-width: 25px; + min-height: 25px; + margin: 50px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; +} +#item { + margin: 50%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.margin = "100%"; + item.offsetLeft; + item.style.margin = "50%"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-007.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-007.html new file mode 100644 index 0000000000..78958e0170 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-007.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + font: 25px/1 Ahem; + width: 100px; +} +.child { + margin: 0px 50px; + color: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; + grid-template-rows: 100px; +} +#item { + margin: 0px 50%; + color: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child">X</div></div> +<div class="container grid"><div class="child" id="item">X</div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "auto"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-008.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-008.html new file mode 100644 index 0000000000..49a42722c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-008.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 25px; + height: 25px; + margin: 0px 50px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; + grid-template-rows: 100px; +} +#item { + margin: 0px 50%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "25px"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-009.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-009.html new file mode 100644 index 0000000000..5fed639ef9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-009.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 25px; + height: 25px; + margin: 0px 50px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; + grid-template-rows: 100px; +} +#item { + margin: 0px 50%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.margin = "0px 100%"; + item.offsetLeft; + item.style.margin = "0px 50%"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-010.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-010.html new file mode 100644 index 0000000000..5d6995f690 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-010.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + min-width: 25px; + min-height: 25px; + margin: 0px 50px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; + grid-template-rows: 100px; +} +#item { + margin: 0px 50%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.margin = "0px 100%"; + item.offsetLeft; + item.style.margin = "0px 50%"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-011.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-011.html new file mode 100644 index 0000000000..f2a87e1fb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-011.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + font: 25px/1 Ahem; + width: 100px; +} +.child { + margin: 50px 0px; + color: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; +} +#item { + margin: 50% 0px; + color: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child">X</div></div> +<div class="container grid"><div class="child" id="item">X</div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "auto"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-012.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-012.html new file mode 100644 index 0000000000..1071cdce5f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-012.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 25px; + height: 25px; + margin: 50px 0px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; +} +#item { + margin: 50% 0px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "25px"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-013.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-013.html new file mode 100644 index 0000000000..cb3b56725b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-013.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 25px; + height: 25px; + margin: 50px 0px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; +} +#item { + margin: 50% 0px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.margin = "100% 0px"; + item.offsetLeft; + item.style.margin = "50% 0px"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-014.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-014.html new file mode 100644 index 0000000000..32a171dc9e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-014.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + min-width: 25px; + min-height: 25px; + margin: 50px 0px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; + grid-template-columns: 100px; +} +#item { + margin: 50% 0px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.margin = "100% 0px"; + item.offsetLeft; + item.style.margin = "50% 0px"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html new file mode 100644 index 0000000000..05d77f3d2c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins vertical-lr</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a fixed size track) in a vertical-lr grid container."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + font: 10px/1 Ahem; + grid-template-columns: 100px; + height: 500px; + justify-items: start; + position: relative; + writing-mode: vertical-lr; +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { + background: magenta; + width: 10px; + height: 100%; +} + +.marginLeft50Percent { margin-left: 50%; } +.marginRight50Percent { margin-right: 50%; } +.marginTop50Percent { margin-top: 50%; } +.marginBottom50Percent { margin-bottom: 50%; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item margin-left: 50%;</pre> + +<div class="grid"> + <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-right: 50%;</pre> + +<div class="grid"> + <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-top: 50%;</pre> + +<div class="grid"> + <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-bottom: 50%;</pre> + +<div class="grid"> + <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item margin-left: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-right: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-top: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-bottom: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html new file mode 100644 index 0000000000..168a719a51 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins vertical-lr</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min) in a vertical-lr grid container."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + font: 10px/1 Ahem; + grid-template-columns: minmax(auto, 100px); + height: 500px; + justify-items: start; + position: relative; + writing-mode: vertical-lr; +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { + background: magenta; + width: 10px; + height: 100%; +} + +.marginLeft50Percent { margin-left: 50%; } +.marginRight50Percent { margin-right: 50%; } +.marginTop50Percent { margin-top: 50%; } +.marginBottom50Percent { margin-bottom: 50%; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item margin-left: 50%;</pre> + +<div class="grid"> + <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-right: 50%;</pre> + +<div class="grid"> + <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-top: 50%;</pre> + +<div class="grid"> + <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-bottom: 50%;</pre> + +<div class="grid"> + <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item margin-left: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-right: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-top: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-bottom: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html new file mode 100644 index 0000000000..a1f380d051 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins vertical-rl</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a fixed size track) in a vertical-rl grid container."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + font: 10px/1 Ahem; + grid-template-columns: 100px; + height: 500px; + justify-items: start; + position: relative; + writing-mode: vertical-rl; +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { + background: magenta; + width: 10px; + height: 100%; +} + +.marginLeft50Percent { margin-left: 50%; } +.marginRight50Percent { margin-right: 50%; } +.marginTop50Percent { margin-top: 50%; } +.marginBottom50Percent { margin-bottom: 50%; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item margin-left: 50%;</pre> + +<div class="grid"> + <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="60" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-right: 50%;</pre> + +<div class="grid"> + <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="10" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-top: 50%;</pre> + +<div class="grid"> + <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-bottom: 50%;</pre> + +<div class="grid"> + <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item margin-left: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="60" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-right: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="10" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-top: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-bottom: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html new file mode 100644 index 0000000000..7309daa236 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins vertical-rl</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min) in a vertical-rl grid container."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + font: 10px/1 Ahem; + grid-template-columns: minmax(auto, 100px); + height: 500px; + justify-items: start; + position: relative; + writing-mode: vertical-rl; +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { + background: magenta; + width: 10px; + height: 100%; +} + +.marginLeft50Percent { margin-left: 50%; } +.marginRight50Percent { margin-right: 50%; } +.marginTop50Percent { margin-top: 50%; } +.marginBottom50Percent { margin-bottom: 50%; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item margin-left: 50%;</pre> + +<div class="grid"> + <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="60" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-right: 50%;</pre> + +<div class="grid"> + <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="10" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-top: 50%;</pre> + +<div class="grid"> + <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-bottom: 50%;</pre> + +<div class="grid"> + <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item margin-left: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="60" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-right: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="10" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-top: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item margin-bottom: 50%;</pre> + +<div class="grid directionRTL"> + <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-001.html new file mode 100644 index 0000000000..7c99eb9068 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-001.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a fixed size track)."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + font: 10px/1 Ahem; + grid-template-columns: 100px; + width: 500px; + justify-items: start; + position: relative; +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { + background: magenta; + width: 100%; + height: 10px; +} + +.paddingLeft50Percent { padding-left: 50%; } +.paddingRight50Percent { padding-right: 50%; } +.paddingTop50Percent { padding-top: 50%; } +.paddingBottom50Percent { padding-bottom: 50%; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item padding-left: 50%;</pre> + +<div class="grid"> + <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item padding-right: 50%;</pre> + +<div class="grid"> + <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item padding-top: 50%;</pre> + +<div class="grid"> + <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item padding-bottom: 50%;</pre> + +<div class="grid"> + <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item padding-left: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item padding-right: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item padding-top: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item padding-bottom: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-002.html new file mode 100644 index 0000000000..447b5201d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-002.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min)."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + font: 10px/1 Ahem; + grid-template-columns: minmax(auto, 100px); + width: 500px; + justify-items: start; + position: relative; +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { + background: magenta; + width: 100%; + height: 10px; +} + +.paddingLeft50Percent { padding-left: 50%; } +.paddingRight50Percent { padding-right: 50%; } +.paddingTop50Percent { padding-top: 50%; } +.paddingBottom50Percent { padding-bottom: 50%; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item padding-left: 50%;</pre> + +<div class="grid"> + <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item padding-right: 50%;</pre> + +<div class="grid"> + <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item padding-top: 50%;</pre> + +<div class="grid"> + <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item padding-bottom: 50%;</pre> + +<div class="grid"> + <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item padding-left: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item padding-right: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item padding-top: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div> +</div> + +<pre>Item padding-bottom: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-003.html new file mode 100644 index 0000000000..970f83c1ed --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-003.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + font: 80px/1 Ahem; + width: 100px; +} +.child { + padding: 10px; + color: red; +} +.ref { + position: absolute; + z-index: -1; + background: red; + height: 100px; +} +.grid { + background: green; +} +#item { + padding: 10%; + color: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child">X</div></div> +<div class="container grid"><div class="child" id="item">X</div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "auto"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-004.html new file mode 100644 index 0000000000..60b08630df --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-004.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 80px; + height: 80px; + padding: 10px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: none; + height: 100px; +} +.grid { + background: none; +} +#item { + padding: 10%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "80px"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-005.html new file mode 100644 index 0000000000..6c67080f7a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-005.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 80px; + height: 80px; + padding: 10px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + height: 100px; +} +.grid { + background: none; +} +#item { + padding: 10%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.padding = "50%"; + item.offsetLeft; + item.style.padding = "10%"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-006.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-006.html new file mode 100644 index 0000000000..b17a569024 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-006.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + min-width: 80px; + min-height: 80px; + padding: 10px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + height: 100px; +} +.grid { + background: none; +} +#item { + padding: 10%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.padding = "50%"; + item.offsetLeft; + item.style.padding = "10%"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-007.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-007.html new file mode 100644 index 0000000000..a49956390d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-007.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + font: 80px/1 Ahem; + width: 100px; +} +.child { + padding: 0px 10px; + color: red; +} +.ref { + position: absolute; + z-index: -1; + background: red; + height: 100px; +} +.grid { + background: green; + grid-template-rows: 100px; +} +#item { + padding: 0px 10%; + color: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child">X</div></div> +<div class="container grid"><div class="child" id="item">X</div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "auto"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-008.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-008.html new file mode 100644 index 0000000000..da9328bebc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-008.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 80px; + height: 100px; + padding: 0px 10px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: none; + height: 100px; +} +.grid { + background: none; + grid-template-rows: 100px; +} +#item { + padding: 0px 10%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "80px"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-009.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-009.html new file mode 100644 index 0000000000..5d86919be2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-009.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 80px; + height: 100px; + padding: 0px 10px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + height: 100px; + grid-template-rows: 100px; +} +.grid { + background: none; + grid-template-rows: 100px; +} +#item { + padding: 0px 10%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.padding = "0px 50%"; + item.offsetLeft; + item.style.padding = "0px 10%"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-010.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-010.html new file mode 100644 index 0000000000..18c8a9b7c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-010.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + min-width: 80px; + min-height: 100px; + padding: 0px 10px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + height: 100px; +} +.grid { + background: none; + grid-template-rows: 100px; +} +#item { + padding: 0px 10%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.padding = "0px 50%"; + item.offsetLeft; + item.style.padding = "0px 10%"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-011.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-011.html new file mode 100644 index 0000000000..a6aaed5ddf --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-011.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + font: 80px/1 Ahem; + width: 100px; +} +.child { + padding: 10px 0px; + color: red; +} +.ref { + position: absolute; + z-index: -1; + background: red; + height: 100px; +} +.grid { + background: green; +} +#item { + padding: 10px 0px; + color: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child">X</div></div> +<div class="container grid"><div class="child" id="item">X</div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "auto"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-012.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-012.html new file mode 100644 index 0000000000..771a1c8fef --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-012.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 100px; + height: 80px; + padding: 10px 0px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: none; + height: 100px; +} +.grid { + background: none; +} +#item { + padding: 10% 0px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.height = "0px"; + item.offsetLeft; + item.style.height = "80px"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-013.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-013.html new file mode 100644 index 0000000000..5e6ff09646 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-013.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 100px; + height: 80px; + padding: 10px 0px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + height: 100px; +} +.grid { + background: none; +} +#item { + padding: 10% 0px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.padding = "50% 0px"; + item.offsetLeft; + item.style.padding = "10% 0px"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-014.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-014.html new file mode 100644 index 0000000000..2a9bd67ec4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-014.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + min-width: 100px; + min-height: 80px; + padding: 10px 0px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + height: 100px; +} +.grid { + background: none; +} +#item { + padding: 10% 0px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.padding = "50% 0px"; + item.offsetLeft; + item.style.padding = "10% 0px"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-015.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-015.html new file mode 100644 index 0000000000..d6e8b7a4e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-015.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<meta name="assert" content="Checks that the %-padding accessed from script, for an OOF descendant resolves correctly."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('#target')"> + <div style="display: inline-grid; position: relative; grid-template: 50px 20px / 50px 20px;"> + <div style="grid-area: 2/2/2/2;"> + <div id="target" style="position: absolute; top: 0; left: 0; grid-area: 1/1/1/1; padding: 100%; background: green;" data-expected-padding-left="50" data-expected-padding-top="50"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html new file mode 100644 index 0000000000..a21ab29de9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings vertical-lr</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a fixed size track) in a vertical-lr grid container."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + font: 10px/1 Ahem; + grid-template-columns: 100px; + height: 500px; + justify-items: start; + position: relative; + writing-mode: vertical-lr; +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { + background: magenta; + width: 10px; + height: 100%; +} + +.paddingLeft50Percent { padding-left: 50%; } +.paddingRight50Percent { padding-right: 50%; } +.paddingTop50Percent { padding-top: 50%; } +.paddingBottom50Percent { padding-bottom: 50%; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item padding-left: 50%;</pre> + +<div class="grid"> + <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-right: 50%;</pre> + +<div class="grid"> + <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-top: 50%;</pre> + +<div class="grid"> + <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-bottom: 50%;</pre> + +<div class="grid"> + <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item padding-left: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-right: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-top: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-bottom: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html new file mode 100644 index 0000000000..786efe8203 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings vertical-lr</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min) in a vertical-lr grid container."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + font: 10px/1 Ahem; + grid-template-columns: minmax(auto, 100px); + height: 500px; + justify-items: start; + position: relative; + writing-mode: vertical-lr; +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { + background: magenta; + width: 10px; + height: 100%; +} + +.paddingLeft50Percent { padding-left: 50%; } +.paddingRight50Percent { padding-right: 50%; } +.paddingTop50Percent { padding-top: 50%; } +.paddingBottom50Percent { padding-bottom: 50%; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item padding-left: 50%;</pre> + +<div class="grid"> + <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-right: 50%;</pre> + +<div class="grid"> + <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-top: 50%;</pre> + +<div class="grid"> + <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-bottom: 50%;</pre> + +<div class="grid"> + <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item padding-left: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-right: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-top: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-bottom: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html new file mode 100644 index 0000000000..5bb2566286 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings vertical-rl</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a fixed size track) in a vertical-rl grid container."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + font: 10px/1 Ahem; + grid-template-columns: 100px; + height: 500px; + justify-items: start; + position: relative; + writing-mode: vertical-rl; +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { + background: magenta; + width: 10px; + height: 100%; +} + +.paddingLeft50Percent { padding-left: 50%; } +.paddingRight50Percent { padding-right: 50%; } +.paddingTop50Percent { padding-top: 50%; } +.paddingBottom50Percent { padding-bottom: 50%; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item padding-left: 50%;</pre> + +<div class="grid"> + <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-right: 50%;</pre> + +<div class="grid"> + <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-top: 50%;</pre> + +<div class="grid"> + <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-bottom: 50%;</pre> + +<div class="grid"> + <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item padding-left: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-right: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-top: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-bottom: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html new file mode 100644 index 0000000000..5502aecd68 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings vertical-rl</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min) in a vertical-rl grid container."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + font: 10px/1 Ahem; + grid-template-columns: minmax(auto, 100px); + height: 500px; + justify-items: start; + position: relative; + writing-mode: vertical-rl; +} + +.grid > div:nth-child(1) { background: cyan; } +.grid > div:nth-child(2) { + background: magenta; + width: 10px; + height: 100%; +} + +.paddingLeft50Percent { padding-left: 50%; } +.paddingRight50Percent { padding-right: 50%; } +.paddingTop50Percent { padding-top: 50%; } +.paddingBottom50Percent { padding-bottom: 50%; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<pre>Item padding-left: 50%;</pre> + +<div class="grid"> + <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-right: 50%;</pre> + +<div class="grid"> + <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-top: 50%;</pre> + +<div class="grid"> + <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-bottom: 50%;</pre> + +<div class="grid"> + <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div> +</div> + +<h3>Direction RTL</h3> + +<pre>Item padding-left: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-right: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div> + <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-top: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> + +<pre>Item padding-bottom: 50%;</pre> + +<div class="grid directionRTL"> + <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div> + <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-001.html new file mode 100644 index 0000000000..8d2b7e08a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-001.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with relative offsets</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<meta name="assert" content="Checks that relative offests work for grid items."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.grid { + position: relative; + grid: 90px 60px 30px / 200px 150px 100px; + inline-size: 600px; + block-size: 300px; +} + +.grid > div { position: relative; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<div class="grid"> + <div class="firstRowFirstColumn" style="left: 10px; top: 9px;" + data-offset-x="10" data-offset-y="9" data-expected-width="200" data-expected-height="90"></div> + <div class="secondRowSecondColumn" style="left: -15px; top: -12px;" + data-offset-x="185" data-offset-y="78" data-expected-width="150" data-expected-height="60"></div> + <div class="thirdRowThirdColumn" style="right: 30px; bottom: 21px;" + data-offset-x="320" data-offset-y="129" data-expected-width="100" data-expected-height="30"></div> +</div> + +<h3>Direction RTL</h3> + +<div class="grid directionRTL"> + <div class="firstRowFirstColumn" style="left: 10px; top: 9px;" + data-offset-x="410" data-offset-y="9" data-expected-width="200" data-expected-height="90"></div> + <div class="secondRowSecondColumn" style="left: -15px; top: -12px;" + data-offset-x="235" data-offset-y="78" data-expected-width="150" data-expected-height="60"></div> + <div class="thirdRowThirdColumn" style="right: 30px; bottom: 21px;" + data-offset-x="120" data-offset-y="129" data-expected-width="100" data-expected-height="30"></div> +</div> + +<h2>Writing Mode vertical-lr</h2> + +<h3>Direction LTR</h3> + +<div class="grid verticalLR"> + <div class="firstRowFirstColumn" style="left: 9px; top: 10px;" + data-offset-x="9" data-offset-y="10" data-expected-width="90" data-expected-height="200"></div> + <div class="secondRowSecondColumn" style="left: -12px; top: -15px;" + data-offset-x="78" data-offset-y="185" data-expected-width="60" data-expected-height="150"></div> + <div class="thirdRowThirdColumn" style="right: 21px; bottom: 30px;" + data-offset-x="129" data-offset-y="320" data-expected-width="30" data-expected-height="100"></div> +</div> + +<h3>Direction RTL</h3> + +<div class="grid verticalLR directionRTL"> + <div class="firstRowFirstColumn" style="left: 9px; top: 10px;" + data-offset-x="9" data-offset-y="410" data-expected-width="90" data-expected-height="200"></div> + <div class="secondRowSecondColumn" style="left: -12px; top: -15px;" + data-offset-x="78" data-offset-y="235" data-expected-width="60" data-expected-height="150"></div> + <div class="thirdRowThirdColumn" style="right: 21px; bottom: 30px;" + data-offset-x="129" data-offset-y="120" data-expected-width="30" data-expected-height="100"></div> +</div> + +<h2>Writing Mode vertical-rl</h2> + +<h3>Direction LTR</h3> + +<div class="grid verticalRL"> + <div class="firstRowFirstColumn" style="left: 9px; top: 10px;" + data-offset-x="219" data-offset-y="10" data-expected-width="90" data-expected-height="200"></div> + <div class="secondRowSecondColumn" style="left: -12px; top: -15px;" + data-offset-x="138" data-offset-y="185" data-expected-width="60" data-expected-height="150"></div> + <div class="thirdRowThirdColumn" style="right: 21px; bottom: 30px;" + data-offset-x="99" data-offset-y="320" data-expected-width="30" data-expected-height="100"></div> +</div> + +<h3>Direction RTL</h3> + +<div class="grid verticalRL directionRTL"> + <div class="firstRowFirstColumn" style="left: 9px; top: 10px;" + data-offset-x="219" data-offset-y="410" data-expected-width="90" data-expected-height="200"></div> + <div class="secondRowSecondColumn" style="left: -12px; top: -15px;" + data-offset-x="138" data-offset-y="235" data-expected-width="60" data-expected-height="150"></div> + <div class="thirdRowThirdColumn" style="right: 21px; bottom: 30px;" + data-offset-x="99" data-offset-y="120" data-expected-width="30" data-expected-height="100"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-002.html new file mode 100644 index 0000000000..fb0cfd7549 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-002.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with relative offsets</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<meta name="assert" content="Checks that relative percentage offests work for grid items."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.grid { + position: relative; + grid: 90px 60px 30px / 200px 150px 100px; + inline-size: 600px; + block-size: 300px; +} + +.grid > div { position: relative; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<h3>Direction LTR</h3> + +<div class="grid"> + <div class="firstRowFirstColumn" style="left: 5%; top: 10%;" + data-offset-x="10" data-offset-y="9" data-expected-width="200" data-expected-height="90"></div> + <div class="secondRowSecondColumn" style="left: -10%; top: -20%;" + data-offset-x="185" data-offset-y="78" data-expected-width="150" data-expected-height="60"></div> + <div class="thirdRowThirdColumn" style="right: 30%; bottom: 70%;" + data-offset-x="320" data-offset-y="129" data-expected-width="100" data-expected-height="30"></div> +</div> + +<h3>Direction RTL</h3> + +<div class="grid directionRTL"> + <div class="firstRowFirstColumn" style="left: 5%; top: 10%;" + data-offset-x="410" data-offset-y="9" data-expected-width="200" data-expected-height="90"></div> + <div class="secondRowSecondColumn" style="left: -10%; top: -20%;" + data-offset-x="235" data-offset-y="78" data-expected-width="150" data-expected-height="60"></div> + <div class="thirdRowThirdColumn" style="right: 30%; bottom: 70%;" + data-offset-x="120" data-offset-y="129" data-expected-width="100" data-expected-height="30"></div> +</div> + +<h2>Writing Mode vertical-lr</h2> + +<h3>Direction LTR</h3> + +<div class="grid verticalLR"> + <div class="firstRowFirstColumn" style="left: 10%; top: 5%;" + data-offset-x="9" data-offset-y="10" data-expected-width="90" data-expected-height="200"></div> + <div class="secondRowSecondColumn" style="left: -20%; top: -10%;" + data-offset-x="78" data-offset-y="185" data-expected-width="60" data-expected-height="150"></div> + <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;" + data-offset-x="129" data-offset-y="320" data-expected-width="30" data-expected-height="100"></div> +</div> + +<h3>Direction RTL</h3> + +<div class="grid verticalLR directionRTL"> + <div class="firstRowFirstColumn" style="left: 10%; top: 5%;" + data-offset-x="9" data-offset-y="410" data-expected-width="90" data-expected-height="200"></div> + <div class="secondRowSecondColumn" style="left: -20%; top: -10%;" + data-offset-x="78" data-offset-y="235" data-expected-width="60" data-expected-height="150"></div> + <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;" + data-offset-x="129" data-offset-y="120" data-expected-width="30" data-expected-height="100"></div> +</div> + +<h2>Writing Mode vertical-rl</h2> + +<h3>Direction LTR</h3> + +<div class="grid verticalRL"> + <div class="firstRowFirstColumn" style="left: 10%; top: 5%;" + data-offset-x="219" data-offset-y="10" data-expected-width="90" data-expected-height="200"></div> + <div class="secondRowSecondColumn" style="left: -20%; top: -10%;" + data-offset-x="138" data-offset-y="185" data-expected-width="60" data-expected-height="150"></div> + <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;" + data-offset-x="99" data-offset-y="320" data-expected-width="30" data-expected-height="100"></div> +</div> + +<h3>Direction RTL</h3> + +<div class="grid verticalRL directionRTL"> + <div class="firstRowFirstColumn" style="left: 10%; top: 5%;" + data-offset-x="219" data-offset-y="410" data-expected-width="90" data-expected-height="200"></div> + <div class="secondRowSecondColumn" style="left: -20%; top: -10%;" + data-offset-x="138" data-offset-y="235" data-expected-width="60" data-expected-height="150"></div> + <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;" + data-offset-x="99" data-offset-y="120" data-expected-width="30" data-expected-height="100"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-sizing-alignment-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-sizing-alignment-001-ref.html new file mode 100644 index 0000000000..c3eccf48eb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-sizing-alignment-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference: Grid Item Sizing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> + button { + margin: 0; /* Prevent WebKit from adding some margin */ + } +</style> + +<p>Test passes if it has the same output than the reference.</p> + +<div id="grid"> + <button style="width: 200px; height: 200px;">Stretched button (200x200)</button><button style="width: 200px; height: 200px;">Stretched button (200x200)</button><button style="vertical-align: top;">Regular button</button> + <br> + <img style="vertical-align: top; margin-right: 150px;" src="support/50x50-green.png" alt="Image download support must be enabled" /><img src="support/200x200-green.png" alt="Image download support must be enabled" /><img style="vertical-align: top;" src="support/50x50-green.png" alt="Image download support must be enabled" /> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-sizing-alignment-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-sizing-alignment-001.html new file mode 100644 index 0000000000..033d292ce6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-sizing-alignment-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid Item Sizing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#grid-item-sizing"> +<link rel="match" href="grid-items-sizing-alignment-001-ref.html" /> +<meta name="assert" content="Checks how alignment properties affect the size of the non-replaced vs replaced grid items."> +<style> + #grid { + display: grid; + grid-auto-rows: 200px; + grid-template-columns: repeat(3, 200px); + } + button { + margin: 0; /* Prevent WebKit from adding some margin */ + } +</style> + +<p>Test passes if it has the same output than the reference.</p> + +<div id="grid"> + <button style="align-self: normal; justify-self: normal;">Stretched button (200x200)</button> + <button style="align-self: stretch; justify-self: stretch;">Stretched button (200x200)</button> + <button style="align-self: start; justify-self: start;">Regular button</button> + <img src="support/50x50-green.png" alt="Image download support must be enabled" + style="align-self: normal; justify-self: normal;" /> + <img src="support/50x50-green.png" alt="Image download support must be enabled" + style="align-self: stretch; justify-self: stretch;" /> + <img src="support/50x50-green.png" alt="Image download support must be enabled" + style="align-self: start; justify-self: start;" /> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-grid-in-grid.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-grid-in-grid.html new file mode 100644 index 0000000000..605494dd27 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-grid-in-grid.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Test: grid in grid</title> + <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items"> + <link rel="match" href="../reference/grid-layout-grid-in-grid-ref.html"> + <meta name="assert" content="the nested grid should behave the same as reference."> + <style> + body { + margin: 0; + padding: 0; + } + #caseTitle { + margin: 10px; + height: 40px; + } + #grid { + height: 150px; + width: 150px; + background: #eee; + display: grid; + grid-template-columns: 50px 100px; + grid-template-rows: 100px 50px; + } + .a { + background: blue; + grid-column: 1; + grid-row: 1; + } + .b { + background: yellow; + grid-column: 2; + grid-row: 1; + display: grid; + grid-template-columns: 50px 50px; + grid-template-rows: 50px 50px; + } + .b1 { + background: orange; + grid-column: 1; + grid-row: 1; + } + .b2 { + background: cyan; + grid-column: 2; + grid-row: 2; + } + .c { + background: pink; + grid-column: 2; + grid-row: 2; + } + </style> + </head> + <body> + <p id="caseTitle">The test passes if it has the same visual effect as reference.</p> + <div id="grid"> + <div class="a"><div style="height:100px;"> </div></div> + <div class="b"> + <div class="b1"><div style="height:50px;"> </div></div> + <div class="b2"><div style="height:50px;"> </div></div> + </div> + <div class="c"><div style="height:50px;"> </div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-z-order-a.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-z-order-a.html new file mode 100644 index 0000000000..b5e1dec6d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-z-order-a.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Test: z order</title> + <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order"> + <link rel="match" href="../reference/grid-layout-z-order-ref.html"> + <meta name="assert" content="the layout should behave the same as reference."> + <style> + body { + margin: 0; + padding: 0; + } + #caseTitle { + margin: 10px; + height: 40px; + } + #grid { + width: 150px; + background: #eee; + display: grid; + grid-template-columns: 50px 50px 50px; + color:white; + } + .a { + background: blue; + grid-row: 1; + grid-column: 1 / span 2; + z-index:10 + } + .b { + background: yellow; + grid-row: 1; + grid-column: 2 / span 2; + z-index:1 + } + </style> + </head> + <body> + <p id="caseTitle">The test passes if it has the same visual effect as reference.</p> + <div id="grid"> + <div class="b">down</div> + <div class="a">up</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-z-order-b.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-z-order-b.html new file mode 100644 index 0000000000..e4fdc89e5f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-z-order-b.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Test: z order</title> + <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order"> + <link rel="match" href="../reference/grid-layout-z-order-ref.html"> + <meta name="assert" content="the layout should behave the same as reference."> + <style> + body { + margin: 0; + padding: 0; + } + #caseTitle { + margin: 10px; + height: 40px; + } + #grid { + width: 150px; + background: #eee; + display: grid; + grid-template-columns: 50px 50px 50px; + color:white; + } + .a { + background: blue; + grid-row: 1; + grid-column: 1 / 3; + z-index:10 + } + .b { + background: yellow; + grid-row: 1; + grid-column: 2 / 4; + z-index:1 + } + </style> + </head> + <body> + <p id="caseTitle">The test passes if it has the same visual effect as reference.</p> + <div id="grid"> + <div class="b">down</div> + <div class="a">up</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-001.html new file mode 100644 index 0000000000..2965fd8fb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-001.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Checks that minimum size for grid items is the content size."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-grid { + display: grid; + width: 10px; + height: 10px; + } + + #test-grid-item-overlapping-green { + color: green; + background-color: green; + font: 50px/1 Ahem; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <div id="test-grid-item-overlapping-green">IT E</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-002.html new file mode 100644 index 0000000000..39b9d033a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-002.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that minimum size for grid items is the content size."> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-grid { + display: grid; + width: 10px; + height: 10px; + } + + #test-grid-item-overlapping-green { + background-color: green; + } + + #content-100x100 { + width: 100px; + height: 100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <div id="test-grid-item-overlapping-green"> + <div id="content-100x100"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-003.html new file mode 100644 index 0000000000..19ea84c549 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-003.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that minimum size for grid items is the specified size regardless of the content size."> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-grid { + display: grid; + width: 10px; + height: 10px; + } + + #test-grid-item-overlapping-green { + background-color: green; + width: 100px; + height: 100px; + } + + #content-500x500 { + width: 500px; + height: 500px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <div id="test-grid-item-overlapping-green"> + <div id="content-500x500"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-004.html new file mode 100644 index 0000000000..34764652a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-004.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that minimum size for grid items is the specified size regardless of the content size."> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-grid { + display: grid; + width: 10px; + height: 10px; + } + + #test-grid-item-overlapping-green { + background-color: green; + width: 100px; + height: 100px; + } + + #content-50x50 { + width: 50px; + height: 50px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <div id="test-grid-item-overlapping-green"> + <div id="content-50x50"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-005.html new file mode 100644 index 0000000000..d7ac67af4d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-005.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items"> +<link rel="match" href="ref-filled-green-100px-square-image.html"> +<meta name="flags" content="image"> +<meta name="assert" content="Checks that minimum size for grid items is the content size."> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-grid { + display: grid; + width: 10px; + height: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <img src="support/100x100-green.png" alt="Image download support must be enabled" /> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-006.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-006.html new file mode 100644 index 0000000000..69bbc7c098 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-006.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items"> +<link rel="match" href="ref-filled-green-100px-square-image.html"> +<meta name="flags" content="image"> +<meta name="assert" content="Checks that minimum size for grid items is the specified size for width (regardless the content size) and the transferred size of the image for height (even when content size is bigger)."> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-grid { + display: grid; + width: 10px; + height: 10px; + } + + #test-grid-item-overlapping-green { + width: 100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <img id="test-grid-item-overlapping-green" src="support/200x200-green.png" alt="Image download support must be enabled" /> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-007.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-007.html new file mode 100644 index 0000000000..8899ca1c7a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-007.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items"> +<link rel="match" href="ref-filled-green-100px-square-image.html"> +<meta name="flags" content="image"> +<meta name="assert" content="Checks that minimum size for grid items is the specified size for width (regardless the content size) and the transferred size of the image for height (even when content size is smaller)."> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-grid { + display: grid; + grid-template-columns: auto auto; + width: 10px; + height: 10px; + } + + .test-grid-item-overlapping-green { + width: 50px; + justify-self: stretch; + align-self: stretch; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <img class="test-grid-item-overlapping-green" src="support/25x50-green.png" alt="Image download support must be enabled" /> + <img class="test-grid-item-overlapping-green" src="support/25x50-green.png" alt="Image download support must be enabled" /> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-008.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-008.html new file mode 100644 index 0000000000..c945490c48 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-008.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items"> +<link rel="match" href="ref-filled-green-100px-square-image.html"> +<meta name="flags" content="image"> +<meta name="assert" content="Checks that minimum size for grid items is the specified size for height (regardless the content size) and the transferred size of the image for width (even when content size is bigger)."> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-grid { + display: grid; + width: 10px; + height: 10px; + } + + #test-grid-item-overlapping-green { + height: 100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <img id="test-grid-item-overlapping-green" src="support/200x200-green.png" alt="Image download support must be enabled" /> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-009.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-009.html new file mode 100644 index 0000000000..77d8979cbd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-009.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items"> +<link rel="match" href="ref-filled-green-100px-square-image.html"> +<meta name="flags" content="image"> +<meta name="assert" content="Checks that minimum size for grid items is the specified size for height (regardless the content size) and the transferred size for width of the image (even when content size is smaller)."> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-grid { + display: grid; + width: 10px; + height: 10px; + } + + .test-grid-item-overlapping-green { + height: 50px; + justify-self: stretch; + align-self: stretch; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <img class="test-grid-item-overlapping-green" src="support/50x25-green.png" alt="Image download support must be enabled" /> + <img class="test-grid-item-overlapping-green" src="support/50x25-green.png" alt="Image download support must be enabled" /> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-010.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-010.html new file mode 100644 index 0000000000..a2406a5355 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-010.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area."> +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +#constrained-grid { + display: grid; + grid: 100px / 100px; +} + +#test-grid-item-overlapping-green { + background-color: green; +} + +#content-200x200 { + width: 200px; + height: 200px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <div id="test-grid-item-overlapping-green"> + <div id="content-200x200"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-011.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-011.html new file mode 100644 index 0000000000..d769cdee52 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-011.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area."> +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +#constrained-grid { + display: grid; + width: 100px; + height: 100px; + grid: minmax(0px, 500px) / minmax(0px, 500px); +} + +#test-grid-item-overlapping-green { + background-color: green; +} + +#content-200x200 { + width: 200px; + height: 200px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <div id="test-grid-item-overlapping-green"> + <div id="content-200x200"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-012.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-012.html new file mode 100644 index 0000000000..2a39c9bda1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-012.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area."> +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +#constrained-grid { + display: grid; + width: 100px; + height: 100px; + grid: minmax(0px, auto) / minmax(0px, auto); +} + +#test-grid-item-overlapping-green { + background-color: green; +} + +#content-200x200 { + width: 200px; + height: 200px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <div id="test-grid-item-overlapping-green"> + <div id="content-200x200"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-013.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-013.html new file mode 100644 index 0000000000..813f4a15a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-013.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item has not stretch alignment."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +#constrained-grid { + display: grid; + grid: 10px / 10px; +} + +#test-grid-item-overlapping-green { + color: green; + background-color: green; + font: 50px/1 Ahem; + justify-self: start; + align-self: start; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <div id="test-grid-item-overlapping-green">IT E</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-014.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-014.html new file mode 100644 index 0000000000..09e3fd5818 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-014.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item has not stretch alignment."> +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +#constrained-grid { + display: grid; + grid: 10px / 10px; +} + +#test-grid-item-overlapping-green { + background-color: green; + justify-self: start; + align-self: start; +} + +#content-100x100 { + width: 100px; + height: 100px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <div id="test-grid-item-overlapping-green"> + <div id="content-100x100"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-015.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-015.html new file mode 100644 index 0000000000..0d36aaa822 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-015.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item if it spans some not fixed grid tracks."> +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +#constrained-grid { + display: grid; + grid: 10px auto 10px / 10px auto 10px; + justify-content: start; +} + +#test-grid-item-overlapping-green { + background-color: green; + grid-row: span 3; + grid-column: span 3; +} + +#content-100x100 { + width: 100px; + height: 100px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <div id="test-grid-item-overlapping-green"> + <div id="content-100x100"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-016.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-016.html new file mode 100644 index 0000000000..26a3572738 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-016.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that automatic minimum size is clamped if the grid item only spans fixed grid tracks."> +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +#constrained-grid { + display: grid; + grid: 50px 30px 20px / 50px 30px 20px; +} + +#test-grid-item-overlapping-green { + background-color: green; + grid-row: span 3; + grid-column: span 3; +} + +#content-200x200 { + width: 200px; + height: 200px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <div id="test-grid-item-overlapping-green"> + <div id="content-200x200"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-017.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-017.html new file mode 100644 index 0000000000..4cb74022aa --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-017.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that automatic minimum size is clamped even if the track has an 'auto' min track sizing function as the max track sizing function is fixed."> +<style> +#reference-overlapped-green { + position: absolute; + background-color: green; + width: 100px; + height: 100px; + z-index: -1; +} + +#constrained-grid { + display: grid; + width: 10px; + height: 10px; + grid: minmax(auto, 0px) / minmax(auto, 0px); +} + +#test-grid-item-overlapping-red { + background-color: red; +} + +#content-100x100 { + width: 100px; + height: 100px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-green"></div> +<div id="constrained-grid"> + <div id="test-grid-item-overlapping-red"> + <div id="content-100x100"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-018.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-018.html new file mode 100644 index 0000000000..4e944295ab --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-018.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that automatic minimum size is clamped even if the track has an 'auto' min track sizing function as the max track sizing function is fixed."> +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +#constrained-grid { + display: grid; + width: 10px; + height: 10px; + grid: minmax(auto, 500px) / minmax(auto, 500px); +} + +#test-grid-item-overlapping-green { + background-color: green; +} + +#content-100x100 { + width: 100px; + height: 100px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <div id="test-grid-item-overlapping-green"> + <div id="content-100x100"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-019.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-019.html new file mode 100644 index 0000000000..ae18e61399 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-019.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area."> +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +#constrained-grid { + display: grid; + width: 500px; + height: 200px; + grid: 50% / 20%; +} + +#test-grid-item-overlapping-green { + background-color: green; +} + +#content-200x200 { + width: 200px; + height: 200px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <div id="test-grid-item-overlapping-green"> + <div id="content-200x200"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-020.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-020.html new file mode 100644 index 0000000000..2e8b47377d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-020.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that automatic minimum size is clamped if the grid item only spans fixed grid tracks."> +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +#constrained-grid { + display: grid; + width: 200px; + height: 500px; + grid: 10% 30px 20px / 50px 30px 10%; +} + +#test-grid-item-overlapping-green { + background-color: green; + grid-row: span 3; + grid-column: span 3; +} + +#content-200x200 { + width: 200px; + height: 200px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-grid"> + <div id="test-grid-item-overlapping-green"> + <div id="content-200x200"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-021.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-021.html new file mode 100644 index 0000000000..114f90a292 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-021.html @@ -0,0 +1,228 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#algo-track-sizing" title="12.3. Track Sizing Algorithm"> +<meta name="assert" content="Checks how automatic minimum size of images affect to the calculation of the grid container size and the grid tracks. Verifies the sizing of the image in the different cases too."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + display: inline-grid; + grid-template-rows: auto; + grid-template-columns: auto; + font: 25px/1 Ahem; + } + + .grid2rows { + grid-template-rows: auto auto; + } + + .constrainedGrid { + width: 10px; + height: 10px; + } + + .item { + background: black; + width: 100px; + height: 25px; + } + + .justifyContentStart { + justify-content: start; + } + + .width200px { + width: 200px; + } + + .width100percent { + width: 100%; + } +</style> + +<script> + function checkGridSizeTracksAndImageSize(gridId, imgId, gridWidth, gridHeight, gridColumns, gridRows, imgWidth, imgHeight) { + const gridStyle = getComputedStyle(document.getElementById(gridId)); + const imgStyle = getComputedStyle(document.getElementById(imgId)); + + test( + function() { + assert_equals(gridStyle.width, gridWidth); + }, gridId + ".width"); + test( + function() { + assert_equals(gridStyle.height, gridHeight); + }, gridId + ".height"); + test( + function() { + assert_equals(gridStyle.gridTemplateColumns, gridColumns); + }, gridId + ".gridTemplateColumns"); + test( + function() { + assert_equals(gridStyle.gridTemplateRows, gridRows); + }, gridId + ".gridTemplateRows"); + test( + function() { + assert_equals(imgStyle.width, imgWidth); + }, imgId + ".width"); + test( + function() { + assert_equals(imgStyle.height, imgHeight); + }, imgId + ".height"); + } + + setup({ explicit_done: true }); + + function runTests() { + checkGridSizeTracksAndImageSize("grid-1", "img-1", "200px", "200px", "200px", "200px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-2", "img-2", "10px", "10px", "200px", "200px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-3", "img-3", "200px", "200px", "200px", "200px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-4", "img-4", "200px", "10px", "200px", "200px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-5", "img-5", "200px", "50px", "50px", "50px", "50px", "50px"); + checkGridSizeTracksAndImageSize("grid-6", "img-6", "200px", "10px", "50px", "50px", "50px", "50px"); + checkGridSizeTracksAndImageSize("grid-7", "img-7", "200px", "225px", "200px", "200px 25px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-8", "img-8", "10px", "10px", "200px", "200px 25px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-9", "img-9", "200px", "225px", "200px", "200px 25px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-10", "img-10", "200px", "10px", "200px", "200px 25px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-11", "img-11", "200px", "125px", "100px", "100px 25px", "100px", "100px"); + checkGridSizeTracksAndImageSize("grid-12", "img-12", "200px", "10px", "100px", "100px 25px", "100px", "100px"); + checkGridSizeTracksAndImageSize("grid-13", "img-13", "200px", "200px", "200px", "200px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-14", "img-14", "10px", "10px", "200px", "200px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-15", "img-15", "200px", "200px", "200px", "200px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-16", "img-16", "200px", "10px", "200px", "200px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-17", "img-17", "200px", "200px", "200px", "200px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-18", "img-18", "200px", "10px", "200px", "200px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-19", "img-19", "200px", "225px", "200px", "200px 25px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-20", "img-20", "10px", "10px", "200px", "200px 25px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-21", "img-21", "200px", "225px", "200px", "200px 25px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-22", "img-22", "200px", "10px", "200px", "200px 25px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-23", "img-23", "200px", "225px", "200px", "200px 25px", "200px", "200px"); + checkGridSizeTracksAndImageSize("grid-24", "img-24", "200px", "10px", "200px", "200px 25px", "200px", "200px"); + + done(); + } +</script> + +<body onload="document.fonts.ready.then(() => { runTests(); })"> +<div id=log></div> + +<!-- Grids with only a 50x50 image as grid item. --> + +<div id="grid-1" class="grid"> + <img id="img-1" class="width200px" src="support/50x50-green.png"> +</div> + +<div id="grid-2" class="grid constrainedGrid"> + <img id="img-2" class="width200px" src="support/50x50-green.png"> +</div> + +<div id="grid-3" class="grid width200px"> + <img id="img-3" class="width100percent" src="support/50x50-green.png"> +</div> + +<div id="grid-4" class="grid width200px constrainedGrid"> + <img id="img-4" class="width100percent" src="support/50x50-green.png"> +</div> + +<div id="grid-5" class="grid width200px justifyContentStart"> + <img id="img-5" class="width100percent" src="support/50x50-green.png"> +</div> + +<div id="grid-6" class="grid width200px constrainedGrid justifyContentStart"> + <img id="img-6" class="width100percent" src="support/50x50-green.png"> +</div> + +<!-- Grids with a 50x50 image as grid item and a 100x25 text grid item. --> + +<div id="grid-7" class="grid grid2rows"> + <img id="img-7" class="width200px" src="support/50x50-green.png"> + <span class="item"></span> +</div> + +<div id="grid-8" class="grid grid2rows constrainedGrid"> + <img id="img-8" class="width200px" src="support/50x50-green.png"> + <span class="item"></span> +</div> + +<div id="grid-9" class="grid grid2rows width200px"> + <img id="img-9" class="width100percent" src="support/50x50-green.png"> + <span class="item"></span> +</div> + +<div id="grid-10" class="grid grid2rows width200px constrainedGrid"> + <img id="img-10" class="width100percent" src="support/50x50-green.png"> + <span class="item"></span> +</div> + +<div id="grid-11" class="grid grid2rows width200px justifyContentStart"> + <img id="img-11" class="width100percent" src="support/50x50-green.png"> + <span class="item"></span> +</div> + +<div id="grid-12" class="grid grid2rows width200px constrainedGrid justifyContentStart"> + <img id="img-12" class="width100percent" src="support/50x50-green.png"> + <span class="item"></span> +</div> + +<!-- Grids with only a 500x500 image as grid item. --> + +<div id="grid-13" class="grid"> + <img id="img-13" class="width200px" src="support/500x500-green.png"> +</div> + +<div id="grid-14" class="grid constrainedGrid"> + <img id="img-14" class="width200px" src="support/500x500-green.png"> +</div> + +<div id="grid-15" class="grid width200px"> + <img id="img-15" class="width100percent" src="support/500x500-green.png"> +</div> + +<div id="grid-16" class="grid width200px constrainedGrid"> + <img id="img-16" class="width100percent" src="support/500x500-green.png"> +</div> + +<div id="grid-17" class="grid width200px justifyContentStart"> + <img id="img-17" class="width100percent" src="support/500x500-green.png"> +</div> + +<div id="grid-18" class="grid width200px constrainedGrid justifyContentStart"> + <img id="img-18" class="width100percent" src="support/500x500-green.png"> +</div> + +<!-- Grids with a 500x500 image as grid item and a 100x25 text grid item. --> + +<div id="grid-19" class="grid grid2rows"> + <img id="img-19" class="width200px" src="support/500x500-green.png"> + <span class="item"></span> +</div> + +<div id="grid-20" class="grid grid2rows constrainedGrid"> + <img id="img-20" class="width200px" src="support/500x500-green.png"> + <span class="item"></span> +</div> + +<div id="grid-21" class="grid grid2rows width200px"> + <img id="img-21" class="width100percent" src="support/500x500-green.png"> + <span class="item"></span> +</div> + +<div id="grid-22" class="grid grid2rows width200px constrainedGrid"> + <img id="img-22" class="width100percent" src="support/500x500-green.png"> + <span class="item"></span> +</div> + +<div id="grid-23" class="grid grid2rows width200px justifyContentStart"> + <img id="img-23" class="width100percent" src="support/500x500-green.png"> + <span class="item"></span> +</div> + +<div id="grid-24" class="grid grid2rows width200px constrainedGrid justifyContentStart"> + <img id="img-24" class="width100percent" src="support/500x500-green.png"> + <span class="item"></span> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022.html new file mode 100644 index 0000000000..38e1a1bb26 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022.html @@ -0,0 +1,355 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<meta name="assert" content="Checks that automatic minimum size is clamped with different column sizes."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + border: solid thick; + font: 10px/1 Ahem; + width: 50px; + height: 50px; + grid-template-rows: 25px 25px; +} + +.grid > div:nth-child(1) { + color: blue; + background: cyan; +} + +.grid > div:nth-child(2) { + background: magenta; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<pre>grid-template-columns: auto;</pre> + +<div class="grid" style="grid-template-columns: auto;"> + <div data-expected-width="100">XXXXXXXXXX</div> + <div data-expected-width="100"></div> +</div> + +<pre>grid-template-columns: 0px;</pre> + +<div class="grid" style="grid-template-columns: 0px;"> + <div data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-columns: 25px;</pre> + +<div class="grid" style="grid-template-columns: 25px;"> + <div data-expected-width="25">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px);</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px);</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-width="25">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item width: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item width: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item margin width: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-width="0" style="margin: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item margin width: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-width="15" style="margin: 0px 5px;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item padding width: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-width="10" style="padding: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item padding width: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-width="25" style="padding: 0px 5px;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item border width: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-width="10" style="border: solid 5px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item border width: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-width="25" style="border: solid 5px blue;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item width + margin + border + padding: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item width + margin + border + padding: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="25"></div> +</div> + +<h3>grid content writing-mode: vertical-lr;</h3> + +<pre>grid-template-columns: auto;</pre> + +<div class="grid verticalLR" style="grid-template-columns: auto;"> + <div data-expected-height="100">XXXXXXXXXX</div> + <div data-expected-height="100"></div> +</div> + +<pre>grid-template-columns: 0px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: 0px;"> + <div data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-columns: 25px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: 25px;"> + <div data-expected-height="25">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px);</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px);</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="25">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item height: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item height: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item margin height: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="0" style="margin: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item margin height: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="15" style="margin: 5px 0px;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item padding height: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="10" style="padding: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item padding height: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="25" style="padding: 5px 0px;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item border height: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="10" style="border: solid 5px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item border height: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="25" style="border: solid 5px blue;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item height + margin + border + padding: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="25"></div> +</div> + +<h3>grid content writing-mode: vertical-rl;</h3> + +<pre>grid-template-columns: auto;</pre> + +<div class="grid verticalRL" style="grid-template-columns: auto;"> + <div data-expected-height="100">XXXXXXXXXX</div> + <div data-expected-height="100"></div> +</div> + +<pre>grid-template-columns: 0px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: 0px;"> + <div data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-columns: 25px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: 25px;"> + <div data-expected-height="25">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px);</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px);</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="25">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item height: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item height: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item margin height: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="0" style="margin: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item margin height: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="15" style="margin: 5px 0px;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item padding height: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="10" style="padding: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item padding height: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="25" style="padding: 5px 0px;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item border height: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="10" style="border: solid 5px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item border height: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="25" style="border: solid 5px blue;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);"> + <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 25px); item height + margin + border + padding: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);"> + <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="25"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-023.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-023.html new file mode 100644 index 0000000000..8993e2fb1b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-023.html @@ -0,0 +1,465 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<meta name="assert" content="Checks that automatic minimum size is clamped with different row sizes."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + border: solid thick; + font: 10px/1 Ahem; + width: 50px; + height: 50px; + grid-template-columns: 25px 25px; + margin: 50px 0px; +} + +.grid > div:nth-child(1) { + color: blue; + background: cyan; +} + +.grid > div:nth-child(2) { + background: magenta; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<h3>item writing-mode: vertical-lr;</h3> + +<pre>grid-template-rows: auto;</pre> + +<div class="grid" style="grid-template-rows: auto;"> + <div class="verticalLR" data-expected-height="100">XXXXXXXXXX</div> + <div data-expected-height="100"></div> +</div> + +<pre>grid-template-rows: 0px;</pre> + +<div class="grid" style="grid-template-rows: 0px;"> + <div class="verticalLR" data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-rows: 25px;</pre> + +<div class="grid" style="grid-template-rows: 25px;"> + <div class="verticalLR" data-expected-height="25">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px);</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px);</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalLR" data-expected-height="25">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalLR" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item margin height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="0" style="margin: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item margin height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalLR" data-expected-height="15" style="margin: 5px 0px;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item padding height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="10" style="padding: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item padding height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalLR" data-expected-height="25" style="padding: 5px 0px;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item border height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="10" style="border: solid 5px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item border height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalLR" data-expected-height="25" style="border: solid 5px blue;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item height + margin + border + padding: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalLR" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="25"></div> +</div> + +<h3>item writing-mode: vertical-rl;</h3> + +<pre>grid-template-rows: auto;</pre> + +<div class="grid" style="grid-template-rows: auto;"> + <div class="verticalRL" data-expected-height="100">XXXXXXXXXX</div> + <div data-expected-height="100"></div> +</div> + +<pre>grid-template-rows: 0px;</pre> + +<div class="grid" style="grid-template-rows: 0px;"> + <div class="verticalRL" data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-rows: 25px;</pre> + +<div class="grid" style="grid-template-rows: 25px;"> + <div class="verticalRL" data-expected-height="25">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px);</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px);</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalRL" data-expected-height="25">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalRL" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item margin height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="0" style="margin: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item margin height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalRL" data-expected-height="15" style="margin: 5px 0px;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item padding height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="10" style="padding: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item padding height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalRL" data-expected-height="25" style="padding: 5px 0px;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item border height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="10" style="border: solid 5px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item border height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalRL" data-expected-height="25" style="border: solid 5px blue;"></div> + <div data-expected-height="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item height + margin + border + padding: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 25px);"> + <div class="verticalRL" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="25"></div> +</div> + +<h3>grid container writing-mode: vertical-lr; & item writing-mode: horizontal-tb;</h3> + +<pre>grid-template-rows: auto;</pre> + +<div class="grid verticalLR" style="grid-template-rows: auto;"> + <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div> + <div data-expected-width="100"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px);</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-rows: 25px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: 25px;"> + <div class="horizontalTB" data-expected-width="25">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px);</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px);</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="25">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item width: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item width: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item margin width: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item margin width: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="15" style="margin: 0px 5px;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item padding width: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item padding width: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="25" style="padding: 0px 5px;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item border width: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item border width: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="25" style="border: solid 5px blue;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item width + margin + border + padding: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item width + margin + border + padding: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="25"></div> +</div> + +<h3>grid container writing-mode: vertical-rl; & item writing-mode: horizontal-tb;</h3> + +<pre>grid-template-rows: auto;</pre> + +<div class="grid verticalRL" style="grid-template-rows: auto;"> + <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div> + <div data-expected-width="100"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px);</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-rows: 25px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: 25px;"> + <div class="horizontalTB" data-expected-width="25">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px);</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px);</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="25">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item width: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item width: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item margin width: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item margin width: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="15" style="margin: 0px 5px;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item padding width: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item padding width: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="25" style="padding: 0px 5px;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item border width: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item border width: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="25" style="border: solid 5px blue;"></div> + <div data-expected-width="25"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px); item width + margin + border + padding: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 25px); item width + margin + border + padding: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);"> + <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="25"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-024.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-024.html new file mode 100644 index 0000000000..fc7c91dbf1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-024.html @@ -0,0 +1,359 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<meta name="assert" content="Checks that automatic minimum size is clamped with different column sizes and spaning items."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + border: solid thick; + font: 10px/1 Ahem; + width: 50px; + height: 50px; + grid-template-rows: 25px 25px; +} + +.grid > div { + grid-column: span 2; +} + +.grid > div:nth-child(1) { + color: blue; + background: cyan; +} + +.grid > div:nth-child(2) { + background: magenta; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<pre>grid-template-columns: auto auto;</pre> + +<div class="grid" style="grid-template-columns: auto auto;"> + <div data-expected-width="100">XXXXXXXXXX</div> + <div data-expected-width="100"></div> +</div> + +<pre>grid-template-columns: 0px 0px;</pre> + +<div class="grid" style="grid-template-columns: 0px 0px;"> + <div data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-columns: 20px 20px;</pre> + +<div class="grid" style="grid-template-columns: 20px 20px;"> + <div data-expected-width="40">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-width="40">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item width: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item width: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item margin width: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-width="0" style="margin: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item margin width: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-width="30" style="margin: 0px 5px;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item padding width: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-width="10" style="padding: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item padding width: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-width="40" style="padding: 0px 5px;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item border width: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-width="10" style="border: solid 5px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item border width: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-width="40" style="border: solid 5px blue;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item width + margin + border + padding: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item width + margin + border + padding: 10px;</pre> + +<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="40"></div> +</div> + +<h3>grid content writing-mode: vertical-lr;</h3> + +<pre>grid-template-columns: auto auto;</pre> + +<div class="grid verticalLR" style="grid-template-columns: auto auto;"> + <div data-expected-height="100">XXXXXXXXXX</div> + <div data-expected-height="100"></div> +</div> + +<pre>grid-template-columns: 0px 0px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: 0px 0px;"> + <div data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-columns: 20px 20px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: 20px 20px;"> + <div data-expected-height="40">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="40">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="0" style="margin: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="30" style="margin: 5px 0px;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="10" style="padding: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="40" style="padding: 5px 0px;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="10" style="border: solid 5px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="40" style="border: solid 5px blue;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="40"></div> +</div> + +<h3>grid content writing-mode: vertical-rl;</h3> + +<pre>grid-template-columns: auto auto;</pre> + +<div class="grid verticalRL" style="grid-template-columns: auto auto;"> + <div data-expected-height="100">XXXXXXXXXX</div> + <div data-expected-height="100"></div> +</div> + +<pre>grid-template-columns: 0px 0px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: 0px 0px;"> + <div data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-columns: 20px 20px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: 20px 20px;"> + <div data-expected-height="40">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="40">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="0" style="margin: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="30" style="margin: 5px 0px;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="10" style="padding: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="40" style="padding: 5px 0px;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="10" style="border: solid 5px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="40" style="border: solid 5px blue;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> + <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> + <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="40"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-025.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-025.html new file mode 100644 index 0000000000..544e71c5e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-025.html @@ -0,0 +1,469 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Minimum size of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> +<meta name="assert" content="Checks that automatic minimum size is clamped with different row sizes and spaning items."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + border: solid thick; + font: 10px/1 Ahem; + width: 50px; + height: 50px; + grid-template-columns: 25px 25px; + margin: 50px 0px; +} + +.grid > div { + grid-row: span 2; +} + +.grid > div:nth-child(1) { + color: blue; + background: cyan; +} + +.grid > div:nth-child(2) { + background: magenta; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<h3>item writing-mode: vertical-lr;</h3> + +<pre>grid-template-rows: auto auto;</pre> + +<div class="grid" style="grid-template-rows: auto auto;"> + <div class="verticalLR" data-expected-height="100">XXXXXXXXXX</div> + <div data-expected-height="100"></div> +</div> + +<pre>grid-template-rows: 0px 0px;</pre> + +<div class="grid" style="grid-template-rows: 0px 0px;"> + <div class="verticalLR" data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-rows: 20px 20px;</pre> + +<div class="grid" style="grid-template-rows: 20px 20px;"> + <div class="verticalLR" data-expected-height="40">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalLR" data-expected-height="40">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalLR" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="0" style="margin: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalLR" data-expected-height="30" style="margin: 5px 0px;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="10" style="padding: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalLR" data-expected-height="40" style="padding: 5px 0px;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="10" style="border: solid 5px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalLR" data-expected-height="40" style="border: solid 5px blue;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalLR" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalLR" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="40"></div> +</div> + +<h3>item writing-mode: vertical-rl;</h3> + +<pre>grid-template-rows: auto auto;</pre> + +<div class="grid" style="grid-template-rows: auto auto;"> + <div class="verticalRL" data-expected-height="100">XXXXXXXXXX</div> + <div data-expected-height="100"></div> +</div> + +<pre>grid-template-rows: 0px 0px;</pre> + +<div class="grid" style="grid-template-rows: 0px 0px;"> + <div class="verticalRL" data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-rows: 20px 20px;</pre> + +<div class="grid" style="grid-template-rows: 20px 20px;"> + <div class="verticalRL" data-expected-height="40">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="0">XXXXXXXXXX</div> + <div data-expected-height="0"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalRL" data-expected-height="40">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalRL" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="0" style="margin: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalRL" data-expected-height="30" style="margin: 5px 0px;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="10" style="padding: 5px 0px;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalRL" data-expected-height="40" style="padding: 5px 0px;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="10" style="border: solid 5px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalRL" data-expected-height="40" style="border: solid 5px blue;"></div> + <div data-expected-height="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="verticalRL" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre> + +<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="verticalRL" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-height="40"></div> +</div> + +<h3>grid container writing-mode: vertical-lr; & item writing-mode: horizontal-tb;</h3> + +<pre>grid-template-rows: auto auto;</pre> + +<div class="grid verticalLR" style="grid-template-rows: auto auto;"> + <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div> + <div data-expected-width="100"></div> +</div> + +<pre>grid-template-rows: 0px 0px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: 0px 0px;"> + <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-rows: 20px 20px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: 20px 20px;"> + <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin width: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin width: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="30" style="margin: 0px 5px;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding width: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding width: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="40" style="padding: 0px 5px;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border width: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border width: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="40" style="border: solid 5px blue;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width + margin + border + padding: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width + margin + border + padding: 10px;</pre> + +<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="40"></div> +</div> + +<h3>grid container writing-mode: vertical-rl; & item writing-mode: horizontal-tb;</h3> + +<pre>grid-template-rows: auto auto;</pre> + +<div class="grid verticalRL" style="grid-template-rows: auto auto;"> + <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div> + <div data-expected-width="100"></div> +</div> + +<pre>grid-template-rows: 0px 0px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: 0px 0px;"> + <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-rows: 20px 20px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: 20px 20px;"> + <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> + <div data-expected-width="0"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin width: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin width: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="30" style="margin: 0px 5px;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding width: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding width: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="40" style="padding: 0px 5px;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border width: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border width: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="40" style="border: solid 5px blue;"></div> + <div data-expected-width="40"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width + margin + border + padding: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> + <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="10"></div> +</div> + +<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width + margin + border + padding: 10px;</pre> + +<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> + <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> + <div data-expected-width="40"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-001.html new file mode 100644 index 0000000000..22ed4957f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-001.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + justify-content: start; + align-content: start; + } + + #blue { + color: blue; + } + + #yellow { + color: yellow; + order: 1; + } + + #lime { + color: lime; + order: 5; + } + + #magenta { + color: magenta; + order: 10; + } +</style> +<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> +<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + +<div id="reference-overlapped-red"></div> +<div id="grid"> + <div id="magenta">M</div> + <div id="lime">L</div> + <div id="yellow">Y</div> + <div id="blue">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-002.html new file mode 100644 index 0000000000..9ec9809ccd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-002.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + justify-content: start; + align-content: start; + } + + #blue { + color: blue; + order: -10; + } + + #yellow { + color: yellow; + order: -5; + } + + #lime { + color: lime; + order: -1; + } + + #magenta { + color: magenta; + } +</style> +<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> +<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + +<div id="reference-overlapped-red"></div> +<div id="grid"> + <div id="magenta">M</div> + <div id="lime">L</div> + <div id="yellow">Y</div> + <div id="blue">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-003.html new file mode 100644 index 0000000000..b40f3101d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-003.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + justify-content: start; + align-content: start; + } + + #blue { + color: blue; + order: -5; + } + + #yellow { + color: yellow; + order: -5; + } + + #lime { + color: lime; + } + + #magenta { + color: magenta; + order: 1; + } +</style> +<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> +<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + +<div id="reference-overlapped-red"></div> +<div id="grid"> + <div id="lime">L</div> + <div id="magenta">M</div> + <div id="blue">B</div> + <div id="yellow">Y</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-004.html new file mode 100644 index 0000000000..f606c69673 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-004.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + justify-content: start; + align-content: start; + } + + #blue { + color: blue; + order: 1; + } + + #yellow { + color: yellow; + order: 1; + } + + #lime { + color: lime; + order: 5; + } + + #magenta { + color: magenta; + order: 5; + } +</style> +<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> +<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + +<div id="reference-overlapped-red"></div> +<div id="grid"> + <div id="blue">B</div> + <div id="lime">L</div> + <div id="magenta">M</div> + <div id="yellow">Y</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-005.html new file mode 100644 index 0000000000..f787f0e770 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-005.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + justify-content: start; + align-content: start; + } + + #blue { + color: blue; + order: -5; + } + + #yellow { + color: yellow; + order: -1; + } + + #lime { + color: lime; + order: 1; + } + + #magenta { + color: magenta; + order: 5; + } +</style> +<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> +<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + +<div id="reference-overlapped-red"></div> +<div id="grid"> + <div id="yellow">Y</div> + <div id="magenta">M</div> + <div id="blue">B</div> + <div id="lime">L</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-001.html new file mode 100644 index 0000000000..9f9267a796 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + order: 1; + } + + #reference-item-overlapped-red { + color: red; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-002.html new file mode 100644 index 0000000000..91093e83a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + } + + #reference-item-overlapped-red { + color: red; + order: -1; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-003.html new file mode 100644 index 0000000000..5c3e68e805 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-003.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + order: 10; + } + + #reference-item-overlapped-red { + color: red; + order: 5; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-004.html new file mode 100644 index 0000000000..7b2849b0e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-004.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + order: -5; + } + + #reference-item-overlapped-red { + color: red; + order: -10; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-005.html new file mode 100644 index 0000000000..be09be68a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-005.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + order: 1; + } + + #reference-item-overlapped-red { + color: red; + order: -1; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-size-with-orthogonal-child-dynamic.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-size-with-orthogonal-child-dynamic.html new file mode 100644 index 0000000000..d1223b9fa0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-size-with-orthogonal-child-dynamic.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=650273"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="display: inline-grid; background: green;"> + <div style="writing-mode: vertical-lr; line-height: 0;"> + <span style="display: inline-block; height: 100px; width: 50px;"></span> + <span style="display: inline-block; height: 50px; width: 50px;"></span> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.height = '100px'; +</script> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-001.html new file mode 100644 index 0000000000..52ad190afd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + z-index: 1; + } + + #reference-item-overlapped-red { + color: red; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-002.html new file mode 100644 index 0000000000..551137965d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-002.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + } + + #reference-item-overlapped-red { + color: red; + z-index: -1; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-003.html new file mode 100644 index 0000000000..1934144660 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-003.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + z-index: 10; + } + + #reference-item-overlapped-red { + color: red; + z-index: 5; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-004.html new file mode 100644 index 0000000000..2defd235d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + z-index: -5; + } + + #reference-item-overlapped-red { + color: red; + z-index: -10; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-005.html new file mode 100644 index 0000000000..4bc7e116d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-005.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + z-index: 1; + } + + #reference-item-overlapped-red { + color: red; + z-index: -1; + } + + .first-row-first-column { + grid-area: 1 / 1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-001.html new file mode 100644 index 0000000000..76e379cb53 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + font: 100px/1 Ahem; + grid-template-columns: 25px 25px 25px 25px; + grid-template-rows: 25px 25px 25px 25px; + } + + #blue { + color: blue; + z-index: -1; + grid-column: 1; + grid-row: 1; + } + + #yellow { + color: yellow; + grid-column: 2; + grid-row: 2; + } + + #green { + color: green; + z-index: 1; + grid-column: 3; + grid-row: 3; + } +</style> +<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p> + +<div id="grid"> + <div id="green">G</div> + <div id="yellow">Y</div> + <div id="blue">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-002.html new file mode 100644 index 0000000000..16a4821364 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-002.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + font: 100px/1 Ahem; + grid-template-columns: 25px 25px 25px 25px; + grid-template-rows: 25px 25px 25px 25px; + } + + #blue { + color: blue; + z-index: 1; + grid-column: 1; + grid-row: 1; + } + + #yellow { + color: yellow; + z-index: 5; + grid-column: 2; + grid-row: 2; + } + + #green { + color: green; + z-index: 10; + grid-column: 3; + grid-row: 3; + } +</style> +<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p> + +<div id="grid"> + <div id="green">G</div> + <div id="yellow">Y</div> + <div id="blue">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-003.html new file mode 100644 index 0000000000..46317b1987 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-003.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + font: 100px/1 Ahem; + grid-template-columns: 25px 25px 25px 25px; + grid-template-rows: 25px 25px 25px 25px; + } + + #blue { + color: blue; + z-index: -10; + grid-column: 1; + grid-row: 1; + } + + #yellow { + color: yellow; + z-index: -5; + grid-column: 2; + grid-row: 2; + } + + #green { + color: green; + z-index: -1; + grid-column: 3; + grid-row: 3; + } +</style> +<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p> + +<div id="grid"> + <div id="green">G</div> + <div id="yellow">Y</div> + <div id="blue">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-004.html new file mode 100644 index 0000000000..74b8ec0209 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-004.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + font: 100px/1 Ahem; + grid-template-columns: 25px 25px 25px 25px; + grid-template-rows: 25px 25px 25px 25px; + } + + #blue { + color: blue; + grid-column: 1; + grid-row: 1; + } + + #yellow { + color: yellow; + z-index: 1; + grid-column: 2; + grid-row: 2; + } + + #green { + color: green; + z-index: 5; + grid-column: 3; + grid-row: 3; + } +</style> +<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p> + +<div id="grid"> + <div id="green">G</div> + <div id="yellow">Y</div> + <div id="blue">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-005.html new file mode 100644 index 0000000000..bae5b238c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-005.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + font: 100px/1 Ahem; + grid-template-columns: 25px 25px 25px 25px; + grid-template-rows: 25px 25px 25px 25px; + } + + #blue { + color: blue; + z-index: -5; + grid-column: 1; + grid-row: 1; + } + + #yellow { + color: yellow; + z-index: -1; + grid-column: 2; + grid-row: 2; + } + + #green { + color: green; + grid-column: 3; + grid-row: 3; + } +</style> +<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p> + +<div id="grid"> + <div id="green">G</div> + <div id="yellow">Y</div> + <div id="blue">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-006.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-006.html new file mode 100644 index 0000000000..3424d0c86b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-006.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property"> +<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + font: 100px/1 Ahem; + grid-template-columns: 25px 25px 25px 25px; + grid-template-rows: 25px 25px 25px 25px; + } + + #blue { + color: blue; + z-index: -1; + grid-column: 2; + grid-row: 2; + margin-top: -25px; + margin-left: -25px; + } + + #yellow { + color: yellow; + grid-column: 4; + grid-row: 4; + margin-top: -50px; + margin-left: -50px; + } + + #green { + color: green; + z-index: 1; + grid-column: 1; + grid-row: 1; + margin-top: 50px; + margin-left: 50px; + } +</style> +<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p> + +<div id="grid"> + <div id="green">G</div> + <div id="yellow">Y</div> + <div id="blue">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/item-with-table-with-infinite-max-intrinsic-width.html b/testing/web-platform/tests/css/css-grid/grid-items/item-with-table-with-infinite-max-intrinsic-width.html new file mode 100644 index 0000000000..3bf98c4a58 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/item-with-table-with-infinite-max-intrinsic-width.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Grid item with table with infinite max intrinsic inline size</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing" title="6.2. Grid Item Sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display:grid; grid-template-columns:max-content; width:100px; height:100px; background:green;"> + <div> + <table style="height:50px; background:green;" cellpadding="0" cellspacing="0"> + <tr> + <td style="width:100%; background:green;"> </td> + <td style="background:green;"> </td> + </tr> + </table> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/percentage-margin-dynamic.html b/testing/web-platform/tests/css/css-grid/grid-items/percentage-margin-dynamic.html new file mode 100644 index 0000000000..ed1edc4ba6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-margin-dynamic.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1126609"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="display: grid; width: 100px; height: 200px; background: green;"> + <div style="margin: 50%; color: green;">FAIL</div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.height = '100px'; +</script> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-indefinite-replaced.html b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-indefinite-replaced.html new file mode 100644 index 0000000000..3610f2e2c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-indefinite-replaced.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1153028"> +<meta name="assert" content="When determining a auto row, an indefinite percentage block-size should be considered auto, and use the inline-size + aspect-ratio."> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: grid; width: 50px;"> + <canvas width=200 height=200 style="background: green; height: 100%; width: 200%;"></canvas> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001-ref.html new file mode 100644 index 0000000000..2c21c8c13d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001-ref.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Refttest Reference: Percentage size on child of a grid item with margin, border, padding and scrollbar</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +.grid { + display: inline-block; + border: solid 5px black; + width: 150px; + height: 100px; + margin: 10px; + vertical-align: top; +} + +.item { + overflow: scroll; + border: solid magenta; + border-width: 12px 9px 6px 3px; + margin: 1px 2px 3px 4px; + padding: 5px 15px 10px 20px; + background: cyan; + width: calc(100% - 6px); + height: calc(100% - 4px); + box-sizing: border-box; +} + +img { + width: 100%; + height: 100%; + display: block; +} + +.horizontalTB { writing-mode: horizontal-tb; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +</style> + +<p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p> + +<div class="grid"> + <div class="item horizontalTB"> + <img src="support/100x100-green.png" /> + </div> +</div> + +<div class="grid"> + <div class="item horizontalTB"> + <img class="verticalLR" src="support/100x100-green.png" /> + </div> +</div> + +<div class="grid"> + <div class="item horizontalTB"> + <img class="verticalRL" src="support/100x100-green.png" /> + </div> +</div> + +<div class="grid"> + <div class="item verticalLR"> + <img src="support/100x100-green.png" /> + </div> +</div> + +<div class="grid"> + <div class="item verticalLR"> + <img class="horizontalTB" src="support/100x100-green.png" /> + </div> +</div> + +<div class="grid"> + <div class="item verticalLR"> + <img class="verticalRL" src="support/100x100-green.png" /> + </div> +</div> + +<div class="grid"> + <div class="item verticalRL"> + <img src="support/100x100-green.png" /> + </div> +</div> + +<div class="grid"> + <div class="item verticalRL"> + <img class="horizontalTB" src="support/100x100-green.png" /> + </div> +</div> + +<div class="grid"> + <div class="item verticalRL"> + <img class="verticalRL" src="support/100x100-green.png" /> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001.html b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001.html new file mode 100644 index 0000000000..190277a1ed --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Test: Percentage size on replaced child of a grid item with margin, border, padding and scrollbar</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items"> +<link rel="match" href="percentage-size-replaced-subitems-001-ref.html"> +<meta name="assert" content="Checks that grid items replaced children resolve properly their percentage sizes, even when the grid item has margin, border, padding and scrollbar."> +<style> +.grid { + display: inline-grid; + border: solid 5px black; + grid: 100px / 150px; + margin: 10px; + vertical-align: top; +} + +.item { + overflow: scroll; + border: solid magenta; + border-width: 12px 9px 6px 3px; + margin: 1px 2px 3px 4px; + padding: 5px 15px 10px 20px; + background: cyan; +} + +img { + width: 100%; + height: 100%; + display: block; +} + +.horizontalTB { writing-mode: horizontal-tb; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +</style> + +<p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p> + +<div class="grid"> + <div class="item horizontalTB"> + <img src="support/100x100-green.png" /> + </div> +</div> + +<div class="grid"> + <div class="item horizontalTB"> + <img class="verticalLR" src="support/100x100-green.png" /> + </div> +</div> + +<div class="grid"> + <div class="item horizontalTB"> + <img class="verticalRL" src="support/100x100-green.png" /> + </div> +</div> + +<div class="grid"> + <div class="item verticalLR"> + <img src="support/100x100-green.png" /> + </div> +</div> + +<div class="grid"> + <div class="item verticalLR"> + <img class="horizontalTB" src="support/100x100-green.png" /> + </div> +</div> + +<div class="grid"> + <div class="item verticalLR"> + <img class="verticalRL" src="support/100x100-green.png" /> + </div> +</div> + +<div class="grid"> + <div class="item verticalRL"> + <img src="support/100x100-green.png" /> + </div> +</div> + +<div class="grid"> + <div class="item verticalRL"> + <img class="horizontalTB" src="support/100x100-green.png" /> + </div> +</div> + +<div class="grid"> + <div class="item verticalRL"> + <img class="verticalRL" src="support/100x100-green.png" /> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-001-ref.html new file mode 100644 index 0000000000..bba5f7d282 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-001-ref.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Refttest Reference: Percentage size on child of a grid item with margin, border, padding and scrollbar</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + display: inline-block; + border: solid 5px black; + width: 150px; + height: 100px; + margin: 10px; + vertical-align: top; +} + +.item { + overflow: scroll; + border: solid magenta; + border-width: 12px 9px 6px 3px; + margin: 1px 2px 3px 4px; + padding: 5px 15px 10px 20px; + background: cyan; + width: calc(100% - 6px); + height: calc(100% - 4px); + box-sizing: border-box; +} + +.subitem { + width: 100%; + height: 100%; + background: yellow; + font: 20px/1 Ahem; +} + +.horizontalTB { writing-mode: horizontal-tb; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +</style> + +<p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p> + +<div class="grid"> + <div class="item horizontalTB"> + <div class="subitem"></div> + </div> +</div> + +<div class="grid"> + <div class="item horizontalTB"> + <div class="subitem verticalLR"></div> + </div> +</div> + +<div class="grid"> + <div class="item horizontalTB"> + <div class="subitem verticalRL"></div> + </div> +</div> + +<div class="grid"> + <div class="item verticalLR"> + <div class="subitem"></div> + </div> +</div> + +<div class="grid"> + <div class="item verticalLR"> + <div class="subitem horizontalTB"></div> + </div> +</div> + +<div class="grid"> + <div class="item verticalLR"> + <div class="subitem verticalRL"></div> + </div> +</div> + +<div class="grid"> + <div class="item verticalRL"> + <div class="subitem"></div> + </div> +</div> + +<div class="grid"> + <div class="item verticalRL"> + <div class="subitem horizontalTB"></div> + </div> +</div> + +<div class="grid"> + <div class="item verticalRL"> + <div class="subitem verticalLR"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-001.html b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-001.html new file mode 100644 index 0000000000..ad00990619 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-001.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Test: Percentage size on child of a grid item with margin, border, padding and scrollbar</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items"> +<link rel="match" href="percentage-size-subitems-001-ref.html"> +<meta name="assert" content="Checks that grid items children resolve properly their percentage sizes, even when the grid item has margin, border, padding and scrollbar."> +<style> +.grid { + display: inline-grid; + border: solid 5px black; + grid: 100px / 150px; + margin: 10px; + vertical-align: top; +} + +.item { + overflow: scroll; + border: solid magenta; + border-width: 12px 9px 6px 3px; + margin: 1px 2px 3px 4px; + padding: 5px 15px 10px 20px; + background: cyan; +} + +.subitem { + width: 100%; + height: 100%; + background: yellow; +} + +.horizontalTB { writing-mode: horizontal-tb; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +</style> + +<p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p> + +<div class="grid"> + <div class="item horizontalTB"> + <div class="subitem"></div> + </div> +</div> + +<div class="grid"> + <div class="item horizontalTB"> + <div class="subitem verticalLR"></div> + </div> +</div> + +<div class="grid"> + <div class="item horizontalTB"> + <div class="subitem verticalRL"></div> + </div> +</div> + +<div class="grid"> + <div class="item verticalLR"> + <div class="subitem"></div> + </div> +</div> + +<div class="grid"> + <div class="item verticalLR"> + <div class="subitem horizontalTB"></div> + </div> +</div> + +<div class="grid"> + <div class="item verticalLR"> + <div class="subitem verticalRL"></div> + </div> +</div> + +<div class="grid"> + <div class="item verticalRL"> + <div class="subitem"></div> + </div> +</div> + +<div class="grid"> + <div class="item verticalRL"> + <div class="subitem horizontalTB"></div> + </div> +</div> + +<div class="grid"> + <div class="item verticalRL"> + <div class="subitem verticalLR"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-002.html b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-002.html new file mode 100644 index 0000000000..17f57bf39d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-002.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1138504"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: grid; grid-template-columns: 100px 100px;"> + <div style="min-height: 100px;"> + <div style="height: 100%; background: green;"></div> + </div> + <div style="height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/ref-filled-green-100px-square-image.html b/testing/web-platform/tests/css/css-grid/grid-items/ref-filled-green-100px-square-image.html new file mode 100644 index 0000000000..5906160218 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/ref-filled-green-100px-square-image.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference: 100x100 green square image</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img src="support/100x100-green.png" alt="Image download support must be enabled" /> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/remove-svg-grid-item-001.html b/testing/web-platform/tests/css/css-grid/grid-items/remove-svg-grid-item-001.html new file mode 100644 index 0000000000..5e196c82c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/remove-svg-grid-item-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Grid Layout Test: Remove a first child in grid items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item"> +<link rel="stylesheet" href="/css/support/grid.css"/> +<link rel="match" href="../reference/grid-item-script-001-ref.html"> +<meta name="assert" content="This test ensures that removing a first child element in grid items doesn't crash."> +<link rel="stylesheet" href="/css/support/grid.css"/> +<div class="grid"> + <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='190'> + <polygon points='100,10 40,180 190,60 10,60 160,180' style='fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;'> + </svg> +</div> + +<script> + var grid = document.getElementsByClassName("grid")[0]; + grid.offsetTop; + while (grid.firstChild) + grid.removeChild(grid.firstChild); + grid.offsetTop; + grid.innerHTML = "Test passes if it doesn't crash."; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-001.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-001.html new file mode 100644 index 0000000000..b29b67a01a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid item (ratio-dependent: inline)</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid;"> + <svg style="background: green; height: 100px;" viewBox="0 0 1 1"></svg> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-002.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-002.html new file mode 100644 index 0000000000..b8101c4399 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-002.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid item (ratio-dependent: block)</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid;"> + <svg style="background: green; width: 100px;" viewBox="0 0 1 1"></svg> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-007.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-007.html new file mode 100644 index 0000000000..61284df758 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-007.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid item (ratio-dependent: block) with larger row track size</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; grid-template-rows: 200px;"> + <svg style="background: green; height: 100px;" viewBox="0 0 1 1"></svg> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-010.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-010.html new file mode 100644 index 0000000000..83672297f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-010.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid item (ratio-dependent: block) with larger row track size</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; grid-template-columns: 200px;"> + <svg style="background: green; height: 100px;" viewBox="0 0 1 1"></svg> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-011.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-011.html new file mode 100644 index 0000000000..c5f5c301a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-011.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview"> +<meta name="assert" content="A replaced element resolves its percentage against the definite row."> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: inline-grid; grid-template-rows: 100px; background: green;"> + <canvas width=10 height=10 style="height: 100%;"></canvas> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-012.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-012.html new file mode 100644 index 0000000000..c26ce03378 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-012.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview"> +<meta name="assert" content="A replaced element resolves its percentage against the definite row."> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: inline-grid; grid-template-rows: 50px 50px; background: green;"> + <canvas width=10 height=10 style="height: 100%; grid-row-start: 1; grid-row-end: 3;"></canvas> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-013.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-013.html new file mode 100644 index 0000000000..c6c3ef66c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-013.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview"> +<meta name="assert" content="A replaced element resolves its percentage against the definite row."> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: inline-grid; grid-template-rows: 100px; background: green;"> + <canvas width=20 height=10 style="height: 50%;"></canvas> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-014.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-014.html new file mode 100644 index 0000000000..4aa10414d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-014.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1241154"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="width: 100px; display: grid; grid-template-column: 1fr;"> + <img src="support/500x500-green.png" style="background: green; height: auto; width: 200px; max-width: 100%;"> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-015.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-015.html new file mode 100644 index 0000000000..adb9af5654 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-015.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1055095"> +<link rel="match" href="../reference/replaced-element-015-ref.html"> +<p>Test passes if it matches the reference.</p> +<div style="display: inline-grid; width: 100px;"> + <div id="target" style="height: 100%; margin-bottom: 50px;"> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='green'/></svg>" + style="height: 100%"> + </div> +</div> +<script> +const target = document.getElementById('target'); +document.body.offsetTop; +target.style.marginBottom = ''; +document.body.offsetTop; +target.style.marginBottom = '50px'; +document.body.offsetTop; +target.style.marginBottom = ''; +</script> + diff --git a/testing/web-platform/tests/css/css-grid/grid-items/support/100x100-green.png b/testing/web-platform/tests/css/css-grid/grid-items/support/100x100-green.png Binary files differnew file mode 100644 index 0000000000..25b76c3c6f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/support/100x100-green.png diff --git a/testing/web-platform/tests/css/css-grid/grid-items/support/200x200-green.png b/testing/web-platform/tests/css/css-grid/grid-items/support/200x200-green.png Binary files differnew file mode 100644 index 0000000000..e8b591f05b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/support/200x200-green.png diff --git a/testing/web-platform/tests/css/css-grid/grid-items/support/25x50-green.png b/testing/web-platform/tests/css/css-grid/grid-items/support/25x50-green.png Binary files differnew file mode 100644 index 0000000000..6ab02fce0f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/support/25x50-green.png diff --git a/testing/web-platform/tests/css/css-grid/grid-items/support/500x500-green.png b/testing/web-platform/tests/css/css-grid/grid-items/support/500x500-green.png Binary files differnew file mode 100644 index 0000000000..cdd928e6be --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/support/500x500-green.png diff --git a/testing/web-platform/tests/css/css-grid/grid-items/support/50x25-green.png b/testing/web-platform/tests/css/css-grid/grid-items/support/50x25-green.png Binary files differnew file mode 100644 index 0000000000..2bd68e7421 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/support/50x25-green.png diff --git a/testing/web-platform/tests/css/css-grid/grid-items/support/50x50-green.png b/testing/web-platform/tests/css/css-grid/grid-items/support/50x50-green.png Binary files differnew file mode 100644 index 0000000000..f709bf09e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/support/50x50-green.png diff --git a/testing/web-platform/tests/css/css-grid/grid-items/table-with-infinite-max-intrinsic-width.html b/testing/web-platform/tests/css/css-grid/grid-items/table-with-infinite-max-intrinsic-width.html new file mode 100644 index 0000000000..877e982cd4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/table-with-infinite-max-intrinsic-width.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Table grid item with infinite max intrinsic inline size</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing" title="6.2. Grid Item Sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display:grid; grid-template-columns:max-content; width:100px; height:100px; background:green;"> + <table style="height:50px; background:green;" cellpadding="0" cellspacing="0"> + <tr> + <td style="width:100%; background:green;"> </td> + <td style="background:green;"> </td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/whitespace-in-grid-item-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/whitespace-in-grid-item-001-ref.html new file mode 100644 index 0000000000..1531d98a64 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/whitespace-in-grid-item-001-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + .item { + height: 100%; + width: 30px; + background: salmon; + } +</style> +<body> + <p>This test passes if it has the same output than the reference. As spec states that child text runs containing only white space should not rendered (just as if its text nodes were display:none).</p> + <div class="grid"> + <div class="item"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-items/whitespace-in-grid-item-001.html b/testing/web-platform/tests/css/css-grid/grid-items/whitespace-in-grid-item-001.html new file mode 100644 index 0000000000..f79baab6f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/whitespace-in-grid-item-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<title>CSS Grid : Whitespace in grid item</title> +<link rel="author" title="Christian Biesinger" href="mailto:cbiesinger@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items"> +<link rel="match" href="whitespace-in-grid-item-001-ref.html"> +<link rel="help" href="https://codereview.chromium.org/16888008"> +<meta name="assert" content="Grid items shouldn't be created for white spaces."/> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + .grid { + white-space: pre; + } + .item { + height: 100%; + width: 30px; + background: salmon; + } +</style> +<body> + <p>This test passes if it has the same output than the reference. As spec states that child text runs containing only white space should not rendered (just as if its text nodes were display:none).</p> + <div class="grid"> + + <div class="item"></div> 	 + </div> +</body> +</html> |
