mirror of
https://github.com/servo/servo.git
synced 2025-08-15 18:35:33 +01:00
Update web-platform-tests to revision 9f31d497bf87bdf5ebc3ba70b5cb9f87786f4071
This commit is contained in:
WPT Sync Bot
parent
1f64024655
commit
4bc7277be1
145 changed files with 3112 additions and 1980 deletions
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Writing Modes Test Reference: positioning of a sideways-lr block alongside vertical-lr floats</title>
|
||||
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<meta content="image" name="flags">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div {
|
||||
block-size: 100px;
|
||||
}
|
||||
|
||||
div#first-olive-float {
|
||||
background-color: olive;
|
||||
float: left;
|
||||
inline-size: 50%;
|
||||
}
|
||||
|
||||
div#second-blue-float-with-clear {
|
||||
background-color: blue;
|
||||
clear: left;
|
||||
float: left;
|
||||
inline-size: 25%;
|
||||
}
|
||||
|
||||
div#orange-bfc {
|
||||
background-color: orange;
|
||||
inline-size: 75%;
|
||||
display: flow-root; /* Establishes a block formatting context */
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled"></p>
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if the orange rectangle
|
||||
is below the blue rectangle.
|
||||
-->
|
||||
|
||||
<div id="first-olive-float"> </div>
|
||||
<div id="second-blue-float-with-clear"> </div>
|
||||
<div id="orange-bfc"> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Writing Modes Test: positioning of a sideways-lr block alongside vertical-lr floats</title>
|
||||
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow" title="3.2. Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="slr-alongside-vlr-floats-ref.html">
|
||||
|
||||
<!-- This test is adapted from Gérard Talbot's "ortho-htb-alongside-vrl-floats-014.xht" -->
|
||||
|
||||
<meta content="image" name="flags">
|
||||
<meta content="This test verifies that the orange block box, which creates a new block formatting context, should flow next to the earliest float that offers sufficient space in the inline-direction." name="assert">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div {
|
||||
block-size: 100px;
|
||||
}
|
||||
|
||||
div#first-olive-float {
|
||||
background-color: olive;
|
||||
float: left;
|
||||
inline-size: 50%;
|
||||
}
|
||||
|
||||
div#second-blue-float-with-clear {
|
||||
background-color: blue;
|
||||
clear: left;
|
||||
float: left;
|
||||
inline-size: 25%;
|
||||
}
|
||||
|
||||
div#orange-bfc {
|
||||
background-color: orange;
|
||||
inline-size: 75%;
|
||||
writing-mode: sideways-lr; /* Same block direction as <html> */
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled"></p>
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if the orange rectangle
|
||||
is below the blue rectangle.
|
||||
-->
|
||||
|
||||
<div id="first-olive-float"> </div>
|
||||
<div id="second-blue-float-with-clear"> </div>
|
||||
<div id="orange-bfc"> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Writing Modes Test Reference: positioning of a sideways-rl block alongside vertical-rl floats</title>
|
||||
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<meta content="image" name="flags">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div {
|
||||
block-size: 100px;
|
||||
}
|
||||
|
||||
div#first-olive-float {
|
||||
background-color: olive;
|
||||
float: left;
|
||||
inline-size: 50%;
|
||||
}
|
||||
|
||||
div#second-blue-float-with-clear {
|
||||
background-color: blue;
|
||||
clear: left;
|
||||
float: left;
|
||||
inline-size: 25%;
|
||||
}
|
||||
|
||||
div#orange-bfc {
|
||||
background-color: orange;
|
||||
inline-size: 75%;
|
||||
display: flow-root; /* Establishes a block formatting context */
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled"></p>
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if the orange rectangle
|
||||
is below the blue rectangle.
|
||||
-->
|
||||
|
||||
<div id="first-olive-float"> </div>
|
||||
<div id="second-blue-float-with-clear"> </div>
|
||||
<div id="orange-bfc"> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Writing Modes Test: positioning of a sideways-rl block alongside vertical-rl floats</title>
|
||||
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow" title="3.2. Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="srl-alongside-vrl-floats-ref.html">
|
||||
|
||||
<!-- This test is adapted from Gérard Talbot's "ortho-htb-alongside-vrl-floats-014.xht" -->
|
||||
|
||||
<meta content="image" name="flags">
|
||||
<meta content="This test verifies that the orange block box, which creates a new block formatting context, should flow next to the earliest float that offers sufficient space in the inline-direction." name="assert">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div {
|
||||
block-size: 100px;
|
||||
}
|
||||
|
||||
div#first-olive-float {
|
||||
background-color: olive;
|
||||
float: left;
|
||||
inline-size: 50%;
|
||||
}
|
||||
|
||||
div#second-blue-float-with-clear {
|
||||
background-color: blue;
|
||||
clear: left;
|
||||
float: left;
|
||||
inline-size: 25%;
|
||||
}
|
||||
|
||||
div#orange-bfc {
|
||||
background-color: orange;
|
||||
inline-size: 75%;
|
||||
writing-mode: sideways-rl; /* Same block direction as <html> */
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled"></p>
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if the orange rectangle
|
||||
is below the blue rectangle.
|
||||
-->
|
||||
|
||||
<div id="first-olive-float"> </div>
|
||||
<div id="second-blue-float-with-clear"> </div>
|
||||
<div id="orange-bfc"> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Writing Modes Test Reference: positioning of a text-orientation:sideways block alongside vertical-lr floats</title>
|
||||
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div {
|
||||
block-size: 100px;
|
||||
}
|
||||
|
||||
div#first-olive-float {
|
||||
background-color: olive;
|
||||
float: left;
|
||||
inline-size: 50%;
|
||||
}
|
||||
|
||||
div#second-blue-float-with-clear {
|
||||
background-color: blue;
|
||||
clear: left;
|
||||
float: left;
|
||||
inline-size: 25%;
|
||||
}
|
||||
|
||||
div#orange-bfc {
|
||||
background-color: orange;
|
||||
inline-size: 75%;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div id="first-olive-float"> </div>
|
||||
<div id="second-blue-float-with-clear"> </div>
|
||||
<div id="orange-bfc"> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Writing Modes Test: positioning of a text-orientation:sideways block alongside vertical-lr floats</title>
|
||||
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow" title="3.2. Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="vlr-text-orientation-sideways-alongside-vlr-floats-ref.html">
|
||||
|
||||
<!-- This test is adapted from Gérard Talbot's "ortho-htb-alongside-vrl-floats-014.xht" -->
|
||||
|
||||
<meta content="This test verifies that the orange block box, which should not create a new block formatting context, should flow next to the first float." name="assert">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div {
|
||||
block-size: 100px;
|
||||
}
|
||||
|
||||
div#first-olive-float {
|
||||
background-color: olive;
|
||||
float: left;
|
||||
inline-size: 50%;
|
||||
}
|
||||
|
||||
div#second-blue-float-with-clear {
|
||||
background-color: blue;
|
||||
clear: left;
|
||||
float: left;
|
||||
inline-size: 25%;
|
||||
}
|
||||
|
||||
div#orange-bfc {
|
||||
background-color: orange;
|
||||
inline-size: 75%;
|
||||
writing-mode: vertical-lr;
|
||||
text-orientation: sideways; /* Should not create block formatting context */
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div id="first-olive-float"> </div>
|
||||
<div id="second-blue-float-with-clear"> </div>
|
||||
<div id="orange-bfc"> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Writing Modes Test Reference: positioning of a text-orientation:sideways block alongside vertical-rl floats</title>
|
||||
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div {
|
||||
block-size: 100px;
|
||||
}
|
||||
|
||||
div#first-olive-float {
|
||||
background-color: olive;
|
||||
float: left;
|
||||
inline-size: 50%;
|
||||
}
|
||||
|
||||
div#second-blue-float-with-clear {
|
||||
background-color: blue;
|
||||
clear: left;
|
||||
float: left;
|
||||
inline-size: 25%;
|
||||
}
|
||||
|
||||
div#orange-bfc {
|
||||
background-color: orange;
|
||||
inline-size: 75%;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div id="first-olive-float"> </div>
|
||||
<div id="second-blue-float-with-clear"> </div>
|
||||
<div id="orange-bfc"> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Writing Modes Test: positioning of a text-orientation:sideways block alongside vertical-rl floats</title>
|
||||
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow" title="3.2. Block Flow Direction: the writing-mode property">
|
||||
<link rel="match" href="vrl-text-orientation-sideways-alongside-vrl-floats-ref.html">
|
||||
|
||||
<!-- This test is adapted from Gérard Talbot's "ortho-htb-alongside-vrl-floats-014.xht" -->
|
||||
|
||||
<meta content="This test verifies that the orange block box, which should not create a new block formatting context, should flow next to the first float." name="assert">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div {
|
||||
block-size: 100px;
|
||||
}
|
||||
|
||||
div#first-olive-float {
|
||||
background-color: olive;
|
||||
float: left;
|
||||
inline-size: 50%;
|
||||
}
|
||||
|
||||
div#second-blue-float-with-clear {
|
||||
background-color: blue;
|
||||
clear: left;
|
||||
float: left;
|
||||
inline-size: 25%;
|
||||
}
|
||||
|
||||
div#orange-bfc {
|
||||
background-color: orange;
|
||||
inline-size: 75%;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: sideways; /* Should not create block formatting context */
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div id="first-olive-float"> </div>
|
||||
<div id="second-blue-float-with-clear"> </div>
|
||||
<div id="orange-bfc"> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS-Writing Modes Test: propagation of the writing-mode property from body to root</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel=help href="https://drafts.csswg.org/css-writing-modes-3/#principal-flow">
|
||||
<link rel="match" href="block-flow-direction-025-ref.xht">
|
||||
<meta name=assert content="The writing mode of the body must be propagated to the root with the dynamic change.">
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
document.body.offsetHeight;
|
||||
document.body.style.writingMode = "vertical-rl";
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body onload="runTest();">
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled"></p>
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a blue square in the
|
||||
<strong>upper-right corner</strong> of the page.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS-Writing Modes Test: propagation of the writing-mode property from body to root</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
main {
|
||||
writing-mode: horizontal-tb;
|
||||
inline-size: 100px;
|
||||
}
|
||||
|
||||
div {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<main>
|
||||
<div></div>
|
||||
<p>Test passes if you see a blue square in the upper-right corner of the page</p>
|
||||
</main>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS-Writing Modes Test: propagation of the writing-mode property from body to root</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel=help href="https://drafts.csswg.org/css-writing-modes-3/#principal-flow">
|
||||
<link rel="match" href="wm-propagation-body-dynamic-change-002-ref.html">
|
||||
<meta name=assert content="The writing mode of the newly inserted body must be propagated to the root.">
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
document.body.offsetHeight;
|
||||
|
||||
var newBody = document.createElement("body");
|
||||
newBody.id = "new-body";
|
||||
var oldBody = document.getElementById("old-body");
|
||||
|
||||
/* Insert a new <body> before the old one, which should become the primary <body>. */
|
||||
document.documentElement.insertBefore(newBody, oldBody);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#new-body {
|
||||
/* This writing-mode should propagate to the root element. */
|
||||
writing-mode: vertical-rl;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#old-body {
|
||||
writing-mode: horizontal-tb;
|
||||
inline-size: 100px;
|
||||
}
|
||||
|
||||
div {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body id="old-body" onload="runTest();">
|
||||
<div></div>
|
||||
<p>Test passes if you see a blue square in the upper-right corner of the page</p>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue