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

Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985

Browse source
This commit is contained in:
Josh Matthews 2017-10-31 08:58:31 -04:00
parent 43a4f01647
commit 64e0a52537
12717 changed files with 59835 additions and 59820 deletions
Download patch file Download diff file Expand all files Collapse all files

35
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_break-after-column-item.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>flexbox | break-after, column, item</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination">
<meta name="flags" content="interact paged">
<style>
* {widows: 1; orphans: 1;}
div {
border: 1px solid white;
width: 20em;
display: flex;
flex-direction: column;
}
p {
margin: 0;
height: 2em;
flex: 1;
}
@media projection, print {
p:first-child {
break-after: always;
}
}
</style>
<h4>Enter fullscreen or print preview. You should not see the word fail
on the first page after doing that.</h4>
<div>
<p></p>
<p>fail</p>
<p>fail</p>
</div>

37
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_break-after-column-lastitem.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<title>flexbox | break-after, column, item</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination">
<meta name="flags" content="interact paged">
<style>
* {widows: 1; orphans: 1;}
div {
background: red;
border: 1px solid white;
width: 20em;
display: flex;
flex-direction: column;
}
p {
background: white;
margin: 0;
height: 2em;
flex: 1;
}
@media projection, print {
p {
break-after: always;
}
}
</style>
<h4>There should not be any red anytime. Enter fullscreen or print
preview. You should not see the word fail on the first page
after doing that.</h4>
<div>
<p></p>
</div>
<h1>fail</h1>

36
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_break-after-container.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<title>flexbox | break-after, singleline, container</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination">
<meta name="flags" content="interact paged">
<style>
* {widows: 1; orphans: 1;}
div {
background: red;
border: 1px solid white;
width: 20em;
display: flex;
}
p {
background: white;
margin: 0;
height: 2em;
flex: 1;
}
@media projection, print {
div {
break-after: always;
}
}
</style>
<h4>There should not be any red anytime. Enter fullscreen or print
preview. You should not see the word fail on the first page
after doing that.</h4>
<div>
<p></p>
</div>
<h1>fail</h1>

36
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_break-after-item.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<title>flexbox | break-after, singleline, item</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination">
<meta name="flags" content="interact paged">
<style>
* {widows: 1; orphans: 1;}
div {
background: red;
border: 1px solid white;
width: 20em;
display: flex;
}
p {
background: white;
margin: 0;
height: 2em;
flex: 1;
}
@media projection, print {
p {
break-after: always;
}
}
</style>
<h4>There should not be any red on the first page either onload, in
print preview, or fullscreen. Enter fullscreen or print preview.
You should not see the word fail after that.</h4>
<div>
<p></p>
</div>
<h1>fail</h1>

43
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_break-after-line-order.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<title>flexbox | order, break-after, multiline</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination">
<meta name="flags" content="interact paged">
<style>
* {widows: 1; orphans: 1;}
div {
background: red;
border: 1px solid black;
width: 20em;
display: flex;
flex-wrap: wrap;
}
p {
background: white;
margin: 0;
width: 100%;
height: 2em;
flex: 1 0 auto;
}
p+p {background: red;}
@media projection, print {
p:first-child {
break-after: always;
background: red;
order: 0;
}
p+p {
background: yellow;
order: -1;
}
}
</style>
<h4>Enter fullscreen or print preview. There should be no red.</h4>
<div>
<p></p>
<p></p>
</div>

37
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_break-after-line.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<title>flexbox | break-after, line</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination">
<meta name="flags" content="interact paged">
<style>
* {widows: 1; orphans: 1;}
div {
width: 20em;
display: flex;
flex-wrap: wrap;
}
p {
background: white;
margin: 0;
width: 100%;
height: 2em;
flex: 1 0 auto;
}
p+p {background: red;}
@media projection, print {
p:first-child {
break-after: always;
background: yellow;
}
}
</style>
<h4>Enter fullscreen or print preview. There should be no red on the
first page.</h4>
<div>
<p></p>
<p></p>
</div>

35
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_break-after-multiline.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>flexbox | break-after, multiline</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination">
<meta name="flags" content="interact paged">
<style>
* {widows: 1; orphans: 1;}
div {
border: 1px solid white;
width: 20em;
display: flex;
flex-wrap: wrap;
}
p {
background: yellow;
margin: 0;
height: 2em;
flex: 1 0 10em;
}
@media projection, print {
#test {break-after: always;}
#test~p {background: red;}
}
</style>
<h4>There should not be any red in fullscreen or print preview</h4>
<div>
<p></p>
<p id="test"></p>
<p></p>
<p></p>
</div>

36
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_break-before-column-firstitem.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<title>flexbox | break-before, column, item</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination">
<meta name="flags" content="interact paged">
<style>
* {widows: 1; orphans: 1;}
div {
background: red;
border: 1px solid white;
width: 20em;
display: flex;
flex-direction: column;
}
p {
background: white;
margin: 0;
height: 2em;
flex: 1;
}
@media projection, print {
p {
break-before: always;
}
}
</style>
<h4>There should not be any red anytime. Enter fullscreen or print
preview. You should not see the word fail on the first page
after doing that.</h4>
<div>
<p>fail</p>
</div>

36
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_break-before-column-item.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<title>flexbox | break-before, column, item</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination">
<meta name="flags" content="interact paged">
<style>
* {widows: 1; orphans: 1;}
div {
border: 1px solid white;
width: 20em;
display: flex;
flex-direction: column;
}
p {
background: white;
margin: 0;
height: 2em;
flex: 1;
}
@media projection, print {
p:last-child {
break-before: always;
}
}
</style>
<h4>Enter fullscreen or print preview. You should not see the word fail
on the first page after doing that.</h4>
<div>
<p></p>
<p></p>
<p>fail</p>
</div>

35
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_break-before-container.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>flexbox | break-before, singleline, container</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination">
<meta name="flags" content="interact paged">
<style>
* {widows: 1; orphans: 1;}
div {
background: red;
border: 1px solid white;
width: 20em;
display: flex;
}
p {
background: white;
margin: 0;
height: 2em;
flex: 1;
}
@media projection, print {
div {
break-before: always;
}
}
</style>
<h4>There should not be any red anytime. Enter fullscreen or print
preview. You should not see the word fail on the first page
after doing that.</h4>
<div>
<p>fail</p>
</div>

34
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_break-before-item.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>flexbox | break-before, singleline, item</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination">
<meta name="flags" content="interact paged">
<style>
* {widows: 1; orphans: 1;}
div {
background: red;
border: 1px solid white;
width: 20em;
display: flex;
}
p {
background: white;
margin: 0;
height: 2em;
flex: 1;
}
@media projection, print {
p {
break-before: always;
}
}
</style>
<h4>There should not be any red anytime. Enter fullscreen or print
preview. You should not see the word fail after that.</h4>
<div>
<p>fail</p>
</div>

35
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_break-before-multiline.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>flexbox | break-before, multiline</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination">
<meta name="flags" content="interact paged">
<style>
* {widows: 1; orphans: 1;}
div {
border: 1px solid white;
width: 20em;
display: flex;
flex-wrap: wrap;
}
p {
background: yellow;
margin: 0;
height: 2em;
flex: 1 0 10em;
}
@media projection, print {
#test {break-before: always;}
#test, #test+p {background: red;}
}
</style>
<h4>There should not be any red in fullscreen or print preview</h4>
<div>
<p></p>
<p></p>
<p id="test"></p>
<p></p>
</div>

34
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_break-natural.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>flexbox | natural breaks</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination">
<meta name="flags" content="interact paged">
<style>
* {
widows: 1;
orphans: 1;
margin: 0;
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
div {
height: 75%;
flex: 0 0 auto;
}
@media print {
div {
break-inside: avoid;
}
div+div {
border-top: 1em solid red;
}
}
</style>
<div>Enter print preview. You should not see red or the word fail on the
first page.</div>
<div>FAIL</div>

64
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_flex-basis-transitions.html Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<title>flexbox | transitioned flex-basis</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">
<meta name="flags" content="interact">
<style>
div {
width: 20em;
height: 8em;
display: flex;
}
span {
background: yellow;
width: 8em;
flex: 1 1 0%;
}
#test, p+div {
background: #3366cc;
}
div:hover #test {
transition: flex-basis 4s;
flex-basis: 100%;
}
p~div {
margin-right: 1em;
float: left;
display: block;
}
p~div span {
width: auto;
height: 8em;
float: left;
}
p~div~div span {
width: 5em;
}
</style>
<div>
<span>one</span>
<span>two</span>
<span>three</span>
<span id="test">four</span>
</div>
<p>Verify that the box above looks exactly like the second of the boxes
below. Then hover the box above and leave the mouse there for 4 seconds.
After the specified time, the box above should look exactly like the
first of the boxes below.</p>
<div>
<span>one</span>
<span>two</span>
<span>three</span>
four
</div>
<div>
<span>one</span>
<span>two</span>
<span>three</span>
<span id="test">four</span>
</div>

