summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-004.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-grid/alignment/grid-baseline-004.html
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/alignment/grid-baseline-004.html')
-rw-r--r--testing/web-platform/tests/css/css-grid/alignment/grid-baseline-004.html222
1 files changed, 222 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-004.html
new file mode 100644
index 0000000000..cd565a10ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-004.html
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<title>CSS Grid: Grid container baseline</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-order">
+<link rel="help" href="https://crbug.com/234191">
+<meta name="assert" content="Check that grid container must use its first item in grid-modified document order (grid order) to compute its baseline."/>
+
+<link href="/css/support/grid.css" rel="stylesheet">
+<link href="/css/support/alignment.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+body { margin: 0; }
+.container {
+ position: relative;
+ font: 10px/1 Ahem;
+ border: 5px solid;
+ width: 470px;
+}
+.grid {
+ display: inline-grid;
+ grid-template-columns: 50px 50px;
+ width: 150px;
+ background-color: transparent;
+ position: relative;
+}
+.twoRows { grid-template-rows: 50px 50px; }
+.threeRows { grid-template-rows: 50px 50px 50px; }
+.empty {
+ border-color: black;
+ border-style: solid;
+ margin: 15px 0px 30px;
+ border-width: 5px 0px 10px;
+ padding: 10px 0px 20px;
+}
+.item {
+ height: 25px;
+ border-color: gray;
+ border-style: solid;
+}
+.grid.grid > * {
+ background: silver;
+ background: rgba(0,0,0,0.3);
+}
+.target.target {
+ background: blue;
+ border-color: navy;
+}
+.style1 {
+ border-width: 5px 0px 10px;
+ padding: 10px 0px 20px;
+}
+.style2 {
+ border-width: 10px 0px 5px;
+ padding: 20px 0px 10px;
+ margin-top: 10px;
+}
+.style3 {
+ border-width: 10px 0px 20px;
+ padding: 5px 0px 10px;
+ margin-top: 20px;
+}
+
+.bothRowFirstColumn, .secondRowSecondColumn {
+ margin-right: 10px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ background-color: pink;
+}
+.firstRowBothColumn, .secondRowBothColumn {
+ margin-top: 15px;
+ margin-bottom: 15px;
+ background-color: green;
+}
+</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, container'); })">
+<div id="log"></div>
+<p>
+ The test shows 3 grids each of them with 3 items sorted differently in the DOM.<br>
+ Each grid container must use its first (grid order) item to compute its baseline, and using document-oder in case of element with same grid-order. Hence they might be baseline aligned each other accordingly.
+</p>
+
+<p>
+ This case shows 3 items located along the first row and in different columns.
+ The grid baseline is computed using the one located at first column (blue item)
+ regardless of source order.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="120">
+ <div class="grid" data-offset-x="0" data-offset-y="20">
+ <div class="item style1 firstRowFirstColumn target" data-offset-x="0" data-offset-y="0"></div>
+ <div class="item style2 firstRowSecondColumn" data-offset-x="50" data-offset-y="10"></div>
+ <div class="item style3 firstRowThirdColumn" data-offset-x="100" data-offset-y="20"></div>
+ </div>
+ <div class="grid" data-offset-x="160" data-offset-y="10">
+ <div class="item style1 firstRowThirdColumn" data-offset-x="100" data-offset-y="0"></div>
+ <div class="item style2 firstRowFirstColumn target" data-offset-x="0" data-offset-y="10"></div>
+ <div class="item style3 firstRowSecondColumn" data-offset-x="50" data-offset-y="20"></div>
+ </div>
+ <div class="grid" data-offset-x="320" data-offset-y="0">
+ <div class="item style1 firstRowSecondColumn" data-offset-x="50" data-offset-y="0"></div>
+ <div class="item style2 firstRowThirdColumn" data-offset-x="100" data-offset-y="10"></div>
+ <div class="item style3 firstRowFirstColumn target" data-offset-x="0" data-offset-y="20"></div>
+ </div>
+</div>
+
+<p>
+ This case shows 3 items located along the first row and in different columns.
+ The baseline-aligned item (blue) always determines the grid baseline.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="120">
+ <div class="grid" data-offset-x="0" data-offset-y="0">
+ <div class="item style1 firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
+ <div class="item style2 firstRowSecondColumn" data-offset-x="50" data-offset-y="10"></div>
+ <div class="item style3 firstRowThirdColumn alignSelfBaseline target" data-offset-x="100" data-offset-y="20"></div>
+ </div>
+ <div class="grid" data-offset-x="160" data-offset-y="0">
+ <div class="item style1 firstRowThirdColumn" data-offset-x="100" data-offset-y="0"></div>
+ <div class="item style2 firstRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+ <div class="item style3 firstRowSecondColumn alignSelfBaseline target" data-offset-x="50" data-offset-y="20"></div>
+ </div>
+ <div class="grid" data-offset-x="320" data-offset-y="20">
+ <div class="item style1 firstRowSecondColumn alignSelfBaseline target" data-offset-x="50" data-offset-y="0"></div>
+ <div class="item style2 firstRowThirdColumn" data-offset-x="100" data-offset-y="10"></div>
+ <div class="item style3 firstRowFirstColumn" data-offset-x="0" data-offset-y="20"></div>
+ </div>
+</div>
+
+<p>
+ This case shows 3 items' areas intersecting the first row and first column,
+ but none of them participate in baseline alignment in the first row,
+ so the dom order must be used to determine each grid's baseline.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="165">
+ <div class="grid twoRows" data-offset-x="0" data-offset-y="40">
+ <div class="firstRowFirstColumn target" data-offset-x="0" data-offset-y="0"></div>
+ <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
+ <div class="bothRowFirstColumn style2" style="align-self: last baseline" data-offset-x="0"></div>
+ </div>
+ <div class="grid twoRows" data-offset-x="160" data-offset-y="0">
+ <div class="bothRowFirstColumn target" data-offset-x="0" data-offset-y="10"></div>
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
+ <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
+ </div>
+ <div class="grid twoRows" data-offset-x="320" data-offset-y="55">
+ <div class="firstRowBothColumn target" data-offset-x="0" data-offset-y="15"></div>
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
+ <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+ </div>
+</div>
+
+<p>
+ This case shows 3 items' areas intersecting the first row and first column,
+ but one of the items participates in baseline alignment in the first row,
+ so such item is used to determine the grid's baseline
+ instead of using the dom order.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="165">
+ <div class="grid twoRows" data-offset-x="0" data-offset-y="55">
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
+ <div class="firstRowBothColumn alignSelfBaseline target" style="width: 100px; height: 20px;" data-offset-x="0" data-offset-y="15"></div>
+ <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+ </div>
+ <div class="grid twoRows" data-offset-x="160" data-offset-y="40">
+ <div class="bothRowFirstColumn style2" style="align-self: last baseline" data-offset-x="0"></div>
+ <div class="firstRowFirstColumn alignSelfBaseline target" style="width: 50px; height: 50px;" data-offset-x="0" data-offset-y="0"></div>
+ <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
+ </div>
+ <div class="grid twoRows" data-offset-x="320" data-offset-y="0">
+ <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
+ <div class="bothRowFirstColumn alignSelfBaseline target" style="width: 40px; height: 80px;" data-offset-x="0" data-offset-y="10"></div>
+ </div>
+</div>
+
+<p>
+ This case shows one of the grids with no items,
+ hence its baseline must be synthesized from its margin box.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="250">
+ <div class="grid twoRows" data-offset-x="0" data-offset-y="140">
+ <div class="firstRowFirstColumn target" data-offset-x="0" data-offset-y="0"></div>
+ <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
+ <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+ </div>
+ <div class="grid twoRows" data-offset-x="160" data-offset-y="100">
+ <div class="bothRowFirstColumn target" data-offset-x="0" data-offset-y="10"></div>
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
+ <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
+ </div>
+ <div class="grid empty twoRows target" data-offset-x="320" data-offset-y="15">
+ </div>
+</div>
+
+<p>
+ This case shows two of the grids with no items in their first row,
+ hence the items in the second row are evaluated.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="250">
+ <div id=first class="grid twoRows" data-offset-x="0" data-offset-y="80">
+ <div class="firstRowFirstColumn target" data-offset-x="0" data-offset-y="0"></div>
+ <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
+ <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+ </div>
+ <div id=second class="grid threeRows" data-offset-x="160" data-offset-y="55">
+ <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="100"></div>
+ <div class="secondRowBothColumn" data-offset-x="0" data-offset-y="65"></div>
+ <div class="secondRowSecondColumn style3 alignSelfBaseline target" id="first" data-offset-x="50" data-offset-y="60"></div>
+ </div>
+ <div class="grid empty threeRows" data-offset-x="320" data-offset-y="15">
+ <div class="thirdRowSecondColumn" data-offset-x="50" data-offset-y="110"></div>
+ <div class="secondRowFirstColumn target" data-offset-x="0" data-offset-y="60"></div>
+ <div class="secondRowBothColumn" data-offset-x="0" data-offset-y="75"></div>
+ </div>
+</div>
+
+</body>
generated by cgit v1.2.3 (git 2.39.1) at 2024-08-22 18:23:21 +0000