Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 14:10:11 +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

36
tests/wpt/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html
View file

@ -9,6 +9,7 @@
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7596#issuecomment-1225952646">
<meta charset="utf-8">
<style>
.container {
@ -38,10 +39,9 @@
background: teal;
height: 6px;
width: 8px;
/* This "align-self" only gets a chance to take effect when our container
has "align-content: stretch". In that case, it helps us verify that
the container's "align-content: stretch" is actually taking effect
and stretching the flex line (and giving us space to center in). */
/* This "align-self" is actually the only alignment that matters here.
The flex containers' various "align-content" values have no impact on
the positioning of absolutely-positioned flex children. */
align-self: center;
}
</style>
@ -57,23 +57,23 @@
<div class="container" style="align-content: normal"><div data-offset-x="2" data-offset-y="3"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="3"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="2" data-offset-y="3"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="3"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="3"></div></div>
<br>
</div>
<div class="small">
@ -83,23 +83,23 @@
<div class="container" style="align-content: normal"><div data-offset-x="2" data-offset-y="-1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="-1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="2" data-offset-y="-1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="-1"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="-1"></div></div>
<br>
</div>
</body>

106
tests/wpt/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-002.html
View file

@ -1,106 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "align-content" values</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
<meta charset="utf-8">
<style>
.container {
display: flex;
position: relative;
flex-flow: row wrap-reverse;
padding: 1px 2px;
border: 1px solid black;
background: yellow;
margin-bottom: 5px;
margin-right: 5px;
float: left; /* For testing in "rows" of containers */
}
br { clear: both }
.big > .container {
height: 10px;
width: 16px;
}
.small > .container {
height: 2px;
width: 4px;
}
.container > * {
position: absolute;
background: teal;
height: 6px;
width: 8px;
/* This "align-self" only gets a chance to take effect when our container
has "align-content: stretch". In that case, it helps us verify that
the container's "align-content: stretch" is actually taking effect
and stretching the flex line (and giving us space to center in). */
align-self: center;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.container > div')">
<div class="big">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="2" data-offset-y="3"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="5"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="2" data-offset-y="3"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
</div>
<div class="small">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="2" data-offset-y="-1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="-3"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="2" data-offset-y="-1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
</div>
</body>
</html>

106
tests/wpt/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003.html
View file

@ -1,106 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "align-content" values</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
<meta charset="utf-8">
<style>
.container {
display: flex;
position: relative;
flex-flow: row-reverse wrap;
padding: 1px 2px;
border: 1px solid black;
background: yellow;
margin-bottom: 5px;
margin-right: 5px;
float: left; /* For testing in "rows" of containers */
}
br { clear: both }
.big > .container {
height: 10px;
width: 16px;
}
.small > .container {
height: 2px;
width: 4px;
}
.container > * {
position: absolute;
background: teal;
height: 6px;
width: 8px;
/* This "align-self" only gets a chance to take effect when our container
has "align-content: stretch". In that case, it helps us verify that
the container's "align-content: stretch" is actually taking effect
and stretching the flex line (and giving us space to center in). */
align-self: center;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.container > div')">
<div class="big">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="10" data-offset-y="3"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="10" data-offset-y="3"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
</div>
<div class="small">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
</div>
</body>
</html>

106
tests/wpt/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-004.html
View file

@ -1,106 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "align-content" values</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
<meta charset="utf-8">
<style>
.container {
display: flex;
position: relative;
flex-flow: row-reverse wrap-reverse;
padding: 1px 2px;
border: 1px solid black;
background: yellow;
margin-bottom: 5px;
margin-right: 5px;
float: left; /* For testing in "rows" of containers */
}
br { clear: both }
.big > .container {
height: 10px;
width: 16px;
}
.small > .container {
height: 2px;
width: 4px;
}
.container > * {
position: absolute;
background: teal;
height: 6px;
width: 8px;
/* This "align-self" only gets a chance to take effect when our container
has "align-content: stretch". In that case, it helps us verify that
the container's "align-content: stretch" is actually taking effect
and stretching the flex line (and giving us space to center in). */
align-self: center;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.container > div')">
<div class="big">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="10" data-offset-y="3"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="5"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="10" data-offset-y="3"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="5"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
</div>
<div class="small">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
</div>
</body>
</html>

106
tests/wpt/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005.html
View file

@ -1,106 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Test: Static position of abspos children in a column flex container, with various "align-content" values</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
<meta charset="utf-8">
<style>
.container {
display: flex;
position: relative;
flex-flow: column wrap;
padding: 1px 2px;
border: 1px solid black;
background: yellow;
margin-bottom: 5px;
margin-right: 5px;
float: left; /* For testing in "rows" of containers */
}
br { clear: both }
.big > .container {
height: 10px;
width: 16px;
}
.small > .container {
height: 2px;
width: 4px;
}
.container > * {
position: absolute;
background: teal;
height: 6px;
width: 8px;
/* This "align-self" only gets a chance to take effect when our container
has "align-content: stretch". In that case, it helps us verify that
the container's "align-content: stretch" is actually taking effect
and stretching the flex line (and giving us space to center in). */
align-self: center;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.container > div')">
<div class="big">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="6" data-offset-y="1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="6" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
</div>
<div class="small">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="0" data-offset-y="1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="0" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
</div>
</body>
</html>

106
tests/wpt/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-006.html
View file

@ -1,106 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "align-content" values</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
<meta charset="utf-8">
<style>
.container {
display: flex;
position: relative;
flex-flow: column wrap-reverse;
padding: 1px 2px;
border: 1px solid black;
background: yellow;
margin-bottom: 5px;
margin-right: 5px;
float: left; /* For testing in "rows" of containers */
}
br { clear: both }
.big > .container {
height: 10px;
width: 16px;
}
.small > .container {
height: 2px;
width: 4px;
}
.container > * {
position: absolute;
background: teal;
height: 6px;
width: 8px;
/* This "align-self" only gets a chance to take effect when our container
has "align-content: stretch". In that case, it helps us verify that
the container's "align-content: stretch" is actually taking effect
and stretching the flex line (and giving us space to center in). */
align-self: center;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.container > div')">
<div class="big">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="6" data-offset-y="1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="6" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
</div>
<div class="small">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="0" data-offset-y="1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="0" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
</div>
</body>
</html>

106
tests/wpt/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-007.html
View file

@ -1,106 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "align-content" values</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
<meta charset="utf-8">
<style>
.container {
display: flex;
position: relative;
flex-flow: column-reverse wrap;
padding: 1px 2px;
border: 1px solid black;
background: yellow;
margin-bottom: 5px;
margin-right: 5px;
float: left; /* For testing in "rows" of containers */
}
br { clear: both }
.big > .container {
height: 10px;
width: 16px;
}
.small > .container {
height: 2px;
width: 4px;
}
.container > * {
position: absolute;
background: teal;
height: 6px;
width: 8px;
/* This "align-self" only gets a chance to take effect when our container
has "align-content: stretch". In that case, it helps us verify that
the container's "align-content: stretch" is actually taking effect
and stretching the flex line (and giving us space to center in). */
align-self: center;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.container > div')">
<div class="big">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="6" data-offset-y="5"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="6" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
</div>
<div class="small">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="0" data-offset-y="-3"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="0" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
</div>
</body>
</html>

106
tests/wpt/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-008.html
View file

@ -1,106 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "align-content" values</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
<meta charset="utf-8">
<style>
.container {
display: flex;
position: relative;
flex-flow: column-reverse wrap-reverse;
padding: 1px 2px;
border: 1px solid black;
background: yellow;
margin-bottom: 5px;
margin-right: 5px;
float: left; /* For testing in "rows" of containers */
}
br { clear: both }
.big > .container {
height: 10px;
width: 16px;
}
.small > .container {
height: 2px;
width: 4px;
}
.container > * {
position: absolute;
background: teal;
height: 6px;
width: 8px;
/* This "align-self" only gets a chance to take effect when our container
has "align-content: stretch". In that case, it helps us verify that
the container's "align-content: stretch" is actually taking effect
and stretching the flex line (and giving us space to center in). */
align-self: center;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.container > div')">
<div class="big">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="6" data-offset-y="5"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="5"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="6" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="5"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="5"></div></div>
<br>
</div>
<div class="small">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="0" data-offset-y="-3"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="0" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="-3"></div></div>
<br>
</div>
</body>
</html>

107
tests/wpt/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-001.html
View file

@ -1,107 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Test: Static position of abspos children in a RTL row flex container, with various "align-content" values</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
<meta charset="utf-8">
<style>
.container {
display: flex;
position: relative;
flex-flow: row wrap;
direction: rtl;
padding: 1px 2px;
border: 1px solid black;
background: yellow;
margin-bottom: 5px;
margin-right: 5px;
float: left; /* For testing in "rows" of containers */
}
br { clear: both }
.big > .container {
height: 10px;
width: 16px;
}
.small > .container {
height: 2px;
width: 4px;
}
.container > * {
position: absolute;
background: teal;
height: 6px;
width: 8px;
/* This "align-self" only gets a chance to take effect when our container
has "align-content: stretch". In that case, it helps us verify that
the container's "align-content: stretch" is actually taking effect
and stretching the flex line (and giving us space to center in). */
align-self: center;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.container > div')">
<div class="big">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="10" data-offset-y="3"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="10" data-offset-y="3"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
</div>
<div class="small">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
</div>
</body>
</html>

107
tests/wpt/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-002.html
View file

@ -1,107 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Test: Static position of abspos children in a RTL column flex container, with various "align-content" values</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
<meta charset="utf-8">
<style>
.container {
display: flex;
position: relative;
flex-flow: column wrap;
direction: rtl;
padding: 1px 2px;
border: 1px solid black;
background: yellow;
margin-bottom: 5px;
margin-right: 5px;
float: left; /* For testing in "rows" of containers */
}
br { clear: both }
.big > .container {
height: 10px;
width: 16px;
}
.small > .container {
height: 2px;
width: 4px;
}
.container > * {
position: absolute;
background: teal;
height: 6px;
width: 8px;
/* This "align-self" only gets a chance to take effect when our container
has "align-content: stretch". In that case, it helps us verify that
the container's "align-content: stretch" is actually taking effect
and stretching the flex line (and giving us space to center in). */
align-self: center;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.container > div')">
<div class="big">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="6" data-offset-y="1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="6" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
</div>
<div class="small">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="0" data-offset-y="1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="0" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
</div>
</body>
</html>

107
tests/wpt/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-001.html
View file

@ -1,107 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Test: Static position of abspos children in a vertical-rl row flex container, with various "align-content" values</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
<meta charset="utf-8">
<style>
.container {
display: flex;
position: relative;
flex-flow: row wrap;
writing-mode: vertical-rl;
padding: 1px 2px;
border: 1px solid black;
background: yellow;
margin-bottom: 5px;
margin-right: 5px;
float: left; /* For testing in "rows" of containers */
}
br { clear: both }
.big > .container {
height: 10px;
width: 16px;
}
.small > .container {
height: 2px;
width: 4px;
}
.container > * {
position: absolute;
background: teal;
height: 6px;
width: 8px;
/* This "align-self" only gets a chance to take effect when our container
has "align-content: stretch". In that case, it helps us verify that
the container's "align-content: stretch" is actually taking effect
and stretching the flex line (and giving us space to center in). */
align-self: center;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.container > div')">
<div class="big">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="6" data-offset-y="1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="6" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
</div>
<div class="small">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="0" data-offset-y="1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="0" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
</div>
</body>
</html>

107
tests/wpt/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-002.html
View file

@ -1,107 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "align-content" values</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
<meta charset="utf-8">
<style>
.container {
display: flex;
position: relative;
flex-flow: column wrap;
writing-mode: vertical-rl;
padding: 1px 2px;
border: 1px solid black;
background: yellow;
margin-bottom: 5px;
margin-right: 5px;
float: left; /* For testing in "rows" of containers */
}
br { clear: both }
.big > .container {
height: 10px;
width: 16px;
}
.small > .container {
height: 2px;
width: 4px;
}
.container > * {
position: absolute;
background: teal;
height: 6px;
width: 8px;
/* This "align-self" only gets a chance to take effect when our container
has "align-content: stretch". In that case, it helps us verify that
the container's "align-content: stretch" is actually taking effect
and stretching the flex line (and giving us space to center in). */
align-self: center;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.container > div')">
<div class="big">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="10" data-offset-y="3"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="10" data-offset-y="3"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
</div>
<div class="small">
<!-- The various align-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="align-content: normal"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container" style="align-content: baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: stretch"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="align-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="align-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="align-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
</div>
</body>
</html>

87
tests/wpt/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001-ref.html
View file

@ -1,87 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Reference</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<meta charset="utf-8">
<style>
.container {
display: block;
padding: 1px 2px;
border: 1px solid black;
background: yellow;
margin-bottom: 5px;
margin-right: 5px;
float: left; /* For testing in "rows" of containers */
}
br { clear: both }
.big > .container {
height: 10px;
width: 16px;
}
.small > .container {
height: 2px;
width: 4px;
}
.container > * {
background: teal;
height: 6px;
width: 8px;
}
.big .alignStart { /* nothing special */ }
.big .alignCenter { margin-top: 2px }
.big .alignEnd { margin-top: 4px }
.small .alignStart { /* nothing special */ }
.small .alignCenter { margin-top: -2px }
.small .alignEnd { margin-top: -4px }
</style>
</head>
<body>
<div class="big">
<!-- <content-distribution> with implied fallback -->
<div class="container"><div class="alignStart"><!--space-between--></div></div>
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <content-distribution> with explicit "flex-end" fallback -->
<div style="display: none">
<!--
These tests will be valid when
https://github.com/w3c/csswg-drafts/issues/1002 is fixed
-->
<div class="container"><div class="alignEnd"><!--space-between--></div></div>
<div class="container"><div class="alignEnd"><!--space-around--></div></div>
<div class="container"><div class="alignEnd"><!--space-evenly--></div></div>
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
</div>
<br>
</div>
<div class="small">
<!-- <content-distribution> with implied fallback -->
<div class="container"><div class="alignStart"><!--space-between--></div></div>
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <content-distribution> with explicit "flex-end" fallback -->
<div style="display: none">
<!--
These tests will be valid when
https://github.com/w3c/csswg-drafts/issues/1002 is fixed
-->
<div class="container"><div class="alignEnd"><!--space-between--></div></div>
<div class="container"><div class="alignEnd"><!--space-around--></div></div>
<div class="container"><div class="alignEnd"><!--space-evenly--></div></div>
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
</div>
<br>
</div>
</body>
</html>

76
tests/wpt/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001.html
View file

@ -1,76 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Test: Static position of abspos children in a row flex container, with various "align-content" values with explicit fallback values</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
<link rel="match" href="flex-abspos-staticpos-fallback-align-content-001-ref.html">
<meta charset="utf-8">
<style>
.container {
display: flex;
flex-flow: row wrap;
padding: 1px 2px;
border: 1px solid black;
background: yellow;
margin-bottom: 5px;
margin-right: 5px;
float: left; /* For testing in "rows" of containers */
}
br { clear: both }
.big > .container {
height: 10px;
width: 16px;
}
.small > .container {
height: 2px;
width: 4px;
}
.container > * {
position: absolute;
background: teal;
height: 6px;
width: 8px;
}
</style>
</head>
<body>
<div class="big">
<!-- <content-distribution> with implied fallback -->
<div class="container" style="align-content: space-between"><div></div></div>
<div class="container" style="align-content: space-around"><div></div></div>
<div class="container" style="align-content: space-evenly"><div></div></div>
<div class="container" style="align-content: stretch"><div></div></div>
<br>
<!-- <content-distribution> with explicit "flex-end" fallback -->
<!--
<div class="container" style="align-content: space-between flex-end"><div></div></div>
<div class="container" style="align-content: space-around flex-end"><div></div></div>
<div class="container" style="align-content: space-evenly flex-end"><div></div></div>
<div class="container" style="align-content: stretch flex-end"><div></div></div>
-->
<br>
</div>
<div class="small">
<!-- <content-distribution> with implied fallback -->
<div class="container" style="align-content: space-between"><div></div></div>
<div class="container" style="align-content: space-around"><div></div></div>
<div class="container" style="align-content: space-evenly"><div></div></div>
<div class="container" style="align-content: stretch"><div></div></div>
<br>
<!-- <content-distribution> with explicit "flex-end" fallback -->
<!--
<div class="container" style="align-content: space-between flex-end"><div></div></div>
<div class="container" style="align-content: space-around flex-end"><div></div></div>
<div class="container" style="align-content: space-evenly flex-end"><div></div></div>
<div class="container" style="align-content: stretch flex-end"><div></div></div>
-->
</div>
</body>
</html>

1
tests/wpt/web-platform-tests/css/css-flexbox/abspos/position-absolute-012.html
View file

@ -3,7 +3,6 @@
<title>CSS Test: Absolutely positioned children of flexboxes</title>
<link rel="author" title="Google Inc." href="http://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
<meta name="flags" content="">
<meta name="assert" content="Checks that we correctly position abspos children in a number of writing modes and alignments when containing block is grid.">
<style>

2
tests/wpt/web-platform-tests/css/css-flexbox/align-content-001.htm
View file

@ -6,8 +6,8 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
<link rel="match" href="reference/align-content-001-ref.html" />
<meta name="flags" content="">
<meta name="assert" content="This test checks that a multi-line flex container with 'align-content: center' centers lines in the flex container." />
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-6217" />
<style type="text/css">
#flexbox
{

2
tests/wpt/web-platform-tests/css/css-flexbox/align-content-002.htm
View file

@ -5,8 +5,8 @@
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
<link rel="match" href="reference/align-content-001-ref.html" />
<meta name="flags" content="">
<meta name="assert" content="This test checks that a multi-line flex container with 'align-content: flex-start' packs lines toward the start of the flex container." />
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-6225" />
<style type="text/css">
#flexbox
{

2
tests/wpt/web-platform-tests/css/css-flexbox/align-content-003.htm
View file

@ -5,8 +5,8 @@
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
<link rel="match" href="reference/align-content-001-ref.html" />
<meta name="flags" content="">
<meta name="assert" content="This test checks that a multi-line flex container with 'align-content: flex-end' packs lines toward the end of the flex container." />
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-6225" />
<style type="text/css">
#flexbox
{

2
tests/wpt/web-platform-tests/css/css-flexbox/align-content-004.htm
View file

@ -5,8 +5,8 @@
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
<link rel="match" href="reference/align-content-001-ref.html" />
<meta name="flags" content="">
<meta name="assert" content="This test checks that a multi-line flex container with 'align-content: space-between' distributes lines evenly in the flex container." />
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4835" />
<style type="text/css">
#flexbox
{

2
tests/wpt/web-platform-tests/css/css-flexbox/align-content-005.htm
View file

@ -5,8 +5,8 @@
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
<link rel="match" href="reference/align-content-001-ref.html" />
<meta name="flags" content="">
<meta name="assert" content="This test checks that a multi-line flex container with 'align-content: space-around' distributes lines evenly in the flex container, with half-size spaces on either end." />
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-7236" />
<style type="text/css">
#flexbox
{

1
tests/wpt/web-platform-tests/css/css-flexbox/align-content-006.htm
View file

@ -5,7 +5,6 @@
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
<link rel="match" href="reference/align-content-001-ref.html" />
<meta name="flags" content="">
<meta name="assert" content="This test checks that a multi-line flex container with 'align-content: stretch' stretches lines to take up the remaining space." />
<style type="text/css">
#flexbox

1
tests/wpt/web-platform-tests/css/css-flexbox/align-content_center.html
View file

@ -6,7 +6,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
<link rel="match" href="reference/align-content_center-ref.html">
<link rel="stylesheet" href="support/test-style.css">
<meta name="flags" content="" />
<meta name="assert" content="Check if the web engine can identify the align-content value center." />
<style>
#test{

1
tests/wpt/web-platform-tests/css/css-flexbox/align-content_flex-end.html
View file

@ -6,7 +6,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
<link rel="match" href="reference/align-content_flex-end-ref.html">
<link rel="stylesheet" href="support/test-style.css">
<meta name="flags" content="" />
<meta name="assert" content="Check if the web engine can identify the align-content value flex-end." />
<style>
#test{

1
tests/wpt/web-platform-tests/css/css-flexbox/align-content_flex-start.html
View file

@ -6,7 +6,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
<link rel="match" href="reference/align-content_flex-start-ref.html">
<link rel="stylesheet" href="support/test-style.css">
<meta name="flags" content="" />
<meta name="assert" content="Check if the web engine can identify the align-content value flex-start." />
<style>
#test{

1
tests/wpt/web-platform-tests/css/css-flexbox/align-content_space-around.html
View file

@ -6,7 +6,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
<link rel="match" href="reference/align-content_space-around-ref.html">
<link rel="stylesheet" href="support/test-style.css">
<meta name="flags" content="" />
<meta name="assert" content="Check if the web engine can identify align-content value space-around." />
<style>
#test{

1
tests/wpt/web-platform-tests/css/css-flexbox/align-content_space-between.html
View file

@ -6,7 +6,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
<link rel="match" href="reference/align-content_space-between-ref.html">
<link rel="stylesheet" href="support/test-style.css">
<meta name="flags" content="" />
<meta name="assert" content="Check if the display can recognize inline-flex value." />
<style>
#test{

1
tests/wpt/web-platform-tests/css/css-flexbox/align-content_stretch.html
View file

@ -6,7 +6,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
<link rel="match" href="reference/align-content_stretch-ref.html">
<link rel="stylesheet" href="support/test-style.css">
<meta name="flags" content="" />
<meta name="assert" content="Check if the web engine can identify the align-content value stretch." />
<style>
#test{

2
tests/wpt/web-platform-tests/css/css-flexbox/align-items-001.htm
View file

@ -6,8 +6,8 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="match" href="reference/align-content-001-ref.html" />
<meta name="flags" content="">
<meta name="assert" content="This test checks that the flex container with 'align-items: center' centers each flex item's margin box in the cross-axis of its line." />
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-6217" />
<style type="text/css">
#flexbox
{

2
tests/wpt/web-platform-tests/css/css-flexbox/align-items-002.htm
View file

@ -6,8 +6,8 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="match" href="reference/align-content-001-ref.html" />
<meta name="flags" content="">
<meta name="assert" content="This test checks that the flex container with 'align-items: flex-start' places each flex item's margin box flush with the cross-start edge of line." />
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-6356" />
<style type="text/css">
#flexbox
{

2
tests/wpt/web-platform-tests/css/css-flexbox/align-items-003.htm
View file

@ -6,8 +6,8 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="match" href="reference/align-content-001-ref.html" />
<meta name="flags" content="">
<meta name="assert" content="This test checks that the flex container with 'align-items: flex-end' places each flex item's margin box flush with the cross-end edge of line." />
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-6347" />
<style type="text/css">
#flexbox
{

1
tests/wpt/web-platform-tests/css/css-flexbox/align-items-004.htm
View file

@ -8,6 +8,7 @@
<link rel="match" href="reference/align-content-001-ref.html" />
<meta name="flags" content="ahem">
<meta name="assert" content="This test checks that the flex container with 'align-items: baseline' places each flex item's margin box so that their baselines align." />
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-6405" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style type="text/css">
#flexbox

1
tests/wpt/web-platform-tests/css/css-flexbox/align-items-005.htm
View file

@ -6,7 +6,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="match" href="reference/align-content-001-ref.html" />
<meta name="flags" content="">
<meta name="assert" content="This test checks that the flex container with 'align-items: stretch' places each flex item's margin box so that its cross size is the same as the cross size of the line." />
<style type="text/css">
#flexbox

46
tests/wpt/web-platform-tests/css/css-flexbox/align-items-baseline-column-horz-ref.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<style>
#target {
display: grid;
flex-direction: column;
grid-template-columns: 200px;
justify-items: baseline;
inline-size: 200px;
border: solid 3px;
}
#target > div {
margin: 5px 7px 9px 11px;
}
#target > :nth-child(1) {
background: lime;
font-size: 30px;
writing-mode: vertical-rl;
}
#target > :nth-child(2) {
background: hotpink;
font-size: 20px;
writing-mode: vertical-rl;
}
#target > :nth-child(3) {
background: cyan;
width: 40px;
height: 40px;
}
#target > :nth-child(4) {
background: lime;
font-size: 30px;
writing-mode: vertical-lr;
}
#target > :nth-child(5) {
background: hotpink;
font-size: 20px;
writing-mode: vertical-lr;
}
</style>
<div id="target">
<div>line1<br>line2</div>
<div>line1<br>line2</div>
<div></div>
<div>line1<br>line2</div>
<div>line1<br>line2</div>
</div>

47
tests/wpt/web-platform-tests/css/css-flexbox/align-items-baseline-column-horz.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-export">
<link rel="match" href="align-items-baseline-column-horz-ref.html">
<style>
#target {
display: flex;
flex-direction: column;
align-items: baseline;
inline-size: 200px;
border: solid 3px;
}
#target > div {
margin: 5px 7px 9px 11px;
}
#target > :nth-child(1) {
background: lime;
font-size: 30px;
writing-mode: vertical-rl;
}
#target > :nth-child(2) {
background: hotpink;
font-size: 20px;
writing-mode: vertical-rl;
}
#target > :nth-child(3) {
background: cyan;
width: 40px;
height: 40px;
}
#target > :nth-child(4) {
background: lime;
font-size: 30px;
writing-mode: vertical-lr;
}
#target > :nth-child(5) {
background: hotpink;
font-size: 20px;
writing-mode: vertical-lr;
}
</style>
<div id="target">
<div>line1<br>line2</div>
<div>line1<br>line2</div>
<div></div>
<div>line1<br>line2</div>
<div>line1<br>line2</div>
</div>

34
tests/wpt/web-platform-tests/css/css-flexbox/align-items-baseline-column-vert-ref.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<style>
#target {
writing-mode: vertical-rl;
display: grid;
grid-template-columns: 200px;
justify-items: baseline;
inline-size: 200px;
border: solid 3px;
}
#target > div {
margin: 5px 7px 9px 11px;
}
#target > :nth-child(1) {
background: lime;
font-size: 30px;
writing-mode: horizontal-tb;
}
#target > :nth-child(2) {
background: hotpink;
font-size: 20px;
writing-mode: horizontal-tb;
}
#target > :nth-child(3) {
background: cyan;
width: 40px;
height: 40px;
}
</style>
<div id="target">
<div>line1<br>line2</div>
<div>line1<br>line2</div>
<div></div>
</div>

36
tests/wpt/web-platform-tests/css/css-flexbox/align-items-baseline-column-vert.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-export">
<link rel="match" href="align-items-baseline-column-vert-ref.html">
<style>
#target {
writing-mode: vertical-rl;
display: flex;
flex-direction: column;
align-items: baseline;
inline-size: 200px;
border: solid 3px;
}
#target > div {
margin: 5px 7px 9px 11px;
}
#target > :nth-child(1) {
background: lime;
font-size: 30px;
writing-mode: horizontal-tb;
}
#target > :nth-child(2) {
background: hotpink;
font-size: 20px;
writing-mode: horizontal-tb;
}
#target > :nth-child(3) {
background: cyan;
width: 40px;
height: 40px;
}
</style>
<div id="target">
<div>line1<br>line2</div>
<div>line1<br>line2</div>
<div></div>
</div>

34
tests/wpt/web-platform-tests/css/css-flexbox/align-items-baseline-row-horz-ref.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<style>
#target {
display: grid;
grid-auto-flow: column;
grid-template-rows: 100px;
align-items: baseline;
inline-size: min-content;
block-size: 100px;
border: solid 3px;
}
#target > div {
margin: 5px 7px 9px 11px;
}
#target > :nth-child(1) {
background: lime;
font-size: 30px;
}
#target > :nth-child(2) {
background: hotpink;
font-size: 20px;
}
#target > :nth-child(3) {
background: cyan;
writing-mode: vertical-rl;
width: 40px;
height: 40px;
}
</style>
<div id="target">
<div>line1<br>line2</div>
<div>line1<br>line2</div>
<div></div>
</div>

34
tests/wpt/web-platform-tests/css/css-flexbox/align-items-baseline-row-horz.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-export">
<link rel="match" href="align-items-baseline-row-horz-ref.html">
<style>
#target {
display: flex;
align-items: baseline;
inline-size: min-content;
block-size: 100px;
border: solid 3px;
}
#target > div {
margin: 5px 7px 9px 11px;
}
#target > :nth-child(1) {
background: lime;
font-size: 30px;
}
#target > :nth-child(2) {
background: hotpink;
font-size: 20px;
}
#target > :nth-child(3) {
background: cyan;
writing-mode: vertical-rl;
width: 40px;
height: 40px;
}
</style>
<div id="target">
<div>line1<br>line2</div>
<div>line1<br>line2</div>
<div></div>
</div>

49
tests/wpt/web-platform-tests/css/css-flexbox/align-items-baseline-row-vert-ref.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<style>
#target {
writing-mode: vertical-rl;
display: grid;
grid-auto-flow: column;
grid-template-rows: 200px;
align-items: baseline;
inline-size: min-content;
block-size: 200px;
border: solid 3px;
}
#target > div {
margin: 5px 7px 9px 11px;
}
#target > :nth-child(1) {
background: lime;
font-size: 30px;
writing-mode: vertical-rl;
}
#target > :nth-child(2) {
background: hotpink;
font-size: 20px;
writing-mode: vertical-rl;
}
#target > :nth-child(3) {
background: cyan;
width: 40px;
height: 40px;
writing-mode: horizontal-tb;
}
#target > :nth-child(4) {
background: lime;
font-size: 30px;
writing-mode: vertical-lr;
}
#target > :nth-child(5) {
background: hotpink;
font-size: 20px;
writing-mode: vertical-lr;
}
</style>
<div id="target">
<div>line1<br>line2</div>
<div>line1<br>line2</div>
<div></div>
<div>line1<br>line2</div>
<div>line1<br>line2</div>
</div>

49
tests/wpt/web-platform-tests/css/css-flexbox/align-items-baseline-row-vert.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-export">
<link rel="match" href="align-items-baseline-row-vert-ref.html">
<style>
#target {
writing-mode: vertical-rl;
display: flex;
align-items: baseline;
inline-size: min-content;
block-size: 200px;
border: solid 3px;
}
#target > div {
margin: 5px 7px 9px 11px;
}
#target > :nth-child(1) {
background: lime;
font-size: 30px;
writing-mode: vertical-rl;
}
#target > :nth-child(2) {
background: hotpink;
font-size: 20px;
writing-mode: vertical-rl;
}
#target > :nth-child(3) {
background: cyan;
width: 40px;
height: 40px;
writing-mode: horizontal-tb;
}
#target > :nth-child(4) {
background: lime;
font-size: 30px;
writing-mode: vertical-lr;
}
#target > :nth-child(5) {
background: hotpink;
font-size: 20px;
writing-mode: vertical-lr;
}
</style>
<div id="target">
<div>line1<br>line2</div>
<div>line1<br>line2</div>
<div></div>
<div>line1<br>line2</div>
<div>line1<br>line2</div>
</div>

1
tests/wpt/web-platform-tests/css/css-flexbox/align-self-001.html
View file

@ -6,7 +6,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'align-self' property set 'flex-start' aligns the flex items to the start edge of cross axis">
<style>
#test {

1
tests/wpt/web-platform-tests/css/css-flexbox/align-self-002.html
View file

@ -6,7 +6,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'align-self' property set 'flex-end' aligns the flex items to the end edge of cross axis">
<style>
#test {

1
tests/wpt/web-platform-tests/css/css-flexbox/align-self-003.html
View file

@ -6,7 +6,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'align-self' property set 'center' centered the flex items in the cross axis within the line">
<style>
#test {

1
tests/wpt/web-platform-tests/css/css-flexbox/align-self-004.html
View file

@ -6,7 +6,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'align-self' property set 'stretch' makes the cross size of the item's margin box
as close to the same size as the line as possible">
<style>

1
tests/wpt/web-platform-tests/css/css-flexbox/align-self-005.html
View file

@ -6,7 +6,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'align-self' property set 'stretch' will be invalid while cross size of the flex item set exact number">
<style>
#test {

1
tests/wpt/web-platform-tests/css/css-flexbox/align-self-006.html
View file

@ -5,7 +5,6 @@
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<meta name="flags" content="">
<meta name="assert" content="The 'align-self' property set 'baseline' aligns the flex items to the baseline of content">
<style>
#test {

1
tests/wpt/web-platform-tests/css/css-flexbox/align-self-007.html
View file

@ -7,7 +7,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'align-self' property set 'auto' aligns flex items to start edge of cross-axis when 'align-items' set 'flex-start'">
<style>
#test {

1
tests/wpt/web-platform-tests/css/css-flexbox/align-self-008.html
View file

@ -6,7 +6,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'align-self' property set 'auto' aligns flex items to end edge of cross-axis when 'align-items' set 'flex-end'">
<style>
#test {

1
tests/wpt/web-platform-tests/css/css-flexbox/align-self-009.html
View file

@ -6,7 +6,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'align-self' property set 'auto' will center flex items the flex items in the cross axis when 'align-items' set 'center'">
<style>
#test {

1
tests/wpt/web-platform-tests/css/css-flexbox/align-self-010.html
View file

@ -5,7 +5,6 @@
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<meta name="flags" content="">
<meta name="assert" content="The 'align-self' property set 'auto' aligns the flex items to the baseline of content when 'align-items' set 'baseline'">
<style>
#test {

1
tests/wpt/web-platform-tests/css/css-flexbox/align-self-011.html
View file

@ -6,7 +6,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'align-self' property set 'auto' makes the cross size of the item's margin box
as close to the same size as the line as possible when 'align-items' set 'stretch'">
<style>

1
tests/wpt/web-platform-tests/css/css-flexbox/align-self-012.html
View file

@ -6,7 +6,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The initial value of 'align-self' property is 'auto'">
<style>
#test {

1
tests/wpt/web-platform-tests/css/css-flexbox/align-self-013.html
View file

@ -6,7 +6,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'align-self' property is invalid if applied to flex container">
<style>
#test {

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

@ -0,0 +1,68 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
<style>
#target {
display: flex;
flex-direction: column;
align-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;
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>

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

@ -0,0 +1,68 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
<style>
#target {
display: flex;
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>

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

@ -0,0 +1,68 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
<style>
#target {
display: flex;
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>

69
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-004.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-flexbox-1/#cross-alignment">
<style>
#target {
display: flex;
flex-wrap: wrap-reverse;
flex-direction: column;
align-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;
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="15">line1<br>line2</div>
<div data-offset-x="0">line1<br>line2</div>
<div data-offset-x="21">line1<br>line2</div>
<div data-offset-x="125">line1<br>line2</div>
<div data-offset-x="140">line1<br>line2</div>
<div data-offset-x="147">line1<br>line2</div>
</div>

48
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-005.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
<style>
#target {
display: flex;
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="20"><span></span><br><span></span></div>
<div data-offset-y="0"><span></span><br><span></span></div>
<div data-offset-y="50"><span></span><br><span></span></div>
</div>

52
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-006.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
<style>
#target {
display: flex;
flex-direction: column;
height: 100px;
align-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="20"><span></span><br><span></span></div>
<div data-offset-y="0"><span></span><br><span></span></div>
<div data-offset-y="55"><span></span><br><span></span></div>
</div>

52
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-007.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
<style>
#target {
display: flex;
flex-direction: column;
height: 100px;
align-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="20"><span></span><br><span></span></div>
<div data-offset-y="0"><span></span><br><span></span></div>
<div data-offset-y="55"><span></span><br><span></span></div>
</div>

46
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-fieldset-001.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
<style>
.target {
display: flex;
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>

47
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-fieldset-002.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
<style>
.target {
display: flex;
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>

47
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-fieldset-003.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
<style>
.target {
display: flex;
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>

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

@ -0,0 +1,260 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
<style>
.target {
display: flex;
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>

261
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-flex-002.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: flex;
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>

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

@ -0,0 +1,129 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
<style>
.target {
display: flex;
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>

130
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-flex-004.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: flex;
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>

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

@ -0,0 +1,111 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
<style>
.target {
display: flex;
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>

112
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-grid-002.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: flex;
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>

112
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-grid-003.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: flex;
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>

128
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-line-clamp-001.tentative.html Normal file
View file

@ -0,0 +1,128 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline">
<style>
.target {
display: flex;
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>

129
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-line-clamp-002.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: flex;
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>

129
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-line-clamp-003.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: flex;
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>

142
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-multicol-001.html Normal file
View file

@ -0,0 +1,142 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
<style>
.target {
display: flex;
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>

144
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-multicol-002.html Normal file
View file

@ -0,0 +1,144 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
<style>
.target {
display: flex;
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>

144
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-multicol-003.html Normal file
View file

@ -0,0 +1,144 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
<style>
.target {
display: flex;
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>

90
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-overflow-001.html Normal file
View file

@ -0,0 +1,90 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
<style>
.target {
display: flex;
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>

91
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-overflow-002.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: flex;
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>

91
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-overflow-003.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: flex;
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>

95
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-table-001.html Normal file
View file

@ -0,0 +1,95 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
<style>
.target {
display: flex;
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>

64
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-table-002.html Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
<style>
.target {
display: flex;
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>

64
tests/wpt/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-table-003.html Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
<style>
.target {
display: flex;
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>

1
tests/wpt/web-platform-tests/css/css-flexbox/auto-margins-001.html
View file

@ -7,7 +7,6 @@
<link rel="author" title="Google Inc." href="http://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#auto-margins">
<link rel="match" href="auto-margins-001-ref.html">
<meta name="flags" content="">
<style>
#circles, #circles div {

10
tests/wpt/web-platform-tests/css/css-flexbox/baseline-synthesis-003.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline">
<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: flex; align-items: baseline; writing-mode: vertical-lr; text-orientation: sideways; background: red;">
<div style="height: 50px; width: 100px; background: green;"></div>
<div style="height: 50px; width: 100px; background: green; line-height: 0;">
<span style="width: 10px; height: 10px; display: inline-block;"></span>
</div>
</div>

10
tests/wpt/web-platform-tests/css/css-flexbox/baseline-synthesis-004.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline">
<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: flex; align-items: baseline; writing-mode: vertical-lr; background: red;">
<div style="height: 50px; width: 100px; background: green;"></div>
<div style="height: 50px; width: 100px; background: green; line-height: 0;">
<span style="width: 100px; height: 10px; display: inline-block;"></span>
</div>
</div>

1
tests/wpt/web-platform-tests/css/css-flexbox/css-flexbox-img-expand-evenly.html
View file

@ -8,7 +8,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property">
<!-- The match link is only required if this is a reftest -->
<link rel="match" href="reference/css-flexbox-img-expand-evenly-ref.html">
<meta name="flags" content="">
<meta name="assert" content="3 rectangular images fill out border.">
<style type="text/css">

1
tests/wpt/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse.html
View file

@ -11,7 +11,6 @@
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow">
<!-- The match link is only required if this is a reftest -->
<link rel="match" href="css-flexbox-row-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row-reverse wrap-reverse, the flex container is vertical.">
<style type="text/css">
.container {

1
tests/wpt/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap.html
View file

@ -11,7 +11,6 @@
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow">
<!-- The match link is only required if this is a reftest -->
<link rel="match" href="css-flexbox-row-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row-reverse wrap, the flex container is vertical.">
<style type="text/css">
.container {

1
tests/wpt/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse.html
View file

@ -11,7 +11,6 @@
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow">
<!-- The match link is only required if this is a reftest -->
<link rel="match" href="css-flexbox-row-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row-reverse, the flex container is vertical.">
<style type="text/css">
.container {

1
tests/wpt/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap-reverse.html
View file

@ -11,7 +11,6 @@
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow">
<!-- The match link is only required if this is a reftest -->
<link rel="match" href="css-flexbox-row-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row wrap-reverse, the flex container is vertical.">
<style type="text/css">
.container {

1
tests/wpt/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap.html
View file

@ -11,7 +11,6 @@
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow">
<!-- The match link is only required if this is a reftest -->
<link rel="match" href="css-flexbox-row-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row wrap, the flex container is vertical.">
<style type="text/css">
.container {

1
tests/wpt/web-platform-tests/css/css-flexbox/css-flexbox-row.html
View file

@ -11,7 +11,6 @@
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow">
<!-- The match link is only required if this is a reftest -->
<link rel="match" href="css-flexbox-row-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row, the flex container is vertical.">
<style type="text/css">
.container {

1
tests/wpt/web-platform-tests/css/css-flexbox/css-flexbox-test1.html
View file

@ -10,7 +10,6 @@
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
<!-- The match link is only required if this is a reftest -->
<link rel="match" href="css-flexbox-test1-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row, the flex container is vertical.">
<style type="text/css">
.container {

1
tests/wpt/web-platform-tests/css/css-flexbox/display-flex-001.htm
View file

@ -5,7 +5,6 @@
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers" />
<link rel="match" href="reference/align-content-001-ref.html" />
<meta name="flags" content="">
<meta name="assert" content="This test checks that an element with 'display' property set to 'flex' establishes a new block-level flex container." />
<style type="text/css">
#flexbox

4
tests/wpt/web-platform-tests/css/css-flexbox/fieldset-baseline-alignment-ref.html Normal file
View file

@ -0,0 +1,4 @@
<!DOCTYPE html>
<div style="display: block;">
baseline<fieldset style="display: inline-block;"><legend>legend</legend>content</fieldset>
</div>

6
tests/wpt/web-platform-tests/css/css-flexbox/fieldset-baseline-alignment.html Normal file
View file

@ -0,0 +1,6 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1305890">
<link rel="match" href="fieldset-baseline-alignment-ref.html">
<div style="display: flex; align-items: baseline;">
baseline<fieldset><legend>legend</legend>content</fieldset>
</div>

1
tests/wpt/web-platform-tests/css/css-flexbox/fit-content-item-001.html
View file

@ -3,7 +3,6 @@
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-base-size">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-cross-item">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="" />
<meta name="assert" content="A column flex container shrink wraps items both when determining their flex base sizes and when laying them out after their flexed size has been determined." />
<style>

1
tests/wpt/web-platform-tests/css/css-flexbox/fit-content-item-002.html
View file

@ -2,7 +2,6 @@
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-base-size">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="flags" content="" />
<meta name="assert" content="A flex container's block cross size of min-content is treated as indefinite when setting fit-content on an item for flex base sizing">
<style>

1
tests/wpt/web-platform-tests/css/css-flexbox/fit-content-item-003.html
View file

@ -2,7 +2,6 @@
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-base-size">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="flags" content="" />
<meta name="assert" content="A flex container's block cross size of max-content is treated as indefinite when setting fit-content on an item for flex base sizing">
<style>

1
tests/wpt/web-platform-tests/css/css-flexbox/fit-content-item-004.html
View file

@ -2,7 +2,6 @@
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-base-size">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="flags" content="" />
<meta name="assert" content="A flex container's block cross size of fit-content is treated as indefinite when setting fit-content on an item for flex base sizing">
<style>

Some files were not shown because too many files have changed in this diff Show more