67
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_flex-grow-transitions.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<title>flexbox | transitioned flex-grow</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property">
<meta name="flags" content="interact">
<style>
div {
width: 20em;
height: 8em;
display: flex;
}
span {
background: yellow;
width: 8em;
flex: 1 0 0%;
}
#test, .ref {
background: #3366cc;
}
div:hover #test {
transition: flex-grow 4s;
flex-grow: 2;
}
p~div {
margin-right: 1em;
float: left;
display: block;
}
p~div span {
width: 5em;
height: 8em;
float: left;
}
p~div~div span {
width: 4em;
}
p~div~div span.ref {
width: 8em;
}
</style>
<div>
<span>one</span>
<span id="test">two</span>
<span>three</span>
<span>four</span>
</div>
<p>Verify that the box above looks exactly like the first of the boxes
below. Then hover the box above and leave the mouse there for 4 seconds.
After the specified time, the box above should look exactly like the
second of the boxes below.</p>
<div>
<span>one</span>
<span class="ref">two</span>
<span>three</span>
<span>four</span>
</div>
<div>
<span>one</span>
<span class="ref">two</span>
<span>three</span>
<span>four</span>
</div>

67
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_flex-shrink-transitions-invalid.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<title>flexbox | invalid flex-shrink transition</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property">
<meta name="flags" content="interact">
<style>
div {
width: 20em;
height: 8em;
display: flex;
}
span {
background: yellow;
width: 8em;
flex: 0 1 auto;
}
#test, .ref {
background: #3366cc;
}
div:hover #test {
transition: flex-shrink 4s;
flex-shrink: 0;
}
p~div {
margin-right: 1em;
float: left;
display: block;
}
p~div span {
width: 5em;
height: 8em;
float: left;
}
p~div~div span {
width: 4em;
}
p~div~div span.ref {
width: 8em;
}
</style>
<div>
<span>x</span>
<span id="test"></span>
<span>x</span>
<span>x</span>
</div>
<p>Verify that the box above looks exactly like the first of the boxes
below. Then hover the box above. On hover, <em>instantaneously</em>, the
box above should look like the second of the boxes below. Any delay
constitutes a fail.</p>
<div>
<span>x</span>
<span class="ref"></span>
<span>x</span>
<span>x</span>
</div>
<div>
<span>x</span>
<span class="ref"></span>
<span>x</span>
<span>x</span>
</div>

63
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_flex-shrink-transitions.html Normal file
View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<title>flexbox | transitioned flex-shrink</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property">
<meta name="flags" content="interact">
<style>
div {
width: 12em;
height: 8em;
display: flex;
}
span {
background: yellow;
width: 8em;
flex: 0 1 auto;
}
#test, #ref {
background: #3366cc;
}
div:hover #test {
transition: flex-shrink 4s;
flex-shrink: 2;
}
p~div {
margin-right: 1em;
float: left;
display: block;
}
p~div span {
width: 3em;
height: 8em;
float: left;
}
p~div~div span {
width: 4em;
}
</style>
<div>
<span>x</span>
<span id="test"></span>
<span>x</span>
<span>x</span>
</div>
<p>Verify that the box above looks exactly like the first of the boxes
below. Then hover the box above and leave the mouse there for 4
seconds. After the specified time, the blue color should disappear, and
the box above should look like the second of the boxes below.</p>
<div>
<span>x</span>
<span id="ref"></span>
<span>x</span>
<span>x</span>
</div>
<div>
<span>x</span>
<span>x</span>
<span>x</span>
</div>

64
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_flex-transitions.html Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<title>flexbox | transitioned flex</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property">
<meta name="flags" content="interact">
<style>
div {
width: 20em;
height: 8em;
display: flex;
}
span {
background: yellow;
width: 8em;
flex: 1 1 0%;
}
#test, .ref, p+div {
background: #3366cc;
}
div:hover #test {
transition: flex 4s;
flex: 0 1 100%;
}
p~div {
margin-right: 1em;
float: left;
display: block;
}
p~div span {
width: auto;
height: 8em;
float: left;
}
p~div~div span {
width: 5em;
}
</style>
<div>
<span>one</span>
<span>two</span>
<span>three</span>
<span id="test">four</span>
</div>
<p>Verify that the box above looks exactly like the second of the boxes
below. Then hover the box above and leave the mouse there for 1+
seconds. The box above should <em>instantaneously</em> look exactly
like the first of the boxes below.</p>
<div>
<span>one</span>
<span>two</span>
<span>three</span>
four
</div>
<div>
<span>one</span>
<span>two</span>
<span>three</span>
<span id="test">four</span>
</div>

75
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_order-transitions-2.html Normal file
View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<title>flexbox | transitioned order</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property">
<meta name="flags" content="interact">
<style>
div {
display: flex;
}
span {
background: yellow;
width: 1em;
height: 2em;
}
.test {
background: #3366cc;
order: 0;
}
div:hover .test {
transition: order 10s;
order: -1;
}
p~div {
margin: 1em;
float: left;
display: block;
}
p~div span {
float: left;
}
</style>
<div>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span class="test">x</span>
<span>x</span>
</div>
<p>Verify that the box above looks exactly like the first of the boxes
below. Then hover the box above and leave the mouse there for 1+
seconds. After the specified time, the box above should look exactly
like the second of the boxes below.</p>
<div>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span class="test">x</span>
<span>x</span>
</div>
<div>
<span class="test">x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
</div>

83
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_order-transitions.html Normal file
View file

@ -0,0 +1,83 @@
<!DOCTYPE html>
<title>flexbox | flex-flow and transitioned order</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property">
<meta name="flags" content="interact">
<style>
div {
background: blue;
padding: 0;
margin: 1em 0;
border: 1px solid black;
width: 20em;
height: 8em;
display: flex;
flex-flow: column-reverse wrap-reverse;
}
span {
background: white;
margin: 1em;
width: 8em;
height: 1.5em;
display: inline-block;
}
.one {
background: pink;
order: -1;
}
div:hover .one {
transition: order 4s;
order: 4;
}
.two {
background: yellow;
order: 3;
}
.three {
background: black;
color: white;
order: 2;
}
.four {
background: fuchsia;
color: white;
order: 1;
}
p~div {
padding: 1em 0 0;
margin-right: 1em;
height: 7em;
float: left;
display: block;
}
p~div span {
float: left;
}
</style>
<div>
<span class="one">one</span>
<span class="two">two</span>
<span class="three">three</span>
<span class="four">four</span>
</div>
<p>Verify that the box above looks exactly like the first of the boxes
below. Then hover the blue area above and leave the mouse there for 4
seconds. After the specified time, the box above should look exactly
like the second of the boxes below.</p>
<div>
<span class="two">two</span>
<span class="four">four</span>
<span class="three">three</span>
<span class="one">one</span>
</div>
<div>
<span class="one">one</span>
<span class="three">three</span>
<span class="two">two</span>
<span class="four">four</span>
</div>

23
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_paged-overflow-2.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<title>flexbox | paged overflow</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination">
<meta name="flags" content="interact paged">
<style>
* {widows: 1; orphans: 1; margin: 0;}
html {
overflow: -o-paged-x;
}
h4 {
position: fixed;
}
div {
display: flex;
break-before: page;
background: red;
}
</style>
<h4>There should be NO RED onload.</h4>
<div>FAIL</div>

47
tests/wpt/web-platform-tests/css/css-flexbox/interactive/flexbox_interactive_paged-overflow.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<title>flexbox | @page and paged overflow</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination">
<meta name="flags" content="interact paged">
<style>
* {widows: 1; orphans: 1; margin: 0;}
@page {
width: 600px;
height: 3em;
}
html {
overflow: -o-paged-x;
}
h4 {
position: fixed;
top: 10em;
}
div {
width: 12em;
display: flex;
flex-wrap: wrap;
}
p {
margin: 0;
width: 3em;
height: 4em;
flex: auto;
}
p:nth-child(2) {
break-before: page;
}
p:nth-child(2)~p {
background: red;
}
</style>
<h4>There should be NO RED onload.</h4>
<div>
<p>x</p>
<p>x</p>
<p>fail</p>
<p>fail</p>
</div>