Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 22:15:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'

Browse source
This commit is contained in:
WPT Sync Bot 2022-11-10 01:22:36 +00:00
parent ace9b32b1c
commit df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
Download patch file Download diff file Expand all files Collapse all files

69
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-001.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
<style>
#target {
display: grid;
grid-auto-flow: column;
align-items: last baseline;
width: 200px;
border: solid 3px;
position: relative;
writing-mode: vertical-lr;
}
#target > :nth-child(1) {
background: lime;
margin-right: 20px;
padding-right: 20px;
font-size: 20px;
line-height: 20px;
align-self: first baseline;
writing-mode: vertical-rl;
}
#target > :nth-child(2) {
background: hotpink;
font-size: 30px;
line-height: 30px;
writing-mode: vertical-lr;
}
#target > :nth-child(3) {
background: papayawhip;
font-size: 16px;
line-height: 16px;
writing-mode: vertical-lr;
}
#target > :nth-child(4) {
background: orange;
margin-left: 20px;
padding-left: 20px;
font-size: 20px;
line-height: 20px;
align-self: first baseline;
writing-mode: vertical-lr;
}
#target > :nth-child(5) {
background: cyan;
font-size: 30px;
line-height: 30px;
writing-mode: vertical-rl;
}
#target > :nth-child(6) {
background: papayawhip;
font-size: 16px;
line-height: 16px;
writing-mode: vertical-rl;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('#target > div')">
<div id="target">
<div data-offset-x="120">line1<br>line2</div>
<div data-offset-x="105">line1<br>line2</div>
<div data-offset-x="126">line1<br>line2</div>
<div data-offset-x="20">line1<br>line2</div>
<div data-offset-x="35">line1<br>line2</div>
<div data-offset-x="42">line1<br>line2</div>
</div>

69
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-002.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
<style>
#target {
display: grid;
grid-auto-flow: column;
align-items: last baseline;
width: 200px;
border: solid 3px;
position: relative;
writing-mode: vertical-rl;
}
#target > :nth-child(1) {
background: lime;
margin-right: 20px;
padding-right: 20px;
font-size: 20px;
line-height: 20px;
align-self: first baseline;
writing-mode: vertical-rl;
}
#target > :nth-child(2) {
background: hotpink;
font-size: 30px;
line-height: 30px;
writing-mode: vertical-lr;
}
#target > :nth-child(3) {
background: papayawhip;
font-size: 16px;
line-height: 16px;
writing-mode: vertical-lr;
}
#target > :nth-child(4) {
background: orange;
margin-left: 20px;
padding-left: 20px;
font-size: 20px;
line-height: 20px;
align-self: first baseline;
writing-mode: vertical-lr;
}
#target > :nth-child(5) {
background: cyan;
font-size: 30px;
line-height: 30px;
writing-mode: vertical-rl;
}
#target > :nth-child(6) {
background: papayawhip;
font-size: 16px;
line-height: 16px;
writing-mode: vertical-rl;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('#target > div')">
<div id="target">
<div data-offset-x="120">line1<br>line2</div>
<div data-offset-x="105">line1<br>line2</div>
<div data-offset-x="126">line1<br>line2</div>
<div data-offset-x="20">line1<br>line2</div>
<div data-offset-x="35">line1<br>line2</div>
<div data-offset-x="42">line1<br>line2</div>
</div>

50
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-003.html Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
<style>
#target {
display: grid;
grid-auto-flow: column;
grid-template-rows: 120px;
align-items: last baseline;
width: 200px;
border: solid 3px;
position: relative;
line-height: 0;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cornflowerblue 3px;
outline-offset: -3px;
}
#target > div {
flex: none;
}
#target > :nth-child(1) {
background: lime;
margin-bottom: 20px;
padding-bottom: 20px;
font-size: 20px;
}
#target > :nth-child(2) {
background: hotpink;
font-size: 30px;
}
#target > :nth-child(3) {
background: papayawhip;
font-size: 10px;
writing-mode: vertical-lr;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('#target > div')">
<div id="target">
<div data-offset-y="40"><span></span><br><span></span></div>
<div data-offset-y="20"><span></span><br><span></span></div>
<div data-offset-y="70"><span></span><br><span></span></div>
</div>

31
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-004.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
<style>
#target {
display: grid;
grid-template: 50px 50px 50px / 50px 50px;
grid-auto-flow: column;
align-items: last baseline;
width: 200px;
border: solid 3px;
position: relative;
line-height: 0;
font-size: 20px;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('#target > div')">
<div id="target">
<div style="grid-area: 3 / 1; margin-bottom: 10px;" data-offset-y="100"><span></span><br><span></span></div>
<div style="grid-area: 1 / 2 / 4 / 2;" data-offset-y="100"><span></span><br><span></span></div>
</div>

8
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-005.html Normal file
View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="display: inline-grid; grid-template: auto / 50px 50px; align-items: baseline; background: red;">
<canvas style="background: green; width: 100%; height: 100%;"></canvas>
<div style="height: 100px; background: green;"><br></div>
</div>

48
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-fieldset-001.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
<style>
.target {
display: grid;
width: min-content;
grid-auto-flow: column;
position: relative;
line-height: 0;
}
.target > div {
background: hotpink;
font-size: 30px;
}
fieldset {
padding: 10px;
border: solid 10px;
margin: 0;
font-size: 20px;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<div class="target" style="align-items: first baseline;">
<div data-offset-y="20"><span></span></div>
<fieldset data-offset-y="0">
<legend><span></span></legend>
<span></span><br><span></span>
</table>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="40"><span></span></div>
<fieldset data-offset-y="0">
<span></span><br><span></span>
<legend><span></span></legend>
</table>
</div>

49
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-fieldset-002.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
<style>
.target {
display: grid;
grid-auto-flow: column;
width: min-content;
position: relative;
line-height: 0;
writing-mode: vertical-rl;
}
.target > div {
background: hotpink;
font-size: 30px;
}
fieldset {
padding: 10px;
border: solid 10px;
margin: 0;
font-size: 20px;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<div class="target" style="align-items: first baseline;">
<div data-offset-x="35"><span></span></div>
<fieldset data-offset-x="0">
<legend><span></span></legend>
<span></span><br><span></span>
</table>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="15"><span></span></div>
<fieldset data-offset-x="0">
<span></span><br><span></span>
<legend><span></span></legend>
</table>
</div>

49
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-fieldset-003.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
<style>
.target {
display: grid;
grid-auto-flow: column;
width: min-content;
position: relative;
line-height: 0;
writing-mode: vertical-lr;
}
.target > div {
background: hotpink;
font-size: 30px;
}
fieldset {
padding: 10px;
border: solid 10px;
margin: 0;
font-size: 20px;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<div class="target" style="align-items: first baseline;">
<div data-offset-x="25"><span></span></div>
<fieldset data-offset-x="0">
<legend><span></span></legend>
<span></span><br><span></span>
</table>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="45"><span></span></div>
<fieldset data-offset-x="0">
<span></span><br><span></span>
<legend><span></span></legend>
</table>
</div>

261
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-flex-001.html Normal file
View file

@ -0,0 +1,261 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
<style>
.target {
display: grid;
grid-auto-flow: column;
position: relative;
line-height: 0;
font-size: 20px;
inline-size: 200px;
margin-block: 10px;
padding: 10px;
border: solid 3px;
}
.inner {
display: flex;
border: solid 5px;
padding: 10px;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<div class="target" style="align-items: first baseline;">
<div data-offset-y="15"><span></span></div>
<div class="inner" data-offset-y="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="35"><span></span></div>
<div class="inner" data-offset-y="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-y="35"><span></span></div>
<div class="inner" style="flex-direction: row-reverse;" data-offset-y="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="15"><span></span></div>
<div class="inner" style="flex-direction: row-reverse;" data-offset-y="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-y="15"><span></span></div>
<div class="inner" style="flex-direction: column;" data-offset-y="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="45"><span></span></div>
<div class="inner" style="flex-direction: column;" data-offset-y="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-y="35"><span></span></div>
<div class="inner" style="flex-direction: column-reverse;" data-offset-y="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="45"><span></span></div>
<div class="inner" style="flex-direction: column-reverse;" data-offset-y="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
</div>
</div>
<!-- flex-wrap: wrap -->
<div class="target" style="align-items: first baseline;">
<div data-offset-y="25"><span></span></div>
<div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="70"><span></span></div>
<div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-y="35"><span></span></div>
<div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="45"><span></span></div>
<div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-y="25"><span></span></div>
<div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="50"><span></span></div>
<div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-y="35"><span></span></div>
<div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="55"><span></span></div>
<div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<!-- flex-wrap: wrap-reverse -->
<div class="target" style="align-items: first baseline;">
<div data-offset-y="15"><span></span></div>
<div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="70"><span></span></div>
<div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-y="40"><span></span></div>
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="60"><span></span></div>
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-y="15"><span></span></div>
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="55"><span></span></div>
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-y="45"><span></span></div>
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="55"><span></span></div>
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>

262
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-flex-002.html Normal file
View file

@ -0,0 +1,262 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
<style>
.target {
display: grid;
grid-auto-flow: column;
position: relative;
line-height: 0;
font-size: 20px;
inline-size: 200px;
margin-inline: 10px;
padding: 10px;
border: solid 3px;
writing-mode: vertical-rl;
}
.inner {
display: flex;
border: solid 5px;
padding: 10px;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<div class="target" style="align-items: first baseline;">
<div data-offset-x="40"><span></span></div>
<div class="inner" data-offset-x="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="30"><span></span></div>
<div class="inner" data-offset-x="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="30"><span></span></div>
<div class="inner" style="flex-direction: row-reverse;" data-offset-x="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="40"><span></span></div>
<div class="inner" style="flex-direction: row-reverse;" data-offset-x="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="50"><span></span></div>
<div class="inner" style="flex-direction: column;" data-offset-x="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="30"><span></span></div>
<div class="inner" style="flex-direction: column;" data-offset-x="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="40"><span></span></div>
<div class="inner" style="flex-direction: column-reverse;" data-offset-x="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="20"><span></span></div>
<div class="inner" style="flex-direction: column-reverse;" data-offset-x="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
</div>
</div>
<!-- flex-wrap: wrap -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="70"><span></span></div>
<div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="33"><span></span></div>
<div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="65"><span></span></div>
<div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="45"><span></span></div>
<div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="55"><span></span></div>
<div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="38"><span></span></div>
<div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="50"><span></span></div>
<div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="20"><span></span></div>
<div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<!-- flex-wrap: wrap-reverse -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="75"><span></span></div>
<div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="30"><span></span></div>
<div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="63"><span></span></div>
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="35"><span></span></div>
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="60"><span></span></div>
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="30"><span></span></div>
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="43"><span></span></div>
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="25"><span></span></div>
<div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
</div>
</div>

130
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-flex-003.html Normal file
View file

@ -0,0 +1,130 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
<style>
.target {
display: grid;
grid-auto-flow: column;
position: relative;
line-height: 0;
font-size: 20px;
inline-size: 200px;
margin-block: 10px;
padding: 10px;
border: solid 3px;
}
.inner {
display: flex;
border: solid 5px;
padding: 10px;
gap: 10px;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<div class="target" style="align-items: first baseline;">
<div data-offset-y="45"><span></span></div>
<div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
<div style="font-size: 50px;"><span></span></div>
<div style="font-size: 60px;"><span></span></div>
<div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
<div style="font-size: 20px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-y="45"><span></span></div>
<div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
<div style="font-size: 50px;"><span></span></div>
<div style="font-size: 60px;"><span></span></div>
<div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
<div style="font-size: 20px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-y="55"><span></span></div>
<div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
<div style="font-size: 50px;"><span></span></div>
<div style="font-size: 60px;"><span></span></div>
<div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
<div style="font-size: 20px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-y="55"><span></span></div>
<div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
<div style="font-size: 50px;"><span></span></div>
<div style="font-size: 60px;"><span></span></div>
<div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
<div style="font-size: 20px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="115"><span></span></div>
<div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
<div style="font-size: 50px;"><span></span></div>
<div style="font-size: 60px;"><span></span></div>
<div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
<div style="font-size: 20px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="115"><span></span></div>
<div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
<div style="font-size: 50px;"><span></span></div>
<div style="font-size: 60px;"><span></span></div>
<div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
<div style="font-size: 20px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="115"><span></span></div>
<div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
<div style="font-size: 50px;"><span></span></div>
<div style="font-size: 60px;"><span></span></div>
<div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
<div style="font-size: 20px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="115"><span></span></div>
<div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
<div style="font-size: 50px;"><span></span></div>
<div style="font-size: 60px;"><span></span></div>
<div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
<div style="font-size: 20px;"><span></span></div>
</div>
</div>

131
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-flex-004.html Normal file
View file

@ -0,0 +1,131 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
<style>
.target {
display: grid;
grid-auto-flow: column;
position: relative;
line-height: 0;
font-size: 20px;
inline-size: 200px;
margin-block: 10px;
padding: 10px;
border: solid 3px;
writing-mode: vertical-rl;
}
.inner {
display: flex;
border: solid 5px;
padding: 10px;
gap: 10px;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<div class="target" style="align-items: first baseline;">
<div data-offset-x="110"><span></span></div>
<div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
<div style="font-size: 50px;"><span></span></div>
<div style="font-size: 60px;"><span></span></div>
<div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
<div style="font-size: 20px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="110"><span></span></div>
<div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
<div style="font-size: 50px;"><span></span></div>
<div style="font-size: 60px;"><span></span></div>
<div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
<div style="font-size: 20px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="105"><span></span></div>
<div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
<div style="font-size: 50px;"><span></span></div>
<div style="font-size: 60px;"><span></span></div>
<div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
<div style="font-size: 20px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="105"><span></span></div>
<div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
<div style="font-size: 50px;"><span></span></div>
<div style="font-size: 60px;"><span></span></div>
<div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
<div style="font-size: 20px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="45"><span></span></div>
<div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
<div style="font-size: 50px;"><span></span></div>
<div style="font-size: 60px;"><span></span></div>
<div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
<div style="font-size: 20px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="45"><span></span></div>
<div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
<div style="font-size: 50px;"><span></span></div>
<div style="font-size: 60px;"><span></span></div>
<div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
<div style="font-size: 20px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="40"><span></span></div>
<div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
<div style="font-size: 50px;"><span></span></div>
<div style="font-size: 60px;"><span></span></div>
<div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
<div style="font-size: 20px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="40"><span></span></div>
<div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
<div style="font-size: 50px;"><span></span></div>
<div style="font-size: 60px;"><span></span></div>
<div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
<div style="font-size: 20px;"><span></span></div>
</div>
</div>

112
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-grid-001.html Normal file
View file

@ -0,0 +1,112 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
<style>
.target {
display: grid;
grid-auto-flow: column;
position: relative;
line-height: 0;
font-size: 20px;
inline-size: 300px;
margin-block: 10px;
padding: 10px;
border: solid 3px;
}
.inner {
display: grid;
gap: 10px;
grid-template: 50px 50px / 50px 50px 50px;
border: solid 5px;
padding: 10px;
}
.inner > div:first-child,
.inner > div:last-child {
align-self: start;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<div class="target" style="align-items: first baseline;">
<div data-offset-y="35"><span></span></div>
<div class="inner" style="align-items: first baseline;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="100"><span></span></div>
<div class="inner" style="align-items: first baseline;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-y="55"><span></span></div>
<div class="inner" style="align-items: last baseline;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="115"><span></span></div>
<div class="inner" style="align-items: last baseline;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-y="25"><span></span></div>
<div class="inner" style="align-items: end;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="90"><span></span></div>
<div class="inner" style="align-items: end;" data-offset-y="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>

113
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-grid-002.html Normal file
View file

@ -0,0 +1,113 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
<style>
.target {
display: grid;
grid-auto-flow: column;
position: relative;
line-height: 0;
font-size: 20px;
inline-size: 300px;
margin-block: 10px;
padding: 10px;
border: solid 3px;
writing-mode: vertical-rl;
}
.inner {
display: grid;
gap: 10px;
grid-template: 50px 50px / 50px 50px 50px;
border: solid 5px;
padding: 10px;
}
.inner > div:first-child,
.inner > div:last-child {
align-self: start;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<div class="target" style="align-items: first baseline;">
<div data-offset-x="110"><span></span></div>
<div class="inner" style="align-items: first baseline;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="48"><span></span></div>
<div class="inner" style="align-items: first baseline;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="90"><span></span></div>
<div class="inner" style="align-items: last baseline;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="33"><span></span></div>
<div class="inner" style="align-items: last baseline;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="115"><span></span></div>
<div class="inner" style="align-items: end;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="53"><span></span></div>
<div class="inner" style="align-items: end;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>

113
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-grid-003.html Normal file
View file

@ -0,0 +1,113 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
<style>
.target {
display: grid;
grid-auto-flow: column;
position: relative;
line-height: 0;
font-size: 20px;
inline-size: 300px;
margin-block: 10px;
padding: 10px;
border: solid 3px;
writing-mode: vertical-lr;
}
.inner {
display: grid;
gap: 10px;
grid-template: 50px 50px / 50px 50px 50px;
border: solid 5px;
padding: 10px;
}
.inner > div:first-child,
.inner > div:last-child {
align-self: start;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<div class="target" style="align-items: first baseline;">
<div data-offset-x="30"><span></span></div>
<div class="inner" style="align-items: first baseline;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="93"><span></span></div>
<div class="inner" style="align-items: first baseline;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="50"><span></span></div>
<div class="inner" style="align-items: last baseline;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="108"><span></span></div>
<div class="inner" style="align-items: last baseline;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="25"><span></span></div>
<div class="inner" style="align-items: end;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="88"><span></span></div>
<div class="inner" style="align-items: end;" data-offset-x="10">
<div style="font-size: 20px;"><span></span></div>
<div style="font-size: 10px;"><span></span></div>
<div style="font-size: 30px;"><span></span></div>
<div style="font-size: 15px;"><span></span></div>
<div style="font-size: 35px;"><span></span></div>
<div style="font-size: 25px;"><span></span></div>
</div>
</div>

129
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-line-clamp-001.tentative.html Normal file
View file

@ -0,0 +1,129 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline">
<style>
.target {
display: grid;
grid-auto-flow: column;
inline-size: 100px;
position: relative;
line-height: 0;
padding: 10px;
}
.target > div {
background: hotpink;
font-size: 30px;
}
.line-clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
border: solid 10px;
font-size: 40px !important;
overflow: hidden;
}
.line-clamp div {
background: orange;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<!-- Five lines -->
<div class="target" style="align-items: first baseline;">
<div data-offset-y="30"><span></span></div>
<div class="line-clamp" data-offset-y="10">
<span></span><br><span></span><br><span></span><br><span></span><br><span></span>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="110"><span></span></div>
<div class="line-clamp" data-offset-y="10">
<span></span><br><span></span><br><span></span><br><span></span><br><span></span>
</div>
</div>
<!-- Two lines -->
<div class="target" style="align-items: first baseline;">
<div data-offset-y="30"><span></span></div>
<div class="line-clamp" data-offset-y="10">
<span></span><br><span></span>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="70"><span></span></div>
<div class="line-clamp" data-offset-y="10">
<span></span><br><span></span>
</div>
</div>
<!-- Three lines -->
<div class="target" style="align-items: first baseline;">
<div data-offset-y="30"><span></span></div>
<div class="line-clamp" data-offset-y="10">
<span></span><br><span></span><br><span></span>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="110"><span></span></div>
<div class="line-clamp" data-offset-y="10">
<span></span><br><span></span><br><span></span>
</div>
</div>
<!-- Wrapping div -->
<div class="target" style="align-items: first baseline;">
<div data-offset-y="30"><span></span></div>
<div class="line-clamp" data-offset-y="10">
<div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="110"><span></span></div>
<div class="line-clamp" data-offset-y="10">
<div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
</div>
</div>
<!-- Nested div after first line -->
<div class="target" style="align-items: first baseline;">
<div data-offset-y="30"><span></span></div>
<div class="line-clamp" data-offset-y="10">
<span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="110"><span></span></div>
<div class="line-clamp" data-offset-y="10">
<span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
</div>
</div>
<!-- Block within inline. -->
<div class="target" style="align-items: first baseline;">
<div data-offset-y="30"><span></span></div>
<div class="line-clamp" data-offset-y="10">
<span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="110"><span></span></div>
<div class="line-clamp" data-offset-y="10">
<span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
</div>
</div>

130
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-line-clamp-002.tentative.html Normal file
View file

@ -0,0 +1,130 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline">
<style>
.target {
display: grid;
grid-auto-flow: column;
inline-size: 100px;
position: relative;
line-height: 0;
padding: 10px;
writing-mode: vertical-rl;
}
.target > div {
background: hotpink;
font-size: 30px;
}
.line-clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
border: solid 10px;
font-size: 40px !important;
overflow: hidden;
}
.line-clamp div {
background: orange;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<!-- Five lines -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="105"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><br><span></span><br><span></span><br><span></span><br><span></span>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="25"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><br><span></span><br><span></span><br><span></span><br><span></span>
</div>
</div>
<!-- Two lines -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="65"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><br><span></span>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="25"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><br><span></span>
</div>
</div>
<!-- Three lines -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="105"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><br><span></span><br><span></span>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="25"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><br><span></span><br><span></span>
</div>
</div>
<!-- Wrapping div -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="105"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="25"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
</div>
</div>
<!-- Nested div after first line -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="105"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="25"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
</div>
</div>
<!-- Block within inline. -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="105"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="25"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
</div>
</div>

130
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-line-clamp-003.tentative.html Normal file
View file

@ -0,0 +1,130 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline">
<style>
.target {
display: grid;
grid-auto-flow: column;
inline-size: 100px;
position: relative;
line-height: 0;
padding: 10px;
writing-mode: vertical-lr;
}
.target > div {
background: hotpink;
font-size: 30px;
}
.line-clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
border: solid 10px;
font-size: 40px !important;
overflow: hidden;
}
.line-clamp div {
background: orange;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<!-- Five lines -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="25"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><br><span></span><br><span></span><br><span></span><br><span></span>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="105"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><br><span></span><br><span></span><br><span></span><br><span></span>
</div>
</div>
<!-- Two lines -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="25"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><br><span></span>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="65"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><br><span></span>
</div>
</div>
<!-- Three lines -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="25"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><br><span></span><br><span></span>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="105"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><br><span></span><br><span></span>
</div>
</div>
<!-- Wrapping div -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="25"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="105"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
</div>
</div>
<!-- Nested div after first line -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="25"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="105"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
</div>
</div>
<!-- Block within inline. -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="25"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="105"><span></span></div>
<div class="line-clamp" data-offset-x="10">
<span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
</div>
</div>

143
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-multicol-001.html Normal file
View file

@ -0,0 +1,143 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
<style>
.target {
display: grid;
grid-auto-flow: column;
inline-size: 100px;
position: relative;
line-height: 0;
padding: 10px;
}
.target > div {
background: hotpink;
font-size: 20px;
}
.multicol {
columns: 3;
column-fill: auto;
padding: 10px;
border: solid 10px;
}
.multicol > div {
break-inside: avoid;
break-before: column;
break-after: column;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<!-- Three columns, largest in the middle. -->
<div class="target" style="align-items: first baseline;">
<div data-offset-y="20"><span></span></div>
<div class="multicol" data-offset-y="10">
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="100"><span></span></div>
<div class="multicol" data-offset-y="10">
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
</div>
</div>
<!-- Start spanning element. -->
<div class="target" style="align-items: first baseline;">
<div data-offset-y="30"><span></span></div>
<div class="multicol" data-offset-y="10">
<div style="column-span: all; background: orange;">
<span></span><br><span></span>
</div>
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="140"><span></span></div>
<div class="multicol" data-offset-y="10">
<div style="column-span: all; background: orange;">
<span></span><br><span></span>
</div>
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
</div>
</div>
<!-- End spanning element. -->
<div class="target" style="align-items: first baseline;">
<div data-offset-y="20"><span></span></div>
<div class="multicol" data-offset-y="10">
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="column-span: all; background: orange;">
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="140"><span></span></div>
<div class="multicol" data-offset-y="10">
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="column-span: all; background: orange;">
<span></span><br><span></span>
</div>
</div>
</div>

145
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-multicol-002.html Normal file
View file

@ -0,0 +1,145 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
<style>
.target {
display: grid;
grid-auto-flow: column;
inline-size: 200px;
position: relative;
line-height: 0;
margin: 40px;
padding: 10px;
writing-mode: vertical-rl;
}
.target > div {
background: hotpink;
font-size: 20px;
}
.multicol {
columns: 3;
column-fill: auto;
padding: 10px;
border: solid 10px;
}
.multicol > div {
break-inside: avoid;
break-before: column;
break-after: column;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<!-- Three columns, largest in the middle. -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="105"><span></span></div>
<div class="multicol" data-offset-x="10">
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="35"><span></span></div>
<div class="multicol" data-offset-x="10">
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
</div>
</div>
<!-- Start spanning element. -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="140"><span></span></div>
<div class="multicol" data-offset-x="10">
<div style="column-span: all; background: orange;">
<span></span><br><span></span>
</div>
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="35"><span></span></div>
<div class="multicol" data-offset-x="10">
<div style="column-span: all; background: orange;">
<span></span><br><span></span>
</div>
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
</div>
</div>
<!-- End spanning element. -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="145"><span></span></div>
<div class="multicol" data-offset-x="10">
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="column-span: all; background: orange;">
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="30"><span></span></div>
<div class="multicol" data-offset-x="10">
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="column-span: all; background: orange;">
<span></span><br><span></span>
</div>
</div>
</div>

145
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-multicol-003.html Normal file
View file

@ -0,0 +1,145 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
<style>
.target {
display: grid;
grid-auto-flow: column;
inline-size: 200px;
position: relative;
line-height: 0;
margin: 40px;
padding: 10px;
writing-mode: vertical-lr;
}
.target > div {
background: hotpink;
font-size: 20px;
}
.multicol {
columns: 3;
column-fill: auto;
padding: 10px;
border: solid 10px;
}
.multicol > div {
break-inside: avoid;
break-before: column;
break-after: column;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<!-- Three columns, largest in the middle. -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="25"><span></span></div>
<div class="multicol" data-offset-x="10">
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="95"><span></span></div>
<div class="multicol" data-offset-x="10">
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
</div>
</div>
<!-- Start spanning element. -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="30"><span></span></div>
<div class="multicol" data-offset-x="10">
<div style="column-span: all; background: orange;">
<span></span><br><span></span>
</div>
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="135"><span></span></div>
<div class="multicol" data-offset-x="10">
<div style="column-span: all; background: orange;">
<span></span><br><span></span>
</div>
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
</div>
</div>
<!-- End spanning element. -->
<div class="target" style="align-items: first baseline;">
<div data-offset-x="25"><span></span></div>
<div class="multicol" data-offset-x="10">
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="column-span: all; background: orange;">
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="140"><span></span></div>
<div class="multicol" data-offset-x="10">
<div style="font-size: 10px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 30px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="font-size: 20px;">
<span></span><br><span></span><br><span></span>
</div>
<div style="column-span: all; background: orange;">
<span></span><br><span></span>
</div>
</div>
</div>

91
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-overflow-001.html Normal file
View file

@ -0,0 +1,91 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
<style>
.target {
display: grid;
grid-auto-flow: column;
position: relative;
line-height: 0;
font-size: 20px;
inline-size: 300px;
margin-block: 10px;
padding: 10px;
border: solid 3px;
}
.inner {
overflow: hidden;
inline-size: 100px;
block-size: 80px;
margin: 10px;
border: solid 5px;
padding: 10px;
font-size: 30px;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<div class="target" style="align-items: first baseline;">
<div data-offset-y="45"><span></span><br><span></span></div>
<div class="inner" data-offset-y="20">
<div>
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="55"><span></span><br><span></span></div>
<div class="inner" data-offset-y="20">
<div>
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-y="10"><span></span><br><span></span></div>
<div class="inner" data-offset-y="30">
<div style="margin-block-start: -200px;">
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="10"><span></span><br><span></span></div>
<div class="inner" data-offset-y="50">
<div style="margin-block-start: -200px;">
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-y="110"><span></span><br><span></span></div>
<div class="inner" data-offset-y="20">
<div style="margin-block-start: 200px;">
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="90"><span></span><br><span></span></div>
<div class="inner" data-offset-y="20">
<div style="margin-block-start: 200px;">
<span></span><br><span></span>
</div>
</div>
</div>

92
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-overflow-002.html Normal file
View file

@ -0,0 +1,92 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
<style>
.target {
display: grid;
grid-auto-flow: column;
position: relative;
line-height: 0;
font-size: 20px;
inline-size: 300px;
margin-block: 10px;
padding: 10px;
border: solid 3px;
writing-mode: vertical-rl;
}
.inner {
overflow: hidden;
inline-size: 100px;
block-size: 80px;
margin: 10px;
border: solid 5px;
padding: 10px;
font-size: 30px;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<div class="target" style="align-items: first baseline;">
<div data-offset-x="70"><span></span><br><span></span></div>
<div class="inner" data-offset-x="20">
<div>
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="60"><span></span><br><span></span></div>
<div class="inner" data-offset-x="20">
<div>
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="100"><span></span><br><span></span></div>
<div class="inner" data-offset-x="20">
<div style="margin-block-start: -200px;">
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="120"><span></span><br><span></span></div>
<div class="inner" data-offset-x="20">
<div style="margin-block-start: -200px;">
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="10"><span></span><br><span></span></div>
<div class="inner" data-offset-x="40">
<div style="margin-block-start: 200px;">
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="10"><span></span><br><span></span></div>
<div class="inner" data-offset-x="20">
<div style="margin-block-start: 200px;">
<span></span><br><span></span>
</div>
</div>
</div>

92
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-overflow-003.html Normal file
View file

@ -0,0 +1,92 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
<style>
.target {
display: grid;
grid-auto-flow: column;
position: relative;
line-height: 0;
font-size: 20px;
inline-size: 300px;
margin-block: 10px;
padding: 10px;
border: solid 3px;
writing-mode: vertical-lr;
}
.inner {
overflow: hidden;
inline-size: 100px;
block-size: 80px;
margin: 10px;
border: solid 5px;
padding: 10px;
font-size: 30px;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<div class="target" style="align-items: first baseline;">
<div data-offset-x="40"><span></span><br><span></span></div>
<div class="inner" data-offset-x="20">
<div>
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="50"><span></span><br><span></span></div>
<div class="inner" data-offset-x="20">
<div>
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="10"><span></span><br><span></span></div>
<div class="inner" data-offset-x="20">
<div style="margin-block-start: -200px;">
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="10"><span></span><br><span></span></div>
<div class="inner" data-offset-x="40">
<div style="margin-block-start: -200px;">
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-x="120"><span></span><br><span></span></div>
<div class="inner" data-offset-x="20">
<div style="margin-block-start: 200px;">
<span></span><br><span></span>
</div>
</div>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="100"><span></span><br><span></span></div>
<div class="inner" data-offset-x="20">
<div style="margin-block-start: 200px;">
<span></span><br><span></span>
</div>
</div>
</div>

97
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-table-001.html Normal file
View file

@ -0,0 +1,97 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
<style>
.target {
display: grid;
grid-auto-flow: column;
justify-items: start;
position: relative;
}
.target > div, td {
background: hotpink;
font-size: 20px;
line-height: 0;
}
table { border-spacing: 0; }
td { padding: 5px; min-width: 5px; min-height: 5px; }
caption {
margin: 10px;
background: lime;
block-size: 20px;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<div class="target" style="align-items: first baseline;">
<div data-offset-y="45"><span></span></div>
<table data-offset-y="0">
<caption>top</caption>
<tr style="vertical-align: baseline;">
<td style="font-size: 10px;"><span></span><br><span></span></td>
<td><span></span><br><span></span></td>
</tr>
<tr style="vertical-align: baseline;">
<td><span></span><br><span></span></td>
<td style="font-size: 10px;"><span></span><br><span></span></td>
</tr>
<caption style="caption-side: bottom;">bottom</caption>
</table>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="95"><span></span></div>
<table data-offset-y="0">
<caption>top</caption>
<tr style="vertical-align: baseline;">
<td style="font-size: 10px;"><span></span><br><span></span></td>
<td><span></span><br><span></span></td>
</tr>
<tr style="vertical-align: baseline;">
<td><span></span><br><span></span></td>
<td style="font-size: 10px;"><span></span><br><span></span></td>
</tr>
<caption style="caption-side: bottom;">bottom</caption>
</table>
</div>
<div class="target" style="align-items: first baseline;">
<div data-offset-y="20"><span></span></div>
<table data-offset-y="0">
<tr>
<td style="border: solid 10px;"></td>
<td style="border: solid 5px;"></td>
<td style="border: solid 20px;"></td>
</tr>
<tr>
<td style="border: solid 10px;"></td>
<td style="border: solid 5px;"></td>
<td style="border: solid 20px;"></td>
</tr>
</table>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-y="70"><span></span></div>
<table data-offset-y="0">
<tr>
<td style="border: solid 10px;"></td>
<td style="border: solid 5px;"></td>
<td style="border: solid 20px;"></td>
</tr>
<tr>
<td style="border: solid 10px;"></td>
<td style="border: solid 5px;"></td>
<td style="border: solid 20px;"></td>
</tr>
</table>
</div>

66
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-table-002.html Normal file
View file

@ -0,0 +1,66 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
<style>
.target {
display: grid;
grid-auto-flow: column;
justify-items: start;
position: relative;
writing-mode: vertical-rl;
}
.target > div, td {
background: hotpink;
font-size: 20px;
line-height: 0;
}
table { border-spacing: 0; }
td { padding: 5px; min-width: 5px; min-height: 5px; }
caption {
margin: 10px;
background: lime;
block-size: 20px;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<div class="target" style="align-items: first baseline;">
<div data-offset-x="115"><span></span></div>
<table data-offset-x="0">
<caption>top</caption>
<tr style="vertical-align: baseline;">
<td style="font-size: 10px;"><span></span><br><span></span></td>
<td><span></span><br><span></span></td>
</tr>
<tr style="vertical-align: baseline;">
<td><span></span><br><span></span></td>
<td style="font-size: 10px;"><span></span><br><span></span></td>
</tr>
<caption style="caption-side: bottom;">bottom</caption>
</table>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="65"><span></span></div>
<table data-offset-x="0">
<caption>top</caption>
<tr style="vertical-align: baseline;">
<td style="font-size: 10px;"><span></span><br><span></span></td>
<td><span></span><br><span></span></td>
</tr>
<tr style="vertical-align: baseline;">
<td><span></span><br><span></span></td>
<td style="font-size: 10px;"><span></span><br><span></span></td>
</tr>
<caption style="caption-side: bottom;">bottom</caption>
</table>
</div>

66
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-table-003.html Normal file
View file

@ -0,0 +1,66 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
<style>
.target {
display: grid;
grid-auto-flow: column;
justify-items: start;
position: relative;
writing-mode: vertical-lr;
}
.target > div, td {
background: hotpink;
font-size: 20px;
line-height: 0;
}
table { border-spacing: 0; }
td { padding: 5px; min-width: 5px; min-height: 5px; }
caption {
margin: 10px;
background: lime;
block-size: 20px;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cyan 3px;
outline-offset: -3px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.target > *')">
<div class="target" style="align-items: first baseline;">
<div data-offset-x="45"><span></span></div>
<table data-offset-x="0">
<caption>top</caption>
<tr style="vertical-align: baseline;">
<td style="font-size: 10px;"><span></span><br><span></span></td>
<td><span></span><br><span></span></td>
</tr>
<tr style="vertical-align: baseline;">
<td><span></span><br><span></span></td>
<td style="font-size: 10px;"><span></span><br><span></span></td>
</tr>
<caption style="caption-side: bottom;">bottom</caption>
</table>
</div>
<div class="target" style="align-items: last baseline;">
<div data-offset-x="95"><span></span></div>
<table data-offset-x="0">
<caption>top</caption>
<tr style="vertical-align: baseline;">
<td style="font-size: 10px;"><span></span><br><span></span></td>
<td><span></span><br><span></span></td>
</tr>
<tr style="vertical-align: baseline;">
<td><span></span><br><span></span></td>
<td style="font-size: 10px;"><span></span><br><span></span></td>
</tr>
<caption style="caption-side: bottom;">bottom</caption>
</table>
</div>

13
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-003.html
View file

@ -22,6 +22,7 @@
}
#item2 {
width: 50px;
margin: 0 10px;
background: green;
}
#item3 {
@ -36,15 +37,15 @@
<script>
function runTest() {
let before = {
item1: {"data-offset-x": 30 },
item2: {"data-offset-x": 0 },
item3: {"data-offset-x": 20 }
item1: {"data-offset-x": 40 },
item2: {"data-offset-x": 40 },
item3: {"data-offset-x": 40 }
};
let after = {
item1: {"data-offset-x": 10 },
item2: {"data-offset-x": 50 },
item3: {"data-offset-x": 0 }
item1: {"data-offset-x": 70 },
item2: {"data-offset-x": 40 },
item3: {"data-offset-x": 70 }
};
evaluateStyleChangeMultiple("before", before);

11
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-004.html
View file

@ -22,6 +22,7 @@
}
#item2 {
width: 50px;
margin: 0 10px;
background: green;
justify-self: center;
}
@ -37,15 +38,15 @@
<script>
function runTest() {
let before = {
item1: {"data-offset-x": 10 },
item1: {"data-offset-x": 70 },
item2: {"data-offset-x": 25 },
item3: {"data-offset-x": 0 }
item3: {"data-offset-x": 70 }
};
let after = {
item1: {"data-offset-x": 30 },
item2: {"data-offset-x": 0 },
item3: {"data-offset-x": 20 }
item1: {"data-offset-x": 40 },
item2: {"data-offset-x": 40 },
item3: {"data-offset-x": 40 }
};
evaluateStyleChangeMultiple("before", before);

13
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-baseline-align-cycles-001.html
View file

@ -4,13 +4,11 @@
CSS Grid Layout Test: Grid Item (First) Baseline Alignment Row Cyclic Sizing Exclusions
</title>
<meta name="assert" content="
A grid item whose size is input
to the size of the track
on which its size depends
cannot participate in baseline alignment, unless
the grid algorithm requires
another pass, where the track
sizing can be resovled.
If baseline alignment is specified on a grid item whose size in that axis
depends on the size of an intrinsically-sized track (whose size is therefore
dependent on both the item’s size and baseline alignment, creating a cyclic
dependency), that item does not participate in baseline alignment, and
instead uses its fallback alignment as if that were originally specified.
">
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#row-align">
<link rel="match" href="references/grid-baseline-align-cycles-001-ref.html">
@ -35,6 +33,7 @@
height: 20%;
}
.orthogonal {
height: 20%;
writing-mode: vertical-rl;
}

17
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-container-baseline-001.html
View file

@ -8,6 +8,7 @@
.wrapper {
position: relative;
margin: 10px;
line-height: 0;
}
.grid {
@ -71,43 +72,43 @@
</div>
<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
<div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
<div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
<div class="grid">
<div class="i1"></div>
<div class="i2" data-offset-x="0"></div>
<div class="i3"></div>
</div>
<div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
<div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
</div>
<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
<div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
<div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
<div class="grid">
<div class="i1"></div>
<div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="0"></div>
<div class="i3"></div>
</div>
<div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
<div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
</div>
<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
<div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
<div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
<div class="grid">
<div class="i1"></div>
<div class="i2" data-offset-x="0"></div>
<div class="i3"></div>
</div>
<div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
<div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
</div>
<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
<div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
<div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
<div class="grid">
<div class="i1"></div>
<div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="0"></div>
<div class="i3"></div>
</div>
<div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
<div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
</div>
<div class="wrapper" style="writing-mode: vertical-rl; text-orientation: sideways;">

2
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-gutters-012.html
View file

@ -3,7 +3,7 @@
<title>CSS Grid Layout Test: Support for calc mixing fixed and percentage values for grid-gap as alias for gap</title>
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
<link rel="help" href0"https://www.w3.org/TR/css-align-3/#gap-legacy">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
<link rel="match" href="../reference/grid-different-gutters-ref.html">
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<style>

1
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html
View file

@ -7,6 +7,7 @@
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
<link rel="match" href="grid-item-aspect-ratio-stretch-2-ref.html">
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-2">
<style>
body {
line-height: 0;

5
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-justify-baseline-001-ref.html Normal file
View file

@ -0,0 +1,5 @@
<!DOCTYPE html>
<div style="display: grid; width: 100px; height: 100px; background: gray;">
<div style="writing-mode: vertical-rl; background: cyan; justify-self: end; direction: rtl;">one<br>two</div>
<div style="writing-mode: vertical-lr; font-size: 30px; background: lime; justify-self: start; direction: rtl;">one<br>two</div>
</div>

7
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-justify-baseline-001.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-sharing-group">
<link rel="match" href="grid-justify-baseline-001-ref.html">
<div style="display: grid; width: 100px; height: 100px; direction: rtl; justify-items: baseline; background: gray;">
<div style="writing-mode: vertical-rl; background: cyan;">one<br>two</div>
<div style="writing-mode: vertical-lr; font-size: 30px; background: lime;">one<br>two</div>
</div>

67
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-justify-baseline-002.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
<style>
#target {
display: grid;
justify-items: last baseline;
width: 200px;
border: solid 3px;
position: relative;
}
#target > :nth-child(1) {
background: lime;
margin-right: 20px;
padding-right: 20px;
font-size: 20px;
line-height: 20px;
justify-self: first baseline;
writing-mode: vertical-rl;
}
#target > :nth-child(2) {
background: hotpink;
font-size: 30px;
line-height: 30px;
writing-mode: vertical-lr;
}
#target > :nth-child(3) {
background: papayawhip;
font-size: 16px;
line-height: 16px;
writing-mode: vertical-lr;
}
#target > :nth-child(4) {
background: orange;
margin-left: 20px;
padding-left: 20px;
font-size: 20px;
line-height: 20px;
justify-self: first baseline;
writing-mode: vertical-lr;
}
#target > :nth-child(5) {
background: cyan;
font-size: 30px;
line-height: 30px;
writing-mode: vertical-rl;
}
#target > :nth-child(6) {
background: papayawhip;
font-size: 16px;
line-height: 16px;
writing-mode: vertical-rl;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('#target > div')">
<div id="target">
<div data-offset-x="120">line1<br>line2</div>
<div data-offset-x="105">line1<br>line2</div>
<div data-offset-x="126">line1<br>line2</div>
<div data-offset-x="20">line1<br>line2</div>
<div data-offset-x="35">line1<br>line2</div>
<div data-offset-x="42">line1<br>line2</div>
</div>

51
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-justify-baseline-003.html Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
<style>
#target {
display: grid;
grid-template-columns: 120px;
justify-items: last baseline;
width: 200px;
border: solid 3px;
position: relative;
line-height: 0;
writing-mode: vertical-lr;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cornflowerblue 3px;
outline-offset: -3px;
}
#target > div {
flex: none;
}
#target > :nth-child(1) {
background: lime;
margin-bottom: 20px;
padding-bottom: 20px;
font-size: 20px;
writing-mode: horizontal-tb;
}
#target > :nth-child(2) {
background: hotpink;
font-size: 30px;
writing-mode: horizontal-tb;
}
#target > :nth-child(3) {
background: papayawhip;
font-size: 10px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('#target > div')">
<div id="target">
<div data-offset-y="40"><span></span><br><span></span></div>
<div data-offset-y="20"><span></span><br><span></span></div>
<div data-offset-y="75"><span></span><br><span></span></div>
</div>

51
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-justify-baseline-004.html Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
<style>
#target {
display: grid;
grid-template-columns: 120px;
justify-items: last baseline;
width: 200px;
border: solid 3px;
position: relative;
line-height: 0;
writing-mode: vertical-rl;
}
span {
display: inline-block;
width: 1em;
height: 1em;
outline: solid cornflowerblue 3px;
outline-offset: -3px;
}
#target > div {
flex: none;
}
#target > :nth-child(1) {
background: lime;
margin-bottom: 20px;
padding-bottom: 20px;
font-size: 20px;
writing-mode: horizontal-tb;
}
#target > :nth-child(2) {
background: hotpink;
font-size: 30px;
writing-mode: horizontal-tb;
}
#target > :nth-child(3) {
background: papayawhip;
font-size: 10px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('#target > div')">
<div id="target">
<div data-offset-y="40"><span></span><br><span></span></div>
<div data-offset-y="20"><span></span><br><span></span></div>
<div data-offset-y="75"><span></span><br><span></span></div>
</div>

26
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-justify-baseline-005.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
<style>
#target {
display: grid;
grid-template: 50px 50px 50px 50px / 50px 50px 50px;
width: 200px;
border: solid 3px;
position: relative;
line-height: 20px;
}
#target > div {
writing-mode: vertical-rl;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('#target > div')">
<div id="target">
<div style="grid-row: 1; grid-column: 3; justify-self: baseline; margin-right: 10px;" data-offset-x="100">line1<br>line2</div>
<div style="grid-row: 2; grid-column: span 3; justify-self: baseline;" data-offset-x="100">line1<br>line2</div>
<div style="grid-row: 3; grid-column: 1; justify-self: last baseline; margin-left: 10px;" data-offset-x="10">line1<br>line2</div>
<div style="grid-row: 4; grid-column: span 3; justify-self: last baseline;" data-offset-x="10">line1<br>line2</div>
</div>

2
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
View file

@ -41,7 +41,7 @@
<div class="grid width300 justifyItemsBaseline">
<div class="firstRowFirstColumn" data-offset-x="0" 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="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="75" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>

2
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html
View file

@ -52,7 +52,7 @@
<div class="grid width300 justifyItemsBaseline">
<div class="firstRowFirstColumn fixedWidth" data-offset-x="0" 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="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="80" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>

2
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html
View file

@ -52,7 +52,7 @@
<div class="grid width300 justifyItemsBaseline">
<div class="firstRowFirstColumn relativeWidth" data-offset-x="00" 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="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="80" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>

10
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html
View file

@ -40,8 +40,9 @@
</script>
<body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })">
<pre>Horizontal grid and verticalLR item with relative width</pre>
<pre>Horizontal grid and verticalLR item with fixed width</pre>
<!-- The two items share a baseline group. -->
<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>
@ -50,9 +51,10 @@
<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>
<!-- The two items *do not* share a baseline group. -->
<div class="inline-grid justifyItemsBaseline" data-expected-width="150" data-expected-height="300">
<div class="firstRowFirstColumn fixedWidth" data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
<div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="5" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>

2
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html
View file

@ -11,7 +11,6 @@
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
<link rel="stylesheet" href="/css/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.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.inline-grid {
@ -54,6 +53,7 @@
setup({ explicit_done: true });
</script>
<body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })">
<!-- NOTE: previously this test was asserting some "cyclic" behaviour where an item would switch baseline alignment participation - this is no longer the case per spec. -->
<div style="height: 125px">
<pre>auto-sized rows - items with relative height</pre>
<div class="inline-grid alignItemsBaseline columns">

100
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html
View file

@ -11,7 +11,6 @@
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
<link rel="stylesheet" href="/css/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.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.inline-grid {
@ -58,82 +57,83 @@
</script>
<body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })">
<!-- NOTE: previously this test was asserting some "cyclic" behaviour where an item would switch baseline alignment participation - this is no longer the case per spec. -->
<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 class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="97" 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="137">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="137" 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 class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="59" 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="99">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="99" 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 class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="59" 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="99">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="99" 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 class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="59" 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="99">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="99" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>flex-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
<div class="inline-grid alignItemsBaseline columns flex-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 class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="59" 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="99">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="99" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>max-flex-sized rows - horizonal grid and verticalLR item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
<div class="inline-grid alignItemsBaseline columns auto-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 class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="59" 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="99">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="99" 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="secondRowFirstColumn" data-offset-x="35" 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 class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="99" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="99" 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 class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="451" 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 class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="451" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>flex-sized columns - horizontal grid item - row-axis baseline</pre>
<div class="inline-grid justifyItemsBaseline rows flex-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 class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="451" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>max-flex-sized columns - horizontal grid item - row-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
@ -147,36 +147,36 @@
<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="firstRowSecondColumn horizontalTB" data-offset-x="35" 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 class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="99" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="99" 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 class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="451" 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 class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="451" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>flex-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
<div class="inline-grid verticalLR alignItemsBaseline columns flex-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 class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="451" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>max-flex-sized rows - verticalLR grid and horizontal item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
@ -190,48 +190,48 @@
<pre>auto-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
<div class="inline-grid verticalRL alignItemsBaseline columns width200">
<div class="firstRowFirstColumn bigFont paddingLeft" 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 class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="28" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="63" data-offset-y="100" data-expected-width="137" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="38" 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>
<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
<div class="inline-grid verticalRL alignItemsBaseline columns min-content-rows">
<div class="firstRowFirstColumn bigFont paddingLeft" 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="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" 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="99" 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>
<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
<div class="inline-grid verticalRL alignItemsBaseline columns max-content-rows">
<div class="firstRowFirstColumn bigFont paddingLeft" 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="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" 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="99" 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>
<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
<div class="inline-grid verticalRL alignItemsBaseline auto-columns fit-content-rows">
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="99" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div>
</div>
<pre>flex-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
<div class="inline-grid verticalRL alignItemsBaseline auto-columns flex-rows">
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="99" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div>
</div>
<pre>max-flex-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
<div class="inline-grid verticalRL alignItemsBaseline auto-columns max-flex-rows">
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="99" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div>
</div>

22
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html
View file

@ -11,7 +11,6 @@
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
<link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Items not participating in baseline may later participate if there is an extra pass of the track sizing algorithm.">
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
@ -48,44 +47,45 @@
</script>
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
<pre>flex rows - column-axis baseline - the blue orthogonal item didn't participate in the first iteration</pre>
<!-- NOTE: previously this test was asserting some "cyclic" behaviour where an item would switch baseline alignment participation - this is no longer the case per spec. -->
<pre>flex row</pre>
<div class="grid row alignItemsBaseline">
<div class="item1 verticalLR" data-offset-x="0" data-offset-y="34" data-expected-width="30" data-expected-height="30">É</div>
<div class="item2" data-offset-x="30" data-offset-y="48" data-expected-width="50" data-expected-height="20">É</div>
<div class="item3" data-offset-x="80" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
</div>
<pre>flex row - column-axis baseline - the blue relative sized item didn't participate in the first iterarion</pre>
<div class="grid row alignItemsBaseline ">
<div class="item1 relativeHeight" data-offset-x="0" data-offset-y="56" data-expected-width="30" data-expected-height="40">É</div>
<pre>flex row</pre>
<div class="grid row alignItemsBaseline">
<div class="item1 relativeHeight" data-offset-x="0" data-offset-y="56" data-expected-width="30" data-expected-height="43">É</div>
<div class="item2" data-offset-x="30" data-offset-y="64" data-expected-width="50" data-expected-height="20">É</div>
<div class="item3 verticalLR" data-offset-x="80" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
</div>
<pre>flex row - both the blue relative sized and red orthogonal didn't participate in the first iteration</pre>
<pre>flex row</pre>
<div class="grid row alignItemsBaseline">
<div class="item1 relativeHeight" data-offset-x="0" data-offset-y="40" data-expected-width="30" data-expected-height="40">É</div>
<div class="item2 verticalLR" data-offset-x="30" data-offset-y="44" data-expected-width="50" data-expected-height="20">É</div>
<div class="item3" data-offset-x="80" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
</div>
<pre>flex column - row-axis baseline - the blue orthogonal item didn't participate in the first iteration</pre>
<pre>flex column - all items share a baseline group</pre>
<div class="grid column justifyItemsBaseline">
<div class="item1" data-offset-x="16" data-offset-y="0" data-expected-width="30" data-expected-height="30">É</div>
<div class="item2 verticalLR" data-offset-x="12" data-offset-y="30" data-expected-width="20" data-expected-height="50">É</div>
<div class="item3 verticalLR" data-offset-x="0" data-offset-y="80" data-expected-width="80" data-expected-height="100">É</div>
</div>
<pre>flex column - column-axis baseline - the blue relative sized item didn't participate in the first iterarion</pre>
<pre>flex column - all items share a baseline group</pre>
<div class="grid column justifyItemsBaseline">
<div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0" data-expected-width="40" data-expected-height="50">É</div>
<div class="item1 relativeWidth height50" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="50">É</div>
<div class="item2 verticalLR" data-offset-x="12" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div>
<div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
</div>
<pre>flex columns - both the blue relative sized and red orthogonal didn't participate in the first iteration</pre>
<pre>flex column - all items share a baseline group</pre>
<div class="grid column justifyItemsBaseline">
<div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0" data-expected-width="40" data-expected-height="50">É</div>
<div class="item1 relativeWidth height50" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="50">É</div>
<div class="item2" data-offset-x="16" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div>
<div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
</div>

2
tests/wpt/web-platform-tests/css/css-grid/alignment/references/grid-baseline-align-cycles-001-ref.html
View file

@ -20,7 +20,7 @@
.index {
padding: 1em 0;
}
.percent, .orthognal {
.percent, .orthogonal {
height: 1em;
}

18
tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html
View file

@ -37,5 +37,19 @@ body { margin: 0; }
</style>
<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
<div class="block verticalLR"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
<div class="block verticalLR"><div class="block1"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
<div class="block verticalLR">
<div class="block1">
<div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
</div>
<div class="block2 verticalRL" style="margin-left: 23px;">
<div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
</div>
</div>
<div class="block verticalLR">
<div class="block1">
<div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div>
</div>
<div class="block2 verticalRL" style="margin-left: 23px;">
<div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
</div>
</div>

36
tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html
View file

@ -36,7 +36,35 @@ body { margin: 0; }
</style>
<p>1x4 with parallel items, but opposite block-flow direction.</p>
<div class="block verticalLR"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
<div class="block verticalLR"><div class="block1"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
<div class="block verticalRL"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
<div class="block verticalRL"><div class="block1"><div class="area"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
<div class="block verticalLR">
<div class="block1">
<div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
</div>
<div class="block2 verticalRL" style="margin-left: 73px;">
<div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
</div>
</div>
<div class="block verticalLR">
<div class="block1">
<div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div>
</div>
<div class="block2 verticalRL" style="margin-left: 73px;">
<div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
</div>
</div>
<div class="block verticalRL">
<div class="block1">
<div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
</div>
<div class="block2 verticalLR" style="margin-right: 73px;">
<div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
</div>
</div>
<div class="block verticalRL">
<div class="block1">
<div class="area"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div>
</div>
<div class="block2 verticalLR" style="margin-right: 73px;">
<div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
</div>
</div>

13
tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002-ref.html
View file

@ -25,18 +25,15 @@ body { margin: 0; }
}
.extraTopPadding { padding-top: 30px; }
.extraBottomPadding { padding-bottom: 30px; }
.top { vertical-align: top; }
.item { display: inline-block; }
.item.verticalLR, .item.verticalRL { margin: 10px 6px 4px 12px; }
.item.horizontalTB { margin: 10px 6px 4px 0px; }
.item.verticalLR, .item.verticalRL { margin-bottom: 0px; }
</style>
<p>1x4 with parallel and orthogonal items.</p>
<div class="block"><div class="item">É</div><div class="item verticalLR top">É</div><div class="item">É</div><div class="item verticalLR top">É</div></div>
<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalLR extraTopPadding top">É</div><div class="item">É</div><div class="item verticalLR top">É</div></div>
<div class="block"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalLR extraTopPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
<br clear="all">
<div class="block"><div class="item">É</div><div class="item verticalRL top">É</div><div class="item">É</div><div class="item verticalRL top">É</div></div>
<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalRL extraTopPadding top">É</div><div class="item">É</div><div class="item verticalRL top">É</div></div>
<div class="block"><div class="item">É</div><div class="item verticalRL">É</div><div class="item">É</div><div class="item verticalRL">É</div></div>
<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalRL extraTopPadding">É</div><div class="item">É</div><div class="item verticalRL">É</div></div>

10
tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003-ref.html
View file

@ -26,12 +26,12 @@ body { margin: 0; }
}
.extraTopPadding { padding-top: 30px; }
.extraBottomPadding { padding-bottom: 30px; }
.top { vertical-align: top; }
.item { display: inline-block; }
.item.verticalLR, .item.verticalRL { margin-bottom: 0px; }
</style>
<p>1x4 with orthogonal items.</p>
<div class="block"><div class="item verticalLR top">É</div><div class="item verticalLR top">É</div><div class="item verticalLR top">É</div><div class="item verticalLR top">É</div></div>
<div class="block" ><div class="item verticalLR extraTopPadding top">É</div><div class="item verticalLR top">É</div><div class="item verticalLR extraBottomPadding top">É</div><div class="item verticalLR top">É</div></div>
<div class="block"><div class="item verticalRL top">É</div><div class="item verticalRL top">É</div><div class="item verticalRL top">É</div><div class="item verticalRL top">É</div></div>
<div class="block" ><div class="item verticalRL extraTopPadding top">É</div><div class="item verticalRL top">É</div><div class="item verticalRL extraBottomPadding top">É</div><div class="item verticalRL top">É</div></div>
<div class="block"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
<div class="block" ><div class="item verticalLR extraTopPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR extraBottomPadding">É</div><div class="item verticalLR">É</div></div>
<div class="block"><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
<div class="block" ><div class="item verticalRL extraTopPadding">É</div><div class="item verticalRL">É</div><div class="item verticalRL extraBottomPadding">É</div><div class="item verticalRL">É</div></div>

5
tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005-ref.html
View file

@ -28,11 +28,12 @@ body { margin: 0; }
.extraRightPadding { padding-right: 30px; }
.inline { display: inline-block; }
.item { display: inline-block; }
.item.horizontalTB:not(.bottom) { margin-left: 0px; }
.bottom { vertical-align: bottom; }
</style>
<p>4x1 with parallel and orthogonal items.</p>
<div class="block verticalLR"><div class="item horizontalTB bottom">É</div><div class="item">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
<div class="block verticalLR"><div class="item horizontalTB bottom extraRightPadding">É</div><div class="item extraLeftPadding">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
<div class="block verticalLR"><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
<div class="block verticalLR"><div class="item horizontalTB extraRightPadding">É</div><div class="item extraLeftPadding">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
<div class="block verticalRL"><div class="item horizontalTB bottom">É</div><div class="item">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
<div class="block verticalRL"><div class="item horizontalTB bottom extraRightPadding">É</div><div class="item extraLeftPadding">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>

18
tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html
View file

@ -31,5 +31,19 @@ body { margin: 0; }
</style>
<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
<div class="block verticalLR"><div class="block1"><div class="item">É</div><div class="item">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div></div>
<div class="block verticalLR"><div class="block1"><div class="item extraRightPadding">É</div><div class="item extraLeftPadding">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div>
<div class="block verticalLR">
<div class="block1">
<div class="item">É</div><div class="item">É</div>
</div>
<div class="block2 verticalRL">
<div class="item">É</div><div class="item">É</div>
</div>
</div>
<div class="block verticalLR">
<div class="block1">
<div class="item extraRightPadding">É</div><div class="item extraLeftPadding">É</div>
</div>
<div class="block2 verticalRL" style="margin-left: 10px;">
<div class="item">É</div><div class="item">É</div>
</div>
</div>

6
tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002-ref.html
View file

@ -26,9 +26,9 @@ body { margin: 0; }
.extraLeftPadding { padding-left: 30px; }
.extraRightPadding { padding-right: 30px; }
.item { display: inline-block; }
.bottom { vertical-align: bottom; }
.item.horizontalTB { margin-left: 0px; }
</style>
<p>1x4 with parallel and orthogonal items.</p>
<div class="block verticalLR"><div class="item bottom horizontalTB">É</div><div class="item">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
<div class="block verticalLR"><div class="item bottom horizontalTB extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
<div class="block verticalLR"><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
<div class="block verticalLR"><div class="item horizontalTB extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>

5
tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004-ref.html
View file

@ -26,9 +26,8 @@ body { margin: 0; }
}
.extraTopPadding { padding-top: 30px; }
.item { display: inline-block; }
.top { vertical-align: top; }
</style>
<p>1x4 with orthogonal items.</p>
<div class="block"><div class="item top verticalLR">É</div><div class="item top verticalLR">É</div><div class="item top verticalLR">É</div><div class="item top verticalLR">É</div></div>
<div class="block"><div class="item top verticalLR extraTopPadding">É</div><div class="item top verticalLR">É</div><div class="item top verticalLR">É</div><div class="item top verticalLR">É</div></div>
<div class="block"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
<div class="block"><div class="item verticalLR extraTopPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>

5
tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005-ref.html
View file

@ -28,9 +28,8 @@ body { margin: 0; }
.item { display: inline-block; }
.item.verticalLR, .item.verticalRL { margin: 10px 6px 0px 12px; }
.item.horizontalTB { margin: 10px 6px 4px 0px; }
.top { vertical-align: top; }
</style>
<p>4x1 with parallel and orthogonal items.</p>
<div class="block"><div class="item top verticalLR">É</div><div class="item">É</div><div class="item top verticalLR">É</div><div class="item">É</div></div>
<div class="block"><div class="item top verticalLR extraTopPadding">É</div><div class="item extraBottomPadding">É</div><div class="item top verticalLR">É</div><div class="item">É</div></div>
<div class="block"><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div></div>
<div class="block"><div class="item verticalLR extraTopPadding">É</div><div class="item extraBottomPadding">É</div><div class="item verticalLR">É</div><div class="item">É</div></div>

18
tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html
View file

@ -30,5 +30,19 @@ body { margin: 0; }
</style>
<p>1x4 with parallel items, but opposite block-flow direction.</p>
<div class="block verticalLR"><div class="block1"><div class="item">É</div><div class="item">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div>
<div class="block verticalLR"><div class="block1"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div></div>
<div class="block verticalLR">
<div class="block1">
<div class="item">É</div><div class="item">É</div>
</div>
<div class="block2 verticalRL">
<div class="item">É</div><div class="item">É</div>
</div>
</div>
<div class="block verticalLR">
<div class="block1">
<div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div>
</div>
<div class="block2 verticalRL" style="margin-left:15.5px;">
<div class="item">É</div><div class="item">É</div>
</div>
</div>

6
tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002-ref.html
View file

@ -26,9 +26,9 @@ body { margin: 0; }
.extraLeftPadding { padding-left: 30px; }
.extraRightPadding { padding-right: 30px; }
.item { display: inline-block; }
.top { vertical-align: top; }
.item.horizontalTB { margin-left: 0px; }
</style>
<p>1x4 with parallel and orthogonal items.</p>
<div class="block verticalRL"><div class="item top horizontalTB">É</div><div class="item">É</div><div class="item top horizontalTB">É</div><div class="item">É</div></div>
<div class="block verticalRL"><div class="item top horizontalTB extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item top horizontalTB">É</div><div class="item">É</div></div>
<div class="block verticalRL"><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
<div class="block verticalRL"><div class="item horizontalTB extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>

5
tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003-ref.html
View file

@ -27,9 +27,8 @@ body { margin: 0; }
.extraLeftPadding { padding-left: 30px; }
.extraRightPadding { padding-right: 30px; }
.item { display: inline-block; }
.top { vertical-align: top; }
</style>
<p>1x4 with orthogonal items.</p>
<div class="block verticalRL"><div class="item top horizontalTB">É</div><div class="item top horizontalTB">É</div><div class="item top horizontalTB">É</div><div class="item top horizontalTB">É</div></div>
<div class="block verticalRL"><div class="item top horizontalTB extraLeftPadding">É</div><div class="item top horizontalTB extraRightPadding">É</div><div class="item top horizontalTB">É</div><div class="item top horizontalTB">É</div></div>
<div class="block verticalRL"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
<div class="block verticalRL"><div class="item horizontalTB extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>

5
tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004-ref.html
View file

@ -26,9 +26,8 @@ body { margin: 0; }
}
.extraBottomPadding { padding-bottom: 30px; }
.item { display: inline-block; }
.top { vertical-align: top; }
</style>
<p>4x1 with parallel items.</p>
<div class="block directionRTL"><div class="item top verticalRL">É</div><div class="item top verticalRL">É</div><div class="item top verticalRL">É</div><div class="item top verticalRL">É</div></div>
<div class="block directionRTL"><div class="item top verticalRL extraBottomPadding">É</div><div class="item top verticalRL">É</div><div class="item top verticalRL">É</div><div class="item top verticalRL">É</div></div>
<div class="block directionRTL"><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
<div class="block directionRTL"><div class="item verticalRL extraBottomPadding">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>

6
tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005-ref.html
View file

@ -26,9 +26,9 @@ body { margin: 0; }
.extraTopPadding { padding-top: 30px; }
.extraBottomPadding { padding-bottom: 30px; }
.item { display: inline-block; }
.top { vertical-align: top; }
.item.verticalRL { margin-bottom: 0px; }
</style>
<p>4x1 with parallel and orthogonal items.</p>
<div class="block directionRTL"><div class="item top verticalRL">É</div><div class="item">É</div><div class="item top verticalRL">É</div><div class="item">É</div></div>
<div class="block directionRTL"><div class="item top verticalRL extraTopPadding">É</div><div class="item extraBottomPadding">É</div><div class="item top verticalRL">É</div><div class="item">É</div></div>
<div class="block directionRTL"><div class="item verticalRL">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item">É</div></div>
<div class="block directionRTL"><div class="item verticalRL extraTopPadding">É</div><div class="item extraBottomPadding">É</div><div class="item verticalRL">É</div><div class="item">É</div></div>

18
tests/wpt/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html
View file

@ -30,5 +30,19 @@ body { margin: 0; }
</style>
<p>1x4 with parallel items, but opposite block-flow direction.</p>
<div class="block verticalRL"><div class="block1"><div class="item">É</div><div class="item">É</div></div><div class="block2 verticalLR"><div class="item">É</div><div class="item">É</div></div></div>
<div class="block verticalRL"><div class="block1"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div></div><div class="block2 verticalLR"><div class="item">É</div><div class="item">É</div></div></div></div>
<div class="block verticalRL">
<div class="block1">
<div class="item">É</div><div class="item">É</div>
</div>
<div class="block2 verticalLR">
<div class="item">É</div><div class="item">É</div>
</div>
</div>
<div class="block verticalRL">
<div class="block1">
<div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div>
</div>
<div class="block2 verticalLR" style="margin-right: 16px;">
<div class="item">É</div><div class="item">É</div>
</div>
</div>