mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +01:00
Update web-platform-tests to revision 20a217cb8488e4339e0c9610aba99e2654b676c3
This commit is contained in:
WPT Sync Bot
parent
3ca86eeba5
commit
21de781e2a
285 changed files with 5707 additions and 670 deletions
|
|
@ -0,0 +1,205 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.inline-flexbox {
|
||||
display: inline-flex;
|
||||
background-color: lightgrey;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.flexbox {
|
||||
display: flex;
|
||||
background-color: grey;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.empty {
|
||||
border-style: solid;
|
||||
border-width: 5px 0px 10px;
|
||||
padding: 2px 0px 4px;
|
||||
margin: 10px 0px 20px;
|
||||
}
|
||||
.column {
|
||||
flex-flow: column;
|
||||
}
|
||||
.column-reverse {
|
||||
flex-flow: column-reverse;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body style="position: relative">
|
||||
|
||||
<!-- If any of the flex items on the flex container's first line participate
|
||||
in baseline alignment, the flex container's main-axis baseline is the baseline
|
||||
of those flex items. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-flexbox" style="height: 50px;">
|
||||
<div style="align-self: flex-end">below</div>
|
||||
<div style="align-self: baseline; margin-top: 15px">baseline</div>
|
||||
<div style="align-self: flex-start">above</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<!-- This grid has a baseline item, it's orthogonal but it still participates
|
||||
in baseline alignment. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-flexbox" style="height: 40px">
|
||||
<div style="align-self: flex-end">below</div>
|
||||
<div style="align-self: baseline; margin-top: 20px"></div>
|
||||
<div style="align-self: flex-start">above</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-flexbox">
|
||||
<h2>h2 baseline</h2>
|
||||
<div>above</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-flexbox">
|
||||
<div>baseline</div>
|
||||
<h2>h2 below</h2>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<!-- If the first flex item has an orthogonal baseline, use the synthesized
|
||||
baseline (bottom of the content box of the first item). -->
|
||||
<div>
|
||||
should align with the middle
|
||||
<div class="inline-flexbox" style="width: 40px; height: 40px">
|
||||
<div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black"></div>
|
||||
</div>
|
||||
of the grey box
|
||||
</div>
|
||||
|
||||
<!-- If there are no flexitems, align to the bottom of the margin box. -->
|
||||
<div>
|
||||
should align below the bottom
|
||||
<div class="empty inline-flexbox" style="width: 30px; height: 30px">
|
||||
</div>
|
||||
of the black line
|
||||
</div>
|
||||
|
||||
<!-- If the griditem has not a natural baseline, align to the bottom of the box. -->
|
||||
<div>
|
||||
should align with the bottom
|
||||
<div class="inline-flexbox" style="width: 40px; height: 40px;">
|
||||
<div style="width: 20px; height: 20px; border: 5px solid; background: red; "></div>
|
||||
</div>
|
||||
of the red box
|
||||
</div>
|
||||
|
||||
<!-- cross-axis (column) test cases. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-flexbox column">
|
||||
<div>baseline</div>
|
||||
<div>below</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<!-- If the first flex item has an orthogonal baseline, use the synthesized
|
||||
baseline (bottom of the content box of the first item). -->
|
||||
<div>
|
||||
should align with the middle
|
||||
<div class="inline-flexbox column" style="width: 40px; height: 40px;">
|
||||
<div style="writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black"></div>
|
||||
<div style="writing-mode: vertical-rl; width: 40px; height: 19px"></div>
|
||||
</div>
|
||||
of the grey box
|
||||
</div>
|
||||
|
||||
<!-- More tests on the right side of the page. -->
|
||||
<div style="position: absolute; top: 0; left: 400px; width: 360px">
|
||||
|
||||
<!-- Ignore absolutely positioned flex items. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-flexbox">
|
||||
<div style="position: absolute">absolute</div>
|
||||
<div style="margin-top: 30px">baseline</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<!-- We don't participate in baseline alignment if there's an auto margin. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-flexbox" style="height: 40px;">
|
||||
<div>baseline</div>
|
||||
<div style="align-self: baseline; margin-top: auto">below</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<div>
|
||||
before text
|
||||
<div style="display: inline-block">
|
||||
<div class="inline-flexbox" style="height: 40px;">
|
||||
<div>above</div>
|
||||
<div style="align-self: baseline; margin-top: 10px">baseline</div>
|
||||
<div>above</div>
|
||||
</div>
|
||||
after
|
||||
</div>
|
||||
text
|
||||
</div>
|
||||
|
||||
<!-- The spec is a little unclear what should happen here. For now, align to
|
||||
the last line box. -->
|
||||
<div>
|
||||
before text
|
||||
<div style="display: inline-block">
|
||||
<div class="flexbox" style="height: 30px;">
|
||||
baseline
|
||||
</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<table style="background-color: lightgrey; margin-top: 5px">
|
||||
<tr style="height: 50px">
|
||||
<td style="vertical-align: bottom">bottom</td>
|
||||
<td style="vertical-align: baseline">baseline</td>
|
||||
<td style="vertical-align: top">top</td>
|
||||
<td style="vertical-align: baseline"><div class="flexbox">
|
||||
<h2>h2 baseline</h2>
|
||||
<div>above</div>
|
||||
</div></td>
|
||||
</table>
|
||||
|
||||
<!-- If a box contributing a baseline has a scrollbar, the box must be treated
|
||||
as being in its initial scroll position when computing the baseline. -->
|
||||
<div>
|
||||
before text
|
||||
<div id="flexbox-with-scrollbar" class="inline-flexbox" style="height: 65px; width: 150px">
|
||||
<div id="flexitem-with-scrollbar" style="align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;">
|
||||
The baseline is based on<br>
|
||||
the non-scrolled position;<br>
|
||||
this won't line up.
|
||||
</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById("flexitem-with-scrollbar").scrollTop = 999;
|
||||
document.getElementById("flexbox-with-scrollbar").style.width = "auto";
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
}
|
||||
.inline-flexbox {
|
||||
display: inline-flex;
|
||||
}
|
||||
.flex-one {
|
||||
flex: 1;
|
||||
}
|
||||
.inline-block { display: inline-block; }
|
||||
.flexbox, .inline-flexbox { background-color: lightgrey; }
|
||||
.border { border: 11px solid pink; }
|
||||
.padding { padding: 13px; }
|
||||
.margin { margin: 8px 0; }
|
||||
.flexbox > div {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
before text
|
||||
<div class="border" style="display: inline-block; background-color: lightgrey">
|
||||
<div class="flexbox" style="height: 30px; margin-top: 7px; padding-top: 10px;">
|
||||
baseline
|
||||
</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Should align
|
||||
<div class="inline-block border">
|
||||
<div class="flexbox padding" style="width: 50px; height: 50px; background-color: pink">
|
||||
<div class="flex-one" style="background-color: lightgrey"></div>
|
||||
</div>
|
||||
</div>
|
||||
with the
|
||||
<div class="inline-block margin">
|
||||
<div class="flexbox border" style="width: 50px; height: 50px; background-color: pink">
|
||||
<div class="flex-one" style="background-color: lightgrey"></div>
|
||||
</div>
|
||||
</div>
|
||||
bottom of
|
||||
<div class="inline-block padding" style="padding-left: 0; padding-right: 0">
|
||||
<div class="flexbox margin border" style="width: 50px; height: 50px; background-color: pink">
|
||||
<div class="flex-one" style="background-color: lightgrey;"></div>
|
||||
</div>
|
||||
</div>
|
||||
the grey box.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Should align with the
|
||||
<div class="inline-block">
|
||||
<div class="flexbox" style="background-color: white">
|
||||
<div class="flex-one border padding margin" style="background-color: lightgrey;"></div>
|
||||
</div>
|
||||
</div>
|
||||
bottom of the pink box.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Should align 8px
|
||||
<div class="inline-flexbox margin border" style="width: 30px; height: 30px;"></div>
|
||||
below the bottom
|
||||
<div class="inline-flexbox margin border padding"></div>
|
||||
of the pink box.
|
||||
</div>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
}
|
||||
.inline-flexbox {
|
||||
display: inline-flex;
|
||||
}
|
||||
.flex-one {
|
||||
flex: 1;
|
||||
}
|
||||
.inline-block { display: inline-block; }
|
||||
.flexbox, .inline-flexbox { background-color: lightgrey; }
|
||||
.border { border: 11px solid pink; }
|
||||
.padding { padding: 13px; }
|
||||
.margin { margin: 8px 0; }
|
||||
.flexbox > div {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
Should align with the bottom
|
||||
<div class="inline-block border margin padding" style="background-color: pink">
|
||||
<div class="flexbox border margin padding" style="width: 100px; height: 100px; background-color: pink">
|
||||
<div style="width: 200px; overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink;"></div>
|
||||
</div>
|
||||
</div>
|
||||
of the horizontal scrollbar.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Should align 10px below the
|
||||
<div class="inline-block" style="background-color: pink">
|
||||
<div class="flexbox" style="width: 100px; height: 100px; background-color: pink">
|
||||
<div style="width: 200px; overflow: scroll; background-color: lightgrey; padding-bottom: 10px; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
|
||||
</div>
|
||||
</div>
|
||||
horizontal scrollbar, if one is visible.
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue