mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update web-platform-tests to revision c063a8c9acc637e3bd72b719b46e6f2fb627da4a
This commit is contained in:
WPT Sync Bot
parent
e66ab111a6
commit
018bc3f219
140 changed files with 2806 additions and 431 deletions
|
|
@ -8,6 +8,15 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
function change() {
|
||||
document.body.offsetTop;
|
||||
var flex = document.getElementById("flex");
|
||||
flex.style.width = "100px";
|
||||
checkLayout("#container");
|
||||
}
|
||||
</script>
|
||||
<body onload="change()">
|
||||
<p>There should be a green square below. No red.</p>
|
||||
<!-- #container is just here to make sure the test fails more reliably visually if the bug is present. -->
|
||||
<div id="container" style="width:500px;">
|
||||
|
|
@ -18,9 +27,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
var flex = document.getElementById("flex");
|
||||
flex.style.width = "100px";
|
||||
checkLayout("#container");
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: min-size when the child has a percentage min-size</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item">
|
||||
<meta name="assert" content="This test ensures that min-size can not be negative when the child has a percentage min-size.">
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<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 column" style="max-height: 0; overflow: hidden; line-height: 13px;" data-expected-height="0">
|
||||
<div style="min-height: 100%;" data-expected-height="0">This is a flex item.</div>
|
||||
<div style="flex: none;" data-expected-height="13">Inflexible</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: height of a child of a flexbox with flex-direction: column</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes">
|
||||
<link rel="bookmark" href="https://crbug.com/404337">
|
||||
<link rel="match" href="reference/flexbox-flex-direction-column-percentage-ignored-ref.html">
|
||||
<meta name="assert" content="This test ensures that the percentage height of child of a flexbox with 'flex-direction: column' and no explicit height but with max-height set should be treated as 'auto'.">
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<style>
|
||||
.flexbox {
|
||||
max-height: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="flexbox column">
|
||||
<div style="height: 1%">
|
||||
The height here should be ignored.
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: align-content initial value.</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#align-content-property">
|
||||
<meta name="assert" content="This test ensures that a flexbox container's align-content value default to 'stretch'."/>
|
||||
<style>
|
||||
.flex-container {
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 200px;
|
||||
background-color: pink;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flex-item1 {
|
||||
width: 100%;
|
||||
background-color: blue;
|
||||
border: 1px solid;
|
||||
border-color: red;
|
||||
}
|
||||
.flex-item2 {
|
||||
width: 100%;
|
||||
background-color: 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('.flex-container')">
|
||||
<div id="flexContainer" class="flex-container">
|
||||
<div id="flexItem1" class="flex-item1" data-expected-height=51></div>
|
||||
<div id="flexItem2" class="flex-item2" data-expected-height=49></div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -20,21 +20,23 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
function change() {
|
||||
var container = document.getElementById('container');
|
||||
container.offsetWidth;
|
||||
container.style.width = "200px";
|
||||
checkLayout("#container");
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="change()">
|
||||
<div id=log></div>
|
||||
<div id="container" style="width: 100px" data-expected-width="200">
|
||||
<div class="flexbox column" data-expected-width="200">
|
||||
<div class="flexbox column" data-expected-width="200">
|
||||
<div class="flexitem" data-expected-width="200">
|
||||
<div class="child" data-expected-width="200">This div should be 200px wide.</div>
|
||||
<div class="child" data-expected-width="200">This div should be 200px wide.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var container = document.getElementById('container');
|
||||
container.offsetWidth;
|
||||
container.style.width = "200px";
|
||||
checkLayout("#container");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: percentages in flex items</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes">
|
||||
<link rel="help" href="https://crbug.com/341310">
|
||||
<meta name="assert" content="This test ensures that percentages are resolved in flex items.">
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<style>
|
||||
.horizontal {
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
position: relative;
|
||||
}
|
||||
.vertical {
|
||||
width: 50px;
|
||||
height: 10px;
|
||||
background-color: purple;
|
||||
position: relative;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.flex-one {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
function changeHeight()
|
||||
{
|
||||
document.getElementById('dynamicHorizontalChild').style.height = "90%";
|
||||
document.getElementById('dynamicVerticalChild').style.width = "30%";
|
||||
checkLayout('.flexbox');
|
||||
}
|
||||
</script>
|
||||
<body onload="changeHeight()">
|
||||
<div class="flexbox horizontal">
|
||||
<div data-expected-height="50" class="flex-one">
|
||||
<div data-expected-height="35" style="height: 70%; background-color: lime"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox horizontal">
|
||||
<div data-expected-height="50" class="flex-one">
|
||||
<div id="dynamicHorizontalChild" data-expected-height="45" style="height: 70%; background-color: lime"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox horizontal">
|
||||
<div data-expected-height="50" class="flex-one" style="padding: 10px; border: 2px solid black">
|
||||
<div data-expected-height="18" style="height: 70%; background-color: lime"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox horizontal">
|
||||
<img data-expected-height="25" style="max-height: 50%" src="support/10x10-green.png" />
|
||||
</div>
|
||||
<div class="flexbox horizontal">
|
||||
<div data-expected-height="25" class="flex-one" style="max-height:50%">
|
||||
<div data-expected-height="13" style="height: 50%; background-color: lime"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox vertical">
|
||||
<div data-expected-width="50" class="flex-one">
|
||||
<div data-expected-width="25" style="width: 50%; background-color: lime"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox vertical">
|
||||
<div data-expected-width="50" class="flex-one">
|
||||
<div id="dynamicVerticalChild" data-expected-width="15" style="width: 50%; background-color: lime"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox vertical">
|
||||
<div data-expected-width="50" class="flex-one" style="padding: 10px; border: 2px solid black">
|
||||
<div data-expected-width="13" style="width: 50%; background-color: lime"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox vertical">
|
||||
<img data-expected-width="25" style="max-width: 50%" src="support/10x10-green.png" />
|
||||
</div>
|
||||
<div class="flexbox vertical">
|
||||
<div data-expected-width="25" class="flex-one" style="max-width: 50%">
|
||||
<div data-expected-width="13" style="width: 50%; background-color: lime"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: percent margins with flex child</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/box.html#margin-properties">
|
||||
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=93411">
|
||||
<meta name="assert" content="This test ensures that percent margins always are computed with respect to the containing block's width even when there is flex on any child.">
|
||||
<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" style="display:flex; flex-direction: column; background-color: salmon; height: 300px; width: 400px;">
|
||||
<div style="margin: 10%; background-color: orange; height: 5px; flex: 1" data-expected-width=320 data-expected-height=135></div>
|
||||
<div style="margin: 10%; background-color: orange; height: 5px;" data-expected-width=320 data-expected-height=5></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="display:flex; background-color: salmon; height: 300px; width: 400px;">
|
||||
<div style="margin: 10%; background-color: orange; height: 5px; flex: 1 5px" data-expected-width=235 data-expected-height=5></div>
|
||||
<div style="margin: 10%; background-color: orange; height: 5px; width: 5px" data-expected-width=5 data-expected-height=5></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="display:flex; background-color: salmon; height: 300px; width: 400px; padding: 100px;">
|
||||
<div style="margin: 10%; background-color: orange; height: 5px; flex: 1 5px" data-expected-width=235 data-expected-height=5></div>
|
||||
<div style="margin: 10%; background-color: orange; height: 5px; width: 5px" data-expected-width=5 data-expected-height=5></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: minimum size of the radio button</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
|
||||
<meta name="assert" content="This test ensures that radio buttons used as flex items do not shrink below their default sizes.">
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.wide {
|
||||
width: 600px;
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<p>You should see two identical-looking lines, both with a radio button at the
|
||||
beginning.</p>
|
||||
|
||||
<div class="flex">
|
||||
<input type="radio" id="check">
|
||||
<div class="wide">Text</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" style="vertical-align: top;" id="ref"><span>Text</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var ref = document.getElementById("ref");
|
||||
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");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
.flexbox {
|
||||
max-height: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="flexbox">
|
||||
<div>
|
||||
The height here should be ignored.
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link href="../support/flexbox.css" rel="stylesheet">
|
||||
<style>
|
||||
.flexbox {
|
||||
background-color: grey;
|
||||
}
|
||||
.flexbox > * {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>This test passes if none of the form controls overflow.</p>
|
||||
<div class="flexbox">
|
||||
<input>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<textarea></textarea>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<input type="button">
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<select></select>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<legend style="border: 2px solid black">legend</legend>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div type="border: 4px solid black; padding: 10px;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexbox: Relayout align flex items</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property">
|
||||
<meta name="assert" content="This test ensures that align items work properly after changing existing values with 'flex-end' and 'stretch'.">
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<style>
|
||||
.flexbox {
|
||||
height: 100px;
|
||||
position: relative;
|
||||
}
|
||||
.flexbox > div {
|
||||
border: 5px solid green;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id=log></div>
|
||||
<div id="from-stretch" class="flexbox">
|
||||
<div data-expected-height="10" data-offset-y="90"></div>
|
||||
<div data-expected-height="10" data-offset-y="90" class="align-self-auto"></div>
|
||||
<div data-expected-height="10" data-offset-y="0" class="align-self-flex-start"></div>
|
||||
<div data-expected-height="10" data-offset-y="90" class="align-self-flex-end"></div>
|
||||
<div data-expected-height="10" data-offset-y="45" class="align-self-center"></div>
|
||||
<div data-expected-height="10" data-offset-y="0" class="align-self-baseline"></div>
|
||||
<div data-expected-height="100" data-offset-y="0" class="align-self-stretch"></div>
|
||||
</div>
|
||||
|
||||
<div id="to-stretch" class="flexbox align-items-flex-start">
|
||||
<div data-expected-height="100" data-offset-y="0"></div>
|
||||
<div data-expected-height="100" data-offset-y="0" class="align-self-auto"></div>
|
||||
<div data-expected-height="10" data-offset-y="0" class="align-self-flex-start"></div>
|
||||
<div data-expected-height="10" data-offset-y="90" class="align-self-flex-end"></div>
|
||||
<div data-expected-height="10" data-offset-y="45" class="align-self-center"></div>
|
||||
<div data-expected-height="10" data-offset-y="0" class="align-self-baseline"></div>
|
||||
<div data-expected-height="100" data-offset-y="0" class="align-self-stretch"></div>
|
||||
</div>
|
||||
<script>
|
||||
document.body.offsetLeft;
|
||||
document.getElementById("from-stretch").style.alignItems = "flex-end";
|
||||
document.getElementById("to-stretch").style.alignItems = "stretch";
|
||||
checkLayout(".flexbox");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Flexbox: Stretch input form controls in flexbox column</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property">
|
||||
<link rel="match" href="reference/stretch-input-in-column-ref.html">
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<meta name="assert" content="This test ensures that input form controls that are stretched in
|
||||
a column flexbox should not overflow the flexbox.">
|
||||
<style>
|
||||
.flexbox {
|
||||
background-color: grey;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>This test passes if none of the form controls overflow.</p>
|
||||
<div class="flexbox column">
|
||||
<input>
|
||||
</div>
|
||||
<div class="flexbox column align-content-flex-start">
|
||||
<textarea class="align-self-stretch"></textarea>
|
||||
</div>
|
||||
<div class="flexbox column wrap">
|
||||
<input type="button">
|
||||
</div>
|
||||
<div class="flexbox column">
|
||||
<select></select>
|
||||
</div>
|
||||
<div class="flexbox column">
|
||||
<legend style="border: 2px solid black">legend</legend>
|
||||
</div>
|
||||
<div class="flexbox column wrap">
|
||||
<div type="border: 4px solid black; padding: 10px;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue