mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision b'7af9d6ec48ab04043a2bea85a3599904a1a19efa'
This commit is contained in:
WPT Sync Bot
Josh Matthews
parent
8050c95e31
commit
87be1008de
2742 changed files with 142451 additions and 40667 deletions
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexible Box Test: Aspect ratio handling of images</title>
|
||||
<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto" />
|
||||
<link rel="match" href="reference/flexbox-min-width-auto-005-ref.html" />
|
||||
<meta name="assert" content="Test that min-width:auto does not incorrectly stretch items with aspect ratio" />
|
||||
|
||||
<style>
|
||||
.reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
z-index: -1;
|
||||
}
|
||||
.constrained-flex {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
}
|
||||
br { margin: 50px; }
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is <strong>no red</strong> visible on the page.</p>
|
||||
|
||||
<div class="reference-overlapped-red"></div>
|
||||
<div class="constrained-flex">
|
||||
<img src="support/40x20-green.png" />
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="reference-overlapped-red" style="width: 40px;"></div>
|
||||
<div style="display: flex">
|
||||
<div class="constrained-flex">
|
||||
<img src="support/40x20-green.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexible Box Test: Aspect ratio handling of images</title>
|
||||
<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto" />
|
||||
<link rel="match" href="reference/flexbox-min-width-auto-006-ref.html" />
|
||||
<meta name="assert" content="Test that min-width:auto does not incorrectly stretch items with aspect ratio" />
|
||||
|
||||
<style>
|
||||
#reference-overlapped-red {
|
||||
position: relative;
|
||||
background-color: red;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 40px;
|
||||
z-index: -1;
|
||||
}
|
||||
.constrained-width-flex {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.constrained-height-flex {
|
||||
display: flex;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are a (vertically centered) 20x20 and a 60x100 green boxes enclosed on each 100x100 square.</p>
|
||||
|
||||
<div class="constrained-width-flex">
|
||||
<div class="constrained-height-flex">
|
||||
<img src="data:image/svg+xml,
|
||||
<svg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
|
||||
<rect width='100%' height='100%' fill='green'/>
|
||||
</svg>"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="constrained-width-flex">
|
||||
<div class="constrained-height-flex">
|
||||
<img src="support/60x60-green.png"/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="David Grogan" href="dgrogan@chromium.org">
|
||||
<link rel="help" href="https://crbug.com/1173843">
|
||||
<meta name="assert" content="No crash when a flexbox lays out a frameset with a border in the main axis direction.">
|
||||
<style>
|
||||
frameset {
|
||||
border-right: 50px solid red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id='flex' style="display: flex"></div>
|
||||
|
||||
<script>
|
||||
// I couldn't get the parser to accept a framset inside a div, so this uses
|
||||
// JS instead.
|
||||
flex.appendChild(document.createElement('frameset'));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: percentage heights in descendants of anonymous flex items</title>
|
||||
<link href="resources/flexbox.css" rel="stylesheet">
|
||||
<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com">
|
||||
<link rel="match" href="reference/percentage-descendant-of-anonymous-flex-item-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items">
|
||||
<style>
|
||||
.flexbox {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
Both Blink and WebKit implement buttons as flexboxes, which in this case, wrap the child in an anonymous box.
|
||||
Anonymous boxes are skipped when computing percentage heights but we need to ensure that their children with
|
||||
percentage heights are properly sized.
|
||||
-->
|
||||
<p>The test PASS if you see a 200x100 green rectangle inside a button.</p>
|
||||
<div class="flexbox column">
|
||||
<div style="height: 50%;">
|
||||
<button style="width: 200px; height: 100%;">
|
||||
<div style="width: 200px; height: 100%; background-color: green;"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -36,7 +36,5 @@ var check = document.getElementById("check");
|
|||
|
||||
test(function() {
|
||||
assert_equals(ref.offsetWidth, check.offsetWidth, "width should be equal");
|
||||
assert_equals(ref.offsetHeight, check.offsetHeight,
|
||||
"height should be equal");
|
||||
}, "two radio button sizes are identical");
|
||||
}, "two radio button widths are identical");
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com" />
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 100px;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 40px;
|
||||
}
|
||||
br { margin: 50px; }
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is <strong>no red</strong> visible on the page.</p>
|
||||
<div></div>
|
||||
|
||||
<br>
|
||||
|
||||
<span></span>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com" />
|
||||
<style>
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#green-square {
|
||||
background: green;
|
||||
margin-top: 40px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
#green-rectange {
|
||||
background: green;
|
||||
width: 60px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are a (vertically centered) 20x20 and a 60x100 green boxes enclosed on each 100x100 square.</p>
|
||||
<div class="box">
|
||||
<div id="green-square"></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="box">
|
||||
<div id="green-rectange"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: percentage heights in descendants of anonymous flex items</title>
|
||||
<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com">
|
||||
<p>The test PASS if you see a 200x100 green rectangle inside a button.</p>
|
||||
<button style="width: 200px; height: 100px;">
|
||||
<div style="width: 200px; height: 100%; background-color: green;"></div>
|
||||
</button>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 171 B |
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox Test: Flex item as table with narrow content</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm">
|
||||
<meta name="assert" content="A flex item as a table uses the sizing algorithm of the flexbox">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div style="display:flex; flex-direction:column; width: 100px; height:200px; ">
|
||||
<div style="display:table; flex:1 0; background:green;">
|
||||
<div style="width:100px; height:10px;"></div>
|
||||
</div>
|
||||
<div style="flex:1 0;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<title>table is flex item</title>
|
||||
<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://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1692116">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<meta name="assert" content="Table's specified height does not count as another min-height for the purposes of the flexbox algorithm.">
|
||||
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
|
||||
<div style="display: flex; flex-direction: column; width: 100px;">
|
||||
<div style="display: table; width: 100px; height: 500px; background: green; flex: 0 0 100px;"></div>
|
||||
</div>
|
||||
|
|
@ -8,7 +8,8 @@
|
|||
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
|
||||
<!-- This test passed until Chrome 84 but has been broken since. Firefox also fails it. -->
|
||||
<!-- This test passed until Chrome 84 but has been broken since.
|
||||
Firefox fixed this test since version 87. -->
|
||||
|
||||
<div style="display: flex;">
|
||||
<div style="display: table; width: 500px; height: 100px; background: green; flex: 0 0 100px;"></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-stretch">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="The table's cross-axis (inline-size) is stretched.">
|
||||
<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: 100px; background: red;">
|
||||
<table style="border-spacing: 0; flex-grow: 1;">
|
||||
<caption style="height: 10px; background: green;"></caption>
|
||||
<caption style="height: 20px; background: green; caption-side: bottom;"></caption>
|
||||
<td style="background: green;"></td>
|
||||
</table>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue