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'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'

Browse source
This commit is contained in:
WPT Sync Bot 2022-01-20 04:38:55 +00:00 • committed by cybai
parent 4401622eb1
commit b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -61,7 +61,7 @@
<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="1"></div></div>
<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>
@ -87,7 +87,7 @@
<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="-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>

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

@ -61,7 +61,7 @@
<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-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>
@ -87,7 +87,7 @@
<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="-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>

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

@ -61,7 +61,7 @@
<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-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>
@ -87,7 +87,7 @@
<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="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>

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

@ -61,7 +61,7 @@
<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-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>
@ -87,7 +87,7 @@
<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-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>

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

@ -51,8 +51,8 @@
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
<!-- auto | normal | stretch -->
<div class="container"><div style="align-self: auto" data-offset-x="2" data-offset-y="3"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="5"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="5"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
@ -75,8 +75,8 @@
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
<!-- auto | normal | stretch -->
<div class="container"><div style="align-self: auto" data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="-3"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>

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

@ -51,8 +51,8 @@
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
<!-- auto | normal | stretch -->
<div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="3"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="5"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
@ -75,8 +75,8 @@
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
<!-- auto | normal | stretch -->
<div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>

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

@ -51,8 +51,8 @@
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
<!-- auto | normal | stretch -->
<div class="container"><div style="align-self: auto" data-offset-x="6" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y=""></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
@ -75,8 +75,8 @@
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
<!-- auto | normal | stretch -->
<div class="container"><div style="align-self: auto" data-offset-x="0" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>

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

@ -51,8 +51,8 @@
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
<!-- auto | normal | stretch -->
<div class="container"><div style="align-self: auto" data-offset-x="6" data-offset-y="5"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="5"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="5"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="5"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="5"></div></div>
@ -75,8 +75,8 @@
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
<!-- auto | normal | stretch -->
<div class="container"><div style="align-self: auto" data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="-3"></div></div>

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

@ -49,48 +49,48 @@
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="5"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
</div>
<div class="small">
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="-3"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
</div>
</body>

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

@ -52,7 +52,7 @@
<div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
@ -76,7 +76,7 @@
<div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div>

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

@ -49,48 +49,48 @@
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="5"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="5"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="5"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
</div>
<div class="small">
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
</div>
</body>

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

@ -49,48 +49,48 @@
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
</div>
<div class="small">
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
</div>
</body>

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

@ -52,7 +52,7 @@
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="5"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="5"></div></div>
@ -76,7 +76,7 @@
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="-3"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="-3"></div></div>

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

@ -49,48 +49,48 @@
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="5"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="3"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="5"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="5"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
</div>
<div class="small">
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="-3"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
</div>
</body>

68
tests/wpt/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003-ref.html Normal file
View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Static position of abspos children in a row flex container, with various margins applied, and "align-items: flex-end" reference</title>
<style>
.container {
display: block;
padding: 1px 2px;
border: 1px solid black;
background: yellow;
margin-bottom: 5px;
margin-right: 10px;
float: left; /* For testing in "rows" of containers */
}
br { clear: both }
.big > .container {
height: 14px;
width: 20px;
}
.small > .container {
height: 2px;
width: 4px;
}
.container > * {
background: teal;
height: 6px;
width: 8px;
}
</style>
<div class="big">
<!-- Margin just on one side: -->
<div class="container"><div style="margin: 8px 0 0 0"></div></div>
<div class="container"><div style="margin: 8px 0 0 0"></div></div>
<div class="container"><div style="margin: 5px 0 0 0"></div></div>
<div class="container"><div style="margin: 8px 0 0 3px"></div></div>
<!-- Margin on all sides: -->
<div class="container"><div style="margin: 5px 0 0 4px"></div></div>
<br>
<!-- "auto" margin on just one side (should be treated as 0): -->
<div class="container"><div style="margin: 8px 0 0 0"></div></div>
<div class="container"><div style="margin: 8px 0 0 0"></div></div>
<div class="container"><div style="margin: 8px 0 0 0"></div></div>
<div class="container"><div style="margin: 8px 0 0 0"></div></div>
<!-- "auto" margin on all sides (should be treated as 0): -->
<div class="container"><div style="margin: 8px 0 0 0"></div></div>
<br>
</div>
<div class="small">
<!-- Margin just on one side: -->
<div class="container"><div style="margin: -4px 0 0 0"></div></div>
<div class="container"><div style="margin: -4px 0 0 0"></div></div>
<div class="container"><div style="margin: -7px 0 0 0"></div></div>
<div class="container"><div style="margin: -4px 0 0 3px"></div></div>
<!-- Margin on all sides: -->
<div class="container"><div style="margin: -7px 0 0 4px"></div></div>
<br>
<!-- "auto" margin on just one side (should be treated as 0): -->
<div class="container"><div style="margin: -4px 0 0 0"></div></div>
<div class="container"><div style="margin: -4px 0 0 0"></div></div>
<div class="container"><div style="margin: -4px 0 0 0"></div></div>
<div class="container"><div style="margin: -4px 0 0 0"></div></div>
<!-- "auto" margin on all sides (should be treated as 0): -->
<div class="container"><div style="margin: -4px 0 0 0"></div></div>
<br>
</div>

74
tests/wpt/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003.html Normal file
View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Static position of abspos children in a row flex container, with various margins applied, and "align-items: flex-end"</title>
<link rel="author" title="Vitaly Dyachkov" href="mailto:obyknovenius@me.com">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
<link rel="match" href="flex-abspos-staticpos-margin-003-ref.html">
<style>
.container {
display: flex;
flex-flow: row;
align-items: flex-end;
padding: 1px 2px;
border: 1px solid black;
background: yellow;
margin-bottom: 5px;
margin-right: 10px;
float: left; /* For testing in "rows" of containers */
}
br { clear: both }
.big > .container {
height: 14px;
width: 20px;
}
.small > .container {
height: 2px;
width: 4px;
}
.container > * {
position: absolute;
background: teal;
height: 6px;
width: 8px;
}
</style>
<div class="big">
<!-- Margin just on one side: -->
<div class="container"><div style="margin-top: 3px"></div></div>
<div class="container"><div style="margin-right: 3px"></div></div>
<div class="container"><div style="margin-bottom: 3px"></div></div>
<div class="container"><div style="margin-left: 3px"></div></div>
<!-- Margin on all sides: -->
<div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
<br>
<!-- "auto" margin on just one side (should be treated as 0): -->
<div class="container"><div style="margin-top: auto"></div></div>
<div class="container"><div style="margin-right: auto"></div></div>
<div class="container"><div style="margin-bottom: auto"></div></div>
<div class="container"><div style="margin-left: auto"></div></div>
<!-- "auto" margin on all sides (should be treated as 0): -->
<div class="container"><div style="margin: auto"></div></div>
<br>
</div>
<div class="small">
<!-- Margin just on one side: -->
<div class="container"><div style="margin-top: 3px"></div></div>
<div class="container"><div style="margin-right: 3px"></div></div>
<div class="container"><div style="margin-bottom: 3px"></div></div>
<div class="container"><div style="margin-left: 3px"></div></div>
<!-- Margin on all sides: -->
<div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
<br>
<!-- "auto" margin on just one side (should be treated as 0): -->
<div class="container"><div style="margin-top: auto"></div></div>
<div class="container"><div style="margin-right: auto"></div></div>
<div class="container"><div style="margin-bottom: auto"></div></div>
<div class="container"><div style="margin-left: auto"></div></div>
<!-- "auto" margin on all sides (should be treated as 0): -->
<div class="container"><div style="margin: auto"></div></div>
<br>
</div>

2
tests/wpt/web-platform-tests/css/css-flexbox/aspect-ratio-intrinsic-size-007-ref.html Normal file
View file

@ -0,0 +1,2 @@
<!DOCTYPE html>
<svg viewBox="0 0 1000 500" style="background: green"></svg>

8
tests/wpt/web-platform-tests/css/css-flexbox/aspect-ratio-intrinsic-size-007.html Normal file
View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#transferred-size-suggestion">
<link rel="match" href="aspect-ratio-intrinsic-size-007-ref.html">
<meta name="assert" content="This checks that an automatic preferred physical width is always considered definite whenever computing the transferred size suggestion. That size will be used instead of the flex-item's intrinsic size.">
<div style="display: flex; flex-direction: column;">
<img src="support/large-green-rectangle.svg"/>
</div>

8
tests/wpt/web-platform-tests/css/css-flexbox/baseline-synthesis-001.html Normal file
View file

@ -0,0 +1,8 @@
<!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; writing-mode: vertical-rl; align-items: baseline; text-orientation: mixed;">
<div style="background: green; line-height: 100px; height: 50px; color: transparent;">text</div>
<div style="background: green; width: 100px; height: 50px;"></div> <!-- text-orientation: mixed should synthesize the baseline in the block middle. -->
</div>

9
tests/wpt/web-platform-tests/css/css-flexbox/baseline-synthesis-002.html Normal file
View file

@ -0,0 +1,9 @@
<!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; writing-mode: vertical-rl; align-items: baseline; text-orientation: sideways; position: relative; background: red;">
<div style="background: green; line-height: 100px; font-size: 0; height: 50px;"><div style="display: inline-block;"></div></div>
<div style="background: green; width: 50px; height: 50px;"></div> <!-- text-orientation: sideways should synthesize the baseline at the block-end edge. -->
<div style="background: green; position: absolute; left: 0; bottom: 0; width: 50px; height: 50px;"></div>
</div>

27
tests/wpt/web-platform-tests/css/css-flexbox/column-reverse-gap.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse">
<link rel="help" href="https://drafts.csswg.org/css-align/#gap-shorthand">
<style>
.flexbox {
display: flex;
flex-direction: column-reverse;
gap: 5px;
position: relative;
background-color: blue;
}
.flexbox > * {
height: 10px;
background-color: green;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.flexbox')">
<div id=log></div>
<div class="flexbox" data-expected-height="40">
<div data-offset-y="30"></div>
<div data-offset-y="15"></div>
<div data-offset-y="0"></div>
</div>
</body>

28
tests/wpt/web-platform-tests/css/css-flexbox/display_flex_exist.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Flexible Box Test: display_flex</title>
<link rel="author" title="Intel" href="http://www.intel.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers" />
<meta name="flags" content="dom" />
<meta name="assert" content="Check if the web engine can indenfy the display value flex." />
<style>
div#test{
display: flex;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id=log></div>
<div id=test></div>
<script type="text/javascript">
var t = async_test();
t.step(function () {
assert_equals(window.getComputedStyle(document.querySelector('div#test')).display, "flex", "Display value is");
});
t.done();
</script>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-flexbox/display_inline-flex_exist.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Flexible Box Test: display_inline-flex</title>
<link rel="author" title="Intel" href="http://www.intel.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers" />
<meta name="flags" content="dom" />
<meta name="assert" content="Check if the web engine can identify the display value inline-flex." />
<style>
div#test{
display: inline-flex;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id=log></div>
<div id=test></div>
<script type="text/javascript">
var t = async_test();
t.step(function () {
assert_equals(window.getComputedStyle(document.querySelector('div#test')).display, "inline-flex", "Display value is");
});
t.done();
</script>
</body>
</html>

0
tests/wpt/web-platform-tests/css/css-flexbox/dynamic-isize-change-ref.html → tests/wpt/web-platform-tests/css/css-flexbox/dynamic-isize-change-001-ref.html
View file

2
tests/wpt/web-platform-tests/css/css-flexbox/dynamic-isize-change.html → tests/wpt/web-platform-tests/css/css-flexbox/dynamic-isize-change-001.html
View file

@ -5,7 +5,7 @@
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1686961">
<link rel="match" href="dynamic-isize-change-ref.html">
<link rel="match" href="dynamic-isize-change-001-ref.html">
<style>
#container {

40
tests/wpt/web-platform-tests/css/css-flexbox/dynamic-isize-change-002.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Flexbox Test: Dynamic change to the inline-size of a row flex container</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1700580">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="This test verifies that the dynamic change to the flex container's inline-size triggers the reflow for flex items with percentage padding.">
<style>
#flexbox {
display: flex;
inline-size: 50px;
block-size: 100px;
background: red;
}
#flexbox > div {
box-sizing: border-box;
/* The following flex-basis and padding will give our flex item a content-box
inline-size of 25px, both before and after this test's dynamic change. */
flex-basis: 100%;
padding-right: calc(100% - 25px);
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="flexbox">
<div></div>
</div>
<script>
/* Make sure the layout is up-to-date, which is essential to trigger the bug. */
document.documentElement.offsetHeight;
/* Change the flexbox's inline-size to trigger incremental reflow. */
document.getElementById("flexbox").style.inlineSize = "100px";
</script>

43
tests/wpt/web-platform-tests/css/css-flexbox/dynamic-isize-change-003.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Flexbox Test: Dynamic change to the inline-size of a column flexbox container</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1700580">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="This test verifies that the dynamic change to the flex container's inline-size triggers the reflow for flex items with percentage padding.">
<style>
#flexbox {
display: flex;
flex-direction: column;
inline-size: 50px;
block-size: 100px;
background: red;
}
#flexbox > div {
box-sizing: border-box;
flex-basis: 100px;
/* The following padding will give our flex item a content-box inline-size of
25px, both before and after this test's dynamic change. (Note that the
horizontal axis is the flex container's cross axis, so the item stretches
its width by default to fill the available space.) */
padding-right: calc(100% - 25px);
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="flexbox">
<div></div>
</div>
<script>
/* Make sure the layout is up-to-date, which is essential to trigger the bug. */
document.documentElement.offsetHeight;
/* Change the flexbox's inline-size to trigger incremental reflow. */
document.getElementById("flexbox").style.inlineSize = "100px";
</script>

42
tests/wpt/web-platform-tests/css/css-flexbox/dynamic-isize-change-004.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Flexbox Test: Dynamic change to the inline-size of a row flex container</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1700580">
<link rel="stylesheet" href="/fonts/ahem.css">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="This test verifies that the dynamic change to the flex container's inline-size triggers the reflow for flex items with percentage padding.">
<style>
#flexbox {
display: flex;
inline-size: 100px;
block-size: 100px;
font: 50px/1 Ahem;
color: green;
word-break: break-all;
}
#flexbox > div {
/* The following flex-basis and padding will give our flex item a border-box
inline-size of 100px, both before and after this test's dynamic
modification. */
flex-basis: 50%;
padding-right: calc(100px - 50%);
background: red;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="flexbox">
<div>XXXX</div>
</div>
<script>
/* Make sure the layout is up-to-date, which is essential to trigger the bug. */
document.documentElement.offsetHeight;
/* Change the flexbox's inline-size to trigger incremental reflow. */
document.getElementById("flexbox").style.inlineSize = "200px";
</script>

13
tests/wpt/web-platform-tests/css/css-flexbox/fieldset-as-item-dynamic.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div id="target" style="display: flex; width: 100px; height: 0; background: green;">
<fieldset style="border: none; padding: 0;">
<div style="height: 100px;"></div>
</fieldset>
</div>
<script>
document.body.offsetTop;
document.getElementById('target').style.height = 'auto';
</script>

6
tests/wpt/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-column-011.html
View file

@ -52,10 +52,10 @@
data-expected-width="5" data-expected-height="5">
</div>
<div class="flexbox column" style="height: 10px;" data-expected-height="10">
<!-- should use min(specified, content height) = 10px as minimum height,
<div class="flexbox column" style="height: 10px; width: 50px;" data-expected-height="10">
<!-- should use min(specified=100, content height=50) = 50px as minimum height,
which the image will shrink to due to default flex-shrink. -->
<img src="support/10x10-green.png" style="height: 100px;" data-expected-height="10">
<img src="support/10x10-green.png" style="height: 100px;" data-expected-height="50">
</div>
<div class="flexbox" style="height: 10px;" data-expected-height="10">

35
tests/wpt/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-016.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>aspect-ratio flex item</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="% max-height is updated when height of parent changes when %max-height affects max-content size of item">
<style>
#target {
display: flex;
align-items: start;
width: 50px;
height: 50px;
}
img {
/* Remove min-width:auto because it complicates things. */
min-width: 0px;
max-height: 100%;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="target">
<!-- This image's natural size is 1000x1000 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoAQMAAAB3bUanAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAKpJREFUeNrswYEAAAAAgKD9qRepAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABg9uBAAAAAAADI/7URVFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVWlPTgkAAAAABD0/7UrbAAAAADMAuw/AAGdJWCbAAAAAElFTkSuQmCC
">
</div>
<script>
document.body.offsetTop;
target.style.width = '100px';
document.body.offsetTop;
target.style.height = '100px';
</script>

31
tests/wpt/web-platform-tests/css/css-flexbox/flex-base.html
View file

@ -1,31 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Flexible Box Test: display proprety - flex</title>
<link rel="author" title="haosdent" href="mailto:haosdent@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
<link rel="match" href="reference/flex-base-ref.html">
<meta name="assert" content="Statement describing what the test case is asserting">
<style type="text/css">
.container {
position: relative;
height: 6em;
width: 3em;
display: flex;
background: red;
margin: 1em;
border: 1px solid black;
}
.success {
background: green;
width: 3em;
}
</style>
</head>
<body>
<p>The test passed if you can't find red color.</p>
<div class="container">
<span class="success">Hello</span>
</div>
</body>
</html>

8
tests/wpt/web-platform-tests/css/css-flexbox/flex-basis-intrinsics-001.html
View file

@ -49,7 +49,7 @@
</div>
<div class=flexbox>
<div class=flex-item style="flex-basis: -moz-fit-content; flex-basis: fit-content;" data-expected-width=75>
<div class=flex-item style="flex-basis: fit-content;" data-expected-width=75>
<div class=inline-block></div><div class=inline-block></div>
</div>
</div>
@ -67,7 +67,7 @@
</div>
<div class=flexbox style="flex-flow: column;">
<div class=flex-item style="flex-basis: -moz-fit-content; flex-basis: fit-content;" data-expected-height=100>
<div class=flex-item style="flex-basis: fit-content;" data-expected-height=100>
<div class=inline-block></div><div class=inline-block></div>
</div>
</div>
@ -85,7 +85,7 @@
</div>
<div class=flexbox>
<div class="flex-item ortho-item" style="flex-basis: -moz-fit-content; flex-basis: fit-content;" data-expected-width=100>
<div class="flex-item ortho-item" style="flex-basis: fit-content;" data-expected-width=100>
<div class=inline-block></div><div class=inline-block></div>
</div>
</div>
@ -103,7 +103,7 @@
</div>
<div class=flexbox style="flex-flow: column;">
<div class="flex-item ortho-item" style="flex-basis: -moz-fit-content; flex-basis: fit-content;" data-expected-height=75>
<div class="flex-item ortho-item" style="flex-basis: fit-content;" data-expected-height=75>
<div class=inline-block></div><div class=inline-block></div>
</div>
</div>

402
tests/wpt/web-platform-tests/css/css-flexbox/flex-container-max-content-001-ref.html Normal file
View file

@ -0,0 +1,402 @@
<!DOCTYPE html>
<title>Flex Container Min-Content Main Sizing: Flex Item Min-Content Contributions Reference</title>
<style>
@import "/fonts/ahem.css"; /* optional */
body {
/* Fit it in 800x600 pixels */
display: grid;
grid-template-columns: repeat(auto-fill, 66px 66px 66px);
grid-auto-rows: 50px;
font: 10px/1 Ahem, monospace;
}
.wrap {
counter-increment: test;
}
.row, .col {
background: blue;
padding: 5px;
float: left;
}
.item {
padding: 3px;
border: 2px solid aqua;
color: orange;
}
/* help people debugging */
.wrap:hover::before {
content: counter(test, decimal-leading-zero);
position: absolute;
font: initial;
}
</style>
<!--
{ row | col } x { flexible | no-grow | no-shrink } x { no | small | large } pref size x { harmonious | disjoint larger | disjoint smaller } flex basis }
-->
<!-- 01 row x flexible x none x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 3ch">X X</div>
</div>
</div>
<!-- 02 row x flexible x small x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 3ch">X X</div>
</div>
</div>
<!-- 03 row x flexible x large x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 4ch">X X</div>
</div>
</div>
<!-- 04 row x flexible x none x disjoint -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 3ch">X X</div>
</div>
</div>
<!-- 05 row x flexible x small x disjoint -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 3ch">X X</div>
</div>
</div>
<!-- 06 row x flexible x large x disjoint -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 4ch">X X</div>
</div>
</div>
<!-- 07 row x no-grow x none x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 3ch">X X</div>
</div>
</div>
<!-- 08 row x no-grow x small x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 0.4ch">X X</div>
</div>
</div>
<!-- 09 row x no-grow x large x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 4ch">X X</div>
</div>
</div>
<!-- 10 row x no-grow x none x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 3ch">X X</div>
</div>
</div>
<!-- 11 row x no-grow x small x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 3ch">X X</div>
</div>
</div>
<!-- 12 row x no-grow x large x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 4ch">X X</div>
</div>
</div>
<!-- 13 row x no-grow x none x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 0.2ch">X X</div>
</div>
</div>
<!-- 14 row x no-grow x smaller x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 0.2ch">X X</div>
</div>
</div>
<!-- 15 row x no-grow x larger x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 0.2ch">X X</div>
</div>
</div>
<!-- 16 row x no-shrink x none x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 3ch">X X</div>
</div>
</div>
<!-- 17 row x no-shrink x small x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 3ch">X X</div>
</div>
</div>
<!-- 18 row x no-shrink x large x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 4ch">X X</div>
</div>
</div>
<!-- 19 row x no-shrink x none x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 4.5ch">X X</div>
</div>
</div>
<!-- 20 row x no-shrink x small x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 4.5ch">X X</div>
</div>
</div>
<!-- 21 row x no-shrink x large x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 4.5ch">X X</div>
</div>
</div>
<!-- 22 row x no-shrink x none x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 3ch">X X</div>
</div>
</div>
<!-- 23 row x no-shrink x smaller x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 3ch">X X</div>
</div>
</div>
<!-- 24 row x no-shrink x larger x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 4ch">X X</div>
</div>
</div>
<!-- ###################################################################### -->
<!-- 01 col x flexible x none x harmonious -->
<div class="wrap" style="counter-reset: test; grid-column: 1"> <!-- new section -->
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 02 col x flexible x small x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 03 col x flexible x large x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1.5em">X</div>
</div>
</div>
<!-- 04 col x flexible x none x disjoint -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 05 col x flexible x small x disjoint -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 06 col x flexible x large x disjoint -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1.5em">X</div>
</div>
</div>
<!-- 07 col x no-grow x none x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 08 col x no-grow x small x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 0.4em">X</div>
</div>
</div>
<!-- 09 col x no-grow x large x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1.5em">X</div>
</div>
</div>
<!-- 10 col x no-grow x none x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 11 col x no-grow x small x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 0.4em">X</div>
</div>
</div>
<!-- 12 col x no-grow x large x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1.5em">X</div>
</div>
</div>
<!-- 13 col x no-grow x none x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 0.2em">X</div>
</div>
</div>
<!-- 14 col x no-grow x smaller x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 0.2em">X</div>
</div>
</div>
<!-- 15 col x no-grow x larger x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 0.2em">X</div>
</div>
</div>
<!-- 16 col x no-shrink x none x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 17 col x no-shrink x small x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 18 col x no-shrink x large x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1.5em">X</div>
</div>
</div>
<!-- 19 col x no-shrink x none x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 20 col x no-shrink x small x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 21 col x no-shrink x large x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1.5em">X</div>
</div>
</div>
<!-- 22 col x no-shrink x none x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 23 col x no-shrink x smaller x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 24 col x no-shrink x larger x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1.5em">X</div>
</div>
</div>

420
tests/wpt/web-platform-tests/css/css-flexbox/flex-container-max-content-001.html Normal file
View file

@ -0,0 +1,420 @@
<!DOCTYPE html>
<title>Flex Container Max-Content Main Sizing: Flex Item Max-Content Contributions</title>
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#intrinsic-item-contributions">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-main-item">
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<link rel="match" href="flex-container-min-content-001-ref.html">
<style>
@import "/fonts/ahem.css"; /* optional */
body {
/* Fit it in 800x600 pixels */
display: grid;
grid-template-columns: repeat(auto-fill, 66px 66px 66px);
grid-auto-rows: 50px;
font: 10px/1 Ahem, monospace;
}
/* impose min-content constraint, block formatting context */
.wrap > * {
width: max-content;
height: max-content;
/* floating inside a large box for UAs that don't understand min-content */
float: left;
}
.wrap {
width: 100px; height: 100px;
counter-increment: test;
}
.row, .col {
display: flex;
background: blue;
}
.row { flex-flow: row; }
.col { flex-flow: column; }
.item {
/* ensure _outer_ size is measured */
margin: 5px;
padding: 3px;
border: 2px solid aqua;
color: orange;
}
/* help people debugging */
.wrap:hover::before {
content: counter(test, decimal-leading-zero);
position: absolute;
font: initial;
}
</style>
<!--
{ row | col } x { flexible | no-grow | no-shrink } x { no | small | large } pref size x { harmonious | disjoint larger | disjoint smaller } flex basis }
-->
<!-- 01 row x flexible x none x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: auto">X X</div>
</div>
</div>
<!-- 02 row x flexible x small x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: auto; width: 0.4ch">X X</div>
</div>
</div>
<!-- 03 row x flexible x large x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: auto; width: 4ch">X X</div>
</div>
</div>
<!-- 04 row x flexible x none x disjoint -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 6ch">X X</div>
</div>
</div>
<!-- 05 row x flexible x small x disjoint -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 6ch; width: 0.4ch">X X</div>
</div>
</div>
<!-- 06 row x flexible x large x disjoint -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 6ch; width: 4ch">X X</div>
</div>
</div>
<!-- 07 row x no-grow x none x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 auto">X X</div>
</div>
</div>
<!-- 08 row x no-grow x small x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 auto; width: 0.4ch">X X</div>
</div>
</div>
<!-- 09 row x no-grow x large x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 auto; width: 4ch">X X</div>
</div>
</div>
<!-- 10 row x no-grow x none x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 6ch">X X</div>
</div>
</div>
<!-- 11 row x no-grow x small x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 6ch; width: 0.4ch">X X</div>
</div>
</div>
<!-- 12 row x no-grow x large x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 6ch; width: 4ch">X X</div>
</div>
</div>
<!-- 13 row x no-grow x none x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 0.2ch">X X</div>
</div>
</div>
<!-- 14 row x no-grow x smaller x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 0.2ch; width: 0.4ch">X X</div>
</div>
</div>
<!-- 15 row x no-grow x larger x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 0.2ch; width: 4ch">X X</div>
</div>
</div>
<!-- 16 row x no-shrink x none x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 auto">X X</div>
<!-- see also https://www.w3.org/TR/css-flexbox-1/#algo-main-item case C -->
</div>
</div>
<!-- 17 row x no-shrink x small x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 auto; width: 0.4ch">X X</div>
</div>
</div>
<!-- 18 row x no-shrink x large x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 auto; width: 4ch">X X</div>
</div>
</div>
<!-- 19 row x no-shrink x none x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 4.5ch">X X</div>
</div>
</div>
<!-- 20 row x no-shrink x small x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 4.5ch; width: 0.4ch">X X</div>
</div>
</div>
<!-- 21 row x no-shrink x large x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 4.5ch; width: 4ch">X X</div>
</div>
</div>
<!-- 22 row x no-shrink x none x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 0.2ch">X X</div>
</div>
</div>
<!-- 23 row x no-shrink x smaller x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 0.2ch; width: 0.4ch">X X</div>
</div>
</div>
<!-- 24 row x no-shrink x larger x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 0.2ch; width: 4ch">X X</div>
</div>
</div>
<!-- ###################################################################### -->
<!-- 01 col x flexible x none x harmonious -->
<div class="wrap" style="counter-reset: test; grid-column: 1"> <!-- new section -->
<div class="col">
<div class="item" style="flex: auto">X</div>
</div>
</div>
<!-- 02 col x flexible x small x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: auto; height: 0.4em">X</div>
</div>
</div>
<!-- 03 col x flexible x large x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: auto; height: 1.5em">X</div>
</div>
</div>
<!-- 04 col x flexible x none x disjoint -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 2em">X</div>
</div>
</div>
<!-- 05 col x flexible x small x disjoint -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 2em; height: 0.4em">X</div>
</div>
</div>
<!-- 06 col x flexible x large x disjoint -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 2em; height: 1.5em">X</div>
</div>
</div>
<!-- 07 col x no-grow x none x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 auto">X</div>
</div>
</div>
<!-- 08 col x no-grow x small x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 auto; height: 0.4em">X</div>
</div>
</div>
<!-- 09 col x no-grow x large x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 auto; height: 1.5em">X</div>
</div>
</div>
<!-- 10 col x no-grow x none x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 2em">X</div>
</div>
</div>
<!-- 11 col x no-grow x small x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 2em; height: 0.4em">X</div>
</div>
</div>
<!-- 12 col x no-grow x large x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 2em; height: 1.5em">X</div>
</div>
</div>
<!-- 13 col x no-grow x none x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 0.2em">X</div>
</div>
</div>
<!-- 14 col x no-grow x smaller x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 0.2em; height: 0.4em">X</div>
</div>
</div>
<!-- 15 col x no-grow x larger x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 0.2em; height: 1.5em">X</div>
</div>
</div>
<!-- 16 col x no-shrink x none x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 auto">X</div>
</div>
</div>
<!-- 17 col x no-shrink x small x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 auto; height: 0.4em">X</div>
</div>
</div>
<!-- 18 col x no-shrink x large x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 auto; height: 1.5em">X</div>
</div>
</div>
<!-- 19 col x no-shrink x none x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 0.2em">X</div>
</div>
</div>
<!-- 20 col x no-shrink x small x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 0.2em; height: 0.4em">X</div>
</div>
</div>
<!-- 21 col x no-shrink x large x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 0.2em; height: 1.5em">X</div>
</div>
</div>
<!-- 22 col x no-shrink x none x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 0.2em">X</div>
</div>
</div>
<!-- 23 col x no-shrink x smaller x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 0.2em; height: 0.4em">X</div>
</div>
</div>
<!-- 24 col x no-shrink x larger x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 0.2em; height: 1.5em">X</div>
</div>
</div>

402
tests/wpt/web-platform-tests/css/css-flexbox/flex-container-min-content-001-ref.html Normal file
View file

@ -0,0 +1,402 @@
<!DOCTYPE html>
<title>Flex Container Min-Content Main Sizing: Flex Item Min-Content Contributions Reference</title>
<style>
@import "/fonts/ahem.css"; /* optional */
body {
/* Fit it in 800x600 pixels */
display: grid;
grid-template-columns: repeat(auto-fill, 60px 60px 60px);
grid-auto-rows: 60px;
font: 10px/1 Ahem, monospace;
}
.wrap {
counter-increment: test;
}
.row, .col {
background: blue;
padding: 5px;
float: left;
}
.item {
padding: 3px;
border: 2px solid aqua;
color: orange;
}
/* help people debugging */
.wrap:hover::before {
content: counter(test, decimal-leading-zero);
position: absolute;
font: initial;
}
</style>
<!--
{ row | col } x { flexible | no-grow | no-shrink } x { no | small | large } pref size x { harmonious | disjoint larger | disjoint smaller } flex basis }
-->
<!-- 01 row x flexible x none x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1ch">X X</div>
</div>
</div>
<!-- 02 row x flexible x small x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1ch">X X</div>
</div>
</div>
<!-- 03 row x flexible x large x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1.5ch">X X</div>
</div>
</div>
<!-- 04 row x flexible x none x disjoint -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1ch">X X</div>
</div>
</div>
<!-- 05 row x flexible x small x disjoint -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1ch">X X</div>
</div>
</div>
<!-- 06 row x flexible x large x disjoint -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1.5ch">X X</div>
</div>
</div>
<!-- 07 row x no-grow x none x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1ch">X X</div>
</div>
</div>
<!-- 08 row x no-grow x small x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 0.4ch">X X</div>
</div>
</div>
<!-- 09 row x no-grow x large x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1.5ch">X X</div>
</div>
</div>
<!-- 10 row x no-grow x none x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1ch">X X</div>
</div>
</div>
<!-- 11 row x no-grow x small x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1ch">X X</div>
</div>
</div>
<!-- 12 row x no-grow x large x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1.5ch">X X</div>
</div>
</div>
<!-- 13 row x no-grow x none x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 0.2ch">X X</div>
</div>
</div>
<!-- 14 row x no-grow x smaller x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 0.2ch">X X</div>
</div>
</div>
<!-- 15 row x no-grow x larger x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 0.2ch">X X</div>
</div>
</div>
<!-- 16 row x no-shrink x none x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 3ch">X X</div>
</div>
</div>
<!-- 17 row x no-shrink x small x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1ch">X X</div>
</div>
</div>
<!-- 18 row x no-shrink x large x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1.5ch">X X</div>
</div>
</div>
<!-- 19 row x no-shrink x none x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1ch">X X</div>
</div>
</div>
<!-- 20 row x no-shrink x small x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1ch">X X</div>
</div>
</div>
<!-- 21 row x no-shrink x large x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1.5ch">X X</div>
</div>
</div>
<!-- 22 row x no-shrink x none x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1ch">X X</div>
</div>
</div>
<!-- 23 row x no-shrink x smaller x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1ch">X X</div>
</div>
</div>
<!-- 24 row x no-shrink x larger x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="width: 1.5ch">X X</div>
</div>
</div>
<!-- ###################################################################### -->
<!-- 01 col x flexible x none x harmonious -->
<div class="wrap" style="counter-reset: test; grid-column: 1"> <!-- new section -->
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 02 col x flexible x small x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 03 col x flexible x large x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1.5em">X</div>
</div>
</div>
<!-- 04 col x flexible x none x disjoint -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 05 col x flexible x small x disjoint -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 06 col x flexible x large x disjoint -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1.5em">X</div>
</div>
</div>
<!-- 07 col x no-grow x none x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 08 col x no-grow x small x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 0.4em">X</div>
</div>
</div>
<!-- 09 col x no-grow x large x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1.5em">X</div>
</div>
</div>
<!-- 10 col x no-grow x none x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 11 col x no-grow x small x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 0.4em">X</div>
</div>
</div>
<!-- 12 col x no-grow x large x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1.5em">X</div>
</div>
</div>
<!-- 13 col x no-grow x none x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 0.2em">X</div>
</div>
</div>
<!-- 14 col x no-grow x smaller x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 0.2em">X</div>
</div>
</div>
<!-- 15 col x no-grow x larger x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 0.2em">X</div>
</div>
</div>
<!-- 16 col x no-shrink x none x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 17 col x no-shrink x small x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 18 col x no-shrink x large x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1.5em">X</div>
</div>
</div>
<!-- 19 col x no-shrink x none x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 20 col x no-shrink x small x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 21 col x no-shrink x large x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1.5em">X</div>
</div>
</div>
<!-- 22 col x no-shrink x none x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 23 col x no-shrink x smaller x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1em">X</div>
</div>
</div>
<!-- 24 col x no-shrink x larger x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="height: 1.5em">X</div>
</div>
</div>

420
tests/wpt/web-platform-tests/css/css-flexbox/flex-container-min-content-001.html Normal file
View file

@ -0,0 +1,420 @@
<!DOCTYPE html>
<title>Flex Container Min-Content Main Sizing: Flex Item Min-Content Contributions</title>
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#intrinsic-item-contributions">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-main-item">
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<link rel="match" href="flex-container-min-content-001-ref.html">
<style>
@import "/fonts/ahem.css"; /* optional */
body {
/* Fit it in 800x600 pixels */
display: grid;
grid-template-columns: repeat(auto-fill, 50px 50px 50px);
grid-auto-rows: 50px;
font: 10px/1 Ahem, monospace;
}
/* impose min-content constraint, block formatting context */
.wrap > * {
width: min-content;
height: min-content;
/* floating inside a zero size box for UAs that don't understand min-content */
float: left;
}
.wrap {
width: 0; height: 0;
counter-increment: test;
}
.row, .col {
display: flex;
background: blue;
}
.row { flex-flow: row; }
.col { flex-flow: column; }
.item {
/* ensure _outer_ size is measured */
margin: 5px;
padding: 3px;
border: 2px solid aqua;
color: orange;
}
/* help people debugging */
.wrap:hover::before {
content: counter(test, decimal-leading-zero);
position: absolute;
font: initial;
}
</style>
<!--
{ row | col } x { flexible | no-grow | no-shrink } x { no | small | large } pref size x { harmonious | disjoint larger | disjoint smaller } flex basis }
-->
<!-- 01 row x flexible x none x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: auto">X X</div>
</div>
</div>
<!-- 02 row x flexible x small x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: auto; width: 0.4ch">X X</div>
</div>
</div>
<!-- 03 row x flexible x large x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: auto; width: 1.5ch">X X</div>
</div>
</div>
<!-- 04 row x flexible x none x disjoint -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 2ch">X X</div>
</div>
</div>
<!-- 05 row x flexible x small x disjoint -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 2ch; width: 0.4ch">X X</div>
</div>
</div>
<!-- 06 row x flexible x large x disjoint -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 2ch; width: 1.5ch">X X</div>
</div>
</div>
<!-- 07 row x no-grow x none x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 auto">X X</div>
</div>
</div>
<!-- 08 row x no-grow x small x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 auto; width: 0.4ch">X X</div>
</div>
</div>
<!-- 09 row x no-grow x large x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 auto; width: 1.5ch">X X</div>
</div>
</div>
<!-- 10 row x no-grow x none x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 2ch">X X</div>
</div>
</div>
<!-- 11 row x no-grow x small x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 2ch; width: 0.4ch">X X</div>
</div>
</div>
<!-- 12 row x no-grow x large x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 2ch; width: 1.5ch">X X</div>
</div>
</div>
<!-- 13 row x no-grow x none x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 0.2ch">X X</div>
</div>
</div>
<!-- 14 row x no-grow x smaller x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 0.2ch; width: 0.4ch">X X</div>
</div>
</div>
<!-- 15 row x no-grow x larger x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 0 1 0.2ch; width: 1.5ch">X X</div>
</div>
</div>
<!-- 16 row x no-shrink x none x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 auto">X X</div>
<!-- see also https://www.w3.org/TR/css-flexbox-1/#algo-main-item case C -->
</div>
</div>
<!-- 17 row x no-shrink x small x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 auto; width: 0.4ch">X X</div>
</div>
</div>
<!-- 18 row x no-shrink x large x harmonious -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 auto; width: 1.5ch">X X</div>
</div>
</div>
<!-- 19 row x no-shrink x none x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 0.2ch">X X</div>
</div>
</div>
<!-- 20 row x no-shrink x small x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 0.2ch; width: 0.4ch">X X</div>
</div>
</div>
<!-- 21 row x no-shrink x large x larger -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 0.2ch; width: 1.5ch">X X</div>
</div>
</div>
<!-- 22 row x no-shrink x none x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 0.2ch">X X</div>
</div>
</div>
<!-- 23 row x no-shrink x smaller x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 0.2ch; width: 0.4ch">X X</div>
</div>
</div>
<!-- 24 row x no-shrink x larger x smaller -->
<div class="wrap">
<div class="row">
<div class="item" style="flex: 1 0 0.2ch; width: 1.5ch">X X</div>
</div>
</div>
<!-- ###################################################################### -->
<!-- 01 col x flexible x none x harmonious -->
<div class="wrap" style="counter-reset: test; grid-column: 1"> <!-- new section -->
<div class="col">
<div class="item" style="flex: auto">X</div>
</div>
</div>
<!-- 02 col x flexible x small x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: auto; height: 0.4em">X</div>
</div>
</div>
<!-- 03 col x flexible x large x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: auto; height: 1.5em">X</div>
</div>
</div>
<!-- 04 col x flexible x none x disjoint -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 2em">X</div>
</div>
</div>
<!-- 05 col x flexible x small x disjoint -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 2em; height: 0.4em">X</div>
</div>
</div>
<!-- 06 col x flexible x large x disjoint -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 2em; height: 1.5em">X</div>
</div>
</div>
<!-- 07 col x no-grow x none x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 auto">X</div>
</div>
</div>
<!-- 08 col x no-grow x small x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 auto; height: 0.4em">X</div>
</div>
</div>
<!-- 09 col x no-grow x large x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 auto; height: 1.5em">X</div>
</div>
</div>
<!-- 10 col x no-grow x none x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 2em">X</div>
</div>
</div>
<!-- 11 col x no-grow x small x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 2em; height: 0.4em">X</div>
</div>
</div>
<!-- 12 col x no-grow x large x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 2em; height: 1.5em">X</div>
</div>
</div>
<!-- 13 col x no-grow x none x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 0.2em">X</div>
</div>
</div>
<!-- 14 col x no-grow x smaller x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 0.2em; height: 0.4em">X</div>
</div>
</div>
<!-- 15 col x no-grow x larger x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 0 1 0.2em; height: 1.5em">X</div>
</div>
</div>
<!-- 16 col x no-shrink x none x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 auto">X</div>
</div>
</div>
<!-- 17 col x no-shrink x small x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 auto; height: 0.4em">X</div>
</div>
</div>
<!-- 18 col x no-shrink x large x harmonious -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 auto; height: 1.5em">X</div>
</div>
</div>
<!-- 19 col x no-shrink x none x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 0.2em">X</div>
</div>
</div>
<!-- 20 col x no-shrink x small x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 0.2em; height: 0.4em">X</div>
</div>
</div>
<!-- 21 col x no-shrink x large x larger -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 0.2em; height: 1.5em">X</div>
</div>
</div>
<!-- 22 col x no-shrink x none x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 0.2em">X</div>
</div>
</div>
<!-- 23 col x no-shrink x smaller x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 0.2em; height: 0.4em">X</div>
</div>
</div>
<!-- 24 col x no-shrink x larger x smaller -->
<div class="wrap">
<div class="col">
<div class="item" style="flex: 1 0 0.2em; height: 1.5em">X</div>
</div>
</div>

48
tests/wpt/web-platform-tests/css/css-flexbox/flex-flexitem-childmargin.html
View file

@ -1,48 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>flex item child margin</title>
<link rel="author" title="shaofeic" href="mailto:csf178@gmail.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items">
<link rel="match" href="reference/flex-flexitem-childmargin-ref.html">
<meta name="flags" content="" />
<meta name="assert" content="margin should effect the orange box and green box need to align to bottom." />
<style type="text/css">
#test
{
background: blue;
display: flex;
height:300px;
}
#test>div.flex {
width: 100px;
background:red;
}
#test>div.fixed
{
height: 300px;
flex:1;
background:red;
}
#test p
{
margin:200px 0 0 0;
}
</style>
</head>
<body>
<div id="test">
<div class="fixed">
<p style="width:100px;height:100px;background:orange;">
a
</p>
</div>
<div class="flex">
<p style="width:100px;height:100px;background:green;">
b
</p>
</div>
</div>
</body>
</html>

33
tests/wpt/web-platform-tests/css/css-flexbox/flex-flexitem-percentage-prescation.html
View file

@ -1,33 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>flex item size prescation</title>
<link rel="author" title="shaofeic" href="mailto:csf178@gmail.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items">
<link rel="match" href="reference/flex-flexitem-percentage-prescation-ref.html">
<meta name="flags" content="" />
<meta name="assert" content="no red color could be seen." />
<style type="text/css">
#test
{
background: red;
display: flex;
height:300px;
width:101px;
}
p {
flex:1;
background:olive;
flex-direction:row;
margin:0 0 0 0;
}
</style>
</head>
<body>
<div id="test">
<p style="background:green;">d</p>
<p>d</p>
</div>
</body>
</html>

32
tests/wpt/web-platform-tests/css/css-flexbox/flex-grow-008.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Flexbox Test: flex-grow - frozen items act as their frozen size</title>
<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact/">
<link rel="help" title="Section 9.7, steps 4 and 5.e" href="http://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="Test checks that items which become frozen due to a max-size violation use that clamped size in later steps to determine free space, so other children can grow to fill the space freed up by fixing the violation.">
<style>
.container {
background-color: red;
display: flex;
height: 100px;
width: 100px;
}
.frozen-child {
flex-grow: 1;
max-width: 0px;
background: red;
}
.non-frozen-child {
flex-grow: 1;
background: green;
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="container">
<div class="frozen-child"></div>
<div class="non-frozen-child"></div>
</div>
</body>

34
tests/wpt/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-023.html
View file

@ -27,29 +27,35 @@ Here's the spec trail why the height of this item is 100px.
specified size suggestion). We ignore transferred size suggestion because
this item has a specified size.
5. content size suggestion = 150, because 150 is the min-content size in the
main axis.
5. content size suggestion = 50px because the stretched width of 100px is sent
through the 2:1 aspect ratio to determine the image's min-content size in the
block axis.
5a. This flex container qualifies for 9.8.3:
If a single-line flex container has a definite cross size, the automatic
preferred outer cross size of any stretched flex items is the flex
container's inner cross size (clamped to the flex item's min and max cross
size) and is considered definite.
So the preferred width of the image is 100px.
5b. The float specified by the min-content calculation from css-sizing 5.1 is
<img src="support/300x150-green.png" style="width: 100px; float: left;" />
This element gets height 50px.
6. specified size suggestion = 100px because that's what's specified.
7. So content-based min size = min(150, 100) = 100px. That becomes its flexed
7. So content-based min size = min(50, 100) = 50px. That becomes its flexed
height (see #1).
8. Then, the item stretches its width to 100px. The item has an aspect ratio,
so does the new width change the height? Not according to
https://drafts.csswg.org/css-flexbox/#algo-stretch, which says "Note that
this step does not affect the main size of the flex item, even if it has an
intrinsic aspect ratio." The height remains 100px.
FF 77 gives the item height of 50px. It's probably due to a disagreement in #8;
I think FF applies the aspect ratio of the new stretched width to get a height.
But it might be a disagreement in #4.
Chrome <= 83 gives the item height 150 because it doesn't treat
min-height:min-content as min-height:auto. That makes the used min-height be
150px. That might change in Chrome 84 or 85 when FlexNG launches.
intrinsic aspect ratio." The height remains 50px.
-->
<div style="height: 50px; width: 100px; background: green;"></div>
<div style="display: flex; flex-direction: column; width:100px; height: 0px;">
<img src="support/300x150-green.png" style="display: flex; min-height: min-content; height: 100px;" />
<img src="support/300x150-green.png" style="min-height: min-content; height: 100px;" />
</div>

27
tests/wpt/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-013.html
View file

@ -4,7 +4,7 @@
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5663" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="min-width: auto ignores transferred size suggestion when item has a definite specified main size">
<meta name="assert" content="content size suggestion of a replaced aspect-ratio item accounts for definition stretched cross size">
<style>
#reference-overlapped-red {
@ -19,25 +19,16 @@
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="width:100px; height: 75px; background: green;"></div>
<div style="display: flex; width: 0px; height: 25px;">
<div style="width:100px; height: 50px; background: green;"></div> <!-- This just completes the green square. -->
<div style="display: flex; width: 0px; height: 50px;">
<!--
content size suggestion is 300px
specified size suggestion is 100px
content size suggestion is 100px because the image has a stretched height of 50px. So min-content size of the image is 300x150/50 = 100.
specified size suggestion is 150px
transferred size suggestion is 100px
Chrome 87 and Firefox 84a1 disagree about transferred size suggestion here
(Chrome says undefined. Firefox says 300/150 * 25 = 50. See spec issue
above.) but it doesn't matter: this test asserts that the transferred size
suggestion is ignored, because of this from the spec (capitalization
added):
transferred size suggestion is ignored because there is a specified size.
In general, the content-based minimum size of a flex item is the smaller of
its content size suggestion and its specified size suggestion. However, if
the box has an aspect ratio AND NO specified size, its content-based
minimum size is the smaller of its content size suggestion and its
transferred size suggestion.
So here the content-based minimum size is min(300, 100) = 100.
So here the content-based minimum size is min(100px, 150px) = 100px
-->
<img src="support/300x150-green.png" style="width: 100px;">
<img src="support/300x150-green.png" style="width: 999px;">
</div>

12
tests/wpt/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-014.html
View file

@ -6,10 +6,6 @@
<style>
.min-content {
width: 10px;
min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: -ie-min-content;
min-width: -o-min-content;
min-width: min-content;
outline: 2px solid;
display: flex;
@ -17,10 +13,6 @@
}
.max-content {
width: 10px;
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: -ie-max-content;
min-width: -o-max-content;
min-width: max-content;
outline: 2px solid;
display: flex;
@ -28,10 +20,6 @@
}
.fit-content {
width: 10px;
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: -ie-fit-content;
min-width: -o-fit-content;
min-width: fit-content;
outline: 2px solid;
display: flex;

2
tests/wpt/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-001-ref.xhtml
View file

@ -12,7 +12,7 @@
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<style>
.flexbox {
border: 1px dashed blue;
border: 1px solid blue;
width: 200px;
font-size: 10px;
}

2
tests/wpt/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-001.xhtml
View file

@ -13,7 +13,7 @@
<link rel="match" href="flexbox-align-self-vert-001-ref.xhtml"/>
<style>
.flexbox {
border: 1px dashed blue;
border: 1px solid blue;
width: 200px;
display: flex;
flex-direction: column;

2
tests/wpt/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-001-ref.xhtml
View file

@ -13,7 +13,7 @@
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<style>
.flexbox {
border: 1px dashed blue;
border: 1px solid blue;
width: 200px;
direction: rtl;
font-family: sans-serif;

2
tests/wpt/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-001.xhtml
View file

@ -14,7 +14,7 @@
<link rel="match" href="flexbox-align-self-vert-rtl-001-ref.xhtml"/>
<style>
.flexbox {
border: 1px dashed blue;
border: 1px solid blue;
width: 200px;
display: flex;
flex-direction: column;

19
tests/wpt/web-platform-tests/css/css-flexbox/flexbox-iframe-intrinsic-size-001-ref.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<style>
div {
height: 400px;
border: 0;
}
div > div {
width: 50%;
float: left;
}
</style>
<p>This test PASS if you see two equally sized blue and green boxes.</p>
<div>
<div style='background: blue;'></div>
<div style='background: green;'></div>
</div>

24
tests/wpt/web-platform-tests/css/css-flexbox/flexbox-iframe-intrinsic-size-001.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"/>
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E">
<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes" title="For boxes with no preferred aspect ratio">
<link rel="match" href="flexbox-iframe-intrinsic-size-001-ref.html">
<meta name="assert" content="Checks that the default iframe size does not imply having an aspect ratio." />
<style>
div {
display: flex;
height: 400px;
}
iframe {
flex: 1 1 auto;
border: 0;
}
</style>
<p>This test PASS if you see two equally sized blue and green boxes.</p>
<div>
<iframe style='background: blue;'></iframe>
<iframe style='background: green;'></iframe>
</div>

11
tests/wpt/web-platform-tests/css/css-flexbox/flexbox-justify-content-wmvert-002.html
View file

@ -26,11 +26,18 @@
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.flexitem')">
This should be Blue to the left of Orange.
Both should be Blue to the left of Orange.
<div class=flexbox style="justify-content: left; writing-mode: vertical-rl;">
<div class=flexitem data-offset-x=0></div>
</div>
This should be Orange to the left of Blue.
<div class=flexbox style="justify-content: left; writing-mode: vertical-lr;">
<div class=flexitem data-offset-x=0></div>
</div>
Both should be Orange to the left of Blue.
<div class=flexbox style="justify-content: right; writing-mode: vertical-rl;">
<div class=flexitem data-offset-x=50></div>
</div>
<div class=flexbox style="justify-content: right; writing-mode: vertical-lr;">
<div class=flexitem data-offset-x=50></div>
</div>

43
tests/wpt/web-platform-tests/css/css-flexbox/flexbox-justify-content-wmvert-003.html Normal file
View file

@ -0,0 +1,43 @@
<!doctype html>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#justify-content-property" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values" />
<meta name="assert" content="Flexbox honors justify-content values when vertical row flexboxes have main axis parallel to line-left <-> line-right axis.">
<style>
.flexbox {
display: flex;
height: 100px;
background: orange;
border: 1px solid;
margin-bottom: 20px;
position: relative;
}
.flexitem {
width: 50px;
height: 50px;
background: blue;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.flexitem')">
Both should be Blue on top of Orange.
<div class=flexbox style="justify-content: left; writing-mode: vertical-rl;">
<div class=flexitem data-offset-y=0></div>
</div>
<div class=flexbox style="justify-content: left; writing-mode: vertical-lr;">
<div class=flexitem data-offset-y=0></div>
</div>
Both should be Orange on top of Blue.
<div class=flexbox style="justify-content: right; writing-mode: vertical-rl;">
<div class=flexitem data-offset-y=50></div>
</div>
<div class=flexbox style="justify-content: right; writing-mode: vertical-lr;">
<div class=flexitem data-offset-y=50></div>
</div>

41
tests/wpt/web-platform-tests/css/css-flexbox/floated-flexitem.html
View file

@ -1,41 +0,0 @@
<!DOCTYPE html>
<html>
<title>CSS Flexbox: Ensure flex item proper formatting context.</title>
<link rel="match" href="reference/floated-flexitem-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items">
<meta name="assert" content="This test checks that the flex items of a flex container participate in their container’s flex formatting context, not in a block formatting context.">
<style>
#flexbox {
background-color: lightgrey;
align-items: flex-start;
}
#flexbox > * {
border: 1px solid green;
}
</style>
<body>
<p>
This example is from the spec. There should be four flex items. Anonymous item 3 shouldn't have
a green border because the anonymous block is the flex item.
</p>
<div id="flexbox" style="display: flex">
<!-- flex item: block child -->
<div id="item1">block</div>
<!-- flex item: floated element; floating is ignored -->
<div id="item2" style="float: left;">float</div>
<!-- flex item: anonymous block box around inline content -->
anonymous item 3
<!-- flex item: inline child -->
<span>
item 4
<!-- flex items do not split around blocks -->
<div id=not-an-item>item 4</div>
item 4
</span>
</div>
</body>
</html>

4
tests/wpt/web-platform-tests/css/css-flexbox/negative-available-size-crash.html Normal file
View file

@ -0,0 +1,4 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1274476">
<div style="display: flex;">
<div style="display: flex; height: 0; overflow-x: scroll;">a

4
tests/wpt/web-platform-tests/css/css-flexbox/parsing/flex-grow-computed.html
View file

@ -13,8 +13,8 @@
<div id="target"></div>
<script>
test_computed_value("flex-grow", "1");
test_computed_value("flex-grow", "2.34e+06");
test_computed_value("flex-grow", "6.78e+08");
test_computed_value("flex-grow", "2.34e+06", ["2.34e+06", "2340000"]);
test_computed_value("flex-grow", "6.78e+08", ["6.78e+08", "678000000"]);
test_computed_value("flex-grow", "0");
</script>
</body>

4
tests/wpt/web-platform-tests/css/css-flexbox/parsing/flex-shrink-computed.html
View file

@ -13,8 +13,8 @@
<div id="target"></div>
<script>
test_computed_value("flex-shrink", "1");
test_computed_value("flex-shrink", "2.34e+06");
test_computed_value("flex-shrink", "6.78e+08");
test_computed_value("flex-shrink", "2.34e+06", ["2.34e+06", "2340000"]);
test_computed_value("flex-shrink", "6.78e+08", ["6.78e+08", "678000000"]);
test_computed_value("flex-shrink", "0");
</script>
</body>

17
tests/wpt/web-platform-tests/css/css-flexbox/percentage-heights-016.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<title>Fixed indefinite heights</title>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="bookmark" href="https://crbug.com/1255340">
<meta name="assert" content="Flex items don't get definite heights just because their specified main sizes are definite." />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="display: flex; flex-direction: column;">
<!-- Remove min-height:auto so we don't have to think about whether it matters. -->
<div style="flex: 1 1 content; height: 100px; min-height: 0px;">
<div style="height: 100px; width: 100px; background: green;"></div>
<div style="height: 100%; width: 100px; background: red;"></div>
</div>
</div>

19
tests/wpt/web-platform-tests/css/css-flexbox/percentage-heights-017.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<title>Fixed indefinite heights</title>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-common">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="bookmark" href="https://crbug.com/1255340">
<meta name="assert" content="Flex items don't get definite heights just because their specified main sizes are definite. This affects flex items with with a flex-basis that behaves as auto, where the auto-behaving flex-basis derives from omitted flex-basis from flex shorthand." />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="display: flex; flex-direction: column;">
<!-- Remove min-height:auto so we don't have to think about whether it matters. -->
<!-- Chrome 96 and Firefox 94 still use 0% as the value of flex-basis when it is omitted from the flex shorthand, despite the recent spec change that dictates 0px instead of 0%. -->
<div style="flex: 1 1; height: 100px; min-height: 0px;">
<div style="height: 100px; width: 100px; background: green;"></div>
<div style="height: 100%; width: 100px; background: red;"></div>
</div>
</div>

18
tests/wpt/web-platform-tests/css/css-flexbox/percentage-heights-018.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>Fixed indefinite heights</title>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="bookmark" href="https://crbug.com/1255340">
<meta name="assert" content="Flex items don't get definite heights just because their specified main sizes are definite. This affects flex items with with a flex-basis that behaves as auto." />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="display: flex; flex-direction: column;">
<!-- Remove min-height:auto so we don't have to think about whether it matters. -->
<!-- The 0% behaves as auto because the parent container has an indefinite height. -->
<div style="flex: 1 1 0%; height: 100px; min-height: 0px;">
<div style="height: 100px; width: 100px; background: green;"></div>
<div style="height: 100%; width: 100px; background: red;"></div>
</div>
</div>

44
tests/wpt/web-platform-tests/css/css-flexbox/percentage-heights-019.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Flexbox Test: Test the percentage resolution of a child in a flex item that has an indefinite main size</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1739048">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Per 9.8.4, once the outer flex container's cross size has been determined, the inner flex container's main size is considered definite. Then per 9.8.1, the item's post-flexing main size is also treated as definite. Therefore, in the final layout, the child's percentage block-size should be treated as resolvable and should be honored.">
<style>
.outer {
display: flex;
}
.inner {
display: flex;
flex-direction: column;
inline-size: 100px;
}
.item {
overflow: hidden; /* This is essential to reproduce the bug. */
min-block-size: 100px;
background: red;
}
.child {
block-size: 100%;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="outer">
<div class="inner">
<div class="item">
<div class="child"></div>
</div>
</div>
</div>
</html>

29
tests/wpt/web-platform-tests/css/css-flexbox/reference/flex-base-ref.html
View file

@ -1,29 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Flexible Box Test: display proprety - flex</title>
<link rel="author" title="haosdent" href="mailto:haosdent@gmail.com">
<style type="text/css">
.container {
position: relative;
height: 6em;
width: 3em;
background: red;
margin: 1em;
border: 1px solid black;
}
.success {
background: green;
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<p>The test passed if you can't find red color.</p>
<div class="container">
<span class="success">Hello</span>
</div>
</body>
</html>

46
tests/wpt/web-platform-tests/css/css-flexbox/reference/flex-flexitem-childmargin-ref.html
View file

@ -1,46 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: childNodes' 'margin' property of flex item'</title>
<link rel="author" title="Shaofei Cheng" href="mailto:csf178@gmail.com" />
<meta name="flags" content="" />
<style>
#test
{
background: blue;
display: block;
height:300px;
position:relative;
}
#test>div.flex {
width: 100px;
background:red;
}
#test>div.fixed
{
height: 300px;
flex:1;
background:red;
}
#test p
{
margin:200px 0 0 0;
}
</style>
</head>
<body>
<div id="test">
<div class="fixed">
<p style="width:100px;height:100px;background:orange;position:absolute;left:0px;bottom:0px;">
a
</p>
</div>
<div class="flex">
<p style="width:100px;height:100px;background:green;position:absolute;right:0px;bottom:0px;">
b
</p>
</div>
</div>
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-flexbox/reference/flex-flexitem-percentage-prescation-ref.html
View file

@ -1,31 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: childNodes' 'margin' property of flex item'</title>
<link rel="author" title="Shaofei Cheng" href="mailto:csf178@gmail.com" />
<meta name="flags" content="" />
<style>
#test
{
background: red;
position:relative;
height:300px;
width:101px;
}
p
{
position:absolute;
margin:0 0 0 0;
}
</style>
</head>
<body>
<div id="test">
<div id="test">
<p style="background:green;top:0px;height:300px;left:0px;height:300px;width:50.5px;">d</p>
<p style="top:0px;left:50.5px;height:300px;background:olive;width:50.5px;">d</p>
</div>
</div>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-flexbox/reference/floated-flexitem-ref.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<style>
#flexbox {
background-color: lightgrey;
}
#flexbox > * {
border: 1px solid green;
vertical-align: top;
}
</style>
<body>
<p>
This example is from the spec. There should be four flex items. Anonymous item 3 shouldn't have
a green border because the anonymous block is the flex item.
</p>
<div id="flexbox">
<div style="display: inline-block">block</div><div
style="display: inline-block">float</div><div
style="display: inline-block; border: 0">anonymous item 3</div><div
style="display: inline-block">
item 4<br>
item 4<br>
item 4
</div>
</div>
</body>
</html>

89
tests/wpt/web-platform-tests/css/css-flexbox/scrollbars-auto-ref.html
View file

@ -41,7 +41,6 @@
max-width: 100px;
max-height: 100px;
white-space: nowrap;
font-size: 0;
}
.row > div, .row-reverse > div {
display: inline-flex;
@ -49,72 +48,29 @@
}
.column > div, .column-reverse > div {
display: flex;
margin: 3px;
}
/* Adjust margins to account for collapsing. */
.ltr.horizontal > .row > .leaf3 {
margin-right: 0;
}
.ltr.flipped-blocks > .row > .leaf3, .ltr.flipped-lines > .row > .leaf3 {
margin-bottom: 0;
}
.rtl.horizontal > .row > .leaf3 {
margin-left: 0;
}
.rtl.flipped-blocks > .row > .leaf3, .rtl.flipped-lines > .row > .leaf3 {
margin-top: 0;
}
.ltr.horizontal > .row-reverse > .leaf3 {
margin-left: 0;
}
.ltr.flipped-blocks > .row-reverse > .leaf3, .ltr.flipped-lines > .row-reverse > .leaf3 {
margin-top: 0;
}
.rtl.horizontal > .row-reverse > .leaf3 {
margin-right: 0;
}
.rtl.flipped-blocks > .row-reverse > .leaf3, .rtl.flipped-lines > .row-reverse > .leaf3 {
margin-bottom: 0;
}
.horizontal > .column > .leaf1, .horizontal > .column > .leaf2 {
margin: 3px 3px 6px 3px;
}
.horizontal > .column > .leaf3 {
margin: 3px;
}
.flipped-blocks > .column > .leaf1, .flipped-blocks > .column > .leaf2 {
margin: 3px 3px 3px 6px;
}
.flipped-blocks > .column > .leaf3 {
margin: 3px;
}
.flipped-lines > .column > .leaf1, .flipped-lines > .column > .leaf2 {
margin: 3px 6px 3px 3px;
}
.flipped-lines > .column > .leaf3 {
margin: 3px;
}
.horizontal > .column-reverse > .leaf1, .horizontal > .column-reverse > .leaf2 {
margin: 6px 3px 3px 3px;
}
.horizontal > .column-reverse > .leaf3 {
margin: 0 3px 3px 3px;
}
.flipped-blocks > .column-reverse > .leaf1, .flipped-blocks > .column-reverse > .leaf2 {
margin: 3px 6px 3px 3px;
}
.flipped-blocks > .column-reverse > .leaf3 {
margin: 3px 0 3px 3px;
}
.flipped-lines > .column-reverse > .leaf1, .flipped-lines > .column-reverse > .leaf2 {
margin: 3px 3px 3px 6px;
}
.flipped-lines > .column-reverse > .leaf3 {
margin: 3px 3px 3px 0;
}
.flex > div {
width: 30px;
@ -158,25 +114,56 @@ flexDirections.forEach((flexDirection) => {
document.body.appendChild(containerRow);
});
// Scroll all flex containers to the emulated beginning of flow.
var nodes = document.querySelectorAll(".ltr > .row-reverse");
// Scroll all {row,column}-reverse flex containers to the emulated beginning
// of flow.
// * "row-reverse" changes the initial scroll position of a flex container to
// correspond to its *inline-end* edge. So in our emulation, we need to
// scroll to the extreme inline-end position. For 'direction:ltr', this is a
// positive scroll offset; for 'direction:rtl', it's a zero or negative offset.
var nodes = document.querySelectorAll(".ltr.horizontal > .row-reverse");
for (var i = 0; i < nodes.length; i++) {
nodes[i].scrollLeft = 10000;
}
nodes = document.querySelectorAll(".ltr.flipped-blocks > .row-reverse");
for (var i = 0; i < nodes.length; i++) {
nodes[i].scrollTop = 10000;
}
nodes = document.querySelectorAll(".rtl > .row-reverse");
nodes = document.querySelectorAll(".ltr.flipped-lines > .row-reverse");
for (var i = 0; i < nodes.length; i++) {
nodes[i].scrollTop = 10000;
}
var nodes = document.querySelectorAll(".rtl.horizontal > .row-reverse");
for (var i = 0; i < nodes.length; i++) {
nodes[i].scrollLeft = -10000;
}
nodes = document.querySelectorAll(".rtl.flipped-blocks > .row-reverse");
for (var i = 0; i < nodes.length; i++) {
nodes[i].scrollTop = -10000;
}
nodes = document.querySelectorAll(".column-reverse");
nodes = document.querySelectorAll(".rtl.flipped-lines > .row-reverse");
for (var i = 0; i < nodes.length; i++) {
nodes[i].scrollTop = -10000;
}
// * "column-reverse" changes the initial scroll position of a flex container
// to correspond to its *block-end* edge. So in our emulation, we need to
// scroll to the extreme block-end position. For horizontal-tb and
// vertical-lr, this is a positive scroll offset (since "tb" and "lr" indicate
// progression in a positive direction along the underlying physical axis).
// For vertical-rl, this is a zero or negative scroll offset (since "rl"
// indicates progression in a negative direction (right-to-left) along the
// underlying physical axis). Note that the 'direction:rtl/ltr' doesn't need to
// be considered at all in this section, since that only impacts the inline
// axis, which isn't the axis that we're emulating a reversal for here.
nodes = document.querySelectorAll(".horizontal > .column-reverse");
for (var i = 0; i < nodes.length; i++) {
nodes[i].scrollLeft = 10000;
nodes[i].scrollTop = 10000;
}
nodes = document.querySelectorAll(".flipped-blocks > .column-reverse");
for (var i = 0; i < nodes.length; i++) {
nodes[i].scrollLeft = -10000;
nodes[i].scrollTop = 0;
}
nodes = document.querySelectorAll(".flipped-lines > .column-reverse");
for (var i = 0; i < nodes.length; i++) {
nodes[i].scrollLeft = 10000;
}
</script>

46
tests/wpt/web-platform-tests/css/css-flexbox/scrollbars-ref.html
View file

@ -41,7 +41,6 @@
max-width: 100px;
max-height: 100px;
white-space: nowrap;
font-size: 0;
}
.row > div, .row-reverse > div {
display: inline-flex;
@ -49,72 +48,29 @@
}
.column > div, .column-reverse > div {
display: flex;
margin: 3px;
}
/* Adjust margins to account for collapsing. */
.ltr.horizontal > .row > .leaf3 {
margin-right: 0;
}
.ltr.flipped-blocks > .row > .leaf3, .ltr.flipped-lines > .row > .leaf3 {
margin-bottom: 0;
}
.rtl.horizontal > .row > .leaf3 {
margin-left: 0;
}
.rtl.flipped-blocks > .row > .leaf3, .rtl.flipped-lines > .row > .leaf3 {
margin-top: 0;
}
.ltr.horizontal > .row-reverse > .leaf3 {
margin-left: 0;
}
.ltr.flipped-blocks > .row-reverse > .leaf3, .ltr.flipped-lines > .row-reverse > .leaf3 {
margin-top: 0;
}
.rtl.horizontal > .row-reverse > .leaf3 {
margin-right: 0;
}
.rtl.flipped-blocks > .row-reverse > .leaf3, .rtl.flipped-lines > .row-reverse > .leaf3 {
margin-bottom: 0;
}
.horizontal > .column > .leaf1, .horizontal > .column > .leaf2 {
margin: 3px 3px 6px 3px;
}
.horizontal > .column > .leaf3 {
margin: 3px;
}
.flipped-blocks > .column > .leaf1, .flipped-blocks > .column > .leaf2 {
margin: 3px 3px 3px 6px;
}
.flipped-blocks > .column > .leaf3 {
margin: 3px;
}
.flipped-lines > .column > .leaf1, .flipped-lines > .column > .leaf2 {
margin: 3px 6px 3px 3px;
}
.flipped-lines > .column > .leaf3 {
margin: 3px;
}
.horizontal > .column-reverse > .leaf1, .horizontal > .column-reverse > .leaf2 {
margin: 6px 3px 3px 3px;
}
.horizontal > .column-reverse > .leaf3 {
margin: 0 3px 3px 3px;
}
.flipped-blocks > .column-reverse > .leaf1, .flipped-blocks > .column-reverse > .leaf2 {
margin: 3px 6px 3px 3px;
}
.flipped-blocks > .column-reverse > .leaf3 {
margin: 3px 0 3px 3px;
}
.flipped-lines > .column-reverse > .leaf1, .flipped-lines > .column-reverse > .leaf2 {
margin: 3px 3px 3px 6px;
}
.flipped-lines > .column-reverse > .leaf3 {
margin: 3px 3px 3px 0;
}
.flex > div {
width: 30px;

4
tests/wpt/web-platform-tests/css/css-flexbox/support/large-green-rectangle.svg Normal file
View file

@ -0,0 +1,4 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 7500 3750" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect id="Background" x="0" y="0" width="7500" height="3750" style="fill:green;"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 299 B

8
tests/wpt/web-platform-tests/css/css-flexbox/table-as-item-inflexible-in-column-2.html
View file

@ -10,8 +10,10 @@
<p>Test passes if there is a filled green square.</p>
<div style="display: flex; flex-direction: column;">
<table style="box-sizing: content-box; border: 10px solid green; background: green;
<!-- Use display:table and display:table-caption instead of the HTML tags so that box-sizing is used in WebKit-based browsers.
Since long time ago WebKit ignores box-sizing for HTML tables. That isn't the case for CSS tables though. -->
<div style="display: table; box-sizing: content-box; border: 10px solid green; background: green;
width: 80px; flex: 0 0 50px">
<caption style="height: 10px; border: 10px solid green; background: green;"></caption>
</table>
<div style="display: table-caption; height: 10px; border: 10px solid green; background: green;"></div>
</div>
</div>

8
tests/wpt/web-platform-tests/css/css-flexbox/table-as-item-inflexible-in-row-2.html
View file

@ -10,8 +10,10 @@
<p>Test passes if there is a filled green square.</p>
<div style="display: flex; flex-direction: row;">
<table style="box-sizing: content-box; border: 10px solid green; background: green;
<!-- Use display:table and display:table-caption instead of the HTML tags so that box-sizing is used in WebKit-based browsers.
Since long time ago WebKit ignores box-sizing for HTML tables. That isn't the case for CSS tables though. -->
<div style="display:table; box-sizing: content-box; border: 10px solid green; background: green;
height: 50px; flex: 0 0 80px">
<caption style="height: 10px; border: 10px solid green; background: green;"></caption>
</table>
<div style="display: table-caption; height: 10px; border: 10px solid green; background: green;"></div>
</div>
</div>

12
tests/wpt/web-platform-tests/css/css-flexbox/table-as-item-large-intrinsic-size.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">
<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; width: 100px; height: 50px;">
<table style="position: relative; flex: 1; border-spacing: 0;">
<td style="padding: 0;">
<div style="height: 100px;"></div>
<div style="position: absolute; inset: 0; background: green;"></div>
</td>
</table>
</div>

12
tests/wpt/web-platform-tests/css/css-flexbox/table-as-item-specified-width-vertical.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<title>Table with vertical writing mode inside a row flexbox container</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" />
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="The width of an empty table (vertical direction) inside a flexbox container (row direction) is computed correctly.">
<p>Test passes if there is a filled green square.</p>
<div style="display: flex; flex-direction: row; height: 100px;">
<div style="display: table; writing-mode: vertical-lr; width: 500px; background: green; flex: 0 0 100px;"></div>
</div>

200
tests/wpt/web-platform-tests/css/css-flexbox/text-as-flexitem-size-001.html Normal file
View file

@ -0,0 +1,200 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
This test is a text-based variant of text-as-flexitem-size-001.
(Not sure if all these variants are needed without an aspect ratio,
but seemed best to keep it in parallel as much as reasonable.)
-->
<html>
<head>
<meta charset="utf-8">
<title>
CSS Test: Testing how explicit main-size & cross-size constraints
influence sizing on non-stretched flex item containing text.
</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="author" title="Elika J. Etemad" href="http://inkedblade.net/contact">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
<style>
@import "/fonts/ahem.css";
.flexbox {
display: flex;
flex-direction: row;
border: 1px solid black;
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
width: 80px;
height: 50px;
justify-content: flex-start;
align-items: flex-start;
float: left; /* For testing in "rows" */
}
br { clear: both; }
.flexbox > * {
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
later channels of influence. */
min-width: 0;
min-height: 0;
background: orange;
}
.flexbox p {
font: 10px/1 Ahem, monospace;
margin: 0.5em;
color: #0006;
}
/* Depending on wrapping, flex item content will be 35px or 45px tall,
min-content width = 40px and max-content width = 70px */
</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('.flexbox > div')">
<!-- Row 1: no special sizing: -->
<div class="flexbox">
<div data-expected-width="70" data-expected-height="35">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
<div class="flexbox" style="width: 50px">
<div data-expected-width="50" data-expected-height="45">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
<div class="flexbox" style="width: 20px">
<div data-expected-width="20" data-expected-height="45">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
<br>
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
<div class="flexbox">
<div style="width: 30px"
data-expected-width="30" data-expected-height="45">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
<div class="flexbox">
<div style="height: 30px"
data-expected-width="70" data-expected-height="30">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
<div class="flexbox">
<div style="flex: 0 0 30px"
data-expected-width="30" data-expected-height="45">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
<br>
<!-- Row 3: min main-size OR min cross-size, or both -->
<div class="flexbox">
<div style="min-width: 75px"
data-expected-width="75" data-expected-height="35">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
<div class="flexbox">
<div style="min-height: 40px"
data-expected-width="70" data-expected-height="40">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
<div class="flexbox">
<div style="min-width: 75px; min-height: 40px"
data-expected-width="75" data-expected-height="40">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
<br>
<!-- Row 4: max main-size OR max cross-size, or both -->
<div class="flexbox">
<div style="max-width: 20px"
data-expected-width="20" data-expected-height="45">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
<div class="flexbox">
<div style="max-height: 20px"
data-expected-width="70" data-expected-height="20">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
<div class="flexbox">
<div style="max-width: 20px; max-height: 20px"
data-expected-width="20" data-expected-height="20">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
<br>
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
<div class="flexbox">
<div style="min-width: 70px; max-height: 20px"
data-expected-width="70" data-expected-height="20">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
<div class="flexbox">
<div style="max-width: 20px; min-height: 50px"
data-expected-width="20" data-expected-height="50">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
<br>
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
<div class="flexbox">
<div style="min-width: 70px; height: 20px"
data-expected-width="70" data-expected-height="20">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
<div class="flexbox">
<div style="width: 40px; max-height: 20px"
data-expected-width="40" data-expected-height="20">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
<div class="flexbox">
<div style="max-width: 20px; height: 20px"
data-expected-width="20" data-expected-height="20">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
<div class="flexbox">
<div style="width: 20px; min-height: 20px"
data-expected-width="20" data-expected-height="45">
<p>xx xxx</p>
<p>xx</p>
</div>
</div>
</body>
</html>