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 b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'

Browse source
This commit is contained in:
WPT Sync Bot 2022-01-20 04:38:55 +00:00 • committed by cybai
parent 4401622eb1
commit b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
Download patch file Download diff file Expand all files Collapse all files

32
tests/wpt/web-platform-tests/css/css-writing-modes/dynamic-offset-rtl-001-ref.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<title>CSS Test Reference: dynamic changes to offset properties</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<style>
body {
margin: 0;
}
#container {
position: absolute;
width: 100px;
height: 100px;
background: yellow;
}
#abspos {
margin-top: 10px;
margin-left: 70px;
width: 10px;
height: 10px;
background: fuchsia;
}
</style>
<div id="container">
<div id="abspos"></div>
</div>

50
tests/wpt/web-platform-tests/css/css-writing-modes/dynamic-offset-rtl-001.html Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<title>CSS Test: dynamic changes to offset properties</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#vertical-layout">
<link rel="match" href="dynamic-offset-rtl-001-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Layout rules for 'right' and 'left' are handled correctly for absolutely positioned elements, in the presence of dynamic changes to 'width' of the containing block.">
<style>
html {
direction: rtl;
overflow: hidden;
}
#container {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100px;
background: yellow;
}
#abspos {
position: absolute;
top: 10px;
right: 20px;
width: 10px;
height: 10px;
background: fuchsia;
}
</style>
<div id="container">
<div id="abspos"></div>
</div>
<script>
window.addEventListener("load", function(event) {
var e = document.getElementById("abspos");
e.offsetTop; // flush layout
e.parentNode.style.width = "100px";
});
</script>

51
tests/wpt/web-platform-tests/css/css-writing-modes/dynamic-offset-rtl-002.html Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<title>CSS Test: dynamic changes to offset properties</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#vertical-layout">
<link rel="match" href="dynamic-offset-rtl-001-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Layout rules for 'right' and 'left' are handled correctly for absolutely positioned elements, in the presence of dynamic changes to 'width' of the containing block.">
<style>
html {
direction: rtl;
overflow: hidden;
}
#container {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100px;
background: yellow;
}
#abspos {
position: absolute;
top: 10px;
right: 20px;
left: 10px; /* ignored */
width: 10px;
height: 10px;
background: fuchsia;
}
</style>
<div id="container">
<div id="abspos"></div>
</div>
<script>
window.addEventListener("load", function(event) {
var e = document.getElementById("abspos");
e.offsetTop; // flush layout
e.parentNode.style.width = "100px";
});
</script>

50
tests/wpt/web-platform-tests/css/css-writing-modes/dynamic-offset-vrl-001.html Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<title>CSS Test: dynamic changes to offset properties</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#vertical-layout">
<link rel="match" href="dynamic-offset-rtl-001-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Layout rules for 'right' and 'left' are handled correctly for absolutely positioned elements, in the presence of dynamic changes to 'width' of the containing block.">
<style>
html {
writing-mode: vertical-rl;
overflow: hidden;
}
#container {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100px;
background: yellow;
}
#abspos {
position: absolute;
top: 10px;
right: 20px;
width: 10px;
height: 10px;
background: fuchsia;
}
</style>
<div id="container">
<div id="abspos"></div>
</div>
<script>
window.addEventListener("load", function(event) {
var e = document.getElementById("abspos");
e.offsetTop; // flush layout
e.parentNode.style.width = "100px";
});
</script>

51
tests/wpt/web-platform-tests/css/css-writing-modes/dynamic-offset-vrl-002.html Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<title>CSS Test: dynamic changes to offset properties</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#vertical-layout">
<link rel="match" href="dynamic-offset-rtl-001-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Layout rules for 'right' and 'left' are handled correctly for absolutely positioned elements, in the presence of dynamic changes to 'width' of the containing block.">
<style>
html {
writing-mode: vertical-rl;
overflow: hidden;
}
#container {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100px;
background: yellow;
}
#abspos {
position: absolute;
top: 10px;
right: 20px;
left: 10px; /* ignored */
width: 10px;
height: 10px;
background: fuchsia;
}
</style>
<div id="container">
<div id="abspos"></div>
</div>
<script>
window.addEventListener("load", function(event) {
var e = document.getElementById("abspos");
e.offsetTop; // flush layout
e.parentNode.style.width = "100px";
});
</script>

51
tests/wpt/web-platform-tests/css/css-writing-modes/dynamic-offset-vrl-rtl-001.html Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<title>CSS Test: dynamic changes to offset properties</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#vertical-layout">
<link rel="match" href="dynamic-offset-rtl-001-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Layout rules for 'right' and 'left' are handled correctly for absolutely positioned elements, in the presence of dynamic changes to 'width' of the containing block.">
<style>
html {
writing-mode: vertical-rl;
direction: rtl;
overflow: hidden;
}
#container {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 200px;
background: yellow;
}
#abspos {
position: absolute;
bottom: 80px;
left: 70px;
width: 10px;
height: 10px;
background: fuchsia;
}
</style>
<div id="container">
<div id="abspos"></div>
</div>
<script>
window.addEventListener("load", function(event) {
var e = document.getElementById("abspos");
e.offsetTop; // flush layout
e.parentNode.style.height = "100px";
});
</script>

52
tests/wpt/web-platform-tests/css/css-writing-modes/dynamic-offset-vrl-rtl-002.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<title>CSS Test: dynamic changes to offset properties</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#vertical-layout">
<link rel="match" href="dynamic-offset-rtl-001-ref.html">
<meta name="flags" content="dom">
<meta name="assert" content="Layout rules for 'right' and 'left' are handled correctly for absolutely positioned elements, in the presence of dynamic changes to 'width' of the containing block.">
<style>
html {
writing-mode: vertical-rl;
direction: rtl;
overflow: hidden;
}
#container {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 200px;
background: yellow;
}
#abspos {
position: absolute;
bottom: 80px;
left: 70px;
top: 80px; /* ignored */
width: 10px;
height: 10px;
background: fuchsia;
}
</style>
<div id="container">
<div id="abspos"></div>
</div>
<script>
window.addEventListener("load", function(event) {
var e = document.getElementById("abspos");
e.offsetTop; // flush layout
e.parentNode.style.height = "100px";
});
</script>

25
tests/wpt/web-platform-tests/css/css-writing-modes/inline-box-orthogonal-child-with-margins-ref.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<style>
.container {
border: 1px dashed blue;
height: 200px;
width: 560px;
box-sizing: content-box;
}
.container > div {
float: left;
width: 40px;
margin: 10px 20px 30px 40px;
border-width: 20px 30px 40px 50px;
padding: 30px 40px 50px 60px;
border-style: dotted;
}
.container > div:nth-child(1) { background: yellow; }
.container > div:nth-child(2) { background: purple; }
</style>
<div class="container">
<div></div>
<div></div>
</div>

29
tests/wpt/web-platform-tests/css/css-writing-modes/inline-box-orthogonal-child-with-margins.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"
title="3.1 Block Flow Direction: the writing-mode property">
<link rel="match" href="inline-box-orthogonal-child-with-margins-ref.html">
<meta content="This test checks that the correct margins of orthogonal children are used to compute the container's shrink to fit size. The test PASS if both children are rendered inside the container's blue border." name="assert" />
<style>
.container {
border: 1px dashed blue;
height: 200px;
display: inline-block;
}
.container > div {
float: left;
width: 40px;
margin: 10px 20px 30px 40px;
border-width: 20px 30px 40px 50px;
padding: 30px 40px 50px 60px;
border-style: dotted;
}
.container > div:nth-child(1) { background: yellow; }
.container > div:nth-child(2) { background: purple; }
</style>
<div class="container">
<div></div>
<div style="writing-mode: vertical-lr;"></div>
</div>

