Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-10 07:55:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 322c4da99b1d62796d5f4105eb02a745bb35d3f9

Browse source
This commit is contained in:
WPT Sync Bot 2020-11-04 08:20:32 +00:00
parent 8b9e607aac
commit b89d47297d
148 changed files with 2587 additions and 278 deletions
Download patch file Download diff file Expand all files Collapse all files

17
tests/wpt/web-platform-tests/css/css-flexbox/dynamic-baseline-change-nested.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#baseline-participation">
<link rel="match" href="dynamic-baseline-change-ref.html">
<meta name="assert" content="This test ensures proper baseline alignment for a sub-tree which adds a scrollbar.">
<div style="display: flex; width: 100px; border: solid; align-items: baseline;">
<div style="width: 50px; height: 50px;">
<div style="width: 50px; height: 50px; position: relative; overflow: auto;">
<canvas width=10 height=10 style="width: 80%; background: green;"></canvas> <!-- Baseline of the canvas will move when a scrollbar is added. -->
<div id="target" style="position: absolute; width: 10px; height: 10px; background: red; top: 0;"></div>
</div>
</div>
<div style="width: 50px; height: 50px; background: green;"></div> <!-- Baseline is synthesized at the block-end edge. -->
</div>
<script>
document.body.offsetTop;
document.getElementById('target').style.top = '100px';
</script>

10
tests/wpt/web-platform-tests/css/css-flexbox/dynamic-baseline-change-ref.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<div style="display: flex; width: 100px; border: solid; align-items: baseline;">
<div style="width: 50px; height: 50px;">
<div style="width: 50px; height: 50px; position: relative; overflow: auto;">
<canvas width=10 height=10 style="width: 80%; background: green;"></canvas>
<div id="target" style="position: absolute; width: 10px; height: 10px; background: red; top: 100px;"></div>
</div>
</div>
<div style="width: 50px; height: 50px; background: green;"></div>
</div>

15
tests/wpt/web-platform-tests/css/css-flexbox/dynamic-baseline-change.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#baseline-participation">
<link rel="match" href="dynamic-baseline-change-ref.html">
<meta name="assert" content="This test ensures proper baseline alignment for a sub-tree which adds a scrollbar.">
<div style="display: flex; width: 100px; border: solid; align-items: baseline;">
<div style="width: 50px; height: 50px; position: relative; overflow: auto;">
<canvas width=10 height=10 style="width: 80%; background: green;"></canvas> <!-- Baseline of the canvas will move when a scrollbar is added. -->
<div id="target" style="position: absolute; width: 10px; height: 10px; background: red; top: 0;"></div>
</div>
<div style="width: 50px; height: 50px; background: green;"></div> <!-- Baseline is synthesized at the block-end edge. -->
</div>
<script>
document.body.offsetTop;
document.getElementById('target').style.top = '100px';
</script>

20
tests/wpt/web-platform-tests/css/css-flexbox/gap-006-lr-ref.html
View file

@ -17,8 +17,18 @@
section > div{
background-color: grey;
color: white;
block-size: 20px;
}
section > div:not(:last-of-type) {
#bp {
inline-size: 120px;
}
#ww {
inline-size: 130px;
}
#s, #f {
inline-size: 40px;
}
#bp, #ww {
margin-inline-end: 20px;
margin-block-end: 20px;
}
@ -26,9 +36,9 @@
<body>
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
<section>
<div>Black Panther</div>
<div>Wonder Woman</div>
<div>Storm</div>
<div>Flash</div>
<div id=bp>Black Panther</div>
<div id=ww>Wonder Woman</div>
<div id=s>Storm</div>
<div id=f>Flash</div>
</section>
</body>

18
tests/wpt/web-platform-tests/css/css-flexbox/gap-006-lr.html
View file

@ -24,14 +24,24 @@
section > div{
background-color: grey;
color: white;
block-size: 20px;
}
#bp {
inline-size: 120px;
}
#ww {
inline-size: 130px;
}
#s, #f {
inline-size: 40px;
}
</style>
<body>
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
<section>
<div>Black Panther</div>
<div>Wonder Woman</div>
<div>Storm</div>
<div>Flash</div>
<div id=bp>Black Panther</div>
<div id=ww>Wonder Woman</div>
<div id=s>Storm</div>
<div id=f>Flash</div>
</section>
</body>

20
tests/wpt/web-platform-tests/css/css-flexbox/gap-006-ltr-ref.html
View file

@ -13,8 +13,18 @@
section > div{
background-color: grey;
color: white;
block-size: 20px;
}
section > div:not(:last-of-type) {
#bp {
inline-size: 120px;
}
#ww {
inline-size: 130px;
}
#s, #f {
inline-size: 40px;
}
#bp, #ww {
margin-inline-end: 20px;
margin-block-end: 20px;
}
@ -22,9 +32,9 @@
<body>
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
<section>
<div>Black Panther</div>
<div>Wonder Woman</div>
<div>Storm</div>
<div>Flash</div>
<div id=bp>Black Panther</div>
<div id=ww>Wonder Woman</div>
<div id=s>Storm</div>
<div id=f>Flash</div>
</section>
</body>

18
tests/wpt/web-platform-tests/css/css-flexbox/gap-006-ltr.html
View file

@ -20,14 +20,24 @@
section > div{
background-color: grey;
color: white;
block-size: 20px;
}
#bp {
inline-size: 120px;
}
#ww {
inline-size: 130px;
}
#s, #f {
inline-size: 40px;
}
</style>
<body>
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
<section>
<div>Black Panther</div>
<div>Wonder Woman</div>
<div>Storm</div>
<div>Flash</div>
<div id=bp>Black Panther</div>
<div id=ww>Wonder Woman</div>
<div id=s>Storm</div>
<div id=f>Flash</div>
</section>
</body>

