mirror of
https://github.com/servo/servo.git
synced 2025-08-12 00:45:33 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
|
||||
<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'start' causes non-replaced items to shrink.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 200px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: stretch;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 200);
|
||||
grid.style.alignItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 100);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
|
||||
<meta name="assert" content="Changing the grid's align-items value from 'start' to 'stretch' causes non-replaced items to grow.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 200px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 100);
|
||||
grid.style.alignItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 200);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
|
||||
<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'normal' causes no effect on non-replaced items.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 200px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: stretch;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 200);
|
||||
grid.style.alignItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 200);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
|
||||
<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'stretch' causes no effect on non-replaced items.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 200px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: normal;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 200);
|
||||
grid.style.alignItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 200);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
|
||||
<meta name="assert" content="Changing the grid's align-items value from 'start' to 'normal' causes non-replaced items to grow.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 200px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 100);
|
||||
grid.style.alignItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 200);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
|
||||
<meta name="assert" content="Changing the grid's align-items value from 'normal' to 'start' causes non-replaced items to shrink.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 200px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: normal;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 200);
|
||||
grid.style.alignItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 100);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
|
||||
<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'stretch' causes non-replaced items to shrink.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 80px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 100);
|
||||
grid.style.alignItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 80);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
|
||||
<meta name="assert" content="Changing the grid item's align-items value from 'stretch' to 'start' causes non-replaced items to grow.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 80px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: stretch;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 80);
|
||||
grid.style.alignItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 100);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
|
||||
<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'normal' causes non-replaced items to shrink.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 80px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 100);
|
||||
grid.style.alignItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 80);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
|
||||
<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'start' causes non-replaced items to grow.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 80px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: normal;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 80);
|
||||
grid.style.alignItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 100);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
|
||||
<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'start' causes replaced items to shrink.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 200px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: stretch;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 200);
|
||||
grid.style.alignItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 100);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-width="100" id="item" src="../grid-items/support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
|
||||
<meta name="assert" content="Changing the grid's align-items value from 'start' to 'stretch' causes replaced items to grow.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 200px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 100);
|
||||
grid.style.alignItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 200);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-width="100" id="item" src="../grid-items/support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
|
||||
<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'normal' causes replaced items to shrink.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 200px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: stretch;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 200);
|
||||
grid.style.alignItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 100);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-width="100" id="item" src="../grid-items/support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
|
||||
<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'stretch' causes non-replaced items to grow.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 200px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: normal;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 100);
|
||||
grid.style.alignItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 200);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-width="100" id="item" src="../grid-items/support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
|
||||
<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'normal' causes no effect on replaced items.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 200px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 100);
|
||||
grid.style.alignItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 100);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-width="100" id="item" src="../grid-items/support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
|
||||
<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'start' causes no effect on replaced items.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 200px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: normal;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 100);
|
||||
grid.style.alignItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 100);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-width="100" id="item" src="../grid-items/support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
|
||||
<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'stretch' causes replaced items to shrink.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 80px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 100);
|
||||
grid.style.alignItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 80);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-width="100" id="item" src="../grid-items/support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
|
||||
<meta name="assert" content="Changing the grid item's align-items value from 'stretch' to 'start' causes replaced items to grow.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 80px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: stretch;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 80);
|
||||
grid.style.alignItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 100);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-width="100" id="item" src="../grid-items/support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
|
||||
<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'start' causes non-replaced items to shrink.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 200px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: stretch;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 200);
|
||||
grid.style.justifyItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 120);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
|
||||
<meta name="assert" content="Changing the grid's justify-items value from 'start' to 'stretch' causes non-replaced items to grow.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 200px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 120);
|
||||
grid.style.justifyItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 200);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
|
||||
<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'normal' causes no effect on non-replaced items.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 200px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: stretch;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 200);
|
||||
grid.style.alignItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 200);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
|
||||
<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'stretch' causes no effect on non-replaced items.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 200px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: normal;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 200);
|
||||
grid.style.justifyItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 200);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
|
||||
<meta name="assert" content="Changing the grid's justify-items value from 'start' to 'normal' causes non-replaced items to grow.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 200px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 120);
|
||||
grid.style.justifyItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 200);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
|
||||
<meta name="assert" content="Changing the grid's justify-items value from 'normal' to 'start' causes non-replaced items to shrink.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 200px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: normal;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 200);
|
||||
grid.style.justifyItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 120);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
|
||||
<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'stretch' causes non-replaced items to shrink.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 80px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 120);
|
||||
grid.style.justifyItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 80);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
|
||||
<meta name="assert" content="Changing the grid item's justify-items value from 'stretch' to 'start' causes non-replaced items to grow.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 80px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: stretch;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 80);
|
||||
grid.style.justifyItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 120);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
|
||||
<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'normal' causes non-replaced items to shrink.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 80px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 120);
|
||||
grid.style.justifyItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 80);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
|
||||
<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'start' causes non-replaced items to grow.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 80px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: normal;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 80);
|
||||
grid.style.justifyItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 120);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
|
||||
<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'start' causes replaced items to shrink.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 200px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: stretch;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 200);
|
||||
grid.style.justifyItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 100);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-height="100" id="item" src="../grid-items/support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
|
||||
<meta name="assert" content="Changing the grid's justify-items value from 'start' to 'stretch' causes replaced items to grow.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 200px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 100);
|
||||
grid.style.justifyItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 200);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-height="100" id="item" src="../grid-items/support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
|
||||
<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'normal' causes replaced items to shrink.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 200px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: stretch;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 200);
|
||||
grid.style.justifyItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 100);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-height="100" id="item" src="../grid-items/support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
|
||||
<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'stretch' causes non-replaced items to grow.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 200px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: normal;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 100);
|
||||
grid.style.justifyItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 200);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-width="100" id="item" src="../grid-items/support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
|
||||
<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'normal' causes no effect on replaced items.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 200px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 100);
|
||||
grid.style.justifyItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 100);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-height="100" id="item" src="../grid-items/support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
|
||||
<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'start' causes no effect on replaced items.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 200px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: normal;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 100);
|
||||
grid.style.justifyItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 100);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-height="100" id="item" src="../grid-items/support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
|
||||
<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'stretch' causes replaced items to shrink.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 80px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 100);
|
||||
grid.style.justifyItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 80);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-height="100" id="item" src="../grid-items/support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
|
||||
<meta name="assert" content="Changing the grid item's justify-items value from 'stretch' to 'start' causes replaced items to grow.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 80px;
|
||||
grid-template-rows: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: stretch;
|
||||
}
|
||||
#item {
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 80);
|
||||
grid.style.justifyItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 100);
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-height="100" id="item" src="../grid-items/support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<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="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<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;
|
||||
grid-template-rows: 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: 50px; left: 50px;"></div>
|
||||
<div style="top: 125px; left: 125px;"></div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div style="grid-row: 1; grid-column: 1;"></div>
|
||||
<div style="grid-row: 2; grid-column: 2;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<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="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<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;
|
||||
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>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<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="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<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;
|
||||
grid-template-rows: 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: 40px;"></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>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<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="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<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: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-rows: 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: 0px;"></div>
|
||||
<div style="top: 100px; left: 100px;"></div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div style="grid-row: 1; grid-column: 1;"></div>
|
||||
<div style="grid-row: 2; grid-column: 2;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Content Distribution default value</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<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 have 'stretch' as default value and render correcly.">
|
||||
<style>
|
||||
.block {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: green;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.block > div {
|
||||
position: absolute;
|
||||
background: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
.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: 100px; left: 100px;"></div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div style="grid-row: 1; grid-column: 1;"></div>
|
||||
<div style="grid-row: 2; grid-column: 2;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<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="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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 'space-evenly'.">
|
||||
<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: 50px; left: 50px;"></div>
|
||||
<div style="top: 125px; left: 125px;"></div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div style="grid-row: 2; grid-column: 3;"></div>
|
||||
<div style="grid-row: 3; grid-column: 4;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<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="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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 'space-between'.">
|
||||
<style>
|
||||
.block {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: green;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.block > div {
|
||||
position: absolute;
|
||||
background: red;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
z-index: 1;
|
||||
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: 0px;"></div>
|
||||
<div style="top: 180px; left: 180px;"></div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div style="grid-row: 2; grid-column: 3;"></div>
|
||||
<div style="grid-row: 3; grid-column: 4;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<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="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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 'space-around'.">
|
||||
<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: 40px; left: 40px;"></div>
|
||||
<div style="top: 140px; left: 140px;"></div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div style="grid-row: 2; grid-column: 3;"></div>
|
||||
<div style="grid-row: 3; grid-column: 4;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.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: 0px;"></div>
|
||||
<div style="top: 100px; left: 100px;"></div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div style="grid-row: 2; grid-column: 3;"></div>
|
||||
<div style="grid-row: 3; grid-column: 4;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: fit-content() tracks don't stretch</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing" title="7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align" title="10.5. Aligning the Grid: the justify-content and align-content properties">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-stretch" title="11.8. Stretch auto Tracks">
|
||||
<meta name="flags" content="ahem dom">
|
||||
<meta name="assert" content="This test checks that 'fit-content()' tracks behave the same with 'normal', 'stretch' or 'start' values for content distribution properties.">
|
||||
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
|
||||
.constrainedGrid {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.fitContent200x100 {
|
||||
grid-template-columns: fit-content(200px);
|
||||
grid-template-rows: fit-content(100px);
|
||||
}
|
||||
|
||||
.placeContentStretch {
|
||||
place-content: stretch;
|
||||
}
|
||||
|
||||
.placeContentStart {
|
||||
place-content: start;
|
||||
}
|
||||
</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>
|
||||
|
||||
<h1>1) place-content: normal</h1>
|
||||
|
||||
<h2>1.2) Unconstrained grid container</h2>
|
||||
|
||||
<div class="grid" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="400" data-expected-height="200">X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="400" data-expected-height="200">XXXX XXX XX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="25" data-expected-height="25">X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
|
||||
</div>
|
||||
|
||||
<h2>1.2) Constrained grid container</h2>
|
||||
|
||||
<div class="grid constrainedGrid" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="25" data-expected-height="25">X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid constrainedGrid" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="25" data-expected-height="25">X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
|
||||
</div>
|
||||
|
||||
<h1>2) place-content: stretch</h1>
|
||||
|
||||
<h2>2.2) Unconstrained grid container</h2>
|
||||
|
||||
<div class="grid placeContentStretch" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="400" data-expected-height="200">X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStretch" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="400" data-expected-height="200">XXXX XXX XX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="25" data-expected-height="25">X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
|
||||
</div>
|
||||
|
||||
<h2>2.2) Constrained grid container</h2>
|
||||
|
||||
<div class="grid placeContentStretch constrainedGrid" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="25" data-expected-height="25">X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStretch constrainedGrid" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="25" data-expected-height="25">X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
|
||||
</div>
|
||||
|
||||
<h1>3) place-content: start</h1>
|
||||
|
||||
<h2>3.1) Unconstrained grid container</h2>
|
||||
|
||||
<div class="grid placeContentStart" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="25" data-expected-height="25">X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStart" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="325" data-expected-height="25">XXXX XXX XX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="25" data-expected-height="25">X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
|
||||
<div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
|
||||
</div>
|
||||
|
||||
<h2>3.2) Constrained grid container</h2>
|
||||
|
||||
<div class="grid placeContentStart constrainedGrid" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="25" data-expected-height="25">X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStart constrainedGrid" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="25" data-expected-height="25">X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
|
||||
<div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
background: green;
|
||||
justify-self: stretch;
|
||||
align-self: start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
background: blue;
|
||||
justify-self: start;
|
||||
align-self: stretch;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
background: yellow;
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
background: red;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
}
|
||||
</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 data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="60" data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
background: green;
|
||||
justify-self: stretch;
|
||||
align-self: start;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
background: blue;
|
||||
justify-self: start;
|
||||
align-self: stretch;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
background: yellow;
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
background: red;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</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 data-offset-x="0" data-offset-y="0" data-expected-width="90" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="60" data-expected-height="130" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="130" data-expected-height="90" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined border-box.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { border-style: solid; }
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
background: green;
|
||||
justify-self: stretch;
|
||||
align-self: start;
|
||||
border-width: 0px 10px 0px 0px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
background: blue;
|
||||
justify-self: start;
|
||||
align-self: stretch;
|
||||
border-width: 0px 0px 20px 0px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
background: yellow;
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
border-width: 0px 0px 0px 0px;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
background: red;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
border-width: 0px 20px 10px 0px;
|
||||
}
|
||||
</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 data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="60" data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
background: green;
|
||||
justify-self: stretch;
|
||||
align-self: start;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
background: blue;
|
||||
justify-self: start;
|
||||
align-self: stretch;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
background: yellow;
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
background: red;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
</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 data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="60" data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { writing-mode: vertical-lr; }
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
background: green;
|
||||
justify-self: stretch;
|
||||
align-self: start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
background: blue;
|
||||
justify-self: start;
|
||||
align-self: stretch;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
background: yellow;
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
background: red;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
}
|
||||
</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 data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { writing-mode: vertical-lr; }
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
background: green;
|
||||
justify-self: stretch;
|
||||
align-self: start;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
background: blue;
|
||||
justify-self: start;
|
||||
align-self: stretch;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
background: yellow;
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
background: red;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</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 data-offset-x="0" data-offset-y="0" data-expected-width="90" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="130" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="130" data-expected-height="90" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { writing-mode: vertical-lr; }
|
||||
.grid > div { border-style: solid; }
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
background: green;
|
||||
justify-self: stretch;
|
||||
align-self: start;
|
||||
border-width: 0px 10px 0px 0px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
background: blue;
|
||||
justify-self: start;
|
||||
align-self: stretch;
|
||||
border-width: 0px 0px 20px 0px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
background: yellow;
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
border-width: 0px 0px 0px 0px;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
background: red;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
border-width: 0px 20px 10px 0px;
|
||||
}
|
||||
</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 data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { writing-mode: vertical-lr; }
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
background: green;
|
||||
justify-self: stretch;
|
||||
align-self: start;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
background: blue;
|
||||
justify-self: start;
|
||||
align-self: stretch;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
background: yellow;
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
background: red;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
</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 data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
background: green;
|
||||
justify-self: stretch;
|
||||
align-self: start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
background: blue;
|
||||
justify-self: start;
|
||||
align-self: stretch;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
background: yellow;
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
background: red;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
}
|
||||
</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 data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="20" class="firstRowFirstColumn">XX X</div>
|
||||
<div data-offset-x="125" data-offset-y="0" data-expected-width="80" data-expected-height="125" class="firstRowSecondColumn">XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="125" data-expected-width="80" data-expected-height="20" class="secondRowFirstColumn">XX X</div>
|
||||
<div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
background: green;
|
||||
justify-self: stretch;
|
||||
align-self: start;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
background: blue;
|
||||
justify-self: start;
|
||||
align-self: stretch;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
background: yellow;
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
background: red;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</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 data-offset-x="0" data-offset-y="0" data-expected-width="110" data-expected-height="20" class="firstRowFirstColumn">XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="110" class="firstRowSecondColumn">XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="130" data-expected-width="80" data-expected-height="20" class="secondRowFirstColumn">XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="130" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
.grid > div { border-style: solid; }
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
background: green;
|
||||
justify-self: stretch;
|
||||
align-self: start;
|
||||
border-width: 0px 10px 0px 0px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
background: blue;
|
||||
justify-self: start;
|
||||
align-self: stretch;
|
||||
border-width: 0px 0px 20px 0px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
background: yellow;
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
border-width: 0px 0px 0px 0px;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
background: red;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
border-width: 0px 20px 10px 0px;
|
||||
}
|
||||
</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 data-offset-x="0" data-offset-y="0" data-expected-width="120" data-expected-height="20" class="firstRowFirstColumn">XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="130" class="firstRowSecondColumn">XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="130" data-expected-width="80" data-expected-height="20" class="secondRowFirstColumn">XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
background: green;
|
||||
justify-self: stretch;
|
||||
align-self: start;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
background: blue;
|
||||
justify-self: start;
|
||||
align-self: stretch;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
background: yellow;
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
background: red;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
</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 data-offset-x="0" data-offset-y="0" data-expected-width="120" data-expected-height="20" class="firstRowFirstColumn">XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="130" class="firstRowSecondColumn">XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="130" data-expected-width="80" data-expected-height="20" class="secondRowFirstColumn">XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
.grid > div { writing-mode: vertical-lr; }
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
background: green;
|
||||
justify-self: stretch;
|
||||
align-self: start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
background: blue;
|
||||
justify-self: start;
|
||||
align-self: stretch;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
background: yellow;
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
background: red;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
}
|
||||
</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 data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="80" class="firstRowFirstColumn">XX X</div>
|
||||
<div data-offset-x="125" data-offset-y="0" data-expected-width="20" data-expected-height="125" class="firstRowSecondColumn">XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="125" data-expected-width="20" data-expected-height="80" class="secondRowFirstColumn">XX X</div>
|
||||
<div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
||||
<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
.grid > div { writing-mode: vertical-lr; }
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
background: green;
|
||||
justify-self: stretch;
|
||||
align-self: start;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
background: blue;
|
||||
justify-self: start;
|
||||
align-self: stretch;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
background: yellow;
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
background: red;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</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 data-offset-x="0" data-offset-y="0" data-expected-width="110" data-expected-height="80" class="firstRowFirstColumn">XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="0" data-expected-width="20" data-expected-height="110" class="firstRowSecondColumn">XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="80" class="secondRowFirstColumn">XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="130" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
|
||||
</div>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue