mirror of
https://github.com/servo/servo.git
synced 2025-08-07 14:35:33 +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,218 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid: Grid container baseline</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
|
||||
<link rel="help" href="https://crbug.com/234191">
|
||||
<link rel="match" href="references/grid-baseline-001-ref.html">
|
||||
<meta name="assert" content="Check the first baselines of a grid container."/>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.inline-grid {
|
||||
display: inline-grid;
|
||||
background-color: lightgrey;
|
||||
margin-top: 5px;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
background-color: grey;
|
||||
margin-top: 10px;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.empty {
|
||||
border-style: solid;
|
||||
border-width: 5px 0px 10px;
|
||||
padding: 2px 0px 4px;
|
||||
margin: 10px 0px 20px;
|
||||
}
|
||||
.column {
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
.firstRowFirstColumn {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body style="position: relative">
|
||||
|
||||
<!-- If any of the grid items whose areas intersect the grid container's first
|
||||
row/column participate in baseline alignment, the grid container's baseline is
|
||||
the baseline of those grid items. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-grid" style="grid-auto-rows: 50px;">
|
||||
<div style="align-self: end">below</div>
|
||||
<div style="align-self: baseline; margin-top: 15px">baseline</div>
|
||||
<div style="align-self: 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-grid" style="grid-auto-rows: 40px">
|
||||
<div style="align-self: end">below</div>
|
||||
<div style="align-self: baseline; margin-top: 20px; writing-mode: vertical-rl"></div>
|
||||
<div style="align-self: start">above</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-grid">
|
||||
<h2>h2 baseline</h2>
|
||||
<div>above</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-grid">
|
||||
<div>baseline</div>
|
||||
<h2>h2 below</h2>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<!-- If the first grid 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-grid" 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 griditems, align to the bottom of the margin box. -->
|
||||
<div>
|
||||
should align below the bottom
|
||||
<div class="empty inline-grid" style="width: 30px; height: 30px">
|
||||
</div>
|
||||
of the black line
|
||||
</div>
|
||||
|
||||
<div>
|
||||
should align with the bottom
|
||||
<div class="inline-grid" style="width: 40px; height: 40px;">
|
||||
<div style="width: 20px; height: 20px; border: 5px solid black; background: red;"></div>
|
||||
</div>
|
||||
of the red box
|
||||
</div>
|
||||
|
||||
<!-- column-axis test cases. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-grid column">
|
||||
<div>baseline</div>
|
||||
<div>below</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<!-- If the first grid item has an orthogonal baseline, use the synthesized
|
||||
baseline (bottom of the border box of the first item). -->
|
||||
<div>
|
||||
should align with the middle
|
||||
<div class="inline-grid 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 grid items. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-grid">
|
||||
<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-grid" style="grid-auto-rows: 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-grid" 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="grid" 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="grid">
|
||||
<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="grid-with-scrollbar" class="inline-grid" style="height: 65px; width: 150px">
|
||||
<div id="griditem-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("griditem-with-scrollbar").scrollTop = 999;
|
||||
document.getElementById("grid-with-scrollbar").style.width = "auto";
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: Grid container baseline</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
|
||||
<link rel="help" href="https://crbug.com/234191">
|
||||
<link rel="match" href="references/grid-baseline-002-ref.html">
|
||||
<meta name="assert" content="Check that Baseline Alignment works for 1-dimensional Grid like in Flexible Box, even using margins, paddings and borders."/>
|
||||
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
.inline-block { display: inline-block; }
|
||||
.grid, .inline-grid {
|
||||
background-color: lightgrey;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.border { border: 11px solid pink; }
|
||||
.padding { padding: 13px; }
|
||||
.margin { margin: 8px 0; }
|
||||
</style>
|
||||
<div>
|
||||
before text
|
||||
<div class="border" style="display: inline-block; background-color: lightgrey">
|
||||
<div class="grid" 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="grid padding" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink">
|
||||
<div style="background-color: lightgrey"></div>
|
||||
</div>
|
||||
</div>
|
||||
with the
|
||||
<div class="inline-block margin">
|
||||
<div class="grid border" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink">
|
||||
<div style="background-color: lightgrey"></div>
|
||||
</div>
|
||||
</div>
|
||||
bottom of
|
||||
<div class="inline-block padding" style="padding-left: 0; padding-right: 0">
|
||||
<div class="grid margin border" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink">
|
||||
<div style="background-color: lightgrey;"></div>
|
||||
</div>
|
||||
</div>
|
||||
the grey box.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Should align with the
|
||||
<div class="inline-block">
|
||||
<div class="grid" style="background-color: white">
|
||||
<div class="border padding margin" style="background-color: lightgrey;"></div>
|
||||
</div>
|
||||
</div>
|
||||
bottom of the pink box.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Should align 8px
|
||||
<div class="inline-grid margin border" style="grid-template-columns: 30px; grid-template-rows: 30px;"></div>
|
||||
below the bottom
|
||||
<div class="inline-grid margin border padding"></div>
|
||||
of the pink box.
|
||||
</div>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: Grid container baseline</title>
|
||||
<link rel="author" title="Manuel Rego" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline">
|
||||
<link rel="help" href="https://crbug.com/234191">
|
||||
<link rel="match" href="references/grid-baseline-003-ref.html">
|
||||
<meta name="assert" content="Check that grid container baseline should be synthesized from the border edges when it has no baseline."/>
|
||||
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
.inline-block { display: inline-block; }
|
||||
.grid, .inline-grid {
|
||||
background-color: lightgrey;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.border { border: 11px solid pink; }
|
||||
.padding { padding: 13px; }
|
||||
.margin { margin: 8px 0; }
|
||||
</style>
|
||||
|
||||
<div>
|
||||
Should align with the bottom
|
||||
<div class="inline-block border margin padding" style="background-color: pink">
|
||||
<div class="grid border margin padding" style="grid-template-columns: 100px; grid-template-rows: 100px; background-color: pink">
|
||||
<div style="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="grid" style="grid-template-columns: 100px; grid-template-rows: 100px; background-color: pink">
|
||||
<div style="overflow: scroll; padding-bottom: 10px; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
|
||||
</div>
|
||||
</div>
|
||||
horizontal scrollbar, if one is visible.
|
||||
</div>
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: Grid container baseline</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-order">
|
||||
<link rel="help" href="https://crbug.com/234191">
|
||||
<meta name="assert" content="Check that grid container must use its first item in grid-modified document order (grid order) to compute its baseline."/>
|
||||
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<link href="/css/support/alignment.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.container {
|
||||
position: relative;
|
||||
font: 10px/1 Ahem;
|
||||
border: 5px solid;
|
||||
width: 470px;
|
||||
}
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
grid-template-columns: 50px 50px;
|
||||
width: 150px;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
}
|
||||
.twoRows { grid-template-rows: 50px 50px; }
|
||||
.threeRows { grid-template-rows: 50px 50px 50px; }
|
||||
.empty {
|
||||
border-color: black;
|
||||
border-style: solid;
|
||||
margin: 15px 0px 30px;
|
||||
border-width: 5px 0px 10px;
|
||||
padding: 10px 0px 20px;
|
||||
}
|
||||
.item {
|
||||
height: 25px;
|
||||
border-color: black;
|
||||
border-style: solid;
|
||||
}
|
||||
.style1 {
|
||||
border-width: 5px 0px 10px;
|
||||
padding: 10px 0px 20px;
|
||||
}
|
||||
.style2 {
|
||||
border-width: 10px 0px 5px;
|
||||
padding: 20px 0px 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.style3 {
|
||||
border-width: 10px 0px 20px;
|
||||
padding: 5px 0px 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.bothRowFirstColumn, .secondRowSecondColumn {
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
background-color: pink;
|
||||
}
|
||||
.firstRowBothColumn, .secondRowBothColumn {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid, container'); })">
|
||||
<div id="log"></div>
|
||||
<p>
|
||||
The test shows 3 grids each of them with 3 items sorted differently in the DOM.<br>
|
||||
Each grid container must use its first (grid order) item to compute its baseline, and using document-oder in case of element with same grid-order. Hence they might be baseline aligned each other accordingly.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This case shows 3 items located along the first row and in different columns, so grid baseline is computed using the one located at first column (blue item).
|
||||
</p>
|
||||
<div class="container" data-expected-width="480" data-expected-height="120">
|
||||
<div class="grid" data-offset-x="0" data-offset-y="20">
|
||||
<div class="item style1 firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item style2 firstRowSecondColumn" data-offset-x="50" data-offset-y="10"></div>
|
||||
<div class="item style3 firstRowThirdColumn" data-offset-x="100" data-offset-y="20"></div>
|
||||
</div>
|
||||
<div class="grid" data-offset-x="160" data-offset-y="10">
|
||||
<div class="item style1 firstRowThirdColumn" data-offset-x="100" data-offset-y="0"></div>
|
||||
<div class="item style2 firstRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="item style3 firstRowSecondColumn" data-offset-x="50" data-offset-y="20"></div>
|
||||
</div>
|
||||
<div class="grid" data-offset-x="320" data-offset-y="0">
|
||||
<div class="item style1 firstRowSecondColumn" data-offset-x="50" data-offset-y="0"></div>
|
||||
<div class="item style2 firstRowThirdColumn" data-offset-x="100" data-offset-y="10"></div>
|
||||
<div class="item style3 firstRowFirstColumn" data-offset-x="0" data-offset-y="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
This case shows 3 items located along the first row and in different columns, so such item is used to determine the grid's baseline instead of using the grid order.
|
||||
</p>
|
||||
<div class="container" data-expected-width="480" data-expected-height="120">
|
||||
<div class="grid" data-offset-x="0" data-offset-y="0">
|
||||
<div class="item style1 firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item style2 firstRowSecondColumn" data-offset-x="50" data-offset-y="10"></div>
|
||||
<div class="item style3 firstRowThirdColumn alignSelfBaseline" data-offset-x="100" data-offset-y="20"></div>
|
||||
</div>
|
||||
<div class="grid" data-offset-x="160" data-offset-y="0">
|
||||
<div class="item style1 firstRowThirdColumn" data-offset-x="100" data-offset-y="0"></div>
|
||||
<div class="item style2 firstRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="item style3 firstRowSecondColumn alignSelfBaseline" data-offset-x="50" data-offset-y="20"></div>
|
||||
</div>
|
||||
<div class="grid" data-offset-x="320" data-offset-y="20">
|
||||
<div class="item style1 firstRowSecondColumn alignSelfBaseline" data-offset-x="50" data-offset-y="0"></div>
|
||||
<div class="item style2 firstRowThirdColumn" data-offset-x="100" data-offset-y="10"></div>
|
||||
<div class="item style3 firstRowFirstColumn" data-offset-x="0" data-offset-y="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
This case shows 3 items' areas intersecting the first row and first column, so the dom order must be used to determine each grid's baseline.
|
||||
</p>
|
||||
<div class="container" data-expected-width="480" data-expected-height="165">
|
||||
<div class="grid twoRows" data-offset-x="0" data-offset-y="40">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
</div>
|
||||
<div class="grid twoRows" data-offset-x="160" data-offset-y="0">
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
</div>
|
||||
<div class="grid twoRows" data-offset-x="320" data-offset-y="55">
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
This case shows 3 items' areas intersecting the first row and first column, but one of the items participates in baseline alignment, so such item is used to determine the grid's baseline instead of using the dom order.
|
||||
</p>
|
||||
<div class="container" data-expected-width="480" data-expected-height="165">
|
||||
<div class="grid twoRows" data-offset-x="0" data-offset-y="55">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="firstRowBothColumn alignSelfBaseline" style="width: 100px; height: 20px;" data-offset-x="0" data-offset-y="15"></div>
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
</div>
|
||||
<div class="grid twoRows" data-offset-x="160" data-offset-y="40">
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="firstRowFirstColumn alignSelfBaseline" style="width: 50px; height: 50px;" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
</div>
|
||||
<div class="grid twoRows" data-offset-x="320" data-offset-y="0">
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="bothRowFirstColumn alignSelfBaseline" style="width: 40px; height: 80px;" data-offset-x="0" data-offset-y="10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
This case shows one of the grids with no items, hence its baseline must be synthesized.
|
||||
</p>
|
||||
<div class="container" data-expected-width="480" data-expected-height="250">
|
||||
<div class="grid twoRows" data-offset-x="0" data-offset-y="140">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
</div>
|
||||
<div class="grid twoRows" data-offset-x="160" data-offset-y="100">
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
</div>
|
||||
<div class="grid empty twoRows" data-offset-x="320" data-offset-y="15">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
This case shows one of the grids with no items in the first row, hence its baseline must be synthesized.
|
||||
</p>
|
||||
<div class="container" data-expected-width="480" data-expected-height="300">
|
||||
<div class="grid twoRows" data-offset-x="0" data-offset-y="190">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
</div>
|
||||
<div class="grid twoRows" data-offset-x="160" data-offset-y="150">
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
</div>
|
||||
<div class="grid empty threeRows" data-offset-x="320" data-offset-y="15">
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="60"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="50" data-offset-y="110"></div>
|
||||
<div class="secondRowBothColumn" data-offset-x="0" data-offset-y="75"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -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