mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 02:05:07 +02:00
Tests/LibWeb: Import css grid alignment tests from WPT
This commit is contained in:
Aliaksandr Kalenik
committed by
Alexander Kalenik
Alexander Kalenik
parent
3833049fc8
commit
75e26af117
Notes:
github-actions[bot]
2024-11-05 16:45:04 +00:00
Author: https://github.com/kalenikaliaksandr Commit: https://github.com/LadybirdBrowser/ladybird/commit/75e26af1175 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2177
@@ -0,0 +1,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 200);
|
||||
grid.style.alignItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 100);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 100);
|
||||
grid.style.alignItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 200);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 200);
|
||||
grid.style.alignItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 200);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 200);
|
||||
grid.style.alignItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 200);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 100);
|
||||
grid.style.alignItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 200);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 200);
|
||||
grid.style.alignItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 100);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 100);
|
||||
grid.style.alignItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 80);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 80);
|
||||
grid.style.alignItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 100);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 100);
|
||||
grid.style.alignItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 80);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 80);
|
||||
grid.style.alignItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 100);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,54 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChangeMultiple('before', {
|
||||
item: {
|
||||
'data-expected-width': 200,
|
||||
'data-expected-height': 200,
|
||||
},
|
||||
});
|
||||
grid.style.alignItems = 'start';
|
||||
evaluateStyleChangeMultiple('after', {
|
||||
item: {
|
||||
'data-expected-width': 100,
|
||||
'data-expected-height': 100,
|
||||
},
|
||||
});
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div class="grid" id="grid">
|
||||
<img id="item" src="support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChangeMultiple('before', {
|
||||
item: {
|
||||
'data-expected-width': 100,
|
||||
'data-expected-height': 100,
|
||||
},
|
||||
});
|
||||
grid.style.alignItems = 'stretch';
|
||||
evaluateStyleChangeMultiple('after', {
|
||||
item: {
|
||||
'data-expected-width': 200,
|
||||
'data-expected-height': 200,
|
||||
},
|
||||
});
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div class="grid" id="grid">
|
||||
<img id="item" src="support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChangeMultiple('before', {
|
||||
item: {
|
||||
'data-expected-width': 200,
|
||||
'data-expected-height': 200,
|
||||
},
|
||||
});
|
||||
grid.style.alignItems = 'normal';
|
||||
evaluateStyleChangeMultiple('after', {
|
||||
item: {
|
||||
'data-expected-width': 100,
|
||||
'data-expected-height': 100,
|
||||
},
|
||||
});
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div class="grid" id="grid">
|
||||
<img id="item" src="support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChangeMultiple('before', {
|
||||
item: {
|
||||
'data-expected-width': 100,
|
||||
'data-expected-height': 100,
|
||||
},
|
||||
});
|
||||
grid.style.alignItems = 'stretch';
|
||||
evaluateStyleChangeMultiple('after', {
|
||||
item: {
|
||||
'data-expected-width': 200,
|
||||
'data-expected-height': 200,
|
||||
},
|
||||
});
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div class="grid" id="grid">
|
||||
<img id="item" src="support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 100);
|
||||
grid.style.alignItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 100);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-height", 100);
|
||||
grid.style.alignItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-height", 100);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChangeMultiple('before', {
|
||||
item: {
|
||||
'data-expected-width': 100,
|
||||
'data-expected-height': 100,
|
||||
},
|
||||
});
|
||||
grid.style.alignItems = 'stretch';
|
||||
evaluateStyleChangeMultiple('after', {
|
||||
item: {
|
||||
'data-expected-width': 80,
|
||||
'data-expected-height': 80,
|
||||
},
|
||||
});
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div class="grid" id="grid">
|
||||
<img id="item" src="support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChangeMultiple('before', {
|
||||
item: {
|
||||
'data-expected-width': 80,
|
||||
'data-expected-height': 80,
|
||||
},
|
||||
});
|
||||
grid.style.alignItems = 'start';
|
||||
evaluateStyleChangeMultiple('after', {
|
||||
item: {
|
||||
'data-expected-width': 100,
|
||||
'data-expected-height': 100,
|
||||
},
|
||||
});
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div class="grid" id="grid">
|
||||
<img id="item" src="support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 200);
|
||||
grid.style.justifyItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 120);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 120);
|
||||
grid.style.justifyItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 200);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 200);
|
||||
grid.style.alignItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 200);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 200);
|
||||
grid.style.justifyItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 200);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 120);
|
||||
grid.style.justifyItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 200);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 200);
|
||||
grid.style.justifyItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 120);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 120);
|
||||
grid.style.justifyItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 80);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 80);
|
||||
grid.style.justifyItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 120);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 120);
|
||||
grid.style.justifyItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 80);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,45 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 80);
|
||||
grid.style.justifyItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 120);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,54 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChangeMultiple('before', {
|
||||
item: {
|
||||
'data-expected-width': 200,
|
||||
'data-expected-height': 200,
|
||||
},
|
||||
});
|
||||
grid.style.justifyItems = 'start';
|
||||
evaluateStyleChangeMultiple('after', {
|
||||
item: {
|
||||
'data-expected-width': 100,
|
||||
'data-expected-height': 100,
|
||||
},
|
||||
});
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div class="grid" id="grid">
|
||||
<img id="item" src="support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChangeMultiple('before', {
|
||||
item: {
|
||||
'data-expected-width': 100,
|
||||
'data-expected-height': 100,
|
||||
},
|
||||
});
|
||||
grid.style.justifyItems = 'stretch';
|
||||
evaluateStyleChangeMultiple('after', {
|
||||
item: {
|
||||
'data-expected-width': 200,
|
||||
'data-expected-height': 200,
|
||||
},
|
||||
});
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div class="grid" id="grid">
|
||||
<img id="item" src="support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChangeMultiple('before', {
|
||||
item: {
|
||||
'data-expected-width': 200,
|
||||
'data-expected-height': 200,
|
||||
},
|
||||
});
|
||||
grid.style.justifyItems = 'normal';
|
||||
evaluateStyleChangeMultiple('after', {
|
||||
item: {
|
||||
'data-expected-width': 100,
|
||||
'data-expected-height': 100,
|
||||
},
|
||||
});
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div class="grid" id="grid">
|
||||
<img id="item" src="support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 100);
|
||||
grid.style.justifyItems = "stretch";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 200);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 100);
|
||||
grid.style.justifyItems = "normal";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 100);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChange(item, "before", "data-expected-width", 100);
|
||||
grid.style.justifyItems = "start";
|
||||
evaluateStyleChange(item, "after", "data-expected-width", 100);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div class="grid" id="grid">
|
||||
<img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChangeMultiple('before', {
|
||||
item: {
|
||||
'data-expected-width': 100,
|
||||
'data-expected-height': 100,
|
||||
},
|
||||
});
|
||||
grid.style.justifyItems = 'stretch';
|
||||
evaluateStyleChangeMultiple('after', {
|
||||
item: {
|
||||
'data-expected-width': 80,
|
||||
'data-expected-height': 80,
|
||||
},
|
||||
});
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div class="grid" id="grid">
|
||||
<img id="item" src="support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
evaluateStyleChangeMultiple('before', {
|
||||
item: {
|
||||
'data-expected-width': 80,
|
||||
'data-expected-height': 80,
|
||||
},
|
||||
});
|
||||
grid.style.justifyItems = 'start';
|
||||
evaluateStyleChangeMultiple('after', {
|
||||
item: {
|
||||
'data-expected-width': 100,
|
||||
'data-expected-height': 100,
|
||||
},
|
||||
});
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div class="grid" id="grid">
|
||||
<img id="item" src="support/100x100-green.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</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/#self-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
|
||||
<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid: 100px / 50px 50px 50px;
|
||||
background: grey;
|
||||
align-items: baseline;
|
||||
}
|
||||
#item1 {
|
||||
height: 20px;
|
||||
background: blue;
|
||||
}
|
||||
#item2 {
|
||||
height: 50px;
|
||||
background: green;
|
||||
}
|
||||
#item3 {
|
||||
height: 30px;
|
||||
background: red;
|
||||
}
|
||||
</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() {
|
||||
let before = {
|
||||
item1: {"data-offset-y": 30 },
|
||||
item2: {"data-offset-y": 0 },
|
||||
item3: {"data-offset-y": 20 }
|
||||
};
|
||||
|
||||
let after = {
|
||||
item1: {"data-offset-y": 10 },
|
||||
item2: {"data-offset-y": 50 },
|
||||
item3: {"data-offset-y": 0 }
|
||||
};
|
||||
|
||||
evaluateStyleChangeMultiple("before", before);
|
||||
item2.style.alignSelf = "end";
|
||||
evaluateStyleChangeMultiple("after", after);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div id="container">
|
||||
<div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0"></div>
|
||||
<div id="item2" data-expected-width="50" data-expected-height="50" data-offset-x="50"></div>
|
||||
<div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100"></div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</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/#self-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
|
||||
<meta name="assert" content="Changing the 'align-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid: 100px / 50px 50px 50px;
|
||||
background: grey;
|
||||
align-items: baseline;
|
||||
}
|
||||
#item1 {
|
||||
height: 20px;
|
||||
background: blue;
|
||||
}
|
||||
#item2 {
|
||||
height: 50px;
|
||||
background: green;
|
||||
align-self: center;
|
||||
}
|
||||
#item3 {
|
||||
height: 30px;
|
||||
background: red;
|
||||
}
|
||||
</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() {
|
||||
let before = {
|
||||
item1: {"data-offset-y": 10 },
|
||||
item2: {"data-offset-y": 25 },
|
||||
item3: {"data-offset-y": 0 }
|
||||
};
|
||||
|
||||
let after = {
|
||||
item1: {"data-offset-y": 30 },
|
||||
item2: {"data-offset-y": 0 },
|
||||
item3: {"data-offset-y": 20 }
|
||||
};
|
||||
|
||||
evaluateStyleChangeMultiple("before", before);
|
||||
item2.style.alignSelf = "baseline";
|
||||
evaluateStyleChangeMultiple("after", after);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div id="container">
|
||||
<div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0"></div>
|
||||
<div id="item2" data-expected-width="50" data-expected-height="50" data-offset-x="50"></div>
|
||||
<div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100"></div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</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/#self-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
|
||||
<meta name="assert" content="Changing the justify-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid: 50px 50px 50px / 100px;
|
||||
background: grey;
|
||||
justify-items: baseline;
|
||||
}
|
||||
#container > div { writing-mode: vertical-rl; }
|
||||
#item1 {
|
||||
width: 20px;
|
||||
background: blue;
|
||||
}
|
||||
#item2 {
|
||||
width: 50px;
|
||||
margin: 0 10px;
|
||||
background: green;
|
||||
}
|
||||
#item3 {
|
||||
width: 30px;
|
||||
background: red;
|
||||
}
|
||||
</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() {
|
||||
let before = {
|
||||
item1: {"data-offset-x": 40 },
|
||||
item2: {"data-offset-x": 40 },
|
||||
item3: {"data-offset-x": 40 }
|
||||
};
|
||||
|
||||
let after = {
|
||||
item1: {"data-offset-x": 70 },
|
||||
item2: {"data-offset-x": 40 },
|
||||
item3: {"data-offset-x": 70 }
|
||||
};
|
||||
|
||||
evaluateStyleChangeMultiple("before", before);
|
||||
item2.style.justifySelf = "end";
|
||||
evaluateStyleChangeMultiple("after", after);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div id="container">
|
||||
<div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0"></div>
|
||||
<div id="item2" data-expected-width="50" data-expected-height="50" data-offset-y="50"></div>
|
||||
<div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100"></div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</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/#self-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
|
||||
<meta name="assert" content="Changing the 'justify-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid: 50px 50px 50px / 100px;
|
||||
background: grey;
|
||||
justify-items: baseline;
|
||||
}
|
||||
#container > div { writing-mode: vertical-rl; }
|
||||
#item1 {
|
||||
width: 20px;
|
||||
background: blue;
|
||||
}
|
||||
#item2 {
|
||||
width: 50px;
|
||||
margin: 0 10px;
|
||||
background: green;
|
||||
justify-self: center;
|
||||
}
|
||||
#item3 {
|
||||
width: 30px;
|
||||
background: red;
|
||||
}
|
||||
</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() {
|
||||
let before = {
|
||||
item1: {"data-offset-x": 70 },
|
||||
item2: {"data-offset-x": 25 },
|
||||
item3: {"data-offset-x": 70 }
|
||||
};
|
||||
|
||||
let after = {
|
||||
item1: {"data-offset-x": 40 },
|
||||
item2: {"data-offset-x": 40 },
|
||||
item3: {"data-offset-x": 40 }
|
||||
};
|
||||
|
||||
evaluateStyleChangeMultiple("before", before);
|
||||
item2.style.justifySelf = "baseline";
|
||||
evaluateStyleChangeMultiple("after", after);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div id="container">
|
||||
<div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0"></div>
|
||||
<div id="item2" data-expected-width="50" data-expected-height="50" data-offset-y="50"></div>
|
||||
<div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100"></div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</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/#self-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
|
||||
<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid: 100px / 50px 50px 50px;
|
||||
background: grey;
|
||||
align-items: baseline;
|
||||
font-family: Ahem;
|
||||
line-height: 1;
|
||||
}
|
||||
#item1 {
|
||||
font-size: 20px;
|
||||
background: blue;
|
||||
}
|
||||
#item2 {
|
||||
font-size: 40px;
|
||||
background: green;
|
||||
}
|
||||
#item3 {
|
||||
font-size: 30px;
|
||||
background: red;
|
||||
}
|
||||
</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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
let before = {
|
||||
item1: {"data-offset-y": 16 },
|
||||
item2: {"data-offset-y": 0 },
|
||||
item3: {"data-offset-y": 8 }
|
||||
}
|
||||
|
||||
let after = {
|
||||
item1: {"data-offset-y": 8 },
|
||||
item2: {"data-offset-y": 60 },
|
||||
item3: {"data-offset-y": 0 }
|
||||
}
|
||||
|
||||
evaluateStyleChangeMultiple("before", before);
|
||||
item2.style.alignSelf = "end";
|
||||
evaluateStyleChangeMultiple("after", after);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div id="container">
|
||||
<div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0">É</div>
|
||||
<div id="item2" data-expected-width="50" data-expected-height="40" data-offset-x="50">É</div>
|
||||
<div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100">É</div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</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/#self-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
|
||||
<meta name="assert" content="Changing the 'align-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid: 100px / 50px 50px 50px;
|
||||
background: grey;
|
||||
align-items: baseline;
|
||||
font-family: Ahem;
|
||||
line-height: 1;
|
||||
}
|
||||
#item1 {
|
||||
font-size: 20px;
|
||||
background: blue;
|
||||
}
|
||||
#item2 {
|
||||
font-size: 40px;
|
||||
background: green;
|
||||
align-self: center;
|
||||
}
|
||||
#item3 {
|
||||
font-size: 30px;
|
||||
background: red;
|
||||
}
|
||||
</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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
let before = {
|
||||
item1: {"data-offset-y": 8 },
|
||||
item2: {"data-offset-y": 30 },
|
||||
item3: {"data-offset-y": 0 }
|
||||
}
|
||||
|
||||
let after = {
|
||||
item1: {"data-offset-y": 16 },
|
||||
item2: {"data-offset-y": 0 },
|
||||
item3: {"data-offset-y": 8 }
|
||||
}
|
||||
|
||||
evaluateStyleChangeMultiple("before", before);
|
||||
item2.style.alignSelf = "baseline";
|
||||
evaluateStyleChangeMultiple("after", after);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div id="container">
|
||||
<div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0">É</div>
|
||||
<div id="item2" data-expected-width="50" data-expected-height="40" data-offset-x="50">É</div>
|
||||
<div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100">É</div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changing the value of Self-Alignment properties</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/#self-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
|
||||
<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid: 50px 50px 50px / 100px;
|
||||
background: grey;
|
||||
justify-items: baseline;
|
||||
font-family: Ahem;
|
||||
text-orientation: sideways;
|
||||
line-height: 1;
|
||||
}
|
||||
#container > div { writing-mode: vertical-lr; }
|
||||
#item1 {
|
||||
font-size: 20px;
|
||||
background: blue;
|
||||
}
|
||||
#item2 {
|
||||
font-size: 40px;
|
||||
background: green;
|
||||
}
|
||||
#item3 {
|
||||
font-size: 30px;
|
||||
background: red;
|
||||
}
|
||||
</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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
let before = {
|
||||
item1: {"data-offset-x": 4 },
|
||||
item2: {"data-offset-x": 0 },
|
||||
item3: {"data-offset-x": 2 }
|
||||
}
|
||||
|
||||
let after = {
|
||||
item1: {"data-offset-x": 2 },
|
||||
item2: {"data-offset-x": 60 },
|
||||
item3: {"data-offset-x": 0 }
|
||||
}
|
||||
|
||||
evaluateStyleChangeMultiple("before", before);
|
||||
item2.style.justifySelf = "end";
|
||||
evaluateStyleChangeMultiple("after", after);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div id="container">
|
||||
<div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0">É</div>
|
||||
<div id="item2" data-expected-width="40" data-expected-height="50" data-offset-y="50">É</div>
|
||||
<div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100">É</div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</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/#self-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
|
||||
<meta name="assert" content="Changing the 'justify-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid: 50px 50px 50px / 100px;
|
||||
background: grey;
|
||||
justify-items: baseline;
|
||||
font-family: Ahem;
|
||||
text-orientation: sideways;
|
||||
line-height: 1;
|
||||
}
|
||||
#container > div { writing-mode: vertical-lr; }
|
||||
#item1 {
|
||||
font-size: 20px;
|
||||
background: blue;
|
||||
}
|
||||
#item2 {
|
||||
font-size: 40px;
|
||||
background: green;
|
||||
justify-self: center;
|
||||
}
|
||||
#item3 {
|
||||
font-size: 30px;
|
||||
background: red;
|
||||
}
|
||||
</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>
|
||||
setup({ explicit_done: true });
|
||||
function runTest() {
|
||||
let before = {
|
||||
item1: {"data-offset-x": 2 },
|
||||
item2: {"data-offset-x": 30 },
|
||||
item3: {"data-offset-x": 0 }
|
||||
};
|
||||
|
||||
let after = {
|
||||
item1: {"data-offset-x": 4 },
|
||||
item2: {"data-offset-x": 0 },
|
||||
item3: {"data-offset-x": 2 }
|
||||
};
|
||||
|
||||
evaluateStyleChangeMultiple("before", before);
|
||||
item2.style.justifySelf = "baseline";
|
||||
evaluateStyleChangeMultiple("after", after);
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { runTest(); })">
|
||||
<div id="container">
|
||||
<div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0">É</div>
|
||||
<div id="item2" data-expected-width="40" data-expected-height="50" data-offset-y="50">É</div>
|
||||
<div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100">É</div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-rows: 40% 60%;
|
||||
height: 500px;
|
||||
width: 300px;
|
||||
}
|
||||
#grid div {
|
||||
margin: auto 0px auto 0px;
|
||||
}
|
||||
#item1 {
|
||||
background: green;
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
}
|
||||
#item2 {
|
||||
background: blue;
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1"></div>
|
||||
<div id="item2"></div>
|
||||
</div>
|
||||
<script>
|
||||
setup({ explicit_done: true });
|
||||
document.fonts.ready.then(() => {
|
||||
item1.setAttribute("data-offset-y", "75");
|
||||
item2.setAttribute("data-offset-y", "300");
|
||||
checkLayout('#grid', false);
|
||||
|
||||
grid.style.height = "300px";
|
||||
|
||||
item1.setAttribute("data-offset-y", "35");
|
||||
item2.setAttribute("data-offset-y", "160");
|
||||
|
||||
checkLayout('#grid', true);
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-rows: 40% 60%;
|
||||
height: 500px;
|
||||
width: 300px;
|
||||
}
|
||||
#grid div {
|
||||
margin: auto 0px auto 0px;
|
||||
}
|
||||
#item1 {
|
||||
background: green;
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
}
|
||||
#item2 {
|
||||
background: blue;
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1"></div>
|
||||
<div id="item2"></div>
|
||||
</div>
|
||||
<script>
|
||||
setup({ explicit_done: true });
|
||||
document.fonts.ready.then(() => {
|
||||
item1.setAttribute("data-offset-y", "75");
|
||||
item2.setAttribute("data-offset-y", "300");
|
||||
checkLayout('#grid', false);
|
||||
|
||||
item1.style.height = "100px";
|
||||
|
||||
item1.setAttribute("data-offset-y", "50");
|
||||
item2.setAttribute("data-offset-y", "300");
|
||||
checkLayout('#grid', true);
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid items's height changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-columns: 300px;
|
||||
grid-template-rows: 40% 60%;
|
||||
height: 500px;
|
||||
width: 300px;
|
||||
}
|
||||
#grid div {
|
||||
margin: auto 0px auto 0px;
|
||||
}
|
||||
#item1 {
|
||||
background: green;
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
}
|
||||
#item2 {
|
||||
background: blue;
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1"></div>
|
||||
<div id="item2"></div>
|
||||
</div>
|
||||
<script>
|
||||
setup({ explicit_done: true });
|
||||
document.fonts.ready.then(() => {
|
||||
item1.setAttribute("data-offset-y", "75");
|
||||
item2.setAttribute("data-offset-y", "300");
|
||||
checkLayout('#grid', false);
|
||||
|
||||
item1.style.height = "100px";
|
||||
|
||||
item1.setAttribute("data-offset-y", "50");
|
||||
item2.setAttribute("data-offset-y", "300");
|
||||
checkLayout('#grid', true);
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-columns: 300px;
|
||||
grid-template-rows: 40% 60%;
|
||||
height: 500px;
|
||||
width: min-content;
|
||||
}
|
||||
#grid div {
|
||||
margin: auto 0px auto 0px;
|
||||
}
|
||||
#item1 {
|
||||
background: green;
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
}
|
||||
#item2 {
|
||||
background: blue;
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1"></div>
|
||||
<div id="item2"></div>
|
||||
</div>
|
||||
<script>
|
||||
setup({ explicit_done: true });
|
||||
document.fonts.ready.then(() => {
|
||||
item1.setAttribute("data-offset-y", "75");
|
||||
item2.setAttribute("data-offset-y", "300");
|
||||
checkLayout('#grid', false);
|
||||
|
||||
grid.style.height = "300px";
|
||||
|
||||
item1.setAttribute("data-offset-y", "35");
|
||||
item2.setAttribute("data-offset-y", "160");
|
||||
checkLayout('#grid', true);
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-rows: 40% 60%;
|
||||
height: 500px;
|
||||
width: 300px;
|
||||
}
|
||||
#grid div {
|
||||
margin: auto 0px auto 0px;
|
||||
}
|
||||
#item1 {
|
||||
font: 20px/1 Ahem;
|
||||
color: green;
|
||||
}
|
||||
#item2 {
|
||||
font: 10px/1 Ahem;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1">XXXXX</div>
|
||||
<div id="item2">XXXXX</div>
|
||||
</div>
|
||||
<script>
|
||||
setup({ explicit_done: true });
|
||||
document.fonts.ready.then(() => {
|
||||
item1.setAttribute("data-offset-y", "90");
|
||||
item2.setAttribute("data-offset-y", "345");
|
||||
checkLayout('#grid', false);
|
||||
|
||||
item2.style.fontSize = "40px";
|
||||
|
||||
item1.setAttribute("data-offset-y", "90");
|
||||
item2.setAttribute("data-offset-y", "330");
|
||||
checkLayout('#grid', true);
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
font: 10px/1 Ahem;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 40% 60%;
|
||||
height: 500px;
|
||||
width: 300px;
|
||||
}
|
||||
#grid div {
|
||||
margin: auto 0px auto 0px;
|
||||
}
|
||||
#item1 {
|
||||
color: green;
|
||||
}
|
||||
#item2 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1">XXXXX</div>
|
||||
<div id="item2">XXXXX</div>
|
||||
</div>
|
||||
<script>
|
||||
setup({ explicit_done: true });
|
||||
document.fonts.ready.then(() => {
|
||||
item1.setAttribute("data-offset-y", "95");
|
||||
item2.setAttribute("data-offset-y", "345");
|
||||
checkLayout('#grid', false);
|
||||
|
||||
grid.style.fontSize = "40px";
|
||||
|
||||
item1.setAttribute("data-offset-y", "80");
|
||||
item2.setAttribute("data-offset-y", "330");
|
||||
checkLayout('#grid', true);
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-rows: 40% 60%;
|
||||
height: 500px;
|
||||
width: 200px;
|
||||
}
|
||||
#grid div {
|
||||
margin: auto 0px auto 0px;
|
||||
}
|
||||
#item1 {
|
||||
background: green;
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
}
|
||||
#item2 {
|
||||
background: blue;
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1"></div>
|
||||
<div id="item2"></div>
|
||||
</div>
|
||||
<script>
|
||||
setup({ explicit_done: true });
|
||||
document.fonts.ready.then(() => {
|
||||
item1.setAttribute("data-offset-y", "75");
|
||||
item2.setAttribute("data-offset-y", "300");
|
||||
checkLayout('#grid', false);
|
||||
|
||||
grid.style.height = "300px";
|
||||
|
||||
item1.setAttribute("data-offset-y", "35");
|
||||
item2.setAttribute("data-offset-y", "160");
|
||||
checkLayout('#grid', true);
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<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/#valdef-self-position-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'start' value for align-self are flushed with its alignment container's 'start' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: start;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX 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="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<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/#valdef-self-position-end">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'end' value for align-self are flushed with its alignment container's 'end' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="140" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<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/#positional-values">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'left' value for align-self are flushed with its alignment container's 'left' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: left;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: left;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: left;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: left;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX 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="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br></br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<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/#positional-values">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'right' value for align-self are flushed with its alignment container's 'right' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: right;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: right;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: right;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: right;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX 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="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br></br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<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/#valdef-self-position-center">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'center' value for align-self are 'centered' within its alignment container.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="70" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="60" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="180" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="70" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="60" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="180" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br></br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="70" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="195" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="170" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="160" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="45" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="30" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<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/#valdef-self-position-flex-start">
|
||||
<meta name="assert" content="The 'flex-start' value of align-self behaves like 'start' for absolute positioned grid items.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: flex-start;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX 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="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br></br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<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/#valdef-self-position-flex-end">
|
||||
<meta name="assert" content="The 'flex-end' value of align-self behaves like 'end' for absolute positioned grid items.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: flex-end;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br></br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="140" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<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/#valdef-self-position-self-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-start;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX 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="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br></br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<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/#valdef-self-position-self-end">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'self-end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-end;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="140" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<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/#valdef-self-position-self-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-start;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="140" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<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/#valdef-self-position-self-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-end;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<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/#valdef-self-position-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
align-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { height: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { width: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: auto / 1;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / auto;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: auto / auto;
|
||||
grid-column: 2 / 3;
|
||||
align-self: start;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="190" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="80" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="190" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="250" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="440" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="320" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="190" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<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/#valdef-self-position-end">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
align-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { height: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { width: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: auto / 1;
|
||||
grid-column: 1 / 2;
|
||||
align-self: end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / auto;
|
||||
grid-column: 1 / 2;
|
||||
align-self: end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: auto / auto;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="0" data-offset-y="90" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="190" data-offset-y="90" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="80" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="190" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="90" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="440" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="350" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="200" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<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/#valdef-self-position-center">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'center' value for align-self are 'centered' within its alignment container.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
align-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { height: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { width: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: auto / 1;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / auto;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: auto / auto;
|
||||
grid-column: 2 / 3;
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="0" data-offset-y="45" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="345" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="205" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="190" data-offset-y="45" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="80" data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="190" data-offset-y="345" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="90" data-offset-y="205" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="45" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="160" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="345" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="205" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="395" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="260" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="95" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="205" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<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/#valdef-self-position-self-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
align-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { height: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { width: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: auto / 1;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / auto;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: auto / auto;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-start;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="190" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="80" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="190" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="440" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="350" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="200" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<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/#valdef-self-position-self-end">
|
||||
<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
align-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { height: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { width: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: auto / 1;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / auto;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: auto / auto;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-end;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="0" data-offset-y="90" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="190" data-offset-y="90" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="80" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="190" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="90" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="250" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="440" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="320" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="190" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<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/#valdef-self-position-start">
|
||||
<meta name="assert" content="Absolute positioned grid items don't participate in Baseline Alignment, so the value 'baseline' behaves like 'start'.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: baseline;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: baseline;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: baseline;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: baseline;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX 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="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'start' value for justify-self are flushed with its alignment container's 'start' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: start;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX 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="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'end' value for justify-self are flushed with its alignment container's 'end' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: end;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="40" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="300" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'left' value for justify-self are flushed with its alignment container's 'left' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: left;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: left;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: left;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: left;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX 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="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="300" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'right' value for justify-self are flushed with its alignment container's 'right' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: right;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: right;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: right;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: right;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="40" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'center' value for justify-self are 'centered' within its alignment container.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: center;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: center;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="20" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="140" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="20" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="145" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="320" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="190" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="320" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="145" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="145" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start">
|
||||
<meta name="assert" content="The 'flex-start' value of justify-self behaves like 'start' for absolute positioned grid items.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX 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="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start">
|
||||
<meta name="assert" content="The 'flex-end' value of justify-self behaves like 'end' for absolute positioned grid items.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="40" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="300" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: self-start;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX 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="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: self-end;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="40" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="300" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: self-start;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="40" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="300" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: self-end;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { width: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { height: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: auto / 1;
|
||||
justify-self: start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / auto;
|
||||
justify-self: start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: auto / auto;
|
||||
justify-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: start;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="200" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX 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="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="390" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="290" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { width: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { height: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: auto / 1;
|
||||
justify-self: end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / auto;
|
||||
justify-self: end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: auto / auto;
|
||||
justify-self: end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: end;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="380" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="140" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="350" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX 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="250" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'center' value for justify-self are 'centered' within its alignment container.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { width: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { height: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: auto / 1;
|
||||
justify-self: center;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / auto;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: auto / auto;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: center;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="20" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="290" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="370" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="270" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
o
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="195" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="120" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="195" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="120" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</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/#augmented-grid">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { width: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { height: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: auto / 1;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / auto;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: auto / auto;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-start;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="380" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="140" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="350" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="250" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</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/#augmented-grid">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
|
||||
<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { width: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { height: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: auto / 1;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / auto;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: auto / auto;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-end;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="200" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="390" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="290" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</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/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
|
||||
<meta name="assert" content="Absolute positioned grid items don't participate in Baseline Alignment, so the value 'baseline' behaves like 'start'.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: baseline;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: baseline;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: baseline;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: baseline;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX 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="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -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="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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,66 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,67 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,66 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,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="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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,67 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,68 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,67 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,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="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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,66 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,67 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,66 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,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="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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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,67 @@
|
||||
<!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.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { 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>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!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 include their defined border-box.">
|
||||
<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
font: 20px/1 Ahem;
|
||||
background: grey;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
.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>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="120" 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="130" 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="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
|
||||
</div>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user