Skip to content

GitLab

T
tangled
Commit 032e6e69 authored by jfernandez's avatar jfernandez Committed by Commit bot
Browse files
Options

[css-grid] Ignore collapsed tracks on content-distribution alignment 

The CSS Box Alignment spec states that we should ignore the collapsed
tracks when computing the Distribution Alignment space to assign to the
different grid tracks.

BUG=707633

Review-Url: https://codereview.chromium.org/2825133003
Cr-Commit-Position: refs/heads/master@{#468598}
parent e88bef52
Hide whitespace changes
Inline Side-by-side
Showing with 2000 additions and 28 deletions
third_party/WebKit/LayoutTests/TestExpectations
View file @ 032e6e69
...@@ -2440,9 +2440,6 @@ crbug.com/711529 http/tests/permissions/test-query.html [ Timeout ] ...@@ -2440,9 +2440,6 @@ crbug.com/711529 http/tests/permissions/test-query.html [ Timeout ]
crbug.com/713587 external/wpt/css/css-ui-3/caret-color-006.html [ Skip ] crbug.com/713587 external/wpt/css/css-ui-3/caret-color-006.html [ Skip ]
# ====== New tests from wpt-importer added here ====== # ====== New tests from wpt-importer added here ======
crbug.com/626703 external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-001.html [ Failure ]
crbug.com/626703 external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-002.html [ Failure ]
crbug.com/626703 external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-003.html [ Failure ]
crbug.com/626703 external/wpt/media-source/mediasource-appendbuffer-quota-exceeded.html [ Timeout ] crbug.com/626703 external/wpt/media-source/mediasource-appendbuffer-quota-exceeded.html [ Timeout ]
crbug.com/626703 external/wpt/media-source/mediasource-avtracks.html [ Failure Crash ] crbug.com/626703 external/wpt/media-source/mediasource-avtracks.html [ Failure Crash ]
crbug.com/626703 external/wpt/media-source/mediasource-duration.html [ Failure ] crbug.com/626703 external/wpt/media-source/mediasource-duration.html [ Failure ]
......
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-001.html
View file @ 032e6e69
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-evenly'</title> <title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 2x2 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> <link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly"> <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
......
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-002.html
View file @ 032e6e69
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-between'</title> <title>CSS Grid Layout Test: Content Distribution 'space-between' on 2x2 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> <link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between"> <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
......
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-003.html
View file @ 032e6e69
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-around'</title> <title>CSS Grid Layout Test: Content Distribution 'space-around' on 2x2 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> <link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around"> <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
......
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-004.html
View file @ 032e6e69
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'stretch'</title> <title>CSS Grid Layout Test: Content Distribution 'stretch' on 2x2 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> <link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch"> <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
......
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-006.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 2x2 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: 20px 20px;
grid-template-rows: 20px 20px;
grid-row-gap: 10px;
grid-column-gap: 10px;
align-content: space-evenly;
justify-content: space-evenly;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 50px; left: 50px;"></div>
<div style="top: 130px; left: 130px;"></div>
</div>
<div class="grid">
<div style="grid-row: 1; grid-column: 1;"></div>
<div style="grid-row: 2; grid-column: 2;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-007.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 3x3 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: 20px 20px 20px;
grid-template-rows: 20px 20px 20px;
align-content: space-evenly;
justify-content: space-evenly;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 35px; left: 90px;"></div>
<div style="top: 35px; left: 145px;"></div>
<div style="top: 90px; left: 35px;"></div>
<div style="top: 145px; left: 35px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 2; grid-column: 1;"></div>
<div class="item" style="grid-row: 3; grid-column: 1;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-008.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 3x3 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: 20px 20px 20px;
grid-template-rows: 20px 20px 20px;
grid-row-gap: 10px;
grid-column-gap: 10px;
align-content: space-evenly;
justify-content: space-evenly;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 30px; left: 90px;"></div>
<div style="top: 30px; left: 150px;"></div>
<div style="top: 90px; left: 30px;"></div>
<div style="top: 150px; left: 30px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 2; grid-column: 1;"></div>
<div class="item" style="grid-row: 3; grid-column: 1;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-009.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 4x4 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 25px;
height: 25px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
align-content: space-evenly;
justify-content: space-evenly;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 20px; left: 65px;"></div>
<div style="top: 20px; left: 110px;"></div>
<div style="top: 65px; left: 110px;"></div>
<div style="top: 110px; left: 110px;"></div>
<div style="top: 155px; left: 20px;"></div>
<div style="top: 155px; left: 155px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 2; grid-column: 3;"></div>
<div class="item" style="grid-row: 3; grid-column: 3;"></div>
<div class="item" style="grid-row: 4; grid-column: 1;"></div>
<div class="item" style="grid-row: 4; grid-column: 4;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-010.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 4x4 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 15px;
height: 15px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: 15px 15px 15px 15px;
grid-template-rows: 15px 15px 15px 15px;
grid-row-gap: 5px;
grid-column-gap: 5px;
align-content: space-evenly;
justify-content: space-evenly;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 25px; left: 70px;"></div>
<div style="top: 25px; left: 115px;"></div>
<div style="top: 70px; left: 115px;"></div>
<div style="top: 115px; left: 115px;"></div>
<div style="top: 160px; left: 25px;"></div>
<div style="top: 160px; left: 160px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 2; grid-column: 3;"></div>
<div class="item" style="grid-row: 3; grid-column: 3;"></div>
<div class="item" style="grid-row: 4; grid-column: 1;"></div>
<div class="item" style="grid-row: 4; grid-column: 4;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-011.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 2x2 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: 20px 20px;
grid-template-rows: 20px 20px;
grid-row-gap: 10px;
grid-column-gap: 10px;
align-content: space-between;
justify-content: space-between;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 0px;"></div>
<div style="top: 180px; left: 180px;"></div>
</div>
<div class="grid">
<div style="grid-row: 1; grid-column: 1;"></div>
<div style="grid-row: 2; grid-column: 2;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-012.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-between' on 3x3 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: 20px 20px 20px;
grid-template-rows: 20px 20px 20px;
align-content: space-between;
justify-content: space-between;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 90px;"></div>
<div style="top: 0px; left: 180px;"></div>
<div style="top: 90px; left: 0px;"></div>
<div style="top: 180px; left: 0px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 2; grid-column: 1;"></div>
<div class="item" style="grid-row: 3; grid-column: 1;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-013.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 3x3 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: 20px 20px 20px;
grid-template-rows: 20px 20px 20px;
grid-row-gap: 10px;
grid-column-gap: 10px;
align-content: space-between;
justify-content: space-between;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 90px;"></div>
<div style="top: 0px; left: 180px;"></div>
<div style="top: 90px; left: 0px;"></div>
<div style="top: 180px; left: 0px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 2; grid-column: 1;"></div>
<div class="item" style="grid-row: 3; grid-column: 1;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-014.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-between' on 4x4 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: 20px 20px 20px 20px;
grid-template-rows: 20px 20px 20px 20px;
align-content: space-between;
justify-content: space-between;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 60px;"></div>
<div style="top: 0px; left: 120px;"></div>
<div style="top: 60px; left: 120px;"></div>
<div style="top: 120px; left: 120px;"></div>
<div style="top: 180px; left: 0px;"></div>
<div style="top: 180px; left: 180px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 2; grid-column: 3;"></div>
<div class="item" style="grid-row: 3; grid-column: 3;"></div>
<div class="item" style="grid-row: 4; grid-column: 1;"></div>
<div class="item" style="grid-row: 4; grid-column: 4;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-015.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 4x4 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: 20px 20px 20px 20px;
grid-template-rows: 20px 20px 20px 20px;
grid-row-gap: 10px;
grid-column-gap: 10px;
align-content: space-between;
justify-content: space-between;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 60px;"></div>
<div style="top: 0px; left: 120px;"></div>
<div style="top: 60px; left: 120px;"></div>
<div style="top: 120px; left: 120px;"></div>
<div style="top: 180px; left: 0px;"></div>
<div style="top: 180px; left: 180px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 2; grid-column: 3;"></div>
<div class="item" style="grid-row: 3; grid-column: 3;"></div>
<div class="item" style="grid-row: 4; grid-column: 1;"></div>
<div class="item" style="grid-row: 4; grid-column: 4;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-016.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 2x2 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 25px;
height: 25px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: 25px 25px;
grid-template-rows: 25px 25px;
grid-row-gap: 10px;
grid-column-gap: 10px;
align-content: space-around;
justify-content: space-around;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 35px; left: 35px;"></div>
<div style="top: 140px; left: 140px;"></div>
</div>
<div class="grid">
<div style="grid-row: 1; grid-column: 1;"></div>
<div style="grid-row: 2; grid-column: 2;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-017.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-around' on 3x3 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 300px;
height: 300px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 300px;
height: 300px;
grid-template-columns: 20px 20px 20px;
grid-template-rows: 20px 20px 20px;
align-content: space-around;
justify-content: space-around;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 40px; left: 140px;"></div>
<div style="top: 40px; left: 240px;"></div>
<div style="top: 140px; left: 40px;"></div>
<div style="top: 240px; left: 40px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 2; grid-column: 1;"></div>
<div class="item" style="grid-row: 3; grid-column: 1;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-018.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 3x3 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-template-columns: 20px 20px 20px;
grid-template-rows: 20px 20px 20px;
align-content: space-around;
justify-content: space-around;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 20px; left: 90px;"></div>
<div style="top: 20px; left: 160px;"></div>
<div style="top: 90px; left: 20px;"></div>
<div style="top: 90px; left: 20px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 2; grid-column: 1;"></div>
<div class="item" style="grid-row: 3; grid-column: 1;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-019.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-around' on 4x4 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: 20px 20px 20px 20px;
grid-template-rows: 20px 20px 20px 20px;
align-content: space-around;
justify-content: space-around;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 15px; left: 65px;"></div>
<div style="top: 15px; left: 115px;"></div>
<div style="top: 65px; left: 115px;"></div>
<div style="top: 115px; left: 115px;"></div>
<div style="top: 165px; left: 15px;"></div>
<div style="top: 165px; left: 165px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 2; grid-column: 3;"></div>
<div class="item" style="grid-row: 3; grid-column: 3;"></div>
<div class="item" style="grid-row: 4; grid-column: 1;"></div>
<div class="item" style="grid-row: 4; grid-column: 4;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-020.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 4x4 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 300px;
height: 300px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 300px;
height: 300px;
grid-row-gap: 20px;
grid-column-gap: 20px;
grid-template-columns: 20px 20px 20px 20px;
grid-template-rows: 20px 20px 20px 20px;
align-content: space-around;
justify-content: space-around;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 20px; left: 100px;"></div>
<div style="top: 20px; left: 180px;"></div>
<div style="top: 100px; left: 180px;"></div>
<div style="top: 180px; left: 180px;"></div>
<div style="top: 260px; left: 20px;"></div>
<div style="top: 260px; left: 260px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 2; grid-column: 3;"></div>
<div class="item" style="grid-row: 3; grid-column: 3;"></div>
<div class="item" style="grid-row: 4; grid-column: 1;"></div>
<div class="item" style="grid-row: 4; grid-column: 4;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-021.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps on 2x2 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 95px;
height: 95px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
grid-row-gap: 10px;
grid-column-gap: 10px;
align-content: stretch;
justify-content: stretch;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 0px;"></div>
<div style="top: 105px; left: 105px;"></div>
</div>
<div class="grid">
<div style="grid-row: 1; grid-column: 1;"></div>
<div style="grid-row: 2; grid-column: 2;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-022.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'stretch' on 3x3 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 300px;
height: 300px;
}
.block > div {
position: absolute;
background: red;
width: 100px;
height: 100px;
}
.grid {
z-index: 1;
display: grid;
width: 300px;
height: 300px;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
align-content: stretch;
justify-content: stretch;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 100px;"></div>
<div style="top: 0px; left: 200px;"></div>
<div style="top: 100px; left: 0px;"></div>
<div style="top: 200px; left: 0px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 2; grid-column: 1;"></div>
<div class="item" style="grid-row: 3; grid-column: 1;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-023.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps on 3x3 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 60px;
height: 60px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
grid-row-gap: 10px;
grid-column-gap: 10px;
align-content: stretch;
justify-content: stretch;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 70px;"></div>
<div style="top: 0px; left: 140px;"></div>
<div style="top: 70px; left: 0px;"></div>
<div style="top: 140px; left: 0px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 2; grid-column: 1;"></div>
<div class="item" style="grid-row: 3; grid-column: 1;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-024.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'stretch' on 4x4 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 50px;
height: 50px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto auto auto;
align-content: stretch;
justify-content: stretch;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 50px;"></div>
<div style="top: 0px; left: 100px;"></div>
<div style="top: 50px; left: 100px;"></div>
<div style="top: 100px; left: 100px;"></div>
<div style="top: 150px; left: 0px;"></div>
<div style="top: 150px; left: 150px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 2; grid-column: 3;"></div>
<div class="item" style="grid-row: 3; grid-column: 3;"></div>
<div class="item" style="grid-row: 4; grid-column: 1;"></div>
<div class="item" style="grid-row: 4; grid-column: 4;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-025.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps on 4x4 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 300px;
height: 300px;
}
.block > div {
position: absolute;
background: red;
width: 60px;
height: 60px;
}
.grid {
z-index: 1;
display: grid;
width: 300px;
height: 300px;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto auto auto;
grid-row-gap: 20px;
grid-column-gap: 20px;
align-content: stretch;
justify-content: stretch;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 80px;"></div>
<div style="top: 0px; left: 160px;"></div>
<div style="top: 80px; left: 160px;"></div>
<div style="top: 160px; left: 160px;"></div>
<div style="top: 240px; left: 0px;"></div>
<div style="top: 240px; left: 240px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 2; grid-column: 3;"></div>
<div class="item" style="grid-row: 3; grid-column: 3;"></div>
<div class="item" style="grid-row: 4; grid-column: 1;"></div>
<div class="item" style="grid-row: 4; grid-column: 4;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-001.html
View file @ 032e6e69
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-evenly' with collapsed tracks</title> <title>CSS Grid Layout Test: Content Distribution 'space-evenly' with collapsed tracks on 2x2 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> <link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> <link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
...@@ -39,6 +39,6 @@ ...@@ -39,6 +39,6 @@
<div style="top: 125px; left: 125px;"></div> <div style="top: 125px; left: 125px;"></div>
</div> </div>
<div class="grid"> <div class="grid">
<div style="grid-row: 1; grid-column: 1;"></div> <div style="grid-row: 2; grid-column: 3;"></div>
<div style="grid-row: 3; grid-column: 6;"></div> <div style="grid-row: 3; grid-column: 4;"></div>
</div> </div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-002.html
View file @ 032e6e69
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-between' with collapsed tracks</title> <title>CSS Grid Layout Test: Content Distribution 'space-between' with collapsed tracks on 2x2 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> <link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-grid/#collapsed-track"> <link rel="help" href="https://drafts.csswg.org/css-grid/#collapsed-track">
...@@ -38,6 +38,6 @@ ...@@ -38,6 +38,6 @@
<div style="top: 180px; left: 180px;"></div> <div style="top: 180px; left: 180px;"></div>
</div> </div>
<div class="grid"> <div class="grid">
<div style="grid-row: 1; grid-column: 1;"></div> <div style="grid-row: 2; grid-column: 3;"></div>
<div style="grid-row: 3; grid-column: 6;"></div> <div style="grid-row: 3; grid-column: 4;"></div>
</div> </div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-003.html
View file @ 032e6e69
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-around' with collapsed tracks</title> <title>CSS Grid Layout Test: Content Distribution 'space-around' with collapsed tracks on 2x2 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> <link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-grid/#collapsed-track"> <link rel="help" href="https://drafts.csswg.org/css-grid/#collapsed-track">
...@@ -38,6 +38,6 @@ ...@@ -38,6 +38,6 @@
<div style="top: 140px; left: 140px;"></div> <div style="top: 140px; left: 140px;"></div>
</div> </div>
<div class="grid"> <div class="grid">
<div style="grid-row: 1; grid-column: 1;"></div> <div style="grid-row: 2; grid-column: 3;"></div>
<div style="grid-row: 3; grid-column: 6;"></div> <div style="grid-row: 3; grid-column: 4;"></div>
</div> </div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-004.html
View file @ 032e6e69
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed tracks</title> <title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed tracks on 2x2 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> <link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-grid/#collapsed-track"> <link rel="help" href="https://drafts.csswg.org/css-grid/#collapsed-track">
...@@ -38,6 +38,6 @@ ...@@ -38,6 +38,6 @@
<div style="top: 100px; left: 100px;"></div> <div style="top: 100px; left: 100px;"></div>
</div> </div>
<div class="grid"> <div class="grid">
<div style="grid-row: 1; grid-column: 1;"></div> <div style="grid-row: 2; grid-column: 3;"></div>
<div style="grid-row: 3; grid-column: 6;"></div> <div style="grid-row: 3; grid-column: 4;"></div>
</div> </div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-005.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 2x2 grid with collapsed tracks</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: repeat(auto-fit, 20px);
grid-template-rows: repeat(auto-fit, 20px);
grid-row-gap: 10px;
grid-column-gap: 10px;
align-content: space-evenly;
justify-content: space-evenly;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 50px; left: 50px;"></div>
<div style="top: 130px; left: 130px;"></div>
</div>
<div class="grid">
<div style="grid-row: 1; grid-column: 1;"></div>
<div style="grid-row: 2; grid-column: 2;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-006.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 3x3 grid with collapsed tracks</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: repeat(auto-fit, 20px);
grid-template-rows: repeat(auto-fit, 20px);
align-content: space-evenly;
justify-content: space-evenly;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 35px; left: 90px;"></div>
<div style="top: 35px; left: 145px;"></div>
<div style="top: 90px; left: 35px;"></div>
<div style="top: 145px; left: 35px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 1; grid-column: 4;"></div>
<div class="item" style="grid-row: 3; grid-column: 1;"></div>
<div class="item" style="grid-row: 4; grid-column: 1;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-007.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 3x3 grid with collapsed tracks</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: repeat(auto-fit, 20px);
grid-template-rows: repeat(auto-fit, 20px);
grid-row-gap: 10px;
grid-column-gap: 10px;
align-content: space-evenly;
justify-content: space-evenly;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 30px; left: 90px;"></div>
<div style="top: 30px; left: 150px;"></div>
<div style="top: 90px; left: 30px;"></div>
<div style="top: 150px; left: 30px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 1; grid-column: 4;"></div>
<div class="item" style="grid-row: 3; grid-column: 1;"></div>
<div class="item" style="grid-row: 4; grid-column: 1;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-008.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 4x4 grid with collapsed tracks</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 25px;
height: 25px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: repeat(auto-fit, 25px);
grid-template-rows: repeat(auto-fit, 25px);
align-content: space-evenly;
justify-content: space-evenly;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 20px; left: 65px;"></div>
<div style="top: 20px; left: 110px;"></div>
<div style="top: 65px; left: 110px;"></div>
<div style="top: 110px; left: 110px;"></div>
<div style="top: 155px; left: 20px;"></div>
<div style="top: 155px; left: 155px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 5;"></div>
<div class="item" style="grid-row: 3; grid-column: 5;"></div>
<div class="item" style="grid-row: 4; grid-column: 5;"></div>
<div class="item" style="grid-row: 6; grid-column: 1;"></div>
<div class="item" style="grid-row: 6; grid-column: 7;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-009.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 4x4 grid with collapsed tracks</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 15px;
height: 15px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: repeat(auto-fit, 15px);
grid-template-rows: repeat(auto-fit, 15px);
grid-row-gap: 5px;
grid-column-gap: 5px;
align-content: space-evenly;
justify-content: space-evenly;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 25px; left: 70px;"></div>
<div style="top: 25px; left: 115px;"></div>
<div style="top: 70px; left: 115px;"></div>
<div style="top: 115px; left: 115px;"></div>
<div style="top: 160px; left: 25px;"></div>
<div style="top: 160px; left: 160px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 5;"></div>
<div class="item" style="grid-row: 3; grid-column: 5;"></div>
<div class="item" style="grid-row: 4; grid-column: 5;"></div>
<div class="item" style="grid-row: 6; grid-column: 1;"></div>
<div class="item" style="grid-row: 6; grid-column: 7;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-010.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 2x2 grid with collapsed tracks</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: repeat(auto-fit, 20px);
grid-template-rows: repeat(auto-fit, 20px);
grid-row-gap: 10px;
grid-column-gap: 10px;
align-content: space-between;
justify-content: space-between;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 0px;"></div>
<div style="top: 180px; left: 180px;"></div>
</div>
<div class="grid">
<div style="grid-row: 1; grid-column: 1;"></div>
<div style="grid-row: 2; grid-column: 2;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-011.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-between' on 3x3 grid with collapsed tracks</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: repeat(auto-fit, 20px);
grid-template-rows: repeat(auto-fit, 20px);
align-content: space-between;
justify-content: space-between;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 90px;"></div>
<div style="top: 0px; left: 180px;"></div>
<div style="top: 90px; left: 0px;"></div>
<div style="top: 180px; left: 0px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 1; grid-column: 4;"></div>
<div class="item" style="grid-row: 3; grid-column: 1;"></div>
<div class="item" style="grid-row: 4; grid-column: 1;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-012.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 3x3 grid with collapsed tracks</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: repeat(auto-fit, 20px);
grid-template-rows: repeat(auto-fit, 20px);
grid-row-gap: 10px;
grid-column-gap: 10px;
align-content: space-between;
justify-content: space-between;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 90px;"></div>
<div style="top: 0px; left: 180px;"></div>
<div style="top: 90px; left: 0px;"></div>
<div style="top: 180px; left: 0px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 1; grid-column: 4;"></div>
<div class="item" style="grid-row: 3; grid-column: 1;"></div>
<div class="item" style="grid-row: 4; grid-column: 1;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-013.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-between' on 4x4 grid with collapsed tracks</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: repeat(auto-fit, 20px);
grid-template-rows: repeat(auto-fit, 20px);
align-content: space-between;
justify-content: space-between;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 60px;"></div>
<div style="top: 0px; left: 120px;"></div>
<div style="top: 60px; left: 120px;"></div>
<div style="top: 120px; left: 120px;"></div>
<div style="top: 180px; left: 0px;"></div>
<div style="top: 180px; left: 180px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 5;"></div>
<div class="item" style="grid-row: 3; grid-column: 5;"></div>
<div class="item" style="grid-row: 4; grid-column: 5;"></div>
<div class="item" style="grid-row: 6; grid-column: 1;"></div>
<div class="item" style="grid-row: 6; grid-column: 7;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-014.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 4x4 grid with collapsed tracks</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: repeat(auto-fit, 20px);
grid-template-rows: repeat(auto-fit, 20px);
grid-row-gap: 10px;
grid-column-gap: 10px;
align-content: space-between;
justify-content: space-between;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 60px;"></div>
<div style="top: 0px; left: 120px;"></div>
<div style="top: 60px; left: 120px;"></div>
<div style="top: 120px; left: 120px;"></div>
<div style="top: 180px; left: 0px;"></div>
<div style="top: 180px; left: 180px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 5;"></div>
<div class="item" style="grid-row: 3; grid-column: 5;"></div>
<div class="item" style="grid-row: 4; grid-column: 5;"></div>
<div class="item" style="grid-row: 6; grid-column: 1;"></div>
<div class="item" style="grid-row: 6; grid-column: 7;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-015.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 2x2 grid with collapsed tracks</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 25px;
height: 25px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: repeat(auto-fit, 25px);
grid-template-rows: repeat(auto-fit, 25px);
grid-row-gap: 10px;
grid-column-gap: 10px;
align-content: space-around;
justify-content: space-around;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 35px; left: 35px;"></div>
<div style="top: 140px; left: 140px;"></div>
</div>
<div class="grid">
<div style="grid-row: 1; grid-column: 1;"></div>
<div style="grid-row: 2; grid-column: 2;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-016.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-around' on 3x3 grid with collapsed tracks</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 300px;
height: 300px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 300px;
height: 300px;
grid-template-columns: repeat(auto-fit, 20px);
grid-template-rows: repeat(auto-fit, 20px);
align-content: space-around;
justify-content: space-around;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 40px; left: 140px;"></div>
<div style="top: 40px; left: 240px;"></div>
<div style="top: 140px; left: 40px;"></div>
<div style="top: 240px; left: 40px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 1; grid-column: 4;"></div>
<div class="item" style="grid-row: 3; grid-column: 1;"></div>
<div class="item" style="grid-row: 4; grid-column: 1;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-017.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 3x3 grid with collapsed tracks</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: repeat(auto-fit, 20px);
grid-template-rows: repeat(auto-fit, 20px);
grid-row-gap: 10px;
grid-column-gap: 10px;
align-content: space-around;
justify-content: space-around;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 20px; left: 90px;"></div>
<div style="top: 20px; left: 160px;"></div>
<div style="top: 90px; left: 20px;"></div>
<div style="top: 90px; left: 20px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 1; grid-column: 4;"></div>
<div class="item" style="grid-row: 3; grid-column: 1;"></div>
<div class="item" style="grid-row: 4; grid-column: 1;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-018.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-around' on 4x4 grid with collapsed tracks</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: repeat(auto-fit, 20px);
grid-template-rows: repeat(auto-fit, 20px);
align-content: space-around;
justify-content: space-around;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 15px; left: 65px;"></div>
<div style="top: 15px; left: 115px;"></div>
<div style="top: 65px; left: 115px;"></div>
<div style="top: 115px; left: 115px;"></div>
<div style="top: 165px; left: 15px;"></div>
<div style="top: 165px; left: 165px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 5;"></div>
<div class="item" style="grid-row: 3; grid-column: 5;"></div>
<div class="item" style="grid-row: 4; grid-column: 5;"></div>
<div class="item" style="grid-row: 6; grid-column: 1;"></div>
<div class="item" style="grid-row: 6; grid-column: 7;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-019.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 4x4 grid with collapsed tracks</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 300px;
height: 300px;
}
.block > div {
position: absolute;
background: red;
width: 20px;
height: 20px;
}
.grid {
z-index: 1;
display: grid;
width: 300px;
height: 300px;
grid-template-columns: repeat(auto-fit, 20px);
grid-template-rows: repeat(auto-fit, 20px);
grid-row-gap: 20px;
grid-column-gap: 20px;
align-content: space-around;
justify-content: space-around;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 20px; left: 100px;"></div>
<div style="top: 20px; left: 180px;"></div>
<div style="top: 100px; left: 180px;"></div>
<div style="top: 180px; left: 180px;"></div>
<div style="top: 260px; left: 20px;"></div>
<div style="top: 260px; left: 260px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 5;"></div>
<div class="item" style="grid-row: 3; grid-column: 5;"></div>
<div class="item" style="grid-row: 4; grid-column: 5;"></div>
<div class="item" style="grid-row: 6; grid-column: 1;"></div>
<div class="item" style="grid-row: 6; grid-column: 7;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-020.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed tracks on 2x2 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-grid/#collapsed-track">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 95px;
height: 95px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: repeat(auto-fit, minmax(25px, auto));
grid-template-rows: repeat(auto-fit, minmax(25px, auto));
grid-row-gap: 10px;
grid-column-gap: 10px;
align-content: stretch;
justify-content: stretch;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 0px;"></div>
<div style="top: 105px; left: 105px;"></div>
</div>
<div class="grid">
<div style="grid-row: 2; grid-column: 3;"></div>
<div style="grid-row: 3; grid-column: 4;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-021.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed tracks on 3x3 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-grid/#collapsed-track">
<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 300px;
height: 300px;
}
.block > div {
position: absolute;
background: red;
width: 100px;
height: 100px;
}
.grid {
z-index: 1;
display: grid;
width: 300px;
height: 300px;
grid-template-columns: repeat(auto-fit, minmax(25px, auto));
grid-template-rows: repeat(auto-fit, minmax(25px, auto));
align-content: stretch;
justify-content: stretch;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 100px;"></div>
<div style="top: 0px; left: 200px;"></div>
<div style="top: 100px; left: 0px;"></div>
<div style="top: 200px; left: 0px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 1; grid-column: 4;"></div>
<div class="item" style="grid-row: 3; grid-column: 1;"></div>
<div class="item" style="grid-row: 4; grid-column: 1;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-022.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps with collapsed tracks on 3x3 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-grid/#collapsed-track">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 60px;
height: 60px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: repeat(auto-fit, minmax(25px, auto));
grid-template-rows: repeat(auto-fit, minmax(25px, auto));
grid-row-gap: 10px;
grid-column-gap: 10px;
align-content: stretch;
justify-content: stretch;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 70px;"></div>
<div style="top: 0px; left: 140px;"></div>
<div style="top: 70px; left: 0px;"></div>
<div style="top: 140px; left: 0px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 3;"></div>
<div class="item" style="grid-row: 1; grid-column: 4;"></div>
<div class="item" style="grid-row: 3; grid-column: 1;"></div>
<div class="item" style="grid-row: 4; grid-column: 1;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-023.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed tracks on 4x4 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-grid/#collapsed-track">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 200px;
height: 200px;
}
.block > div {
position: absolute;
background: red;
width: 50px;
height: 50px;
}
.grid {
z-index: 1;
display: grid;
width: 200px;
height: 200px;
grid-template-columns: repeat(auto-fit, minmax(25px, auto));
grid-template-rows: repeat(auto-fit, minmax(25px, auto));
align-content: stretch;
justify-content: stretch;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 50px;"></div>
<div style="top: 0px; left: 100px;"></div>
<div style="top: 50px; left: 100px;"></div>
<div style="top: 100px; left: 100px;"></div>
<div style="top: 150px; left: 0px;"></div>
<div style="top: 150px; left: 150px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 5;"></div>
<div class="item" style="grid-row: 3; grid-column: 5;"></div>
<div class="item" style="grid-row: 4; grid-column: 5;"></div>
<div class="item" style="grid-row: 6; grid-column: 1;"></div>
<div class="item" style="grid-row: 6; grid-column: 7;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-024.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps with collapsed tracks on 4x4 grid</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-grid/#collapsed-track">
<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.">
<style>
.block {
position: absolute;
z-index: -1;
background: green;
width: 300px;
height: 300px;
}
.block > div {
position: absolute;
background: red;
width: 60px;
height: 60px;
}
.grid {
z-index: 1;
display: grid;
width: 300px;
height: 300px;
grid-template-columns: repeat(auto-fit, minmax(25px, auto));
grid-template-rows: repeat(auto-fit, minmax(25px, auto));
grid-row-gap: 20px;
grid-column-gap: 20px;
align-content: stretch;
justify-content: stretch;
}
.grid > div { background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="block">
<div style="top: 0px; left: 80px;"></div>
<div style="top: 0px; left: 160px;"></div>
<div style="top: 80px; left: 160px;"></div>
<div style="top: 160px; left: 160px;"></div>
<div style="top: 240px; left: 0px;"></div>
<div style="top: 240px; left: 240px;"></div>
</div>
<div class="grid">
<div class="item" style="grid-row: 1; grid-column: 2;"></div>
<div class="item" style="grid-row: 1; grid-column: 5;"></div>
<div class="item" style="grid-row: 3; grid-column: 5;"></div>
<div class="item" style="grid-row: 4; grid-column: 5;"></div>
<div class="item" style="grid-row: 6; grid-column: 1;"></div>
<div class="item" style="grid-row: 6; grid-column: 7;"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/reference/ref-filled-green-300px-square.html 0 → 100644
View file @ 032e6e69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="jfernandez@igalia.com" />
<style>
div {
background-color: green;
height: 300px;
width: 300px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
third_party/WebKit/Source/core/layout/LayoutGrid.cpp
View file @ 032e6e69
...@@ -1420,20 +1420,21 @@ void LayoutGrid::PopulateGridPositionsForDirection( ...@@ -1420,20 +1420,21 @@ void LayoutGrid::PopulateGridPositionsForDirection(
size_t number_of_tracks = tracks.size(); size_t number_of_tracks = tracks.size();
size_t number_of_lines = number_of_tracks + 1; size_t number_of_lines = number_of_tracks + 1;
size_t last_line = number_of_lines - 1; size_t last_line = number_of_lines - 1;
bool has_collapsed_tracks = grid_.HasAutoRepeatEmptyTracks(direction);
size_t number_of_collapsed_tracks =
has_collapsed_tracks ? grid_.AutoRepeatEmptyTracks(direction)->size() : 0;
ContentAlignmentData offset = ComputeContentPositionAndDistributionOffset( ContentAlignmentData offset = ComputeContentPositionAndDistributionOffset(
direction, track_sizing_algorithm_.FreeSpace(direction).value(), direction, track_sizing_algorithm_.FreeSpace(direction).value(),
number_of_tracks); number_of_tracks - number_of_collapsed_tracks);
auto& positions = is_row_axis ? column_positions_ : row_positions_; auto& positions = is_row_axis ? column_positions_ : row_positions_;
positions.resize(number_of_lines); positions.resize(number_of_lines);
auto border_and_padding = auto border_and_padding =
is_row_axis ? BorderAndPaddingLogicalLeft() : BorderAndPaddingBefore(); is_row_axis ? BorderAndPaddingLogicalLeft() : BorderAndPaddingBefore();
positions[0] = border_and_padding + offset.position_offset; positions[0] = border_and_padding + offset.position_offset;
const Grid& grid = track_sizing_algorithm_.GetGrid();
if (number_of_lines > 1) { if (number_of_lines > 1) {
// If we have collapsed tracks we just ignore gaps here and add them later // If we have collapsed tracks we just ignore gaps here and add them later
// as we might not compute the gap between two consecutive tracks without // as we might not compute the gap between two consecutive tracks without
// examining the surrounding ones. // examining the surrounding ones.
bool has_collapsed_tracks = grid.HasAutoRepeatEmptyTracks(direction);
LayoutUnit gap = !has_collapsed_tracks ? GridGap(direction) : LayoutUnit(); LayoutUnit gap = !has_collapsed_tracks ? GridGap(direction) : LayoutUnit();
size_t next_to_last_line = number_of_lines - 2; size_t next_to_last_line = number_of_lines - 2;
for (size_t i = 0; i < next_to_last_line; ++i) for (size_t i = 0; i < next_to_last_line; ++i)
...@@ -1447,24 +1448,25 @@ void LayoutGrid::PopulateGridPositionsForDirection( ...@@ -1447,24 +1448,25 @@ void LayoutGrid::PopulateGridPositionsForDirection(
// they become 0. // they become 0.
if (has_collapsed_tracks) { if (has_collapsed_tracks) {
gap = GridGap(direction); gap = GridGap(direction);
size_t remaining_empty_tracks = size_t remaining_empty_tracks = number_of_collapsed_tracks;
grid.AutoRepeatEmptyTracks(direction)->size(); LayoutUnit offset_accumulator;
LayoutUnit gap_accumulator; LayoutUnit gap_accumulator;
for (size_t i = 1; i < last_line; ++i) { for (size_t i = 1; i < last_line; ++i) {
if (grid.IsEmptyAutoRepeatTrack(direction, i - 1)) { if (grid_.IsEmptyAutoRepeatTrack(direction, i - 1)) {
--remaining_empty_tracks; --remaining_empty_tracks;
offset_accumulator += offset.distribution_offset;
} else { } else {
// Add gap between consecutive non empty tracks. Add it also just once // Add gap between consecutive non empty tracks. Add it also just once
// for an arbitrary number of empty tracks between two non empty ones. // for an arbitrary number of empty tracks between two non empty ones.
bool all_remaining_tracks_are_empty = bool all_remaining_tracks_are_empty =
remaining_empty_tracks == (last_line - i); remaining_empty_tracks == (last_line - i);
if (!all_remaining_tracks_are_empty || if (!all_remaining_tracks_are_empty ||
!grid.IsEmptyAutoRepeatTrack(direction, i)) !grid_.IsEmptyAutoRepeatTrack(direction, i))
gap_accumulator += gap; gap_accumulator += gap;
} }
positions[i] += gap_accumulator; positions[i] += gap_accumulator - offset_accumulator;
} }
positions[last_line] += gap_accumulator; positions[last_line] += gap_accumulator - offset_accumulator;
} }
} }
auto& offset_between_tracks = auto& offset_between_tracks =
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment