diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/grid-model')
80 files changed, 3790 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/column-property-should-not-apply-on-grid-container-001.html b/testing/web-platform/tests/css/css-grid/grid-model/column-property-should-not-apply-on-grid-container-001.html new file mode 100644 index 0000000000..a795362586 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/column-property-should-not-apply-on-grid-container-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<title>CSS Grid: column-* properties are ignored.</title> +<link rel="author" title="Sunil Ratnu" href="mailto:sunil.ratnu@samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-model"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/1364"> +<link rel="match" href="reference/column-property-should-not-apply-on-grid-container-001-ref.html"> +<meta name="assert" content="This test ensures the column-* properties (in the Multicol module) have no effect on a grid container."/> +<link href="/css/support/grid.css" rel="stylesheet"/> +<style> +.grid, .inline-grid +{ + width: 20em; + column-count: 2; + column-gap: 100px; + font-kerning: none; +} +</style> + +<body> + +<div class='grid'> +AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD +</div> + +<div class='inline-grid'> +AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/compute-intrinsic-widths-scrollbar-001.html b/testing/web-platform/tests/css/css-grid/grid-model/compute-intrinsic-widths-scrollbar-001.html new file mode 100644 index 0000000000..d61f7ad14e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/compute-intrinsic-widths-scrollbar-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Grid: width of grid container with 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/#overflow"> +<meta name="assert" content="This test ensures that a grid container scrollbar is computed properly during intrinsic width calculation."/> + +<link href="/css/support/grid.css" rel="stylesheet"/> +<link href="/css/support/width-keyword-classes.css" rel="stylesheet"/> +<style> + .grid { + overflow-y: scroll; + grid-template-columns: repeat(4, 50px); + } +</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 class="grid min-content" data-expected-client-width="200"> + item + </div> + <div class="grid max-content" data-expected-client-width="200"> + item + </div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/display-grid.html b/testing/web-platform/tests/css/css-grid/grid-model/display-grid.html new file mode 100644 index 0000000000..7c6b743327 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/display-grid.html @@ -0,0 +1,107 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS Grid Layout: display: grid</title> + <link rel="author" title="swain" href="mailto:swainet@126.com"/> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-17 --> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers"/> + <link rel="match" href="../reference/display-grid-ref.html"> + <meta name="assert" content="'display: grid' causes an element to generate a block-level grid container box."/> + <style type="text/css"> + #container { + position:relative; + width:400px; + height:100px; + } + + #grid { + display:grid; + grid-template-columns:100px 300px; + grid-template-rows:70px 30px; + height:100%; + } + + #cell1 { + grid-column:1; + grid-row:1; + background-color:green; + height:70px; + } + + #cell2 { + grid-column:2; + grid-row:1; + background-color:limegreen; + height:70px; + } + + #cell3 { + grid-column:1; + grid-row:2; + background-color:limegreen; + height:30px; + } + + #cell4 { + grid-column:2; + grid-row:2; + background-color:green; + height:30px; + } + + .error { + position:absolute; + top:0; + left:0; + height:100%; + width:100%; + z-index:-1; + } + + #table { + width:100%; + height:100%; + border-collapse:collapse; + } + + #table td { + padding:0; + vertical-align:top; + } + + #table td:first-child { + width:100px; + } + + #table tr:last-child td { + height:30px; + } + </style> +</head> +<body> +<p>Test passes if there are 4 green rectangles and no red.</p> + +<div id="container"> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + <div id="cell3">cell3</div> + <div id="cell4">cell4</div> + </div> + <div class="error"> + <table id="table"> + <tbody> + <tr> + <td style="background-color:#f00">cell1</td> + <td style="background-color:#e00">cell2</td> + </tr> + <tr> + <td style="background-color:#e00">cell3</td> + <td style="background-color:#f00">cell4</td> + </tr> + </tbody> + </table> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/display-inline-grid.html b/testing/web-platform/tests/css/css-grid/grid-model/display-inline-grid.html new file mode 100644 index 0000000000..e080ed8c95 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/display-inline-grid.html @@ -0,0 +1,111 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS Grid Layout: display: inline-grid</title> + <link rel="author" title="swain" href="mailto:swainet@126.com"/> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-17 --> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers"/> + <link rel="match" href="../reference/display-inline-grid-ref.html"> + <meta name="assert" content="'display: inline-grid' causes an element to generate an inline-level grid container box." /> + <style type="text/css"> + #container { + position:relative; + } + + #grid { + display:inline-grid; + grid-template-columns:100px 300px; + grid-template-rows:70px 30px; + width:400px; + height:100px; + } + + #cell1 { + grid-column:1; + grid-row:1; + background-color:green; + height:70px; + } + + #cell2 { + grid-column:2; + grid-row:1; + background-color:limegreen; + height:70px; + } + + #cell3 { + grid-column:1; + grid-row:2; + background-color:limegreen; + height:30px; + } + + #cell4 { + grid-column:2; + grid-row:2; + background-color:green; + height:30px; + } + + .error { + position:absolute; + top:0; + left:0; + height:100px; + width:400px; + z-index:-1; + } + + #table { + width:100%; + height:100%; + border-collapse:collapse; + } + + #table td { + padding:0; + vertical-align:top; + } + + #table td:first-child { + width:100px; + } + + #table tr:last-child td { + height:30px; + } + + span { + vertical-align:top; + } + </style> +</head> +<body> +<p>Test passes if there are 4 green rectangles and no red.</p> + +<div id="container"> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + <div id="cell3">cell3</div> + <div id="cell4">cell4</div> + </div> + <span>Inline</span> + <div class="error"> + <table id="table"> + <tbody> + <tr> + <td style="background-color:#f00">cell1</td> + <td style="background-color:#e00">cell2</td> + </tr> + <tr> + <td style="background-color:#e00">cell3</td> + <td style="background-color:#f00">cell4</td> + </tr> + </tbody> + </table> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/fixed-width-intrinsic-width-should-exclude-scrollbar-001.html b/testing/web-platform/tests/css/css-grid/grid-model/fixed-width-intrinsic-width-should-exclude-scrollbar-001.html new file mode 100644 index 0000000000..26b8f5e01d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/fixed-width-intrinsic-width-should-exclude-scrollbar-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<title>CSS Grid: intrinsic width of fixed-width grid items.</title> +<link rel="author" title="Sunil Ratnu" href="mailto:sunil.ratnu@samsung.com"/> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#overflow"/> +<meta name="assert" content="This test ensures that scrollbar width is not accounted for fixed-width grid items' intrinsic width."/> +<link href="/css/support/grid.css" rel="stylesheet"/> +<style> +.grid { + grid-template-columns: 400px 500px; + grid-template-rows: 200px 300px; +} + +.gridItemScrollOverflow { + width: 50px; + height: 50px; + overflow: scroll; +} + +</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 class="grid"> + <div class="firstRowFirstColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div> + <div class="firstRowSecondColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div> + <div class="secondRowFirstColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div> + <!-- Grid item itself being a grid container--> + <div class="grid secondRowSecondColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-001.html new file mode 100644 index 0000000000..6ee8231c93 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow"> +<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html"> +<meta name="assert" content="This test verifies that the scrollbars are shown on an empty grid if there are grid areas which exceed the grid container size, since the grid itself can cause overflow."> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + .grid { + grid: 150px / 150px; + width: 100px; + height: 100px; + overflow: auto; + } +</style> +<p>The test passes if you see a grey square below and both scrollbars are visible.</p> +<div class="grid"></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-002.html new file mode 100644 index 0000000000..1abc446e22 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow"> +<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html"> +<meta name="assert" content="This test verifies that the scrollbars are shown on a grid with an item placed inside the boundaries of the grid container, if there are grid areas which exceed the grid container size."> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + .grid { + grid: 150px / 150px; + width: 100px; + height: 100px; + overflow: auto; + } + .item { + width: 100px; + height: 100px; + } +</style> +<p>The test passes if you see a grey square below and both scrollbars are visible.</p> +<div class="grid"><div class="item"></div></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-003.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-003.html new file mode 100644 index 0000000000..aaba4f9244 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-003.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow"> +<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html"> +<meta name="assert" content="This test verifies that the scrollbars are shown on a grid with an item placed inside the boundaries of the grid container, if there are grid areas which exceed the grid container size."> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + .grid { + grid: 100px 50px / 100px 50px; + width: 100px; + height: 100px; + overflow: auto; + } + .item { + grid-column: 1; + grid-row: 1; + width: 100px; + height: 100px; + } +</style> +<p>The test passes if you see a grey square below and both scrollbars are visible.</p> +<div class="grid"><div class="item"></div></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-004.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-004.html new file mode 100644 index 0000000000..707056feb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-004.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow"> +<link rel="match" href="reference/100x100-grey-box-with-vertical-scrollbar.html"> +<meta name="assert" content="This test verifies that the vertical scrollbar is shown on a grid with an item placed below the bottom of the grid container."> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + .grid { + grid: 100px / 100%; + width: 100px; + height: 100px; + overflow: auto; + } + .item { + grid-column: 1; + grid-row: 1; + margin-top: 100px; + width: 50px; + height: 50px; + } +</style> +<p>The test passes if you see a grey square below and only the vertical scrollbar is visible.</p> +<div class="grid"><div class="item"></div></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-005.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-005.html new file mode 100644 index 0000000000..0184b399b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-005.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow"> +<link rel="match" href="reference/100x100-grey-box-with-horizontal-scrollbar.html"> +<meta name="assert" content="This test verifies that the horizontal scrollbar is shown on a grid with an item placed behind the right edge of the grid container."> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + .grid { + grid: 100% / 100px; + width: 100px; + height: 100px; + overflow: auto; + } + .item { + grid-column: 1; + grid-row: 1; + margin-left: 100px; + width: 50px; + height: 50px; + } +</style> +<p>The test passes if you see a grey square below and only the horizontal scrollbar is visible.</p> +<div class="grid"><div class="item"></div></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-006.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-006.html new file mode 100644 index 0000000000..248fc425fb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-006.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow"> +<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html"> +<meta name="assert" content="This test verifies that the scrollbars are shown on a grid with an item placed outside the boundaries of the grid container."> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + .grid { + grid: 100px / 100px; + width: 100px; + height: 100px; + overflow: auto; + } + .item { + grid-column: 1; + grid-row: 1; + margin: 100px 0 0 100px; + width: 50px; + height: 50px; + } +</style> +<p>The test passes if you see a grey square below and both scrollbars are visible.</p> +<div class="grid"><div class="item"></div></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-007.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-007.html new file mode 100644 index 0000000000..0a7d3aa28a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-007.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow"> +<link rel="match" href="reference/100x100-grey-box.html"> +<meta name="assert" content="This test verifies that the scrollbars are not shown on a grid with an item with 0px width even when it's placed in a grid area outside the boundaries of the grid container."> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + .grid { + grid: 100px 100px / 100px 100px; + width: 100px; + height: 100px; + } + .item { + grid-column: 2; + grid-row: 2; + width: 0px; + height: 50px; + } +</style> +<p>The test passes if you see a grey square below without any scrollbar.</p> +<div class="grid"><div class="item"></div></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-008.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-008.html new file mode 100644 index 0000000000..df39ed8262 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-008.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow"> +<link rel="match" href="reference/100x100-grey-box.html"> +<meta name="assert" content="This test verifies that the scrollbars are not shown on a grid with an item with 0px height even when it's placed in a grid area outside the boundaries of the grid container."> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + .grid { + grid: 100px 100px / 100px 100px; + width: 100px; + height: 100px; + } + .item { + grid-column: 2; + grid-row: 2; + width: 50px; + height: 0px; + } +</style> +<p>The test passes if you see a grey square below without any scrollbar.</p> +<div class="grid"><div class="item"></div></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-009.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-009.html new file mode 100644 index 0000000000..367820eaea --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-009.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow"> +<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html"> +<meta name="assert" content="This test verifies that the scrollbars are shown on a grid with an item that has large margins placed inside the boundaries of the grid container, if there are grid areas which exceed the grid container size."> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + .grid { + grid: 150px / 150px; + width: 100px; + height: 100px; + overflow: auto; + } + .item { + width: 100px; + height: 100px; + margin-right: 50px; + margin-bottom: 50px; + } +</style> +<p>The test passes if you see a grey square below and both scrollbars are visible.</p> +<div class="grid"><div class="item"></div></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-box-sizing-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-box-sizing-001.html new file mode 100644 index 0000000000..b990292934 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-box-sizing-001.html @@ -0,0 +1,188 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid container and tracks sizes with box-sizing property</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#intrinsic-sizes"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<meta name="assert" content="The test checks the sizes of a grid container and its track depending on min-size constraints and the box-sizing property."> +<style> +.wrapper { + position: relative; + width: 200px; + height: 100px; +} + +.grid { + position: absolute; + left: 0; + top: 0; + display: grid; + border-style: solid; + border-width: 5px 10px 15px 20px; + padding: 17px 13px 7px 3px; +} + +.wholeWidth { + right: 0; +} + +.wholeHeight { + bottom: 0; +} +.item { + background: cyan; +} +</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> + +<div class="wrapper"> + <div class="grid wholeWidth" style="height: 100px;" data-expected-width="200" data-expected-height="144"> + <div class="item" data-expected-width="154" data-expected-height="100"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeWidth" style="min-height: 100px;" data-expected-width="200" data-expected-height="144"> + <div class="item" data-expected-width="154" data-expected-height="100"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeWidth" style="height: 100px; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-expected-width="154" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeWidth" style="min-height: 100px; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-expected-width="154" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeWidth" style="bottom: 0;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-expected-width="154" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeWidth" style="bottom: 0;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-expected-width="154" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeWidth" style="bottom: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-expected-width="154" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeWidth" style="bottom: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-expected-width="154" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeWidth" style="height: 100px; bottom: 0;" data-expected-width="200" data-expected-height="144"> + <div class="item" data-expected-width="154" data-expected-height="100"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeWidth" style="min-height: 100px; bottom: 0;" data-expected-width="200" data-expected-height="144"> + <div class="item" data-expected-width="154" data-expected-height="100"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeWidth" style="height: 100px; bottom: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-expected-width="154" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeWidth" style="min-height: 100px; bottom: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-expected-width="154" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeHeight" style="width: 200px;" data-expected-width="246" data-expected-height="100"> + <div class="item" data-expected-width="200" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeHeight" style="min-width: 200px;" data-expected-width="246" data-expected-height="100"> + <div class="item" data-expected-width="200" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeHeight" style="width: 200px; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-expected-width="154" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeHeight" style="min-width: 200px; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-expected-width="154" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeHeight" style="right: 0;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-expected-width="154" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeHeight" style="right: 0;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-expected-width="154" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeHeight" style="right: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-expected-width="154" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeHeight" style="right: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-expected-width="154" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeHeight" style="width: 200px; right: 0;" data-expected-width="246" data-expected-height="100"> + <div class="item" data-expected-width="200" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeHeight" style="min-width: 200px; right: 0;" data-expected-width="246" data-expected-height="100"> + <div class="item" data-expected-width="200" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeHeight" style="width: 200px; right: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-expected-width="154" data-expected-height="56"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid wholeHeight" style="min-width: 200px; right: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-expected-width="154" data-expected-height="56"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-button-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-button-001.html new file mode 100644 index 0000000000..b84c10fcab --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-button-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Grid items work inside a button</title> +<meta name="assert" content="When a button is set to display: grid, its children should flow into its grid cells"> +<link rel="author" title="Bryan Robinson" href="bryanlrobinson@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers"> +<style> + .grid { display: grid; grid-template-columns: 100px 200px; border: 2px solid purple; box-sizing: border-box; } + span { border: 1px dashed green; box-sizing: border-box; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<button class="grid" ><span class="item1" data-expected-width="100">item 1</span> <span class="item2" data-expected-width="200">item 2</span></button> + +<script> + checkLayout("[data-expected-width]") +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-computed-value-display-floated-items-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-computed-value-display-floated-items-001.html new file mode 100644 index 0000000000..17c0fbd1b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-computed-value-display-floated-items-001.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'float' affects to the computed value of 'display' on 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-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo" title="9.7 Relationships between 'display', 'position', and 'float'"> +<meta name="flags" content="dom"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #grid { + display: grid; + } + + #inline-grid { + display: inline-grid; + } + + .inline-table { + display: inline-table; + } + + .inline { + display: inline; + } + + .flex { + display: flex; + } + + .float { + float: left; + } +</style> +<div id="log"></div> + +<div id="grid"> + <div id="grid-inline-table" class="float inline-table"></div> + <div id="grid-inline" class="float inline"></div> + <div id="grid-flex" class="float flex"></div> +</div> +<div id="inline-grid"> + <div id="inline-grid-inline-table" class="float inline-table"></div> + <div id="inline-grid-inline" class="float inline"></div> + <div id="inline-grid-flex" class="float flex"></div> +</div> + +<script> + function testComputedStyleDisplay(element, value) { + assert_equals(getComputedStyle(element).getPropertyValue("display"), value, "getComputedStyle() display should be '" + value + "'"); + } + + var gridInlineTable = document.getElementById("grid-inline-table"); + test(function() { + testComputedStyleDisplay(gridInlineTable, "table"); + }, "Test display floated 'inline-table' grid item"); + + var gridInline = document.getElementById("grid-inline"); + test(function() { + testComputedStyleDisplay(gridInline, "block"); + }, "Test display floated 'inline' grid item"); + + var gridFlex = document.getElementById("grid-flex"); + test(function() { + testComputedStyleDisplay(gridFlex, "flex"); + }, "Test display floated 'flex' grid item"); + + var inlineGridInlineTable = document.getElementById("inline-grid-inline-table"); + test(function() { + testComputedStyleDisplay(inlineGridInlineTable, "table"); + }, "Test display floated 'inline-table' grid item within an inline grid"); + + var inlineGridInline = document.getElementById("inline-grid-inline"); + test(function() { + testComputedStyleDisplay(inlineGridInline, "block"); + }, "Test display floated 'inline' grid item within an inline grid"); + + var inlineGridFlex = document.getElementById("inline-grid-flex"); + test(function() { + testComputedStyleDisplay(inlineGridFlex, "flex"); + }, "Test display floated 'flex' grid item within an inline grid"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-001.html new file mode 100644 index 0000000000..8e322fe38e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-001.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: '::first-letter' is ignored in grid containers</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-containers"> +<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter"> +<meta name="assert" content="The test checks that grid item should ignore grid container's first-letter pseudo-element."> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + body { line-height: 20px; } + .grid-first-letter::first-letter { line-height: 100px; color: red; } + .container-first-letter::first-letter { line-height: 200px; color: green; } +</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"> + <div class="grid grid-first-letter"> + <div class="item" data-expected-height=20>The first item.</div> + <div class="item" data-expected-height=20>The second item.</div> + </div> +</div> + +<div class="container"> + <div class="inline-grid grid-first-letter"> + <div class="item" data-expected-height=20>The first item.</div> + <div class="item" data-expected-height=20>The second item.</div> + </div> +</div> + +<div class="container"> + <div class="grid grid-first-letter" data-expected-height=20> + Anonymous item. + </div> +</div> + +<div class="container"> + <div class="inline-grid grid-first-letter" data-expected-height=20> + Anonymous item. + </div> +</div> + +<div class="container container-first-letter"> + <div class="grid grid-first-letter"> + <div class="item" data-expected-height=20>The first item.</div> + <div class="item" data-expected-height=20>The second item.</div> + </div> + <div data-expected-height=200>Out of grid.</div> +</div> + +<div class="container container-first-letter"> + <div class="inline-grid grid-first-letter"> + <div class="item" data-expected-height=20>The first item.</div> + <div class="item" data-expected-height=20>The second item.</div> + </div> + <div data-expected-height=20>Out of grid.</div> +</div> + +<div class="container container-first-letter"> + <div class="grid grid-first-letter" data-expected-height=20> + Anonymous item. + </div> + <div data-expected-height=200>Out of grid.</div> +</div> + +<div class="container container-first-letter"> + <div class="inline-grid grid-first-letter" data-expected-height=20> + Anonymous item. + </div> + <div data-expected-height=20>Out of grid.</div> +</div> + +<div class="container container-first-letter"> + <div class="grid"> + <div class="item" data-expected-height=20>The first item.</div> + <div class="item" data-expected-height=20>The second item.</div> + </div> + <div data-expected-height=200>Out of grid.</div> +</div> + +<div class="container container-first-letter"> + <div class="inline-grid"> + <div class="item" data-expected-height=20>The first item.</div> + <div class="item" data-expected-height=20>The second item.</div> + </div> + <div data-expected-height=20>Out of grid.</div> +</div> + +<div class="container container-first-letter"> + <div class="grid" data-expected-height=20> + Anonymous item. + </div> + <div data-expected-height=200>Out of grid.</div> +</div> + +<div class="container container-first-letter"> + <div class="inline-grid" data-expected-height=20> + Anonymous item. + </div> + <div data-expected-height=20>Out of grid.</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002-ref.html new file mode 100644 index 0000000000..1d89a21278 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test Reference</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<button style="display:grid"> + First letter should not be red +</button> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002.html new file mode 100644 index 0000000000..42014addf0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: '::first-letter' is ignored in button grid containers</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers"> +<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter"> +<link rel="match" href="grid-container-ignores-first-letter-002-ref.html"> +<style> + /* The combination of button, grid, nested inlines, and ::first-letter crashes Blink */ + button { display: grid } + button::first-letter { color: red } +</style> +<button> + <span> + <span>First letter should not be red</span> + </span> +</button> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-line-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-line-001.html new file mode 100644 index 0000000000..b19eee76a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-line-001.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: '::first-line' is ignored in grid containers</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-containers"> +<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line"> +<meta name="assert" content="The test checks that grid item should ignore grid container's first-line pseudo-element."> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + body { line-height: 20px; } + .grid-first-line::first-line { line-height: 100px; } + .container::first-line { line-height: 200px; } +</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,.inline-grid');"> + +<div id="log"></div> + +<div class="grid grid-first-line"> + <div class="item" data-expected-height=20>The first item.</div> + <div class="item" data-expected-height=20>The second item.</div> +</div> + +<div class="inline-grid grid-first-line"> + <div class="item" data-expected-height=20>The first item.</div> + <div class="item" data-expected-height=20>The second item.</div> +</div> + +<div class="grid grid-first-line" data-expected-height=20> + Anonymous item. +</div> + +<div class="inline-grid grid-first-line" data-expected-height=20> + Anonymous item. +</div> + +<div class="container"> + <div class="grid grid-first-line"> + <div class="item" data-expected-height=20>The first item.</div> + <div class="item" data-expected-height=20>The second item.</div> + </div> +</div> + +<div class="container"> + <div class="inline-grid grid-first-line"> + <div class="item" data-expected-height=20>The first item.</div> + <div class="item" data-expected-height=20>The second item.</div> + </div> +</div> + +<div class="container"> + <div class="grid grid-first-line" data-expected-height=20> + Anonymous item. + </div> +</div> + +<div class="container"> + <div class="inline-grid grid-first-line" data-expected-height=20> + Anonymous item. + </div> +</div> + +<div class="container"> + <div class="grid"> + <div class="item" data-expected-height=20>The first item.</div> + <div class="item" data-expected-height=20>The second item.</div> + </div> +</div> + +<div class="container"> + <div class="inline-grid"> + <div class="item" data-expected-height=20>The first item.</div> + <div class="item" data-expected-height=20>The second item.</div> + </div> +</div> + +<div class="container"> + <div class="grid" data-expected-height=20> + Anonymous item. + </div> +</div> + +<div class="container"> + <div class="inline-grid" data-expected-height=20> + Anonymous item. + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html new file mode 100644 index 0000000000..bad3f89b53 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html @@ -0,0 +1,139 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Grid: grid container's size includes 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/#intrinsic-sizes"/> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#overflow"/> +<meta name="assert" content="This test checks that grid container size includes border, padding and scrollbar; ignoring margin as expected."/> +<link rel="issue" href="https://crbug.com/532032"/> +<link href="/css/support/grid.css" rel="stylesheet"/> +<link href="/css/support/width-keyword-classes.css" rel="stylesheet"> +<link href="/css/support/height-keyword-classes.css" rel="stylesheet"> +<style> +.margin { + margin: 10px; +} + +.border { + border: 5px solid black; +} + +.padding { + padding: 20px; +} + +.scroll { + overflow: scroll; +} + +.item { + width: 100px; + height: 100px; + background: lime; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body> + <div class="grid min-content" data-expected-width="100" data-expected-height="100"> + <div class="item" data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="grid min-content margin" data-expected-width="100" data-expected-height="100"> + <div class="item" data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="grid min-content border" data-expected-width="110" data-expected-height="110"> + <div class="item" data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="grid min-content padding" data-expected-width="140" data-expected-height="140"> + <div class="item" data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="grid min-content scroll" data-test-width-without-scrollbar="100" data-test-height-without-scrollbar="100"> + <div class="item" data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="grid min-content margin border" data-expected-width="110" data-expected-height="110"> + <div class="item" data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="grid min-content margin padding" data-expected-width="140" data-expected-height="140"> + <div class="item" data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="grid min-content margin scroll" data-test-width-without-scrollbar="100" data-test-height-without-scrollbar="100"> + <div class="item" data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="grid min-content border padding" data-expected-width="150" data-expected-height="150"> + <div class="item" data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="grid min-content border scroll" data-test-width-without-scrollbar="110" data-test-height-without-scrollbar="110"> + <div class="item" data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="grid min-content padding scroll" data-test-width-without-scrollbar="140" data-test-height-without-scrollbar="140"> + <div class="item" data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="grid min-content margin border padding" data-expected-width="150" data-expected-height="150"> + <div class="item" data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="grid min-content margin border scroll" data-test-width-without-scrollbar="110" data-test-height-without-scrollbar="110"> + <div class="item" data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="grid min-content margin padding scroll" data-test-width-without-scrollbar="140" data-test-height-without-scrollbar="140"> + <div class="item" data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="grid min-content border padding scroll" data-test-width-without-scrollbar="150" data-test-height-without-scrollbar="150"> + <div class="item" data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="grid min-content margin border padding scroll" data-test-width-without-scrollbar="150" data-test-height-without-scrollbar="150"> + <div class="item" data-expected-width="100" data-expected-height="100"></div> + </div> + + <!-- This div is only for measuring scrollbar size --> + <div id="measure" style="overflow: scroll;"> + <div style="min-height: 300px;"></div> + </div> + +<script> + var measure = document.getElementById('measure'); + var scrollbarWidth = measure.offsetWidth - measure.clientWidth; + var scrollbarHeight = measure.offsetHeight - measure.clientHeight; + + // Here are the data-test-width-without-scrollbar (and height) attributes of all + // elements that have the "scroll" class. Things that contribute to the expected + // sizes are: + // + // - width: + // padding{Left,Right}, border{Left,Right}, element width and its scrollbarWidth. + // + // - height: + // padding{Top,Bottom}, border{Top, Bottom}, element width and its scrollbarHeight. + // + // The data-expected-width (and height) attributes are dynamically set to the elements + // so that we can ensure the scrollbar sizes are calculated in an engine-agnostic way. + var elements = document.getElementsByClassName("scroll"); + for (var i = 0; i < elements.length; i++) { + const expectedWidth = parseInt(elements[i].getAttribute("data-test-width-without-scrollbar")); + const expectedHeight = parseInt(elements[i].getAttribute("data-test-height-without-scrollbar")); + elements[i].setAttribute("data-expected-width", expectedWidth + scrollbarWidth); + elements[i].setAttribute("data-expected-height", expectedHeight + scrollbarHeight); + } + + checkLayout('.grid'); +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001-ref.html new file mode 100644 index 0000000000..a40a1ea25c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001-ref.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS container Layout Test Reference</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .container { + font: 10px/1 Ahem; + margin: 10px; + background: grey; + } + + .scrollX { + overflow-x: scroll; + } + + .scrollY { + overflow-y: scroll; + } + + .fixedSize { + width: 200px; + height: 50px; + } + + .container > div { + background: cyan; + width: 100%; + height: 100%; + } + + .directionRTL { + direction: rtl; + } +</style> + +<p>The test passes if it has the same output as the reference.</p> + +<div style="float: left; width: 350px;"> + + <h2>direction: ltr;</h2> + + <div class="container scrollX"> + <div>item</div> + </div> + + <div class="container scrollY"> + <div>item</div> + </div> + + <div class="container scrollX scrollY"> + <div>item</div> + </div> + + <div class="container fixedSize scrollX"> + <div>item</div> + </div> + + <div class="container fixedSize scrollY"> + <div>item</div> + </div> + + <div class="container fixedSize scrollX scrollY"> + <div>item</div> + </div> + +</div> + +<div style="float: left; width: 350px;"> + + <h2>direction: rtl;</h2> + + <div class="directionRTL container scrollX"> + <div>item</div> + </div> + + <div class="directionRTL container scrollY"> + <div>item</div> + </div> + + <div class="directionRTL container scrollX scrollY"> + <div>item</div> + </div> + + <div class="directionRTL container fixedSize scrollX"> + <div>item</div> + </div> + + <div class="directionRTL container fixedSize scrollY"> + <div>item</div> + </div> + + <div class="directionRTL container fixedSize scrollX scrollY"> + <div>item</div> + </div> + +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001.html new file mode 100644 index 0000000000..848ed7d909 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid container with scrollbars</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model"> +<link rel="match" href="grid-container-scrollbar-001-ref.html"> +<meta name="assert" content="This test verifies that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction."> +<link href="/css/support/grid.css" rel="stylesheet"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + font: 10px/1 Ahem; + margin: 10px; + } + + .scrollX { + overflow-x: scroll; + } + + .scrollY { + overflow-y: scroll; + } + + .fixedSize { + width: 200px; + height: 50px; + } + + .grid > div { + background: cyan; + } +</style> + +<p>The test passes if it has the same output as the reference.</p> + +<div style="float: left; width: 350px;"> + + <h2>direction: ltr;</h2> + + <div class="grid scrollX"> + <div>item</div> + </div> + + <div class="grid scrollY"> + <div>item</div> + </div> + + <div class="grid scrollX scrollY"> + <div>item</div> + </div> + + <div class="grid fixedSize scrollX"> + <div>item</div> + </div> + + <div class="grid fixedSize scrollY"> + <div>item</div> + </div> + + <div class="grid fixedSize scrollX scrollY"> + <div>item</div> + </div> + +</div> + +<div style="float: left; width: 350px;"> + + <h2>direction: rtl;</h2> + + <div class="directionRTL grid scrollX"> + <div>item</div> + </div> + + <div class="directionRTL grid scrollY"> + <div>item</div> + </div> + + <div class="directionRTL grid scrollX scrollY"> + <div>item</div> + </div> + + <div class="directionRTL grid fixedSize scrollX"> + <div>item</div> + </div> + + <div class="directionRTL grid fixedSize scrollY"> + <div>item</div> + </div> + + <div class="directionRTL grid fixedSize scrollX scrollY"> + <div>item</div> + </div> + +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001-ref.html new file mode 100644 index 0000000000..778c97be1f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001-ref.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS container Layout Test Reference</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .container { + font: 10px/1 Ahem; + margin: 10px; + background: grey; + writing-mode: vertical-lr; + } + + .scrollX { + overflow-x: scroll; + } + + .scrollY { + overflow-y: scroll; + } + + .fixedSize { + width: 200px; + height: 50px; + } + + .container > div { + background: cyan; + width: 100%; + height: 100%; + } + + .directionRTL { + direction: rtl; + } +</style> + +<p>The test passes if it has the same output as the reference.</p> + +<div style="float: left; width: 350px;"> + + <h2>direction: ltr;</h2> + + <div class="container scrollX"> + <div>item</div> + </div> + + <div class="container scrollY"> + <div>item</div> + </div> + + <div class="container scrollX scrollY"> + <div>item</div> + </div> + + <div class="container fixedSize scrollX"> + <div>item</div> + </div> + + <div class="container fixedSize scrollY"> + <div>item</div> + </div> + + <div class="container fixedSize scrollX scrollY"> + <div>item</div> + </div> + +</div> + +<div style="float: left; width: 350px;"> + + <h2>direction: rtl;</h2> + + <div class="directionRTL container scrollX"> + <div>item</div> + </div> + + <div class="directionRTL container scrollY"> + <div>item</div> + </div> + + <div class="directionRTL container scrollX scrollY"> + <div>item</div> + </div> + + <div class="directionRTL container fixedSize scrollX"> + <div>item</div> + </div> + + <div class="directionRTL container fixedSize scrollY"> + <div>item</div> + </div> + + <div class="directionRTL container fixedSize scrollX scrollY"> + <div>item</div> + </div> + +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html new file mode 100644 index 0000000000..aed5d0cf49 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid container with scrollbars</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model"> +<link rel="match" href="grid-container-scrollbar-vertical-lr-001-ref.html"> +<meta name="assert" content="This test verifies that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction."> +<link href="/css/support/grid.css" rel="stylesheet"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + font: 10px/1 Ahem; + margin: 10px; + writing-mode: vertical-lr; + } + + .scrollX { + overflow-x: scroll; + } + + .scrollY { + overflow-y: scroll; + } + + .fixedSize { + width: 200px; + height: 50px; + } + + .grid > div { + background: cyan; + } +</style> + +<p>The test passes if it has the same output as the reference.</p> + +<div style="float: left; width: 350px;"> + + <h2>direction: ltr;</h2> + + <div class="grid scrollX"> + <div>item</div> + </div> + + <div class="grid scrollY"> + <div>item</div> + </div> + + <div class="grid scrollX scrollY"> + <div>item</div> + </div> + + <div class="grid fixedSize scrollX"> + <div>item</div> + </div> + + <div class="grid fixedSize scrollY"> + <div>item</div> + </div> + + <div class="grid fixedSize scrollX scrollY"> + <div>item</div> + </div> + +</div> + +<div style="float: left; width: 350px;"> + + <h2>direction: rtl;</h2> + + <div class="directionRTL grid scrollX"> + <div>item</div> + </div> + + <div class="directionRTL grid scrollY"> + <div>item</div> + </div> + + <div class="directionRTL grid scrollX scrollY"> + <div>item</div> + </div> + + <div class="directionRTL grid fixedSize scrollX"> + <div>item</div> + </div> + + <div class="directionRTL grid fixedSize scrollY"> + <div>item</div> + </div> + + <div class="directionRTL grid fixedSize scrollX scrollY"> + <div>item</div> + </div> + +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001-ref.html new file mode 100644 index 0000000000..a511347516 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001-ref.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS container Layout Test Reference</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .container { + font: 10px/1 Ahem; + margin: 10px; + background: grey; + writing-mode: vertical-rl; + } + + .scrollX { + overflow-x: scroll; + } + + .scrollY { + overflow-y: scroll; + } + + .fixedSize { + width: 200px; + height: 50px; + } + + .container > div { + background: cyan; + width: 100%; + height: 100%; + } + + .directionRTL { + direction: rtl; + } +</style> + +<p>The test passes if it has the same output as the reference.</p> + +<div style="float: left; width: 350px;"> + + <h2>direction: ltr;</h2> + + <div class="container scrollX"> + <div>item</div> + </div> + + <div class="container scrollY"> + <div>item</div> + </div> + + <div class="container scrollX scrollY"> + <div>item</div> + </div> + + <div class="container fixedSize scrollX"> + <div>item</div> + </div> + + <div class="container fixedSize scrollY"> + <div>item</div> + </div> + + <div class="container fixedSize scrollX scrollY"> + <div>item</div> + </div> + +</div> + +<div style="float: left; width: 350px;"> + + <h2>direction: rtl;</h2> + + <div class="directionRTL container scrollX"> + <div>item</div> + </div> + + <div class="directionRTL container scrollY"> + <div>item</div> + </div> + + <div class="directionRTL container scrollX scrollY"> + <div>item</div> + </div> + + <div class="directionRTL container fixedSize scrollX"> + <div>item</div> + </div> + + <div class="directionRTL container fixedSize scrollY"> + <div>item</div> + </div> + + <div class="directionRTL container fixedSize scrollX scrollY"> + <div>item</div> + </div> + +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html new file mode 100644 index 0000000000..e07223df2a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid container with scrollbars</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model"> +<link rel="match" href="grid-container-scrollbar-vertical-rl-001-ref.html"> +<meta name="assert" content="This test verifies that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction."> +<link href="/css/support/grid.css" rel="stylesheet"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + font: 10px/1 Ahem; + margin: 10px; + writing-mode: vertical-rl; + } + + .scrollX { + overflow-x: scroll; + } + + .scrollY { + overflow-y: scroll; + } + + .fixedSize { + width: 200px; + height: 50px; + } + + .grid > div { + background: cyan; + } +</style> + +<p>The test passes if it has the same output as the reference.</p> + +<div style="float: left; width: 350px;"> + + <h2>direction: ltr;</h2> + + <div class="grid scrollX"> + <div>item</div> + </div> + + <div class="grid scrollY"> + <div>item</div> + </div> + + <div class="grid scrollX scrollY"> + <div>item</div> + </div> + + <div class="grid fixedSize scrollX"> + <div>item</div> + </div> + + <div class="grid fixedSize scrollY"> + <div>item</div> + </div> + + <div class="grid fixedSize scrollX scrollY"> + <div>item</div> + </div> + +</div> + +<div style="float: left; width: 350px;"> + + <h2>direction: rtl;</h2> + + <div class="directionRTL grid scrollX"> + <div>item</div> + </div> + + <div class="directionRTL grid scrollY"> + <div>item</div> + </div> + + <div class="directionRTL grid scrollX scrollY"> + <div>item</div> + </div> + + <div class="directionRTL grid fixedSize scrollX"> + <div>item</div> + </div> + + <div class="directionRTL grid fixedSize scrollY"> + <div>item</div> + </div> + + <div class="directionRTL grid fixedSize scrollX scrollY"> + <div>item</div> + </div> + +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-001.html new file mode 100644 index 0000000000..43b62a9316 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>CSS Grid Layout Test: Grid container's height with scrollbars</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#overflow"/> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=583743"/> +<link rel="match" href="../reference/grid-container-scrollbars-sizing-001-ref.html"> +<meta name="assert" content="This test ensures that the grid container considers the scrollbar when computing the logical height."/> +<style> +html { + overflow-x: scroll; +} +.grid { + display: grid; + float: left; + overflow-y: scroll; + overflow-x: scroll; +} +.item { + background: lime; + width: 100px; + height: 100px; +} +</style> +<p>This test passes if you see a 100x100px green box and scrollbars are disabled.</p> +<div class="grid"> + <div class="item">item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-002.html new file mode 100644 index 0000000000..99cc5ee771 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS Grid Layout Test: Intrinsic logical width with scrollbars</title> +<link rel="author" title="Sunil Ratnu" href="mailto:sunil.ratnu@samsung.com"> +<link rel="issue" href="https://codereview.chromium.org/535913002"/> +<link rel="help" href="https://drafts.csswg.org/css-grid/#overflow"/> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> +<link rel="match" href="../reference/grid-container-scrollbars-sizing-002-ref.html"> +<meta name="assert" content="This test ensures that the grid container considers the scrollbars when computing the intrinsic logical widths."/> + +<style> +.grid, .inline-grid { + overflow: scroll; +} +.gridItem { + width: 100px; + height: 100px; + background: green; +} +</style> +<body> +<div class='grid fit-content'> + <span class='gridItem'></span> +</div> +<div class='grid fit-content' style='overflow-y: hidden'> + <span class='gridItem'></span> +</div> +<div class='inline-grid fit-content'> + <span class='gridItem'></span> +</div> +<div class='inline-grid fit-content' style='overflow-y: hidden'> + <span class='gridItem'></span> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html new file mode 100644 index 0000000000..38759c2c61 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: min|max-content sizing constraints on grid containers</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/#intrinsic-sizes"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#sizing-values"> +<meta name="assert" content="The test checks the intrinsic size of a grid container when sized under different constraints. In inline axis min|max-content have some effect, however in block axis they behave as auto."> +<style> + .grid { + display: grid; + float: left; + background: lime; + } + + .grid-columns-minmax-50-100 { + grid-template-columns: minmax(50px, 100px); + } + + .grid-columns-minmax-100-200 { + grid-template-columns: minmax(100px, 200px); + } + + .grid-rows-minmax-50-100 { + grid-template-rows: minmax(50px, 100px); + } + + .min-content { + width: min-content; + height: min-content; + } + + .max-content { + width: max-content; + height: max-content; + } +</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> + + <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100" + data-expected-width="100" data-expected-height="100"></div> + + <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100" + data-expected-width="100" data-expected-height="100"></div> + + <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100" + data-expected-width="100" data-expected-height="100"></div> + + <div class="min-content"> + <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100" + data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="max-content"> + <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100" + data-expected-width="100" data-expected-height="100"></div> + </div> + + <div style="writing-mode: vertical-lr;"> + + <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100" + data-expected-width="100" data-expected-height="100"></div> + + <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100" + data-expected-width="100" data-expected-height="100"></div> + + <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100" + data-expected-width="100" data-expected-height="100"></div> + + <div class="min-content"> + <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100" + data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="max-content"> + <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100" + data-expected-width="100" data-expected-height="100"></div> + </div> + + </div> + + <div style="writing-mode: vertical-rl;"> + + <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100" + data-expected-width="100" data-expected-height="100"></div> + + <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100" + data-expected-width="100" data-expected-height="100"></div> + + <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100" + data-expected-width="100" data-expected-height="100"></div> + + <div class="min-content"> + <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100" + data-expected-width="100" data-expected-height="100"></div> + </div> + + <div class="max-content"> + <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100" + data-expected-width="100" data-expected-height="100"></div> + </div> + + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-display-grid-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-display-grid-001.html new file mode 100644 index 0000000000..3599aa9604 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-display-grid-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'grid' value for 'display' property</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-11-18 --> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<meta name="assert" content="This test checks that 'grid' value for 'display' property generates a block level containing box."> +<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; + } +</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"> + <span>firs</span> + <span>seco</span> +</div> +<div class="test-grid-overlapping-green"> + <span>firs</span> + <span>seco</span> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-display-inline-grid-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-display-inline-grid-001.html new file mode 100644 index 0000000000..30104e4220 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-display-inline-grid-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'inline-grid' value for 'display' property</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-11-18 --> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="This test checks that 'inline-grid' value for 'display' property generates an inline level containing box."> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .test-inline-grid-overlapping-green { + display: inline-grid; + background-color: green; + width: 50px; + 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 class="test-inline-grid-overlapping-green"></div><div class="test-inline-grid-overlapping-green"></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-001.html new file mode 100644 index 0000000000..66eb427cfb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: '::first-letter' from grid container does not apply to 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-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element"> +<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html"> +<meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to a grid container."> +<style> + .grid { + display: grid; + color: green; + } + + .grid::first-letter { + color: red; + } +</style> +<div class="grid"> + <div> + <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-002.html new file mode 100644 index 0000000000..27aa0256da --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: '::first-letter' from grid container ancestors does not apply to 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-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element"> +<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html"> +<meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to a grid container ancestors."> +<style> + .grid { + display: grid; + color: green; + } + + body::first-letter { + color: red; + } +</style> +<div class="grid"> + <div> + <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-003.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-003.html new file mode 100644 index 0000000000..12b88c3115 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-003.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: '::first-letter' works on 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-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element"> +<link rel="match" href="../reference/grid-first-letter-green-margin-no-collapse-ref.html"> +<meta name="assert" content="This test checks that '::first-letter' pseudo-element works as expected if it is applied directly to a grid item."> +<style> + .grid { + display: grid; + } + + .item::first-letter { + color: green; + } +</style> +<div class="grid"> + <p class="item"> + The <strong>first letter</strong> of this paragraph, and only that one, should be <strong>green</strong>. + In addition, body and paragraph margins should <strong>not collapse</strong>. + </p> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-001.html new file mode 100644 index 0000000000..9f154eee27 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: '::first-line' from grid container does not apply to 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-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS"> +<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html"> +<meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in grid items when applied to a grid container."> +<style> + .grid { + display: grid; + color: green; + } + + .grid::first-line { + color: red; + } +</style> +<div class="grid"> + <div> + <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-002.html new file mode 100644 index 0000000000..ea87c875fa --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: '::first-line' from grid container ancestors does not apply to 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-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS"> +<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html"> +<meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in grid items when applied to a grid container ancestors."> +<style> + .grid { + display: grid; + color: green; + } + + body::first-line { + color: red; + } +</style> +<div class="grid"> + <div> + <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-003.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-003.html new file mode 100644 index 0000000000..47f727de15 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-003.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: '::first-line' works on 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-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS"> +<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html"> +<meta name="assert" content="This test checks that '::first-line' pseudo-element works as expected if it is applied directly to a grid item."> +<style> + .grid { + display: grid; + color: red; + } + + .item::first-line { + color: green; + } +</style> +<div class="grid"> + <p class="item"> + This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>. + </p> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-float-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-float-001.html new file mode 100644 index 0000000000..521a3bd6cd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-float-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'float' has no effect on grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-01-03 --> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float"> +<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; + } + + .grid { + display: grid; + } + + .test-overlapping-green { + background-color: green; + width: 100px; + height: 50px; + } + + .float-left { + float: left; + } +</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="grid"> + <div class="test-overlapping-green float-left"></div> + <div class="test-overlapping-green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-float-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-float-002.html new file mode 100644 index 0000000000..2a849df25c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-float-002.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<title>CSS Grid Layout Test: 'float' and 'clear' have no effect on a grid item.</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-containers"/> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=79180"/> +<link href="/css/support/grid.css" rel="stylesheet"/> +<link href="/css/support/alignment.css" rel="stylesheet"/> +<meta name="assert" content="This test ensures that the grid's items are not affected by the 'float' and 'clear' properties."/> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +.container { + background-color:grey; +} + +.gridItem { + width: 50px; + height: 50px; +} +</style> +<body onload="checkLayout('.container')"> + +<div style="position: relative"> + <div class="container grid justifyContentStart"> + <div style="float: right;" class="gridItem firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> + <div class="gridItem firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> + <div style="float: left;" class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> + <div style="float: left;" class="gridItem secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div> + <div style="clear: both;" class="gridItem secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div> + <div style="float: left;" class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-001.html new file mode 100644 index 0000000000..31eab4ba69 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: floats do not intrude into a 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-containers" title="3.1 Establishing Grid Containers"> +<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; + } + + .test-overlapping-green { + background-color: green; + width: 50px; + height: 100px; + } + + .float { + float: left; + } + + .grid { + display: grid; + } +</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="float test-overlapping-green"></div> +<div class="grid test-overlapping-green"></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002-ref.html new file mode 100644 index 0000000000..070980ed27 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.cell { + width: 50px; + height: auto; + min-height: 50px +} + +.invisibleFont { + color: lime; +} + +.floatLeft { + float: left; +} + +.clearLeft { + clear: left; +} + +.relative { + position: relative; +} +</style> +</head> + +<body> + +<div>This test checks that grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item ('Float' text shouldn't overflow the first row).</div> + +<div> + <div class="cell relative floatLeft firstRowFirstColumn"> + <div>Float</div> + <div>Float</div> + <div>Float</div> + <div>Float</div> + </div> + <div class="cell floatLeft firstRowSecondColumn"> + <div class="invisibleFont">Float</div> + <div class="invisibleFont">Float</div> + <div class="invisibleFont">Float</div> + <div class="invisibleFont">Float</div> + </div> + <div class="cell floatLeft clearLeft secondRowFirstColumn"></div> + <div class="cell floatLeft secondRowSecondColumn"></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002.html new file mode 100644 index 0000000000..9c26e02105 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Grid Layout Test: floats do not protrude content onto grid items</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=430100"> +<link rel="match" href="grid-floats-no-intrude-002-ref.html"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> +<meta name="assert" content="Test that a grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item." /> + +<style> +.grid { + grid-auto-columns: minmax(50px, max-content); + grid-auto-rows: minmax(50px, max-content); +} + +.floatChild { + float: left; + clear: both; +} +</style> +</head> + +<body> + +<div>This test checks that grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item ('Float' text shouldn't overflow the first row).</div> + +<div class="grid fit-content"> + <div class="firstRowFirstColumn"> + <div class="floatChild">Float</div> + <div class="floatChild">Float</div> + <div class="floatChild">Float</div> + <div class="floatChild">Float</div> + </div> + <div class="firstRowSecondColumn"></div> + <div class="secondRowFirstColumn"></div> + <div class="secondRowSecondColumn"></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-flex-content-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-flex-content-001.html new file mode 100644 index 0000000000..99b04e062f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-flex-content-001.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<title>CSS Grid: grid gutters and flex content.</title> +<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters"/> +<meta name="assert" content="Check that gutters do not interfere with flex content resolution for columns or with content sized tracks."/> +<link rel="stylesheet" href="/css/support/grid.css"/> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"/> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"/> +<style> +.gridPercentAndFlexContent { grid-template: 50px / 50% minmax(30px, 2fr); } +.gridTwoDoubleMaxFlexContent { grid-template: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); } +.gridIgnoreSecondGridItem { grid-template: 50px / minmax(300px, 3fr) minmax(150px, 1fr); } + +.gridRowsPercentAndFlexContent { grid-template: minmax(30px, 2fr) 50% / 50px; } +.gridRowsTwoMaxFlexContent { grid-template: minmax(10px, 1fr) minmax(10px, 2fr) / 50px; } +.gridRowsTwoDoubleMaxFlexContent { grid-template: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; } + +.gridMinContentAndMinMaxFixedMinContentAndFlex { grid-template-columns: min-content minmax(20px, min-content) 2fr; } +.gridMaxContentAndMinMaxFixedMaxContentAndFlex { grid-template-columns: max-content minmax(20px, max-content) 1fr; } + +div.grid > div { font: 10px/1 Ahem; } + +.gridRowColumnGaps { + grid-row-gap: 33px; + grid-column-gap: 19px; +} +</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'); })"> + +<!-- Check that gutters do not interfere with flex content resolution for columns --> + +<div style="width: 120px; height: 10px;"> + <div class="grid gridTwoDoubleMaxFlexContent gridRowColumnGaps" data-expected-width="120" data-expected-height="50"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="81" data-expected-height="50"></div> + </div> +</div> + +<div style="width: 570px; height: 10px;"> + <div class="grid gridIgnoreSecondGridItem gridRowColumnGaps" data-expected-width="570" data-expected-height="50"> + <div class="firstRowFirstColumn" data-expected-width="401" data-expected-height="50"></div> + <div class="firstRowSecondColumn" data-expected-width="150" data-expected-height="50"></div> + </div> +</div> + +<div style="width: 120px; height: 10px;"> + <div class="grid gridPercentAndFlexContent gridRowColumnGaps" data-expected-width="120" data-expected-height="50"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60" data-expected-height="50"></div> + <div class="firstRowSecondColumn" data-expected-width="41" data-expected-height="50"></div> + </div> +</div> + +<!-- Check that gutters do not interfere with flex content resolution for rows --> + +<div style="width: 10px; height: 60px"> + <div class="grid gridRowsTwoMaxFlexContent gridRowColumnGaps" style="height: 100%" data-expected-width="10" data-expected-height="60"> + <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> + <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="17"></div> + </div> +</div> + +<div style="width: 10px; height: 60px"> + <div class="grid gridRowsTwoDoubleMaxFlexContent gridRowColumnGaps" data-expected-width="10" data-expected-height="63"> + <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> + <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> + </div> +</div> + +<div style="width: 10px;"> + <div class="grid gridRowsPercentAndFlexContent gridRowColumnGaps" style="height: 150px" data-expected-width="10" data-expected-height="150"> + <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="42"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="75"></div> + </div> +</div> + +<!-- Check that gutters do not interfere with flex content resolution with content sized tracks --> + +<div style="position: relative; width: 100px;"> + <div class="grid gridMinContentAndMinMaxFixedMinContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="149"> + <div style="grid-column: 2 / span 2;" data-expected-width="80">XXXXX</div> + <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="100">XXX XXX XXX</div> + <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="40">XXXX XXXX</div> + <div style="grid-column: 1; grid-row: 4;" data-expected-width="1" data-expected-height="0"></div> + </div> +</div> + +<div style="position: relative; width: 100px;"> + <div class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="139"> + <div style="grid-column: 2 / span 2;" data-expected-width="39">XX</div> + <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="109">XXX XXX XXX</div> + <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="90">XXXX XXXX</div> + <div style="grid-column: 1; grid-row: 4;" data-expected-width="51" data-expected-height="0"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-tracks-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-tracks-001.html new file mode 100644 index 0000000000..caa83e1d8f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-tracks-001.html @@ -0,0 +1,191 @@ +<!DOCTYPE html> +<title>CSS Grid: grid gutters and tracks.</title> +<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters"/> +<meta name="assert" content="Check that gutters contribute to the size of the grid containers and spanning items, and do not alter grid items positioning, margin computation and track sizing."/> +<link rel="stylesheet" href="/css/support/grid.css"/> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"/> +<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"/> +<style> +body { margin: 0px; } + +.grid { padding: 3px 7px 5px 1px; border: solid yellow 1px; } + +.normalGap { grid-gap: normal; } + +.gridGap { grid-gap: 16px; } + +.gridRowColumnGaps { + grid-row-gap: 12px; + grid-column-gap: 23px; +} + +.gridMultipleCols { grid-template-columns: 30px minmax(10px, 50px) 80px; } +.gridMultipleRows { grid-template-rows: 90px 70px min-content; } +.gridAutoAuto { grid-template: auto auto / auto auto; } +.gridMultipleFixed { grid-template: [first] 37px [foo] 57px [bar] 77px [last] / [first] 15px [foo] 25px [bar] 35px [last]; } +.gridFixed100 { grid-template: repeat(2, 100px) / repeat(2, 100px); } +.gridWithPercent { grid-template-columns: 10px 20% repeat(2, 30px); } +.gridWithDoublePercent { grid-template-columns: 60% 40%; } +.gridWithRowPercent { grid-template: 10px 20% 30px / 20px; } +.gridWithRowDoublePercent { grid-template: 60% 40% / 20px; } + +.width220 { width: 220px; } +.height100 { height: 100px; } +.gridAutoRows20 { grid-auto-rows: 20px; } + +.thirdRowThirdColumn { grid-area: 3 / 3; } +.firstRowThirdColumn { grid-area: 1 / 3; } + +div.grid > div { font: 10px/1 Ahem; } + +.gridItemMargins { + margin: 20px 30px 40px 50px; + width: 20px; + height: 40px; +} + +</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'); })"> + +<!-- Check that gutters contribute to the size of the grid containers. --> + +<div style="position: relative;"> + <div class="grid normalGap gridMultipleCols fit-content" data-expected-width="170" data-expected-height="10"></div> + <div class="grid normalGap gridMultipleRows" style="width: 400px" data-expected-width="410" data-expected-height="170"></div> +</div> + +<div style="position: relative"> + <div class="grid gridRowColumnGaps fit-content" data-expected-width="103" data-expected-height="62"> + <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="10">XX</div> + <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="26" data-expected-width="50" data-expected-height="30">XX<br>X<br>XX XX</div> + </div> +</div> + +<div style="position: relative"> + <div class="grid gridMultipleCols gridRowColumnGaps fit-content" data-expected-width="216" data-expected-height="94"> + <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="30" data-expected-height="10">XX</div> + <div class="secondRowSecondColumn" data-offset-x="55" data-offset-y="26" data-expected-width="50" data-expected-height="20">XX<br>XX XX</div> + <div class="thirdRowThirdColumn" data-offset-x="128" data-offset-y="58" data-expected-width="80" data-expected-height="30">XXXX XX<br>X<br>XX XX</div> + </div> +</div> + +<div style="position: relative"> + <div class="grid gridMultipleRows gridRowColumnGaps fit-content" data-expected-width="196" data-expected-height="224"> + <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="90">XX</div> + <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="106" data-expected-width="50" data-expected-height="70">XX<br>XX XX</div> + <div class="thirdRowThirdColumn" data-offset-x="118" data-offset-y="188" data-expected-width="70" data-expected-height="30">XXXX XX<br>X<br>XX XX</div> + </div> +</div> + +<!-- Check that gutters do not alter grid items positioning. --> +<div style="position: relative"> + <div class="grid gridMultipleFixed gridRowColumnGaps"> + <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="15" data-expected-height="37">X X X</div> + <div class="secondRowSecondColumn" data-offset-x="40" data-offset-y="53" data-expected-width="25" data-expected-height="57">X X</div> + <div class="thirdRowThirdColumn" data-offset-x="88" data-offset-y="122" data-expected-width="35" data-expected-height="77">XXX XX X XX XX</div> + </div> +</div> + +<div style="position: relative"> + <div class="grid gridMultipleFixed gridRowColumnGaps"> + <div style="grid-row: 2; grid-column: -2 / -1;" data-offset-x="88" data-offset-y="53" data-expected-width="35" data-expected-height="57">X X X</div> + <div style="grid-row: 1 / bar; grid-column: bar" data-offset-x="88" data-offset-y="4" data-expected-width="35" data-expected-height="106">X XX X XX XX XX X</div> + <div style="grid-row: -2; grid-column-end: foo" data-offset-x="2" data-offset-y="122" data-expected-width="15" data-expected-height="77">X X</div> + </div> +</div> + +<!-- Check that gutters do not alter track sizing. --> +<div style="position: relative"> + <div class="grid gridRowColumnGaps fit-content" data-expected-width="166" data-expected-height="94"> + <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="10">XX</div> + <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="26" data-expected-width="30" data-expected-height="20">X X<br>X X</div> + <div class="thirdRowThirdColumn" data-offset-x="98" data-offset-y="58" data-expected-width="60" data-expected-height="30">XXX XX<br>X<br>XX XX</div> + </div> +</div> + +<div style="position: relative"> + <div class="grid gridRowColumnGaps gridMultipleCols gridMultipleRows fit-content" data-expected-width="216" data-expected-height="224"> + <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="30" data-expected-height="90">XX</div> + <div class="secondRowSecondColumn" data-offset-x="55" data-offset-y="106" data-expected-width="50" data-expected-height="70">X X<br>X X</div> + <div class="thirdRowThirdColumn" data-offset-x="128" data-offset-y="188" data-expected-width="80" data-expected-height="30">XXX XX<br>X<br>XX XX</div> + </div> +</div> + +<div style="position: relative"> + <div class="grid gridWithPercent width220 gridRowColumnGaps gridAutoRows20" data-expected-width="230" data-expected-height="94"> + <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="10" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="35" data-offset-y="36" data-expected-width="44" data-expected-height="20"></div> + <div class="thirdRowThirdColumn" data-offset-x="102" data-offset-y="68" data-expected-width="30" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid gridWithRowPercent gridRowColumnGaps width220 height100" data-expected-width="230" data-expected-height="110"> + <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="10"></div> + <div class="secondRowFirstColumn" data-offset-x="2" data-offset-y="26" data-expected-width="20" data-expected-height="20"></div> + <div class="thirdRowAutoColumn" data-offset-x="2" data-offset-y="58" data-expected-width="20" data-expected-height="30"></div> + </div> +</div> + +<!-- Check that gutters contribute to the size of spanning items. --> +<div style="position: relative"> + <div class="grid gridGap gridAutoAuto constrainedContainer"> + <div class="secondRowBothColumn" data-offset-x="2" data-offset-y="30" data-expected-width="50" data-expected-height="10">XXXXX</div> + <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="17" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="35" data-offset-y="4" data-expected-width="17" data-expected-height="10">X</div> + </div> +</div> + +<div style="position: relative"> + <div class="grid gridMultipleFixed gridRowColumnGaps"> + <div style="grid-row: 2; grid-column: 1 / -1;" data-offset-x="2" data-offset-y="53" data-expected-width="121" data-expected-height="57">XXXX X XXXX</div> + <div style="grid-row: first / last; grid-column-start: 2" data-offset-x="40" data-offset-y="4" data-expected-width="25" data-expected-height="195">X XX X XX X</div> + <div style="grid-row: 1 / 3; grid-column: first / bar" data-offset-x="2" data-offset-y="4" data-expected-width="63" data-expected-height="106">XXX XX<br>XX<br>XXXXX</div> + </div> +</div> + +<div style="position: relative"> + <div class="grid gridWithDoublePercent width220 gridRowColumnGaps gridAutoRows20" data-expected-width="230" data-expected-height="62"> + <div class="firstRowFirstColumn sizedToGridArea" data-offset-x="2" data-offset-y="4" data-expected-width="132" data-expected-height="20"></div> + <div class="secondRowSecondColumn sizedToGridArea" data-offset-x="157" data-offset-y="36" data-expected-width="88" data-expected-height="20"></div> + <div class="secondRowBothColumn sizedToGridArea" data-offset-x="2" data-offset-y="36" data-expected-width="243" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid gridWithRowDoublePercent gridRowColumnGaps width220 height100" data-expected-width="230" data-expected-height="110"> + <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="60"></div> + <div class="secondRowFirstColumn" data-offset-x="2" data-offset-y="76" data-expected-width="20" data-expected-height="40"></div> + <div class="bothRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="112"></div> + </div> +</div> + +<!-- Check that gutters do not interfere with margins computation. --> +<div style="position: relative"> + <div class="grid gridFixed100 gridGap"> + <div class="gridItemMargins firstRowFirstColumn" data-offset-x="52" data-offset-y="24" data-expected-width="20" data-expected-height="40"></div> + <div class="gridItemMargins firstRowSecondColumn" data-offset-x="168" data-offset-y="24" data-expected-width="20" data-expected-height="40"></div> + <div class="gridItemMargins secondRowFirstColumn" data-offset-x="52" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div> + <div class="gridItemMargins secondRowSecondColumn" data-offset-x="168" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid gridFixed100 verticalRL directionRTL gridGap"> + <div class="gridItemMargins firstRowFirstColumn" data-offset-x="168" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div> + <div class="gridItemMargins firstRowSecondColumn" data-offset-x="168" data-offset-y="24" data-expected-width="20" data-expected-height="40"></div> + <div class="gridItemMargins secondRowFirstColumn" data-offset-x="52" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div> + <div class="gridItemMargins secondRowSecondColumn" data-offset-x="52" data-offset-y="24" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-as-percentage-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-as-percentage-001.html new file mode 100644 index 0000000000..651f4278f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-as-percentage-001.html @@ -0,0 +1,199 @@ +<!DOCTYPE html> +<title>CSS Grid: grid gutters as percentage.</title> +<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters"/> +<meta name="assert" content="Check that when 'height' is indefinite, row gaps should be based on grid's 'auto' height."/> +<link rel="stylesheet" href="/css/support/grid.css"/> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"/> +<link rel="stylesheet" href="/css/support/height-keyword-classes.css"/> +<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"/> +<style> +body { margin: 0; } +.grid { font: 10px/1 Ahem; position: relative; } +.widthAuto { width: auto; } +.heightAuto { height: auto; } +.width400 { width: 400px; } +.width200 { width: 200px; } +.height200 { height: 200px; } +.height100 { height: 100px; } +.columns100-100 { grid-template-columns: 100px 100px; } +.rows50-50 { grid-template-rows: 50px 50px; } +.autoRepeat { grid-template: repeat(auto-fill, 50px) / repeat(auto-fill, 100px); } +.columnGap10Percent { grid-column-gap: 10% } +.rowGap20Percent { grid-row-gap: 20% } +.positioned { position: absolute; width: 100%; height: 100%; } +</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> + +<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p> +<div class="width400"> + <div class="grid columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="20"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="10">XXX X XX X</div> + <div class="firstRowSecondColumn" data-offset-x="220" data-offset-y="0" data-expected-width="180" data-expected-height="10">XX XXX X X</div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="14" data-expected-width="180" data-expected-height="10">X XX XXX X</div> + <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="14" data-expected-width="180" data-expected-height="10">XXXXX X XX</div> + </div> +</div> + +<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, first column's width is reduced and height increased to let its content to fit.</p> +<div class="width400"> + <div class="grid fit-content heightAuto columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="40"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="20">XXX X XX X</div> + <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20">XX XXX X X</div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="28" data-expected-width="80" data-expected-height="20">X XX XXX X</div> + <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="28" data-expected-width="100" data-expected-height="20">XXXXX X XX</div> + </div> +</div> + +<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p> +<div class="width400"> + <div class="grid fit-content widthAuto columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="20"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="10">XXX X XX X</div> + <div class="firstRowSecondColumn" data-offset-x="220" data-offset-y="0" data-expected-width="180" data-expected-height="10">XX XXX X X</div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="14" data-expected-width="180" data-expected-height="10">X XX XXX X</div> + <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="14" data-expected-width="180" data-expected-height="10">XXXXX X XX</div> + </div> +</div> + +<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, first column's width is reduced and height increased to let its content to fit.</p> +<div class="width400"> + <div class="grid fit-content columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="40"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="20">XXX X XX X</div> + <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20">XX XXX X X</div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="28" data-expected-width="80" data-expected-height="20">X XX XXX X</div> + <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="28" data-expected-width="100" data-expected-height="20">XXXXX X XX</div> + </div> +</div> + +<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p> +<div class="width400"> + <div class="grid columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div> + <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div> + <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div> + </div> +</div> + +<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'intrinsic' width, which reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.</p> +<div class="width400"> + <div class="grid fit-content heightAuto columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div> + <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div> + <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div> + </div> +</div> + +<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p> +<div class="width400"> + <div class="grid fit-content widthAuto columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div> + <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div> + <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div> + </div> +</div> + +<p>Both row and column gaps are based on definite sizes, but they will reduce the available space for tracks; however, since the container's specified inline size is not enough, first column's width is reduced and height increased to let its content to fit.</p> +<div class="width400"> + <div class="grid width200 height100 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="40">XXX X XX X</div> + <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="40">XX XXX X X</div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="60" data-expected-width="80" data-expected-height="40">X XX XXX X</div> + <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="60" data-expected-width="100" data-expected-height="40">XXXXX X XX</div> + </div> +</div> + +<p>Both row and column gaps are based on definite sizes, but they will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p> +<div class="width400"> + <div class="grid width400 height200 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="200"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="80">XXX X XX X</div> + <div class="firstRowSecondColumn" data-offset-x="220" data-offset-y="0" data-expected-width="180" data-expected-height="80">XX XXX X X</div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="120" data-expected-width="180" data-expected-height="80">X XX XXX X</div> + <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="120" data-expected-width="180" data-expected-height="80">XXXXX X XX</div> + </div> +</div> + +<p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.</p> +<div class="width400"> + <div class="grid width200 height100 columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div> + <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div> + <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div> + </div> +</div> + +<p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, they are fixed sized and fit.</p> +<div class="width400"> + <div class="grid width400 height200 columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="200"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div> + <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="90" data-expected-width="100" data-expected-height="50">X XX XXX X</div> + <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="90" data-expected-width="100" data-expected-height="50">XXXXX X XX</div> + </div> +</div> + +<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, only 1 repeteation is allowed, so tracks are adjusted to fit in the intrinsic size reduced by the gaps.</p> +<div class="width400"> + <div class="grid fit-content autoRepeat columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="70"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div> + <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XX XXX X X</div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="64" data-expected-width="100" data-expected-height="20">X XX XXX X</div> + <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="64" data-expected-width="80" data-expected-height="20">XXXXX X XX</div> + </div> +</div> + +<p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, repeat auto-fill allows all of them to fit.</p> +<div class=""> + <div class="grid width400 height200 autoRepeat columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="200"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div> + <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div> + <div class="firstRowThirdColumn" data-offset-x="280" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="90" data-expected-width="100" data-expected-height="50">X XX XXX X</div> + <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="90" data-expected-width="100" data-expected-height="50">XXXXX X XX</div> + <div class="secondRowThirdColumn" data-offset-x="280" data-offset-y="90" data-expected-width="100" data-expected-height="50">XXXXX X XX</div> + </div> +</div> + +<p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, repeat auto-fill allows only 1 repetition.</p> +<div class=""> + <div class="grid width200 height100 autoRepeat columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div> + <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XX XXX X X</div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="70" data-expected-width="100" data-expected-height="30">X XX XXX X</div> + <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="70" data-expected-width="80" data-expected-height="30">XXXXX X XX</div> + </div> +</div> + +<p>Grid with positioned items. Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p> +<div class="width400"> + <div class="grid columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100"> + <div class="positioned onlyFirstRowOnlyFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div> + <div class="positioned onlyFirstRowOnlySecondColumn" data-offset-x="140" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div> + <div class="positioned onlySecondRowOnlyFirstColumn" data-offset-x="0" data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div> + <div class="positioned onlySecondRowOnlySecondColumn" data-offset-x="140" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div> + </div> +</div> + +<p>Grid with positioned items. Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.</p> +<div class=""> + <div class="grid width200 height100 columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100"> + <div class="positioned onlyFirstRowOnlyFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div> + <div class="positioned onlyFirstRowOnlySecondColumn" data-offset-x="120" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div> + <div class="positioned onlySecondRowOnlyFirstColumn" data-offset-x="0" data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div> + <div class="positioned onlySecondRowOnlySecondColumn" data-offset-x="120" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-001.html new file mode 100644 index 0000000000..bc62c1770d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: '::first-letter' from inline grid container does not apply to 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-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element"> +<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html"> +<meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to an inline grid container."> +<style> + .inline-grid { + display: inline-grid; + color: green; + } + + .grid::first-letter { + color: red; + } +</style> +<div class="inline-grid"> + <div> + <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-002.html new file mode 100644 index 0000000000..afdc0de9a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: '::first-letter' from inline grid container ancestors does not apply to 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-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element"> +<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html"> +<meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to an inline grid container ancestors."> +<style> + .inline-grid { + display: inline-grid; + color: green; + } + + body::first-letter { + color: red; + } +</style> +<div class="inline-grid"> + <div> + <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-003.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-003.html new file mode 100644 index 0000000000..eea15ab585 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-003.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: '::first-letter' works on 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-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element"> +<link rel="match" href="../reference/grid-first-letter-green-margin-no-collapse-ref.html"> +<meta name="assert" content="This test checks that '::first-letter' pseudo-element works as expected if it is applied directly to a grid item within an inline grid."> +<style> + .inline-grid { + display: inline-grid; + } + + .item::first-letter { + color: green; + } +</style> +<div class="inline-grid"> + <p class="item"> + The <strong>first letter</strong> of this paragraph, and only that one, should be <strong>green</strong>. + In addition, body and paragraph margins should <strong>not collapse</strong>. + </p> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-001.html new file mode 100644 index 0000000000..2df3d559c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: '::first-line' from inline grid container does not apply to 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-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS"> +<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html"> +<meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in grid items when applied to an inline grid container."> +<style> + .inline-grid { + display: inline-grid; + color: green; + } + + .inline-grid::first-line { + color: red; + } +</style> +<div class="inline-grid"> + <div> + <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-002.html new file mode 100644 index 0000000000..efdee52d3c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: '::first-line' from inline grid container ancestors does not apply to 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-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS"> +<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html"> +<meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in anonymous grid items when applied to an inline grid container ancestors."> +<style> + .inline-grid { + display: inline-grid; + color: green; + } + + body::first-line { + color: red; + } +</style> +<div class="inline-grid"> + <div> + <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-003.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-003.html new file mode 100644 index 0000000000..c76a7f430f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-003.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: '::first-line' works on 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-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS"> +<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html"> +<meta name="assert" content="This test checks that '::first-line' pseudo-element works as expected if it is applied directly to a grid item within an inline grid."> +<style> + .inline-grid { + display: inline-grid; + color: red; + } + + .item::first-line { + color: green; + } +</style> +<div class="inline-grid"> + <p class="item"> + This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>. + </p> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-float-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-float-001.html new file mode 100644 index 0000000000..8222897e4f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-float-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'float' has no effect on grid items within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-01-03 --> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float"> +<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; + } + + .inline-grid { + display: inline-grid; + } + + .test-overlapping-green { + background-color: green; + width: 100px; + height: 50px; + } + + .float-left { + float: left; + } +</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="inline-grid"> + <div class="test-overlapping-green float-left"></div> + <div class="test-overlapping-green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-floats-no-intrude-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-floats-no-intrude-001.html new file mode 100644 index 0000000000..b15aabab06 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-floats-no-intrude-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: floats do not intrude into 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-containers" title="3.1 Establishing Grid Containers"> +<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; + } + + .test-overlapping-green { + background-color: green; + width: 50px; + height: 100px; + } + + .float { + float: left; + } + + .inline-grid { + display: inline-grid; + } +</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="float test-overlapping-green"></div> +<div class="inline-grid test-overlapping-green"></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-margins-no-collapse-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-margins-no-collapse-001.html new file mode 100644 index 0000000000..4260fe89f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-margins-no-collapse-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: inline grid's margins do not collapse</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-containers" title="3.1 Establishing Grid Containers"> +<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html"> +<meta name="assert" content="This test checks that inline grid's margin (body) do not collapse with the marings of the grid item (a paragraph)."> +<style> + body { + display: inline-grid; + } + + p { + color: green; + } +</style> +<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-multicol-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-multicol-001.html new file mode 100644 index 0000000000..3e51b16f5c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-multicol-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'column-*' properties from inline grid container does not apply to 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-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to an inline grid container."> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .test-overlapping-green { + background-color: green; + width: 100px; + height: 50px; + } + + .inline-grid { + display: inline-grid; + column-width: 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 class="inline-grid"> + <div class="test-overlapping-green"></div> + <div class="test-overlapping-green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-vertical-align-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-vertical-align-001.html new file mode 100644 index 0000000000..7dbf11c7ae --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-vertical-align-001.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'vertical-align' has no effect on grid items within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-12-10 --> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" title="10.8.1 Leading and half-leading"> +<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; + } + + #vertical-align { + vertical-align: 125px; + } +</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="test-inline-grid-overlapping-green"> + <span>1s</span> + <span id="vertical-align">2n</span> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-letter-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-letter-001.html new file mode 100644 index 0000000000..32206794c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-letter-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: '::first-letter' is valid in 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-containers"> +<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter"> +<meta name="assert" content="The test checks that grid items accept first-letter pseudo-element."> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + .item::first-letter { line-height: 100px; } +</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,.inline-grid');"> + +<div id="log"></div> + +<div class="grid"> + <div class="item" data-expected-height=100>The first item.</div> + <div class="item" data-expected-height=100>The second item.</div> +</div> + +<div class="inline-grid"> + <div class="item" data-expected-height=100>The first item.</div> + <div class="item" data-expected-height=100>The second item.</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-line-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-line-001.html new file mode 100644 index 0000000000..a6c8d2df45 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-line-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: '::first-line' is valid in 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-containers"> +<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line"> +<meta name="assert" content="The test checks that grid items accept first-line pseudo-element."> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + .item::first-line { line-height: 100px; } +</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,.inline-grid');"> + +<div id="log"></div> + +<div class="grid"> + <div class="item" data-expected-height=100>The first item.</div> + <div class="item" data-expected-height=100>The second item.</div> +</div> + +<div class="inline-grid"> + <div class="item" data-expected-height=100>The first item.</div> + <div class="item" data-expected-height=100>The second item.</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-item-hit-test.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-hit-test.html new file mode 100644 index 0000000000..6d1ae5bf0e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-hit-test.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1029371"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div style="display: grid;"> + <div style="height: 100px;"> + <div style="float: left; width: 50%; height: 400px; background: hotpink;"></div> + </div> + <div id="target" style="height: 100px; background: cyan;"></div> +</div> +<script> +test(() => { + assert_equals(document.elementFromPoint(150, 150), document.getElementById('target')); +}); +</script> + diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-001.html new file mode 100644 index 0000000000..bb81546678 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-001.html @@ -0,0 +1,42 @@ +<!doctype html> +<title>CSS Grid: Do not add non-children of the grid into the grid container</title> +<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid"> +<link rel="help" href="https://crbug.com/313293"> +<link rel="match" href="reference/grid-layout-stale-001-ref.html"> +<meta name="assert" content="Check that we do not add non-children of the grid into the grid representation."/> + +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<style> + embed { position: absolute; } + .c1 { animation-delay: 45762s; } +</style> + +<p>This test passes if it doesn't crash and it matches the reference.</p> +<div style="display: grid;"> + <embed type="something-not-js"> +</div> + +<script> +function keyPress(key) { + let actions = new test_driver.Actions() + .keyDown(key) + .keyUp(key); + + return actions.send(); +} +function crash() { + var highlight = document.createElementNS("http://www.w3.org/1999/xhtml", "highlight"); + highlight.setAttribute("class", "c1"); + document.body.appendChild(highlight); + + for (i=0; i != 8; i++) + keyPress("\t"); + keyPress("X"); +} + +document.addEventListener("DOMContentLoaded", crash, false); +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-002.html new file mode 100644 index 0000000000..ea11cd5c5c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-002.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>CSS Grid: Do not leave stale pointers into the grid container</title> +<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid"> +<link rel="help" href="https://crbug.com/313293"> +<link rel="match" href="reference/grid-layout-stale-002-ref.html"> +<meta name="assert" content="Check that we don't leave stale pointers into the internal grid representation."/> + +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<p>This test passes if it doesn't crash and it matches the reference.</p> +<span style="display: grid" contenteditable=plaintext-only></span> +<script> +function keyPress(key) { + let actions = new test_driver.Actions() + .keyDown(key) + .keyUp(key); + + return actions.send(); +} +function crash() { + keyPress("\t"); + keyPress("X"); + document.designMode = 'on'; + document.execCommand("InsertHTML", false, "<div>"); +} +document.addEventListener("DOMContentLoaded", crash, false); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-001.html new file mode 100644 index 0000000000..764cca9ced --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: grid's margins do not collapse</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-containers" title="3.1 Establishing Grid Containers"> +<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html"> +<meta name="assert" content="This test checks that grid's margin (body) do not collapse with the marings of the grid item (a paragraph)."> +<style> + body { + display: grid; + } + + p { + color: green; + } +</style> +<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002-ref.html new file mode 100644 index 0000000000..ce56a56645 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="stylesheet" href="/css/support/grid.css"> + +<div>This test checks that grid item's margins do not collapse with its content's margins (single margin in the first row and double between subsequent).</div> + +<div style="float: left"> + <div><p>XXXXX</p></div> + <div style="float:left; margin:20px 0px;">XXXXX</div> + <div><p style="float:left; clear:both;">XXXXX</p></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002.html new file mode 100644 index 0000000000..f644a6fb53 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Grid Layout Test: grid items not collapsing</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=430100"> +<link rel="match" href="grid-margins-no-collapse-002-ref.html"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that grid item's margins do not collapse with its content's margins." /> + +<div>This test checks that grid item's margins do not collapse with its content's margins (single margin in the first row and double between subsequent).</div> + +<div style="display: grid;"> + <div><p>XXXXX</p></div> + <div style="margin:20px 0px;">XXXXX</div> + <div><p>XXXXX</p></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-min-max-height-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-min-max-height-001.html new file mode 100644 index 0000000000..28950e4973 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-min-max-height-001.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> +<title>CSS Grid: min-height and max-height</title> +<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#intrinsic-sizes"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="This test checks that min-height and max-height are accounted for when computing the grid container's height."> +<style> +.minHeightGrid { + min-height: 100px; + grid-template-columns: 40px; + grid-template-rows: 50px; +} +.maxHeightGrid { + max-height: 100px; + grid-template-columns: 40px; + grid-template-rows: 150px 50px; +} + +.minHeightAutoGrid { + min-height: 100px; +} + +.maxHeightAutoGrid { + max-height: 100px; +} +</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 class="constrainedContainer"> + <div class="grid minHeightGrid" data-expected-height="100" data-expected-width="10"></div> + <div class="grid maxHeightGrid" data-expected-height="100" data-expected-width="10"></div> + <div class="grid minHeightAutoGrid" data-expected-height="100" data-expected-width="10"></div> + <div class="grid maxHeightAutoGrid" data-expected-height="0" data-expected-width="10"></div> + + <div class="grid minHeightAutoGrid" data-expected-height="150" data-expected-width="10"> + <div style="height: 150px"></div> + </div> + <div class="grid maxHeightAutoGrid" data-expected-height="100" data-expected-width="10"> + <div style="height: 300px"></div> + </div> +</div> + +<div class="unconstrainedContainer"> + <div class="grid minHeightGrid" data-expected-height="100" data-expected-width="1000"></div> + <div class="grid maxHeightGrid" data-expected-height="100" data-expected-width="1000"></div> + <div class="grid minHeightAutoGrid" data-expected-height="100" data-expected-width="1000"></div> + <div class="grid maxHeightAutoGrid" data-expected-height="0" data-expected-width="1000"></div> + + <div class="grid minHeightAutoGrid" data-expected-height="150" data-expected-width="1000"> + <div style="height: 150px"></div> + </div> + <div class="grid maxHeightAutoGrid" data-expected-height="100" data-expected-width="1000"> + <div style="height: 300px"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-multicol-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-multicol-001.html new file mode 100644 index 0000000000..553a33e6a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-multicol-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'column-*' properties from grid container does not apply to 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-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to a grid container."> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .test-overlapping-green { + background-color: green; + width: 100px; + height: 50px; + } + + .grid { + display: grid; + column-width: 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 class="grid"> + <div class="test-overlapping-green"></div> + <div class="test-overlapping-green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-001.html new file mode 100644 index 0000000000..6c4a71031f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid padding 'overflowing' the grid container size</title> +<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact"> +<link rel="author" title="Elika J Etemad" href="http://inkedblade.org/contact"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow"> +<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html"> +<meta name="assert" content="This test verifies that scrollbars are shown when end-edge padding overflows the grid container."> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + .grid { + grid: 100px / 100px; + width: 100px; + height: 100px; + box-sizing: border-box; + padding: 0 50px 50px 0; + overflow: auto; + } +</style> +<p>The test passes if you see a grey square below and both scrollbars are visible.</p> +<div class="grid"></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-002.html new file mode 100644 index 0000000000..88bce26a98 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-002.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid areas and padding 'overflowing' the grid container size</title> +<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact"> +<link rel="author" title="Elika J Etemad" href="http://inkedblade.org/contact"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow"> +<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html"> +<meta name="assert" content="This test verifies that scrollbars are shown when a combination of padding and the grid overflows the grid container, and that the padding is not applied to abspos positioning."> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + .grid { + grid: 120px / 120px; + width: 100px; + height: 100px; + box-sizing: border-box; + padding: 10px 20px 20px 10px; + overflow: auto; + } + .abspos { + position: absolute; + width: 10px; + height: 10px; + top: 140px; + left: 140px; + } +</style> +<p>The test passes if you see a grey square below and both scrollbars are visible.</p> +<div class="grid"><div class=abspos></div></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-size-shrink-to-fit-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-size-shrink-to-fit-001.html new file mode 100644 index 0000000000..4209af55fe --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-size-shrink-to-fit-001.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<title>CSS Grid: shrink-to-fit behavior on grid containers</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#intrinsic-sizes"> +<link rel="help" href="https://crbug.com/234204"> +<meta name="assert" content="This test checks that the shrink-to-fit behavior is applied to the float and out-of-flow positioned grid containers."> +<style> +.grid { + display: grid; + grid-template-columns: 200px 200px; + grid-template-rows: 200px 200px; +} +.container { + width: 600px; + height: 600px; +} + +#absolutePos { + position: absolute; +} + +#fixedPos { + position: fixed; +} + +#floatPos { + float: left; +} + +#one { + color: blue; + background: red; + grid-column: 1; + grid-row: 1; +} + +#two { + color: yellow; + background: green; + grid-column: 2; + grid-row: 1; +} +#three { + color: gray; + background: pink; + grid-column: 1; + grid-row: 2; +} +#four { + color: orange; + background: brown; + grid-column: 2; + grid-row: 2; +} +</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')"> + +<p>The following grids should be 400px * 400px, except the first one which uses 'relative' positioning.</p> + +<div class="container"> + <div class="grid" id="regularGrid" data-expected-height="400" data-expected-width="600"> + <div id="one"></div> + <div id="two"></div> + <div id="three"></div> + <div id="four"></div> + </div> +</div> + +<div class="container"> + <div class="grid" id="absolutePos" data-expected-height="400" data-expected-width="400"> + <div id="one"></div> + <div id="two"></div> + <div id="three"></div> + <div id="four"></div> + </div> +</div> + +<div class="container"> + <div class="grid" id="fixedPos" data-expected-height="400" data-expected-width="400"> + <div id="one"></div> + <div id="two"></div> + <div id="three"></div> + <div id="four"></div> + </div> +</div> + +<div class="container"> + <div class="grid" id="floatPos" data-expected-height="400" data-expected-width="400"> + <div id="one"></div> + <div id="two"></div> + <div id="three"></div> + <div id="four"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-support-display-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-support-display-001.html new file mode 100644 index 0000000000..c69d0e31b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-support-display-001.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: DOM support for 'grid' and 'inline-grid' 'display' values</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-11-18 --> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers"> +<meta name="flags" content="dom"> +<meta name="assert" content="This test checks that 'grid' and 'inline-grid' values for 'display' property are supported so that DOM methods, specifically getComputedValue(), and its associated CSS2Properties interface, can fetch such 'display' values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .grid { + display: grid; + } + + .inline-grid { + display: inline-grid; + } +</style> +<div id="log"></div> + +<div id="style-grid" style="display: grid;"></div> +<div id="style-inline-grid" style="display: inline-grid;"></div> + +<div id="css-grid" class="grid"></div> +<div id="css-inline-grid" class="inline-grid"></div> + +<div id="js-grid"></div> +<div id="js-inline-grid"></div> + +<script> + function testStyleDisplay(element, value) { + assert_equals(element.style.display, value, "Style display should be '" + value + "'"); + } + + function testComputedStyleDisplay(element, value) { + assert_equals(getComputedStyle(element).getPropertyValue("display"), value, "getComputedStyle() display should be '" + value + "'"); + } + + var styleGrid = document.getElementById("style-grid"); + test(function() { + testStyleDisplay(styleGrid, "grid"); + testComputedStyleDisplay(styleGrid, "grid"); + }, "Test style display 'grid'"); + + var styleInlineGrid = document.getElementById("style-inline-grid"); + test(function() { + testStyleDisplay(styleInlineGrid, "inline-grid"); + testComputedStyleDisplay(styleInlineGrid, "inline-grid"); + }, "Test style display 'inline-grid'"); + + var cssGrid = document.getElementById("css-grid"); + test(function() { + testComputedStyleDisplay(cssGrid, "grid"); + }, "Test CSS display 'grid'"); + + var cssInlineGrid = document.getElementById("css-inline-grid"); + test(function() { + testComputedStyleDisplay(cssInlineGrid, "inline-grid"); + }, "Test CSS display 'inline-grid'"); + + var jsGrid = document.getElementById("js-grid"); + jsGrid.style.display = "grid"; + test(function() { + testStyleDisplay(jsGrid, "grid"); + testComputedStyleDisplay(jsGrid, "grid"); + }, "Test JavaScript display 'grid'"); + + var jsInlineGrid = document.getElementById("js-inline-grid"); + jsInlineGrid.style.display = "inline-grid"; + test(function() { + testStyleDisplay(jsInlineGrid, "inline-grid"); + testComputedStyleDisplay(jsInlineGrid, "inline-grid"); + }, "Test JavaScript display 'inline-grid'"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-vertical-align-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-vertical-align-001.html new file mode 100644 index 0000000000..3536b3a8a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-vertical-align-001.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'vertical-align' has no effect on grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-12-10 --> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" title="10.8.1 Leading and half-leading"> +<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; + } + + #vertical-align { + vertical-align: 125px; + } +</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="test-grid-overlapping-green"> + <span>1s</span> + <span id="vertical-align">2n</span> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-horizontal-scrollbar.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-horizontal-scrollbar.html new file mode 100644 index 0000000000..ba8335873d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-horizontal-scrollbar.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>Reference</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<style> + .box { + width: 100px; + height: 100px; + background-color: grey; + overflow: auto; + } + .item { + width: 150px; + height: 50px; + } +</style> +<p>The test passes if you see a grey square below and only the horizontal scrollbar is visible.</p> +<div class="box"><div class="item"></div></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-scrollbars.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-scrollbars.html new file mode 100644 index 0000000000..61a346fe36 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-scrollbars.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>Reference</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<style> + .box { + width: 100px; + height: 100px; + background-color: grey; + overflow: auto; + } + .item { + width: 150px; + height: 150px; + } +</style> +<p>The test passes if you see a grey square below and both scrollbars are visible.</p> +<div class="box"><div class="item"></div></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-vertical-scrollbar.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-vertical-scrollbar.html new file mode 100644 index 0000000000..59fff1b955 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-vertical-scrollbar.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>Reference</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<style> + .box { + width: 100px; + height: 100px; + background-color: grey; + overflow: auto; + } + .item { + width: 50px; + height: 150px; + } +</style> +<p>The test passes if you see a grey square below and only the vertical scrollbar is visible.</p> +<div class="box"><div class="item"></div></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box.html new file mode 100644 index 0000000000..0592f6d2ce --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Reference</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<style> + .box { + width: 100px; + height: 100px; + background-color: grey; + } +</style> +<p>The test passes if you see a grey square below without any scrollbar.</p> +<div class="box"></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/column-property-should-not-apply-on-grid-container-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/column-property-should-not-apply-on-grid-container-001-ref.html new file mode 100644 index 0000000000..154cf02290 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/column-property-should-not-apply-on-grid-container-001-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> +.grid, .inline-grid +{ + width: 20em; + font-kerning: none; +} +</style> + +<body> + +<div class='grid'> +AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD +</div> + +<div class='inline-grid'> +AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-001-ref.html new file mode 100644 index 0000000000..3ade075c99 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-001-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>CSS Grid: Do not add non-children of the grid into the grid container</title> + +<style> + embed { position: absolute; } + .c1 { animation-delay: 45762s; } +</style> + +<p>This test passes if it doesn't crash and it matches the reference.</p> +<div style="display: grid;"> + <embed type="something-not-js"> +</div> +<highlight class="c1"></highlight> diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-002-ref.html new file mode 100644 index 0000000000..5d4d996106 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-002-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<title>CSS Grid: Do not leave stale pointers into the grid container</title> +<p>This test passes if it doesn't crash and it matches the reference.</p> +<span style="display: grid" contenteditable=plaintext-only></span> |