mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-20 00:35:44 +00:00
Bug 1438730 [wpt PR 9553] - [css-grid] Baseline alignment inside the tracks sizing algorithm, a=testonly
Automatic update from web-platform-tests[css-grid] Baseline alignment inside the tracks sizing algorithm We have identified several cases where the Baseline Alignment accounts for the grid's intrinsic size. Since we depend on the track sizing algorithm to compute the grid's intrinsic size, the only way to handle all these cases is to integrate the baseline alignment logic in the algorithm. Additionally, the CSSWG has identified several cases that can't be solved properly; such cases have in common that they imply cyclic dependencies between the item's and grid area's size. The CSSWG has resolved that these items don't participate in baseline alignment: https://github.com/w3c/csswg-drafts/issues/1365 There are also other related issues with some examples and relevant discussions about this topic: https://github.com/w3c/csswg-drafts/issues/1039 https://github.com/w3c/csswg-drafts/issues/1409 Bug: 704713 Change-Id: I817b16eb43aa76f4827deb8f1f20efb7fde3dc22 Reviewed-on: https://chromium-review.googlesource.com/923261 Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Sergio Villar <svillar@igalia.com> Cr-Commit-Position: refs/heads/master@{#562406} -- wpt-commits: 82b278966038f26cb83ceeb67404b0ce7e13a74c wpt-pr: 9553
This commit is contained in:
Javier Fernandez
James Graham
parent
d46206e2e6
commit
5d43953ea0
@ -266000,6 +266000,11 @@
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/support/grid.css": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/support/import-green.css": [
|
||||
[
|
||||
{}
|
||||
@ -316399,6 +316404,30 @@
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html": [
|
||||
[
|
||||
"/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html": [
|
||||
[
|
||||
"/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html": [
|
||||
[
|
||||
"/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html": [
|
||||
[
|
||||
"/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html": [
|
||||
[
|
||||
"/css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html",
|
||||
@ -316519,6 +316548,30 @@
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html": [
|
||||
[
|
||||
"/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html": [
|
||||
[
|
||||
"/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html": [
|
||||
[
|
||||
"/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html": [
|
||||
[
|
||||
"/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html": [
|
||||
[
|
||||
"/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html",
|
||||
@ -316975,6 +317028,18 @@
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html": [
|
||||
[
|
||||
"/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html": [
|
||||
[
|
||||
"/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-grid/grid-definition/grid-change-fit-content-argument-001.html": [
|
||||
[
|
||||
"/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html",
|
||||
@ -514890,6 +514955,22 @@
|
||||
"7d1a1c21880b25fe0126affa850fb13bdf80470b",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html": [
|
||||
"7387c69c5f442f72c4f253242823f97b7c26ed83",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html": [
|
||||
"a95963f14832c60c44aa63915ea557fdabe3183f",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html": [
|
||||
"e5c7e8adb9d33b307041429f708aae12b0203a58",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html": [
|
||||
"d24ae3fb7aad80368ea4f22122e18157596bf45a",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-grid/alignment/grid-content-distribution-001.html": [
|
||||
"5622a264eb2dbd6cf621ac97aa4a8ae5db82c6b3",
|
||||
"reftest"
|
||||
@ -515214,6 +515295,22 @@
|
||||
"7f95db93458af40478ad2cd6b473e8f34f62f3e8",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html": [
|
||||
"7f2b8621613e433c84b70310c64051b4b3893a67",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html": [
|
||||
"c25d5c44d2a7d07b789a2cf669f50a21f6df4f8e",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html": [
|
||||
"edf4aec4ce1ba1bbda1a5e6ade38a712522623c5",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html": [
|
||||
"d83d361ef95e1a4c16b33a9057d7559aaa43a242",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html": [
|
||||
"cafc54256ea9d0cbf8990a0e04904c7ada8c5894",
|
||||
"testharness"
|
||||
@ -515518,6 +515615,14 @@
|
||||
"737ff1592425bb6e89a9edebdd072c94e926a1a9",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html": [
|
||||
"8ff9af9ade9e12c95d7e70778635efdc2263e62b",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html": [
|
||||
"28a7a3372ec47cb31afde392da0752032f416512",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html": [
|
||||
"e7250b61f6dc882945f73412ec73c0de7f139aad",
|
||||
"reftest"
|
||||
@ -550334,6 +550439,10 @@
|
||||
"0e795989a9acaa0d153c31a0a965f6aa7600e024",
|
||||
"support"
|
||||
],
|
||||
"css/support/grid.css": [
|
||||
"6bb300b8baebf700481ea162fb7b41913fcca29c",
|
||||
"support"
|
||||
],
|
||||
"css/support/import-green.css": [
|
||||
"db4f420efdb292d6520be1a3bf052ed3f6f9e7e3",
|
||||
"support"
|
||||
|
||||
@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</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-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
|
||||
<link rel="stylesheet" href="../../support/grid.css">
|
||||
<link rel="stylesheet" href="../../support/alignment.css">
|
||||
<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
|
||||
<style>
|
||||
.container { position: relative; }
|
||||
.grid {
|
||||
position: relative;
|
||||
text-orientation: sideways;
|
||||
grid: 200px 100px / 100px 200px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.bigFont { font-size: 50px; }
|
||||
.height25 { height: 25px; }
|
||||
.width25 { width: 25px; }
|
||||
.width300 { width: 300px; }
|
||||
|
||||
.paddingLeft { padding-left: 25px; }
|
||||
.paddingRight { padding-right: 25px; }
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<pre>Horizontal grid and verticalRL item</pre>
|
||||
|
||||
<div class="grid width300 alignItemsBaseline">
|
||||
<div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
|
||||
<div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
|
||||
<div class="autoRowAutoColumnSpanning2 height25"></div>
|
||||
</div>
|
||||
|
||||
<pre>Horizontal grid and verticalLR item</pre>
|
||||
|
||||
<div class="grid width300 alignItemsBaseline">
|
||||
<div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
|
||||
<div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
|
||||
<div class="autoRowAutoColumnSpanning2 height25"></div>
|
||||
</div>
|
||||
|
||||
<pre>VerticalLR grid and Horizontal item</pre>
|
||||
|
||||
<div class="grid alignItemsBaseline verticalLR">
|
||||
<div class="firstRowFirstColumn horizontalTB" data-offset-x="35" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
|
||||
<div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25"></div>
|
||||
</div>
|
||||
|
||||
<pre>VerticalRL grid and Horizontal item</pre>
|
||||
|
||||
<div class="grid alignItemsBaseline verticalRL">
|
||||
<div class="firstRowFirstColumn horizontalTB" data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
|
||||
<div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="40" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</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-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
|
||||
<link rel="stylesheet" href="../../support/grid.css">
|
||||
<link rel="stylesheet" href="../../support/alignment.css">
|
||||
<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
text-orientation: sideways;
|
||||
grid: 200px 100px / 100px 200px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.bigFont { font-size: 50px; }
|
||||
.height25 { height: 25px; }
|
||||
.width25 { width: 25px; }
|
||||
.width300 { width: 300px; }
|
||||
|
||||
.paddingLeft { padding-left: 20px; }
|
||||
.paddingRight { padding-right: 20px; }
|
||||
|
||||
.fixedHeight { height: 125px; }
|
||||
.fixedWidth { width: 125px; }
|
||||
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<pre>Horizontal grid and item with fixed height</pre>
|
||||
|
||||
<div class="grid width300 alignItemsBaseline">
|
||||
<div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
|
||||
<div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
|
||||
<div class="autoRowAutoColumnSpanning2 height25"></div>
|
||||
</div>
|
||||
|
||||
<pre>VerticalLR grid and item with fixed width</pre>
|
||||
|
||||
<div class="grid alignItemsBaseline verticalLR">
|
||||
<div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25"></div>
|
||||
</div>
|
||||
|
||||
<pre>VerticalRL grid and item with fixed width</pre>
|
||||
|
||||
<div class="grid alignItemsBaseline verticalRL">
|
||||
<div class="firstRowFirstColumn fixedWidth" data-offset-x="175" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="115" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25"></div>
|
||||
</div>
|
||||
@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</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-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
|
||||
<link rel="stylesheet" href="../../support/grid.css">
|
||||
<link rel="stylesheet" href="../../support/alignment.css">
|
||||
<meta name="assert" content="Empty grid items with relative size should use their border-box 'under' edge as synthesized baseline.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
text-orientation: sideways;
|
||||
grid: 200px 100px / 100px 200px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.bigFont { font-size: 50px; }
|
||||
.height25 { height: 25px; }
|
||||
.height75 { height: 75px; }
|
||||
.width25 { width: 25px; }
|
||||
.width75 { width: 75px; }
|
||||
.width300 { width: 300px; }
|
||||
|
||||
.paddingLeft { padding-left: 20px; }
|
||||
.paddingRight { padding-right: 20px; }
|
||||
|
||||
.relativeHeight { height: 50%; }
|
||||
.relativeWidth { width: 50%; }
|
||||
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<pre>Horizontal grid and item with relative height</pre>
|
||||
|
||||
<div class="grid width300 alignItemsBaseline">
|
||||
<div class="firstRowFirstColumn relativeHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
|
||||
<div class="autoRowAutoColumnSpanning2 height25"></div>
|
||||
</div>
|
||||
|
||||
<pre>VerticalLR grid and item with relative width</pre>
|
||||
|
||||
<div class="grid alignItemsBaseline verticalLR">
|
||||
<div class="firstRowFirstColumn relativeWidth" data-offset-x="30" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25"></div>
|
||||
</div>
|
||||
|
||||
<pre>VerticalRL grid and item with rlative width</pre>
|
||||
|
||||
<div class="grid alignItemsBaseline verticalRL">
|
||||
<div class="firstRowFirstColumn relativeWidth" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="140" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on content-sized grids and synthesized baselines</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-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
|
||||
<link rel="stylesheet" href="../../support/grid.css">
|
||||
<link rel="stylesheet" href="../../support/alignment.css">
|
||||
<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
|
||||
<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
text-orientation: sideways;
|
||||
grid: auto auto / 100px 200px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.bigFont { font-size: 50px; }
|
||||
.height25 { height: 25px; }
|
||||
.width25 { width: 25px; }
|
||||
.width300 { width: 300px; }
|
||||
|
||||
.paddingLeft { padding-left: 20px; }
|
||||
.paddingRight { padding-right: 20px; }
|
||||
|
||||
.fixedHeight { height: 125px; }
|
||||
.fixedWidth { width: 125px; }
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<pre>Horizontal grid and item with fixed height</pre>
|
||||
|
||||
<div class="grid width300 alignItemsBaseline">
|
||||
<div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
|
||||
<div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
|
||||
<div class="autoRowAutoColumnSpanning2 height25"></div>
|
||||
</div>
|
||||
|
||||
<pre>VerticalLR grid and item with fixed width</pre>
|
||||
|
||||
<div class="grid alignItemsBaseline verticalLR">
|
||||
<div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25"></div>
|
||||
</div>
|
||||
|
||||
<pre>VerticalRL grid and item with fixed width</pre>
|
||||
|
||||
<div class="grid alignItemsBaseline verticalRL">
|
||||
<div class="firstRowFirstColumn fixedWidth" data-offset-x="85" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="25" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25"></div>
|
||||
</div>
|
||||
@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</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-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
|
||||
<link rel="stylesheet" href="../../support/grid.css">
|
||||
<link rel="stylesheet" href="../../support/alignment.css">
|
||||
<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
|
||||
<style>
|
||||
.container { position: relative; }
|
||||
.grid {
|
||||
position: relative;
|
||||
text-orientation: sideways;
|
||||
grid: 100px 200px / 200px 100px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.bigFont { font-size: 50px; }
|
||||
.height25 { height: 25px; }
|
||||
.width25 { width: 25px; }
|
||||
.width200 { width: 200px; }
|
||||
.width300 { width: 300px; }
|
||||
|
||||
.paddingLeft { padding-left: 25px; }
|
||||
.paddingRight { padding-right: 25px; }
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<pre>Horizontal grid and verticalRL item</pre>
|
||||
|
||||
<div class="grid width300 justifyItemsBaseline">
|
||||
<div class="firstRowFirstColumn" data-offset-x="60" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
|
||||
<div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn width25"></div>
|
||||
</div>
|
||||
|
||||
<pre>Horizontal grid and verticalLR item</pre>
|
||||
|
||||
<div class="grid width300 justifyItemsBaseline">
|
||||
<div class="firstRowFirstColumn" data-offset-x="35" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
|
||||
<div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn width25"></div>
|
||||
</div>
|
||||
|
||||
<pre>VerticalLR grid and Horizontal item</pre>
|
||||
|
||||
<div class="grid justifyItemsBaseline verticalLR">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
|
||||
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn height25"></div>
|
||||
</div>
|
||||
|
||||
<pre>VerticalLR grid and Horizontal item</pre>
|
||||
|
||||
<div class="grid justifyItemsBaseline verticalRL">
|
||||
<div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
|
||||
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn height25"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</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-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
|
||||
<link rel="stylesheet" href="../../support/grid.css">
|
||||
<link rel="stylesheet" href="../../support/alignment.css">
|
||||
<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
|
||||
<style>
|
||||
.container { position: relative; }
|
||||
.grid {
|
||||
position: relative;
|
||||
text-orientation: sideways;
|
||||
grid: 100px 200px / 200px 100px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.bigFont { font-size: 50px; }
|
||||
.height25 { height: 25px; }
|
||||
.width25 { width: 25px; }
|
||||
.width200 { width: 200px; }
|
||||
.width300 { width: 300px; }
|
||||
|
||||
.paddingLeft { padding-left: 20px; }
|
||||
.paddingRight { padding-right: 20px; }
|
||||
|
||||
.fixedHeight { height: 125px; }
|
||||
.fixedWidth { width: 125px; }
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<pre>Horizontal grid and verticalLR item with fixed width</pre>
|
||||
|
||||
<div class="grid width300 justifyItemsBaseline">
|
||||
<div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn width25"></div>
|
||||
</div>
|
||||
|
||||
<pre>Horizontal grid and verticalRL item with fixed width</pre>
|
||||
|
||||
<div class="grid width300 justifyItemsBaseline">
|
||||
<div class="firstRowFirstColumn fixedWidth" data-offset-x="60" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn width25"></div>
|
||||
</div>
|
||||
|
||||
<pre>VerticalLR grid and item with fixed height</pre>
|
||||
|
||||
<div class="grid justifyItemsBaseline verticalLR">
|
||||
<div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
|
||||
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn height25"></div>
|
||||
</div>
|
||||
|
||||
<pre>VerticalRL grid and item with fixed width</pre>
|
||||
|
||||
<div class="grid justifyItemsBaseline verticalRL">
|
||||
<div class="firstRowFirstColumn fixedHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
|
||||
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn height25"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</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-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
|
||||
<link rel="stylesheet" href="../../support/grid.css">
|
||||
<link rel="stylesheet" href="../../support/alignment.css">
|
||||
<meta name="assert" content="Empty grid items with relative size should use their border-box 'under' edge as synthesized baseline.">
|
||||
<style>
|
||||
.container { position: relative; }
|
||||
.grid {
|
||||
position: relative;
|
||||
text-orientation: sideways;
|
||||
grid: 100px 200px / 200px 100px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.bigFont { font-size: 50px; }
|
||||
.height25 { height: 25px; }
|
||||
.width25 { width: 25px; }
|
||||
.width200 { width: 200px; }
|
||||
.width300 { width: 300px; }
|
||||
|
||||
.paddingLeft { padding-left: 20px; }
|
||||
.paddingRight { padding-right: 20px; }
|
||||
|
||||
.relativeHeight { height: 50%; }
|
||||
.relativeWidth { width: 50%; }
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<pre>Horizontal grid and verticalLR item with relative width</pre>
|
||||
|
||||
<div class="grid width300 justifyItemsBaseline">
|
||||
<div class="firstRowFirstColumn relativeWidth" data-offset-x="30" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn width25"></div>
|
||||
</div>
|
||||
|
||||
<pre>Horizontal grid and verticalRL item with relative width</pre>
|
||||
|
||||
<div class="grid width300 justifyItemsBaseline">
|
||||
<div class="firstRowFirstColumn relativeWidth" data-offset-x="60" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn width25"></div>
|
||||
</div>
|
||||
|
||||
<pre>VerticalLR grid and item with relative height</pre>
|
||||
|
||||
<div class="grid justifyItemsBaseline verticalLR">
|
||||
<div class="firstRowFirstColumn relativeHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn height25"></div>
|
||||
</div>
|
||||
|
||||
<pre>VerticalRL grid and item with relative height</pre>
|
||||
|
||||
<div class="grid justifyItemsBaseline verticalRL">
|
||||
<div class="firstRowFirstColumn relativeHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn height25"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on content-sized grids and synthesized baselines</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-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
|
||||
<link rel="stylesheet" href="../../support/grid.css">
|
||||
<link rel="stylesheet" href="../../support/alignment.css">
|
||||
<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
|
||||
<style>
|
||||
.container { position: relative; }
|
||||
.inline-grid {
|
||||
position: relative;
|
||||
text-orientation: sideways;
|
||||
grid: 100px 200px / auto auto;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.bigFont { font-size: 50px; }
|
||||
.height25 { height: 25px; }
|
||||
.width25 { width: 25px; }
|
||||
.width200 { width: 200px; }
|
||||
.width300 { width: 300px; }
|
||||
|
||||
.paddingLeft { padding-left: 20px; }
|
||||
.paddingRight { padding-right: 20px; }
|
||||
|
||||
.fixedHeight { height: 125px; }
|
||||
.fixedWidth { width: 125px; }
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.inline-grid')">
|
||||
|
||||
<pre>Horizontal grid and verticalLR item with relative width</pre>
|
||||
|
||||
<div class="inline-grid justifyItemsBaseline" data-expected-width="180" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn width25"></div>
|
||||
</div>
|
||||
|
||||
<pre>Horizontal grid and verticalRL item with fixed width</pre>
|
||||
|
||||
<div class="inline-grid justifyItemsBaseline" data-expected-width="210" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn fixedWidth" data-offset-x="60" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn width25"></div>
|
||||
</div>
|
||||
|
||||
<pre>VerticalLR grid and item with fixed height</pre>
|
||||
|
||||
<div class="inline-grid justifyItemsBaseline verticalLR">
|
||||
<div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
|
||||
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn height25"></div>
|
||||
</div>
|
||||
|
||||
<pre>VerticalRL grid and item with fixed height</pre>
|
||||
|
||||
<div class="inline-grid justifyItemsBaseline verticalRL">
|
||||
<div class="firstRowFirstColumn fixedHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
|
||||
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn height25"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</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-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
|
||||
<link rel="stylesheet" href="../../support/grid.css">
|
||||
<link rel="stylesheet" href="../../support/alignment.css">
|
||||
<meta name="assert" content="Grid items with relative size in the inline or block axis and an intrinsically-sized column or row respectively, don't participate in baseline alignment in the, row-like or column-like respectively, shared alignment context.">
|
||||
<style>
|
||||
.inline-grid {
|
||||
position: relative;
|
||||
border: solid;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
|
||||
.columns { grid-template-columns: 100px 100px; }
|
||||
.rows { grid-template-rows: 100px 100px; }
|
||||
|
||||
.min-content-columns { grid-auto-columns: min-content; }
|
||||
.max-content-columns { grid-auto-columns: max-content; }
|
||||
.fit-content-columns { grid-auto-columns: fit-content; }
|
||||
.flex-columns { grid-auto-columns: 1fr; }
|
||||
.min-content-rows { grid-auto-rows: min-content; }
|
||||
.max-content-rows { grid-auto-rows: max-content; }
|
||||
.fit-content-rows { grid-auto-rows: fit-content; }
|
||||
.flex-rows { grid-auto-rows: 1fr; }
|
||||
|
||||
.height25 { height: 25px; }
|
||||
.height50 { height: 50px; }
|
||||
.height200 { height: 200px; }
|
||||
.width25 { width: 25px; }
|
||||
.width50 { width: 50px; }
|
||||
.width200 { width: 200px; }
|
||||
|
||||
.height200Percent { height: 200%; }
|
||||
.width200Percent { width: 200%; }
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.inline-grid')">
|
||||
|
||||
<pre>auto-sized rows - items with relative height</pre>
|
||||
|
||||
<div class="inline-grid alignItemsBaseline columns">
|
||||
<div class="firstRowFirstColumn height50" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
|
||||
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<pre>min-content-sized rows - items with relative height</pre>
|
||||
|
||||
<div class="inline-grid alignItemsBaseline columns min-content-rows">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
|
||||
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<pre>max-content-sized rows - items with relative height</pre>
|
||||
|
||||
<div class="inline-grid alignItemsBaseline columns max-content-rows">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
|
||||
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<pre>fit-content-sized rows - items with relative height</pre>
|
||||
|
||||
<div class="inline-grid alignItemsBaseline columns fit-content-rows">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
|
||||
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<pre>flexible-sized rows - items with relative height</pre>
|
||||
|
||||
<div class="inline-grid alignItemsBaseline columns flex-rows">
|
||||
<div class="firstRowFirstColumn height50" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
|
||||
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<pre>auto-sized columns - items with relative width</pre>
|
||||
|
||||
<div class="inline-grid justifyItemsBaseline rows">
|
||||
<div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
|
||||
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
</div>
|
||||
|
||||
<pre>min-content-sized columns - items with relative width</pre>
|
||||
|
||||
<div class="inline-grid justifyItemsBaseline rows min-content-columns">
|
||||
<div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
|
||||
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
</div>
|
||||
|
||||
<pre>max-content-sized columns - items with relative width</pre>
|
||||
|
||||
<div class="inline-grid justifyItemsBaseline rows max-content-columns">
|
||||
<div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
|
||||
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
</div>
|
||||
|
||||
<pre>fit-content-sized columns - items with relative width</pre>
|
||||
|
||||
<div class="inline-grid justifyItemsBaseline rows fit-content-columns">
|
||||
<div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
|
||||
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
</div>
|
||||
|
||||
<pre>flexible-sized columns - items with relative width</pre>
|
||||
|
||||
<div class="inline-grid justifyItemsBaseline rows flex-columns">
|
||||
<div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
|
||||
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
</div>
|
||||
@ -0,0 +1,178 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</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-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
|
||||
<link rel="stylesheet" href="../../support/grid.css">
|
||||
<link rel="stylesheet" href="../../support/alignment.css">
|
||||
<meta name="assert" content="Grid items orthogonal to the Baseline Context along the inline or block axis and an intrinsically-sized column or row respectively, don't participate in baseline alignment in the, row-like or column-like respectively, shared alignment context.">
|
||||
<style>
|
||||
.inline-grid {
|
||||
position: relative;
|
||||
border: solid;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
|
||||
.columns { grid-template-columns: 100px 100px; }
|
||||
.rows { grid-template-rows: 100px 100px; }
|
||||
|
||||
.min-content-columns { grid-auto-columns: min-content; }
|
||||
.max-content-columns { grid-auto-columns: max-content; }
|
||||
.fit-content-columns { grid-auto-columns: fit-content; }
|
||||
.flex-columns { grid-auto-columns: 1fr; }
|
||||
.min-content-rows { grid-auto-rows: min-content; }
|
||||
.max-content-rows { grid-auto-rows: max-content; }
|
||||
.fit-content-rows { grid-auto-rows: fit-content; }
|
||||
.flex-rows { grid-auto-rows: 1fr; }
|
||||
|
||||
.height25 { height: 25px; }
|
||||
.height50 { height: 50px; }
|
||||
.height200 { height: 200px; }
|
||||
.width25 { width: 25px; }
|
||||
.width50 { width: 50px; }
|
||||
.width200 { width: 200px; }
|
||||
|
||||
.bigFont { font-size: 50px; }
|
||||
.paddingLeft { padding-left: 25px; }
|
||||
.paddingBottom { padding-bottom: 25px; }
|
||||
.paddingRight { padding-right: 25px; }
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.inline-grid')">
|
||||
|
||||
<pre>auto-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
|
||||
|
||||
<div class="inline-grid alignItemsBaseline columns height200">
|
||||
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
|
||||
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="175">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="175" data-expected-width="200" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<pre>min-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
|
||||
|
||||
<div class="inline-grid alignItemsBaseline columns min-content-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
|
||||
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="75">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="75" data-expected-width="200" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<pre>max-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
|
||||
|
||||
<div class="inline-grid alignItemsBaseline columns max-content-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
|
||||
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="416">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="416" data-expected-width="200" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<pre>fit-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
|
||||
|
||||
<div class="inline-grid alignItemsBaseline columns fit-content-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
|
||||
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="416">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="416" data-expected-width="200" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<pre>auto-sized columns - horizontal grid item - row-axis baseline</pre>
|
||||
|
||||
<div class="inline-grid justifyItemsBaseline rows width200">
|
||||
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="175" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
</div>
|
||||
|
||||
<pre>min-content-sized columns - horizontal grid item - row-axis baseline</pre>
|
||||
|
||||
<div class="inline-grid justifyItemsBaseline rows min-content-columns">
|
||||
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="75" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
</div>
|
||||
|
||||
<pre>max-content-sized columns - horizontal grid item - row-axis baseline</pre>
|
||||
|
||||
<div class="inline-grid justifyItemsBaseline rows max-content-columns">
|
||||
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
</div>
|
||||
|
||||
<pre>fit-content-sized columns - horizontal grid item - row-axis baseline</pre>
|
||||
|
||||
<div class="inline-grid justifyItemsBaseline rows fit-content-columns">
|
||||
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
</div>
|
||||
|
||||
<pre>auto-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
|
||||
|
||||
<div class="inline-grid verticalLR alignItemsBaseline columns width200">
|
||||
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="175" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
</div>
|
||||
|
||||
<pre>min-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
|
||||
|
||||
<div class="inline-grid verticalLR alignItemsBaseline columns min-content-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="75" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
</div>
|
||||
|
||||
<pre>max-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
|
||||
|
||||
<div class="inline-grid verticalLR alignItemsBaseline columns max-content-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
</div>
|
||||
|
||||
<pre>fit-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
|
||||
|
||||
<div class="inline-grid verticalLR alignItemsBaseline columns fit-content-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
</div>
|
||||
|
||||
<pre>auto-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
|
||||
|
||||
<div class="inline-grid verticalRL alignItemsBaseline columns width200">
|
||||
<div class="firstRowFirstColumn bigFont paddingRight" data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
</div>
|
||||
|
||||
<pre>min-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
|
||||
|
||||
<div class="inline-grid verticalRL alignItemsBaseline columns min-content-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingRight" data-offset-x="25" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
</div>
|
||||
|
||||
<pre>max-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
|
||||
|
||||
<div class="inline-grid verticalRL alignItemsBaseline columns max-content-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingRight" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
</div>
|
||||
|
||||
<pre>fit-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
|
||||
|
||||
<div class="inline-grid verticalRL alignItemsBaseline columns fit-content-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingRight" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
</div>
|
||||
277
testing/web-platform/tests/css/support/grid.css
Normal file
277
testing/web-platform/tests/css/support/grid.css
Normal file
@ -0,0 +1,277 @@
|
||||
.grid {
|
||||
display: grid;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.inline-grid {
|
||||
display: inline-grid;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.firstRowFirstColumn {
|
||||
background-color: blue;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.onlyFirstRowOnlyFirstColumn {
|
||||
background-color: blue;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.firstRowSecondColumn {
|
||||
background-color: lime;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.onlyFirstRowOnlySecondColumn {
|
||||
background-color: lime;
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.secondRowFirstColumn {
|
||||
background-color: purple;
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.onlySecondRowOnlyFirstColumn {
|
||||
background-color: purple;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
.secondRowSecondColumn {
|
||||
background-color: orange;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.onlySecondRowOnlySecondColumn {
|
||||
background-color: orange;
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
.endSecondRowEndSecondColumn {
|
||||
background-color: orange;
|
||||
grid-column-end: 3;
|
||||
grid-row-end: 3;
|
||||
}
|
||||
|
||||
.thirdRowSecondColumn {
|
||||
background-color: red;
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.firstRowThirdColumn {
|
||||
background-color: magenta;
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.secondRowThirdColumn {
|
||||
background-color: navy;
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.firstRowFourthColumn {
|
||||
background-color: green;
|
||||
grid-column: 4;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.secondRowFourthColumn {
|
||||
background-color: pink;
|
||||
grid-column: 4;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.firstAutoRowSecondAutoColumn {
|
||||
grid-row: 1 / auto;
|
||||
grid-column: 2 / auto;
|
||||
}
|
||||
|
||||
.autoLastRowAutoLastColumn {
|
||||
grid-row: auto / -1;
|
||||
grid-column: auto / -1;
|
||||
}
|
||||
|
||||
.autoSecondRowAutoFirstColumn {
|
||||
grid-row: auto / 2;
|
||||
grid-column: auto / 1;
|
||||
}
|
||||
|
||||
.firstRowBothColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.secondRowBothColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.bothRowFirstColumn {
|
||||
grid-row: 1 / -1;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.bothRowSecondColumn {
|
||||
grid-row: 1 / -1;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.bothRowBothColumn {
|
||||
grid-row: 1 / -1;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* Auto column / row. */
|
||||
.autoRowAutoColumn {
|
||||
background-color: pink;
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.firstRowAutoColumn {
|
||||
background-color: blue;
|
||||
grid-column: auto;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.secondRowAutoColumn {
|
||||
background-color: purple;
|
||||
grid-column: auto;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.thirdRowAutoColumn {
|
||||
background-color: navy;
|
||||
grid-column: auto;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.autoRowFirstColumn {
|
||||
background-color: lime;
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowSecondColumn {
|
||||
background-color: orange;
|
||||
grid-column: 2;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowThirdColumn {
|
||||
background-color: magenta;
|
||||
grid-column: 3;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowAutoColumnSpanning2 {
|
||||
background-color: maroon;
|
||||
grid-column: span 2;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowSpanning2AutoColumn {
|
||||
background-color: aqua;
|
||||
grid-column: auto;
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.autoRowSpanning2AutoColumnSpanning3 {
|
||||
background-color: olive;
|
||||
grid-column: span 3;
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.autoRowSpanning3AutoColumnSpanning2 {
|
||||
background-color: indigo;
|
||||
grid-column: span 2;
|
||||
grid-row: span 3;
|
||||
}
|
||||
|
||||
.autoRowFirstColumnSpanning2 {
|
||||
background-color: maroon;
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowSecondColumnSpanning2 {
|
||||
background-color: olive;
|
||||
grid-column: 2 / span 2;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.firstRowSpanning2AutoColumn {
|
||||
background-color: maroon;
|
||||
grid-column: auto;
|
||||
grid-row: 1 / span 2;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.secondRowSpanning2AutoColumn {
|
||||
background-color: olive;
|
||||
grid-column: auto;
|
||||
grid-row: 2 / span 2;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Grid element flow. */
|
||||
.gridAutoFlowColumnSparse {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.gridAutoFlowColumnDense {
|
||||
grid-auto-flow: column dense;
|
||||
}
|
||||
|
||||
.gridAutoFlowRowSparse {
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
|
||||
.gridAutoFlowRowDense {
|
||||
grid-auto-flow: row dense;
|
||||
}
|
||||
|
||||
/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
|
||||
.constrainedContainer {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.unconstrainedContainer {
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
}
|
||||
|
||||
.sizedToGridArea {
|
||||
font: 10px/1 Ahem;
|
||||
/* Make us fit our grid area. */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.verticalRL {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.verticalLR {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.horizontalTB {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.directionRTL {
|
||||
direction: rtl;
|
||||
}
|
||||
.directionLTR {
|
||||
direction: ltr;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user