88
tests/wpt/web-platform-tests/css/css-writing-modes/logical-physical-mapping-001-ref.html Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Reference: border-block and border-inline logical properties in different writing modes</title>
<link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com">
<style>
#body tr td:nth-child(2) div {
writing-mode: horizontal-tb;
}
#body tr td:nth-child(3) div {
writing-mode: horizontal-tb;
}
#body tr td:nth-child(4) div {
writing-mode: vertical-rl;
}
#body tr td:nth-child(5) div {
writing-mode: vertical-rl;
}
#body tr td:nth-child(6) div {
writing-mode: vertical-lr;
}
#body tr td:nth-child(7) div {
writing-mode: vertical-lr;
}
#body tr td:nth-child(8) div {
writing-mode: sideways-lr;
}
#body tr td:nth-child(9) div {
writing-mode: sideways-lr;
}
#body tr td:nth-child(2n+2) div {
direction: ltr;
}
#body tr td:nth-child(2n+3) div {
direction: rtl;
}
td {
padding: 5px;
font-size: 13px;
background-color: silver;
width: 70px;
height: 70px;
}
.top {
border-bottom: 2px dotted blue;
border-top: 2px dotted orange;
}
.right {
border-left: 2px dotted blue;
border-right: 2px dotted orange;
}
.bottom {
border-top: 2px dotted blue;
border-bottom: 2px dotted orange;
}
.left {
border-right: 2px dotted blue;
border-left: 2px dotted orange;
}
</style>
</head>
<body>
<p>
Test passes if orange dots are opposite to the blue dots in each cell. Orange dots should be on the (physical) side specified by the text in the cell.
</p>
<table>
<thead>
<tr><th>writing mode</th><th colspan=2>horizontal-tb</th><th colspan=2>vertical-rl</th><th colspan=2>vertical-lr</th><th colspan=2>sideways-lr</th></tr>
<tr><th>direction</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th></tr>
</thead>
<tbody id=body>
<tr id=block-start><th>block-start</th> <td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td></tr>
<tr id=block-end><th>block-end</th> <td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td></tr>
<tr id=inline-start><th>inline-start</th> <td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td></tr>
<tr id=inline-end><th>inline-end</th> <td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td></tr>
</tbody>
</table>
</body>
</html>

99
tests/wpt/web-platform-tests/css/css-writing-modes/logical-physical-mapping-001.html Normal file
View file

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Test: border-block and border-inline logical properties in different writing modes</title>
<link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
<link rel="match" href="logical-physical-mapping-001-ref.html">
<style>
#block-start div.outer div {
border-block-start: dotted 2px orange;
}
#block-end div.outer div {
border-block-end: dotted 2px orange;
}
#inline-start div.outer div {
border-inline-start: dotted 2px orange;
}
#inline-end div.outer div {
border-inline-end: dotted 2px orange;
}
#body tr td:nth-child(2) div {
writing-mode: horizontal-tb;
}
#body tr td:nth-child(3) div {
writing-mode: horizontal-tb;
}
#body tr td:nth-child(4) div {
writing-mode: vertical-rl;
}
#body tr td:nth-child(5) div {
writing-mode: vertical-rl;
}
#body tr td:nth-child(6) div {
writing-mode: vertical-lr;
}
#body tr td:nth-child(7) div {
writing-mode: vertical-lr;
}
#body tr td:nth-child(8) div {
writing-mode: sideways-lr;
}
#body tr td:nth-child(9) div {
writing-mode: sideways-lr;
}
#body tr td:nth-child(2n+2) div {
direction: ltr;
}
#body tr td:nth-child(2n+3) div {
direction: rtl;
}
td {
padding: 5px;
font-size: 13px;
background-color: silver;
width: 70px;
height: 70px;
}
.top {
border-bottom: 2px dotted blue;
}
.right {
border-left: 2px dotted blue;
}
.bottom {
border-top: 2px dotted blue;
}
.left {
border-right: 2px dotted blue;
}
</style>
</head>
<body>
<p>
Test passes if orange dots are opposite to the blue dots in each cell. Orange dots should be on the (physical) side specified by the text in the cell.
</p>
<table>
<thead>
<tr><th>writing mode</th><th colspan=2>horizontal-tb</th><th colspan=2>vertical-rl</th><th colspan=2>vertical-lr</th><th colspan=2>sideways-lr</th></tr>
<tr><th>direction</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th></tr>
</thead>
<tbody id=body>
<tr id=block-start><th>block-start</th> <td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td></tr>
<tr id=block-end><th>block-end</th> <td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td></tr>
<tr id=inline-start><th>inline-start</th> <td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td></tr>
<tr id=inline-end><th>inline-end</th> <td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td></tr>
</tbody>
</table>
</body>
</html>

47
tests/wpt/web-platform-tests/css/css-writing-modes/padding-percent-orthogonal-dynamic.html Normal file
View file

@ -0,0 +1,47 @@
<!doctype html>
<title>CSS Writing Modes Test: Re-layout of orthogonal layouts with percentage padding</title>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#dimension-mapping">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#vertical {
width: 400px;
writing-mode: vertical-lr;
}
#padded {
width: 100%;
box-sizing: border-box;
padding-right: 100%;
}
#horizontal {
writing-mode: horizontal-tb;
width: 100%;
}
#container {
width: 100%;
background-color: green;
}
#child { height: 100px; }
</style>
<div id="vertical">
<div id="padded">
<div id="horizontal">
<div id="container">
<div id="child"></div>
</div>
</div>
</div>
</div>
<script>
test(() => assert_equals(container.offsetWidth, 300),
"400px minus 100px padding based on #child height");
vertical.style.width = "200px";
test(() => assert_equals(container.offsetWidth, 100),
"200px minus 100px padding based on #child height");
</script>

46
tests/wpt/web-platform-tests/css/css-writing-modes/reference/text-shadow-orientation-upright-001-ref.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reference Test</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
div
{
height: 100px;
margin-left: 100px;
width: 100px;
}
div#purple
{
background-color: purple;
}
img
{
height: 100px;
vertical-align: top;
width: 100px;
}
div#orange-blue
{
background-color: blue;
margin-left: 0px;
width: 300px;
}
div#fuchsia
{
background-color: fuchsia;
}
</style>
<div id="purple"></div>
<div id="orange-blue"><img src="../support/swatch-orange.png" alt="Image download support must be enabled"><img src="../support/swatch-yellow.png" alt="Image download support must be enabled"></div>
<div id="fuchsia"></div>

BIN
tests/wpt/web-platform-tests/css/css-writing-modes/support/WidthTest-Regular.otf Normal file
View file

Binary file not shown.

11
tests/wpt/web-platform-tests/css/css-writing-modes/support/tcy.css Normal file
View file

@ -0,0 +1,11 @@
.tcy {
text-combine-upright: all;
}
.fake-tcy {
display: inline-block;
writing-mode: horizontal-tb;
width: 1em;
height: 1em;
text-align: center;
line-height: 1em;
}

7
tests/wpt/web-platform-tests/css/css-writing-modes/support/width-test.css Normal file
View file

@ -0,0 +1,7 @@
@font-face {
font-family: WidthTest;
src: url(WidthTest-Regular.otf);
}
.test {
font: 72px/1 WidthTest;
}

21
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-break-inside-001-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Reference: text-combine-upright, no line break</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; }
.test > p { height: 3em; margin: 0 5em; }
.tcy, .fake-tcy { color: transparent; }
</style>
</head>
<body>
<p>Test passes if the two columns are identical.</p>
<div class="test">
<p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p>
<p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p>
</div>
</body>
</html>

24
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-break-inside-001.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Test: text-combine-upright, whitespace inside tcy with insufficient line space</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-layout">
<link rel="match" href="text-combine-upright-break-inside-001-ref.html">
<meta name="assert" content="line should never be broken inside text-combine-upright text node">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; }
.test > p { height: 3em; margin: 0 5em; }
.tcy, .fake-tcy { color: transparent; }
</style>
</head>
<body>
<p>Test passes if the two columns are identical.</p>
<div class="test">
<p>XXXXX<span class="tcy">X X</span>XXXXX</p>
<p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p>
</div>
</body>
</html>

26
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-break-inside-001a.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Test: text-combine-upright, white-space: pre with new line</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-layout">
<link rel="match" href="text-combine-upright-break-inside-001-ref.html">
<meta name="assert" content="line should never be broken inside text-combine-upright text node">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; }
.test > p { height: 3em; margin: 0 5em; }
.tcy { white-space: pre; }
.tcy, .fake-tcy { color: transparent; }
</style>
</head>
<body>
<p>Test passes if the two columns are identical.</p>
<div class="test">
<p>XXXXX<span class="tcy">X
X</span>XXXXX</p>
<p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p>
</div>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-compression-001-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Reference: text-combine-upright, no compression</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="stylesheet" href="support/width-test.css">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; }
.test > p { border: 1px solid black; }
</style>
</head>
<body>
<p>Test passes if there are two identical zeros in the blocks below.</p>
<div class="test">
<p><span class="fake-tcy">0</span></p>
<p><span class="fake-tcy">0</span></p>
</div>
</body>
</html>

24
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-compression-001.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Test: text-combine-upright, no compression</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
<link rel="match" href="text-combine-upright-compression-001-ref.html">
<meta name="assert" content="text-combine-upright with character not wider than 1em should not trigger compression.">
<link rel="stylesheet" href="support/width-test.css">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; }
.test > p { border: 1px solid black; }
</style>
</head>
<body>
<p>Test passes if there are two identical zeros in the blocks below.</p>
<div class="test">
<p><span class="tcy">0</span></p>
<p><span class="fake-tcy">0</span></p>
</div>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-compression-002-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Reference: text-combine-upright, compression of two characters</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="stylesheet" href="support/width-test.css">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; }
.test > p { border: 1px solid black; }
</style>
</head>
<body>
<p>Test passes if there are two identical graphs in the blocks below.</p>
<div class="test">
<p><span class="fake-tcy">22</span></p>
<p><span class="fake-tcy">22</span></p>
</div>
</body>
</html>

24
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-compression-002.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Test: text-combine-upright, compression of two characters</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
<link rel="match" href="text-combine-upright-compression-002-ref.html">
<meta name="assert" content="text-combine-upright should try applying 'hwid' feature if the width is wider than 1em">
<link rel="stylesheet" href="support/width-test.css">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; }
.test > p { border: 1px solid black; }
</style>
</head>
<body>
<p>Test passes if there are two identical graphs in the blocks below.</p>
<div class="test">
<p><span class="tcy">00</span></p>
<p><span class="fake-tcy">22</span></p>
</div>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-compression-003-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Reference: text-combine-upright, compression of three characters</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="stylesheet" href="support/width-test.css">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; }
.test > p { border: 1px solid black; }
</style>
</head>
<body>
<p>Test passes if there are two identical graphs in the blocks below.</p>
<div class="test">
<p><span class="fake-tcy">333</span></p>
<p><span class="fake-tcy">333</span></p>
</div>
</body>
</html>

24
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-compression-003.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Test: text-combine-upright, compression of three characters</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
<link rel="match" href="text-combine-upright-compression-003-ref.html">
<meta name="assert" content="text-combine-upright should try applying 'twid' feature if the width is wider than 1em">
<link rel="stylesheet" href="support/width-test.css">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; }
.test > p { border: 1px solid black; }
</style>
</head>
<body>
<p>Test passes if there are two identical graphs in the blocks below.</p>
<div class="test">
<p><span class="tcy">000</span></p>
<p><span class="fake-tcy">333</span></p>
</div>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-compression-004-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Reference: text-combine-upright, compression of four characters</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="stylesheet" href="support/width-test.css">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; }
.test > p { border: 1px solid black; }
</style>
</head>
<body>
<p>Test passes if there are two identical graphs in the blocks below.</p>
<div class="test">
<p><span class="fake-tcy">4444</span></p>
<p><span class="fake-tcy">4444</span></p>
</div>
</body>
</html>

24
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-compression-004.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Test: text-combine-upright, compression of four characters</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
<link rel="match" href="text-combine-upright-compression-004-ref.html">
<meta name="assert" content="text-combine-upright should try applying 'qwid' feature if the width is wider than 1em">
<link rel="stylesheet" href="support/width-test.css">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; }
.test > p { border: 1px solid black; }
</style>
</head>
<body>
<p>Test passes if there are two identical graphs in the blocks below.</p>
<div class="test">
<p><span class="tcy">0000</span></p>
<p><span class="fake-tcy">4444</span></p>
</div>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-compression-005-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Reference: text-combine-upright, no compression for single full-width character</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="stylesheet" href="support/width-test.css">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; }
.test > p { border: 1px solid black; }
</style>
</head>
<body>
<p>Test passes if there are two identical graphs in the blocks below.</p>
<div class="test">
<p><span class="fake-tcy">０</span></p>
<p><span class="fake-tcy">０</span></p>
</div>
</body>
</html>

24
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-compression-005.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Test: text-combine-upright, no compression for single full-width character</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth">
<link rel="match" href="text-combine-upright-compression-005-ref.html">
<meta name="assert" content="text-combine-upright should not change a single full-width character">
<link rel="stylesheet" href="support/width-test.css">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; }
.test > p { border: 1px solid black; }
</style>
</head>
<body>
<p>Test passes if there are two identical graphs in the blocks below.</p>
<div class="test">
<p><span class="tcy">０</span></p>
<p><span class="fake-tcy">０</span></p>
</div>
</body>
</html>

25
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-compression-005a.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Test: text-combine-upright, no compression for single character with full-width transform</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth">
<link rel="match" href="text-combine-upright-compression-005-ref.html">
<meta name="assert" content="text-combine-upright should not change a single full-width character">
<link rel="stylesheet" href="support/width-test.css">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; }
.test > p { border: 1px solid black; }
.tcy { text-transform: full-width; }
</style>
</head>
<body>
<p>Test passes if there are two identical graphs in the blocks below.</p>
<div class="test">
<p><span class="tcy">0</span></p>
<p><span class="fake-tcy">０</span></p>
</div>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-compression-006-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Reference: text-combine-upright, compression for two full-width characters</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="stylesheet" href="support/width-test.css">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; }
.test > p { border: 1px solid black; }
</style>
</head>
<body>
<p>Test passes if there are two identical graphs in the blocks below.</p>
<div class="test">
<p><span class="fake-tcy">22</span></p>
<p><span class="fake-tcy">22</span></p>
</div>
</body>
</html>

24
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-compression-006.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Test: text-combine-upright, compression for two full-width characters</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth">
<link rel="match" href="text-combine-upright-compression-006-ref.html">
<meta name="assert" content="text-combine-upright should run the reverse of full-width transform before applying compression">
<link rel="stylesheet" href="support/width-test.css">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; }
.test > p { border: 1px solid black; }
</style>
</head>
<body>
<p>Test passes if there are two identical graphs in the blocks below.</p>
<div class="test">
<p><span class="tcy">００</span></p>
<p><span class="fake-tcy">22</span></p>
</div>
</body>
</html>

25
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-compression-006a.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Test: text-combine-upright, compression for two characters with full-width transform</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth">
<link rel="match" href="text-combine-upright-compression-006-ref.html">
<meta name="assert" content="text-combine-upright should run the reverse of full-width transform before applying compression">
<link rel="stylesheet" href="support/width-test.css">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; }
.test > p { border: 1px solid black; }
.tcy { text-transform: full-width; }
</style>
</head>
<body>
<p>Test passes if there are two identical graphs in the blocks below.</p>
<div class="test">
<p><span class="tcy">00</span></p>
<p><span class="fake-tcy">22</span></p>
</div>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-compression-007-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Reference: text-combine-upright: all, fit any number of characters</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="stylesheet" href="support/width-test.css">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; height: 3.5em; }
.test > p { border: 1px solid black; }
</style>
</head>
<body>
<p>Test passes if the contents in the two blocks are identical.</p>
<div class="test">
<p>一<span class="fake-tcy"></span>十</p>
<p>一<span class="fake-tcy"></span>十</p>
</div>
</body>
</html>

25
tests/wpt/web-platform-tests/css/css-writing-modes/text-combine-upright-compression-007.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Test: text-combine-upright: all, fit any number of characters</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
<link rel="match" href="text-combine-upright-compression-007-ref.html">
<meta name="assert" content="text-combine-upright: all should allow any amount of text to be compressed in a 1em square">
<link rel="stylesheet" href="support/width-test.css">
<link rel="stylesheet" href="support/tcy.css">
<style>
.test { writing-mode: vertical-rl; height: 3.5em; }
.test > p { border: 1px solid black; }
.tcy { color: transparent; }
</style>
</head>
<body>
<p>Test passes if the contents in the two blocks are identical.</p>
<div class="test">
<p>一<span class="tcy">ニ三四五六七八九</span>十</p>
<p>一<span class="fake-tcy"></span>十</p>
</div>
</body>
</html>

18
tests/wpt/web-platform-tests/css/css-writing-modes/text-orientation-upright-directionality-001-ref.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Reference: text-orientation:upright in sideways-* writing modes</title>
<link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com">
</head>
<body style="font: 24px sans-serif">
<p>The two sideways-rl lines should be identical:
<div style="writing-mode:sideways-rl">
<p>hello العربي world עברית</p>
<p>hello العربي world עברית</p>
</div>
<p>The two sideways-lr lines should be identical:
<div style="writing-mode:sideways-lr">
<p>hello العربي world עברית</p>
<p>hello العربي world עברית</p>
</div>

21
tests/wpt/web-platform-tests/css/css-writing-modes/text-orientation-upright-directionality-001.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: text-orientation:upright in sideways-* writing modes</title>
<link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-orientation">
<link rel="match" href="text-orientation-upright-directionality-001-ref.html">
<meta name="assert" content="text-orientation has no effect in horizontal typographic modes">
</head>
<body style="font: 24px sans-serif">
<p>The two sideways-rl lines should be identical:
<div style="writing-mode:sideways-rl">
<p>hello العربي world עברית</p>
<p style="text-orientation:upright">hello العربي world עברית</p>
</div>
<p>The two sideways-lr lines should be identical:
<div style="writing-mode:sideways-lr">
<p>hello العربي world עברית</p>
<p style="text-orientation:upright">hello العربي world עברית</p>
</div>

77
tests/wpt/web-platform-tests/css/css-writing-modes/text-shadow-orientation-upright-001.html Normal file
View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'text-shadow' and upright text orientation</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#physical-only">
<link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-shadow-property">
<link rel="match" href="reference/text-shadow-orientation-upright-001-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<!--
Issue 229211: text-shadow is drawn at the invalid position in vertical writing mode
on Chromium for Mac
https://bugs.chromium.org/p/chromium/issues/detail?id=229211#c8
-->
<meta content="" name="flags">
<meta content="This test checks that text-shadow offsets are purely physical and do not change with vertical writing mode.">
<style>
div
{
color: yellow;
font-family: Ahem;
font-size: 100px;
line-height: 1;
margin: calc(1em + 8px) auto auto 1em;
text-orientation: upright;
writing-mode: vertical-rl;
text-shadow: 0em -1em purple, 1em 0em blue, 0em 1em fuchsia, -1em 0em orange;
}
/*
Value: [ <color>? && <length>{2,3} ]#
color: color of text-shadow
1st <length>
Specifies the horizontal offset
of the shadow. A positive value draws a shadow that is
offset to the right of the box, a negative length to the
left.
2nd <length>
Specifies the vertical offset
of the shadow. A positive value offsets the shadow down,
a negative one up.
*/
</style>
<div>A</div>
<!--
.........
. .
. . <-purple
. .
.......................
. . . .
orange-> . . yel . . <-blue
. . low . .
.......................
. .
. . <-fuchsia
. .
.........
-->

59
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-computed-direction-001.html Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: computed 'direction' of root element when 'writing-mode' for &lt;body&gt; propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<meta name="flags" content="">
<meta name="assert" content="When the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of 'writing-mode' and 'direction' on such first child element instead of taken from the root element. In this test, a small script verifies that the computed value of 'direction' of the root element itself is not affected by such propagation.">
<!--
This test *only* verifies the computed value of 'direction' of the
root element.
This test does *not* verify if the 'writing-mode' value of
the body element propagates to the root element.
-->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
html
{
direction: rtl;
writing-mode: vertical-lr;
}
body
{
direction: ltr;
writing-mode: vertical-rl;
}
</style>
<script>
function startTesting()
{
test(function()
{
assert_equals(getComputedStyle(document.documentElement).direction, "rtl" );
}, "First test on computed value of 'direction' of root element.");
}
startTesting();
</script>

59
tests/wpt/web-platform-tests/css/css-writing-modes/wm-propagation-body-computed-direction-002.html Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: computed 'direction' of root element when 'writing-mode' for &lt;body&gt; propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<meta name="flags" content="">
<meta name="assert" content="When the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of 'writing-mode' and 'direction' on such first child element instead of taken from the root element. In this test, a small script verifies that the computed value of 'direction' of the root element itself is not affected by such propagation.">
<!--
This test *only* verifies the computed value of 'direction' of the
root element.
This test does *not* verify if the 'writing-mode' value of
the body element propagates to the root element.
-->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
html
{
direction: ltr;
writing-mode: vertical-rl;
}
body
{
direction: rtl;
writing-mode: vertical-lr;
}
</style>
<script>
function startTesting()
{
test(function()
{
assert_equals(getComputedStyle(document.documentElement).direction, "ltr" );
}, "Second test on computed value of 'direction' of root element.");
}
startTesting();
</script>