20
tests/wpt/web-platform-tests/css/css-flexbox/gap-006-rl-ref.html
View file

@ -17,8 +17,18 @@
section > div{
background-color: grey;
color: white;
block-size: 20px;
}
section > div:not(:last-of-type) {
#bp {
inline-size: 120px;
}
#ww {
inline-size: 130px;
}
#s, #f {
inline-size: 40px;
}
#bp, #ww {
margin-inline-end: 20px;
margin-block-end: 20px;
}
@ -26,9 +36,9 @@
<body>
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
<section>
<div>Black Panther</div>
<div>Wonder Woman</div>
<div>Storm</div>
<div>Flash</div>
<div id=bp>Black Panther</div>
<div id=ww>Wonder Woman</div>
<div id=s>Storm</div>
<div id=f>Flash</div>
</section>
</body>

18
tests/wpt/web-platform-tests/css/css-flexbox/gap-006-rl.html
View file

@ -24,14 +24,24 @@
section > div{
background-color: grey;
color: white;
block-size: 20px;
}
#bp {
inline-size: 120px;
}
#ww {
inline-size: 130px;
}
#s, #f {
inline-size: 40px;
}
</style>
<body>
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
<section>
<div>Black Panther</div>
<div>Wonder Woman</div>
<div>Storm</div>
<div>Flash</div>
<div id=bp>Black Panther</div>
<div id=ww>Wonder Woman</div>
<div id=s>Storm</div>
<div id=f>Flash</div>
</section>
</body>

20
tests/wpt/web-platform-tests/css/css-flexbox/gap-006-rtl-ref.html
View file

@ -17,8 +17,18 @@
section > div{
background-color: grey;
color: white;
block-size: 20px;
}
section > div:not(:last-of-type) {
#bp {
inline-size: 120px;
}
#ww {
inline-size: 130px;
}
#s, #f {
inline-size: 40px;
}
#bp, #ww {
margin-inline-end: 20px;
margin-block-end: 20px;
}
@ -26,9 +36,9 @@
<body>
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
<section>
<div>Black Panther</div>
<div>Wonder Woman</div>
<div>Storm</div>
<div>Flash</div>
<div id=bp>Black Panther</div>
<div id=ww>Wonder Woman</div>
<div id=s>Storm</div>
<div id=f>Flash</div>
</section>
</body>

18
tests/wpt/web-platform-tests/css/css-flexbox/gap-006-rtl.html
View file

@ -24,14 +24,24 @@
section > div{
background-color: grey;
color: white;
block-size: 20px;
}
#bp {
inline-size: 120px;
}
#ww {
inline-size: 130px;
}
#s, #f {
inline-size: 40px;
}
</style>
<body>
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
<section>
<div>Black Panther</div>
<div>Wonder Woman</div>
<div>Storm</div>
<div>Flash</div>
<div id=bp>Black Panther</div>
<div id=ww>Wonder Woman</div>
<div id=s>Storm</div>
<div id=f>Flash</div>
</section>
</body>

140
tests/wpt/web-platform-tests/css/css-flexbox/table-item-flex-percentage-width-ref.html Normal file
View file

@ -0,0 +1,140 @@
<!doctype html>
<title>Reference: display:table flex items with flex-shrink/flex-grow/flex-basis</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
html,body {
color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
}
.container {
display: flex;
width: 180px;
border: 1px solid blue;
}
.container > * {
background-color: cyan;
display: block;
}
.test1 > * {
flex-shrink: 0;
width: 100%;
}
.test2 > * {
flex-shrink: 0;
width: 50%;
}
.test3 > * {
flex-shrink: 0.5;
width: 50%;
}
.test4 > * {
flex-grow: 0.1;
width: 50%;
}
.test5 > * {
flex-shrink: 0.2;
flex-grow: 0.5;
width: 10%;
}
.base > * {
flex-basis: 100px;
}
.large-base {
width: 100px;
}
.large-base > * {
flex-basis: 200px;
}
</style>
<div class="container test1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test3">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test5">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test1 base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test2 base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test3 base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test4 base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test5 base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test1 large-base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test2 large-base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test3 large-base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test4 large-base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test5 large-base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

144
tests/wpt/web-platform-tests/css/css-flexbox/table-item-flex-percentage-width.html Normal file
View file

@ -0,0 +1,144 @@
<!doctype html>
<title>Flexbox Test: display:table flex items with flex-shrink/flex-grow/flex-basis</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1454330">
<link rel="match" href="table-item-flex-percentage-width-ref.html">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
html,body {
color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
}
.container {
display: flex;
width: 180px;
border: 1px solid blue;
}
.container > * {
background-color: cyan;
display: table;
}
.test1 > * {
flex-shrink: 0;
width: 100%;
}
.test2 > * {
flex-shrink: 0;
width: 50%;
}
.test3 > * {
flex-shrink: 0.5;
width: 50%;
}
.test4 > * {
flex-grow: 0.1;
width: 50%;
}
.test5 > * {
flex-shrink: 0.2;
flex-grow: 0.5;
width: 10%;
}
.base > * {
flex-basis: 100px;
}
.large-base {
width: 100px;
}
.large-base > * {
flex-basis: 200px;
}
</style>
<div class="container test1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test3">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test5">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test1 base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test2 base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test3 base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test4 base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test5 base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test1 large-base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test2 large-base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test3 large-base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test4 large-base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container test5 large-base">
<div>1</div>
<div>2</div>
<div>3</div>
</div>