mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision 1a7d6fcf01f28389b557b20951808a8adfef7e2d
This commit is contained in:
WPT Sync Bot
parent
cabd254509
commit
7b73751e5d
101 changed files with 1496 additions and 219 deletions
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
|
||||
<link rel="bookmark" href="https://crbug.com/1033476">
|
||||
<meta name="assert" content="Column flex item's height does not influence its min-height content size suggestion in a varitey of scenarios.">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<style>
|
||||
.outer-column-flexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
margin-bottom: 10px; /* Just for visually spacing things out */
|
||||
}
|
||||
</style>
|
||||
|
||||
<body onload="checkLayout('.outer-column-flexbox > div');">
|
||||
|
||||
<div id=log></div>
|
||||
|
||||
<p>Test passes if there is a sequence of filled green squares.</p>
|
||||
|
||||
<!-- %height of descendant is not resolved against specified height for purposes of min-content sizing. -->
|
||||
<div class=outer-column-flexbox>
|
||||
<div style="flex-basis: 100px; height: 200px;" data-expected-height=100>
|
||||
<div style="height: 100%; background: green;" data-expected-height=100></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Same as above, but with an orthogonal writing mode flex item. -->
|
||||
<div class=outer-column-flexbox>
|
||||
<div style="flex-basis: 100px; height: 200px; width: 100px; writing-mode: vertical-rl;" data-expected-height=100>
|
||||
<div style="height: 100%; background: green;" data-expected-height=100></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Same as #1 but with a grid child of the flex item. -->
|
||||
<div class=outer-column-flexbox>
|
||||
<div style="flex-basis: 100px; height: 200px;" data-expected-height=100>
|
||||
<div style="display: grid; height: 100%; background: green" data-expected-height=100></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Same as #1 but with a table child of the flex item that has a >0 intrinsic block size. -->
|
||||
<div class=outer-column-flexbox>
|
||||
<div style="flex-basis: 100px; height: 200px;" data-expected-height=100>
|
||||
<table data-expected-height=100 style="height: 100%; width: 100%; background: green">
|
||||
<td>
|
||||
<div style="height: 50px;"></div>
|
||||
</td>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" />
|
||||
<meta name="assert" content="Child in nested column flexbox's grows to its parent's flex height, not its parent's specified height.">
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
|
||||
<div class="flexbox column" style="height: 100px;">
|
||||
<!-- min-height: auto resolves to 0 because content-size suggestion is 0. -->
|
||||
<div class="flexbox column" style="flex: 1 0 0px; height: 200px">
|
||||
<!-- min-height: auto resolves to 0 because content-size suggestion is 0. -->
|
||||
<div style="flex: 1 0 0px; width: 100px; background: green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<meta name="assert" content="Nested flex item shrinks correctly when its parent has a % height that resolves to smaller than the item's flex-basis." />
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
|
||||
<style>
|
||||
.OuterFlexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.InnerFlexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.InnerFlexbox-body {
|
||||
background: green;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="OuterFlexbox">
|
||||
<div class="InnerFlexbox">
|
||||
<div class="InnerFlexbox-body">
|
||||
<div style="height: 200px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" />
|
||||
<meta name="assert" content="Intermediate column flex item's specified min-height is honored.">
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
|
||||
<div class="flexbox column">
|
||||
<div class="flexbox column" style="flex: 1 0 0px; min-height: 100px">
|
||||
<div style="flex: 1 0 0px; width: 100px; background: green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" />
|
||||
<meta name="assert" content="Inner column flexbox doesn't wrap its items because its min-size reported to the outer flexbox accommated the sum of the items' intrinsic block sizes.">
|
||||
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<!-- min-height is min(100, 500) = 100 -->
|
||||
<!-- Final height is 100px. -->
|
||||
<div style="display: flex; flex-direction: column; flex-wrap: wrap; flex: 1 0 0px; height: 500px">
|
||||
<!-- min-height is 50 -->
|
||||
<div style="flex: 1 0 0px; width: 100px; background: green;">
|
||||
<div style="height: 50px;"></div>
|
||||
</div>
|
||||
<!-- min-height is 50 -->
|
||||
<div style="flex: 1 0 0px; width: 100px; background: green;">
|
||||
<div style="height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" />
|
||||
<meta name="assert" content="Inner column flexbox wraps its items when they don't fit in the vertical available space.">
|
||||
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
|
||||
<div style="display: flex; flex-direction: column; width: 100px;">
|
||||
<!-- min-height is min(200, 70) = 70 -->
|
||||
<!-- Final height is 70px. Items each have height 100px. They won't both fit, so they need to be wrapped. -->
|
||||
<div style="display: flex; flex-direction: column; flex-wrap: wrap; flex: 1 0 0px; height: 70px">
|
||||
<!-- min-height is 100 -->
|
||||
<div style="flex: 1 0 0px; width: 50px; background: green;">
|
||||
<div style="height: 100px;"></div>
|
||||
</div>
|
||||
<!-- min-height is 100 -->
|
||||
<div style="flex: 1 0 0px; width: 50px; background: green;">
|
||||
<div style="height: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="Column flexbox's imposed definite size on row flexbox is honored when resolving percentages in automatic minimum size algorithm.">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="display: flex; flex-direction: column; width: 100px; height: 444px;">
|
||||
<div style="flex-basis: 100px; display: flex; min-height: 0px;">
|
||||
<!-- min-width is min-height transferred through the aspect ratio: 1 x 100% x 100px = 100px -->
|
||||
<img src="support/200x200-green.png" style="min-height: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<meta name="assert" content="Height of flex item in row flexbox is not ignored when resolving percentages of its descendants to determine content based minimum size suggestion.">
|
||||
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
|
||||
<div style="display: flex; width: 0px; height: 20px;">
|
||||
<div style="flex-basis: 50px; height: 100px;">
|
||||
<img src="support/200x200-green.png" style="height: 100%">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!doctype html>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-stretch">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<meta name="assert" content="Item stretches to row flexbox's height when the row flexbox has a definite height but is a child of a column flexbox with an indefinite height." />
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<div style="height: 100px; display: flex;">
|
||||
<div style="width: 100px; background: green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#justify-content-property">
|
||||
<meta name="assert" content="Flex item in nested column flexbox is justified properly.">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<style>
|
||||
.outer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
border: 2px solid black;
|
||||
position: relative;
|
||||
}
|
||||
.middle {
|
||||
flex: 0 0 50px;
|
||||
min-height: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
Test passes if orange square is in bottom left corner of rectangle.
|
||||
|
||||
<div class="outer">
|
||||
<div class="middle">
|
||||
<div style="width: 30px; height: 30px; background: orange" data-offset-y=20></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
checkLayout('.middle > div');
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue