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

Update web-platform-tests to revision e45156b5e558c062a609356905c83a0258c516e3

Browse source
This commit is contained in:
WPT Sync Bot 2019-05-02 21:47:51 -04:00
parent 9f6005be16
commit 5fcf52d946
199 changed files with 4430 additions and 530 deletions
Download patch file Download diff file Expand all files Collapse all files

30
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-001-manual.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, vertical lines</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-lr will display a line of text vertically."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 24px; height: 300px; width: 300px; }
.test span { background-color:orange; color:orange; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-lr; }
</style>
</head>
<body>
<p class="instructions" dir="ltr">Test passes if you see a tall, thin orange rectangle.</p>
<div class="test">
<span lang="mn">ᠮᠤᠩᠭᠤᠯ ᠤᠯᠤᠰ</span>
</div>
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-002-manual.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, line wrap</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-lr will wrap lines from left to right."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test { font-family: webfont, serif; font-size: 24px; height: 250px; width: 250px; }
.test span { background-color:orange; color:orange; }
.test span#end { background-color:blue; color:blue; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-lr; }
</style>
</head>
<body>
<p class="instructions" dir="ltr">Test passes if the blue rectangle is on the right-most side.</p>
<div class="test">
<span lang="mn">ᠴᠤᠢᠵᠤᠩᠵᠠᠪ ᠪᠠᠭᠰᠢ ᠶᠢᠨ <span id="end">ᠦᠭᠦᠯᠡᠯ</span></span>
</div>
</body>
</html>

30
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-003-manual.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, alignment</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-lr will cause lines to display from the left side of the enclosing box."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test { font-family: webfont, serif; font-size: 24px; height: 250px; width: 250px; border: 1px solid orange; }
.test span { background-color:orange; color:orange; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-lr; }
</style>
</head>
<body>
<p class="instructions" dir="ltr">Test passes if the orange filled rectangle is vertical and on the left side of the square box.</p>
<div class="test">
<span lang="mn">ᠴᠤᠢᠵᠤᠩᠵᠠᠪ</span>
</div>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-005-manual.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, default Mongolian orientation</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="By default, writing-mode:vertical-lr will display Mongolian characters with the right orientation."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions" dir="ltr">Test passes if text is vertical and the Mongolian characters are oriented the same way as on the blue background.</p>
<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ ᠤᠯᠤᠰ</div>
<div class="ref"><img src="support/mn-orientation.png" alt="ref image"/></div>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-006-manual.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, Mongolian joining</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="By default, writing-mode:vertical-lr will display Mongolian characters with correct joining behaviour."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-lr; }
</style>
</head>
<body>
<p class="instructions" dir="ltr">Test passes if the Mongolian characters are joined as shown on the blue background.</p>
<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ ᠤᠯᠤᠰ</div>
<div class="ref"><img src="support/mn-orientation.png" alt="ref image"/></div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-007-manual.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, default Latin orientation</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="By default, writing-mode:vertical-lr will display Latin characters rotated 90° right."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px;color: #ccc; }
span[lang=en] { color: black; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-lr; }
</style>
</head>
<body>
<p class="instructions" dir="ltr">Test passes if the text runs vertically and the orientation of the Latin characters is the same as on the blue background.</p>
<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="en">W3C i18n</span> ᠤᠯᠤᠰ</div>
<div class="ref"><img src="support/mn+latin.png" alt="ref image"/></div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-008-manual.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, default Arabic orientation</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters rotated 90° right."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; }
span[lang=ar] { color: black; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions">Test passes if the text runs vertically and the orientation of the Arabic characters is the same as on the blue background.</p>
<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="ar">نشاط التدويل</span> ᠤᠯᠤᠰ</div>
<div class="ref"><img src="support/mn+arabic.png" alt="ref image"/></div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-009-manual.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, default Arabic direction</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters progressing up the page."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; }
span[lang=ar] { color: black; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions">Test passes if the text runs vertically and the order of the Arabic characters is the same as on the blue background.</p>
<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="ar">نشاط التدويل</span> ᠤᠯᠤᠰ</div>
<div class="ref"><img src="support/mn+arabic.png" alt="ref image"/></div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-010-manual.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, Arabic joining</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters using cursive joining."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; }
span[lang=ar] { color: black; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions">Test passes if the text runs vertically and the Arabic characters are joined up as shown on the blue background.</p>
<div class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="ar">نشاط التدويل</span> ᠤᠯᠤᠰ</div>
<div class="ref"><img src="support/mn+arabic.png" alt="ref image"/></div>
</body>
</html>

35
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-012-manual.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, Latin wrapping</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="By default, writing-mode:vertical-lr will wrap Latin text across a line break such that the first word in memory is on the left."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; height: 150px; color: #ccc; }
span[lang=en] { color: black; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-lr; }
</style>
<script>
function setMargin (height) {
document.getElementById('test').style.height = height+'px'
}
</script>
</head>
<body>
<p class="instructions">Test passes if the two Latin script words are displayed in the same relative positions around the line break as on the blue background.</p>
<p class="instructions">Use this control to set the line length, if necessary: <input type="text" value="150" style="width: 30px; text-align:right;" onChange="setMargin(this.value);"/>px</p>
<div id="test" class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="en">W3C i18n</span> ᠤᠯᠤᠰ</div>
<div class="ref"><img src="support/mn_en_wrap.png" alt="ref image"/></div>
</body>
</html>

35
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-014-manual.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, Arabic wrapping</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="By default, writing-mode:vertical-lr will arrange Arabic text across a line break such that the first word in memory is on the left side of the line break."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; height: 150px; color: #ccc; }
span[lang=ar] { color: black; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-lr; }
</style>
<script>
function setMargin (height) {
document.getElementById('test').style.height = height+'px'
}
</script>
</head>
<body>
<p class="instructions">Test passes if the two Arabic words are displayed in the same relative positions around the line break as on the blue background.</p>
<p class="instructions">Use this control to set the line length, if necessary: <input type="text" value="150" style="width: 30px; text-align:right;" onChange="setMargin(this.value);"/>px</p>
<div id="test" class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <span lang="ar">نشاط التدويل</span> ᠤᠯᠤᠰ</div>
<div class="ref"><img src="support/mn_ar_wrap.png" alt="ref image"/></div>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-015-manual.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, image orientation</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="By default, replaced content such as images is displayed upright."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; color: #ccc; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-lr; }
</style>
</head>
<body>
<p class="instructions">Test passes if the text is vertical and the world map has north at the top.</p>
<div id="test" class="test" lang="mn">ᠮᠤᠩᠭᠤᠯ <img src="support/world.gif" alt="ref image"/> ᠤᠯᠤᠰ</div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-001-manual.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, input type=text</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-lr will display an input field for text vertically, and with vertical text inside."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
input { font-family: webfont; font-size: 34px; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-lr; }
</style>
</head>
<body>
<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
<div class="test">
<input type="text" value="ᠮᠤᠩᠭᠤᠯ W3C i18n ᠤᠯᠤᠰ" />
</div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-002-manual.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, input type=text placeholder</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-lr will display an input field for text vertically, and with vertical placeholder text inside."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
input { font-family: webfont; font-size: 34px; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-lr; }
</style>
</head>
<body>
<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
<div class="test">
<input type="text" placeholder="ᠮᠤᠩᠭᠤᠯ W3C i18n ᠤᠯᠤᠰ" />
</div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-003-manual.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, textarea</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-lr will display a textarea field vertically, and with vertical text inside."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
textarea { font-family: webfont; font-size: 34px; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-lr; }
</style>
</head>
<body>
<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
<div class="test">
<textarea rows="3">ᠮᠤᠩᠭᠤᠯ W3C i18n ᠤᠯᠤᠰ</textarea>
</div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-004-manual.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, textarea placeholder</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-lr will display a textarea field vertically, and with vertical placeholder text inside."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
textarea { font-family: webfont; font-size: 34px; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-lr; }
</style>
</head>
<body>
<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
<div class="test">
<textarea rows="3" placeholder="ᠮᠤᠩᠭᠤᠯ W3C i18n ᠤᠯᠤᠰ"></textarea>
</div>
</body>
</html>

34
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-005-manual.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, select, selected item</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-lr will display a select box vertically, and the selected item will be displayed vertically."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
select { font-family: webfont; font-size: 24px; }
.test { text-align: center; vertical-align: middle; width: 100%; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-lr; }
</style>
</head>
<body>
<p class="instructions">Test passes if the displayed selection area is vertical and the text inside it has default vertical settings.</p>
<div class="test">
<select>
<option value="1">ᠮᠤᠩᠭᠤᠯ item 1 ᠤᠯᠤᠰ</option>
<option value="2">ᠮᠤᠩᠭᠤᠯ item 2 ᠤᠯᠤᠰ</option>
<option value="3">ᠮᠤᠩᠭᠤᠯ item 3 ᠤᠯᠤᠰ</option>
</select>
</div>
</body>
</html>

34
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-forms-006-manual.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, select, options</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-lr will display selection options vertically."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
select { font-family: webfont; font-size: 24px; }
.test { text-align: center; vertical-align: middle; width: 100%; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-lr; }
</style>
</head>
<body>
<p class="instructions">Test passes if the selection options displayed when you click on the selector are vertical.</p>
<div class="test">
<select>
<option value="1">ᠮᠤᠩᠭᠤᠯ item 1 ᠤᠯᠤᠰ</option>
<option value="2">ᠮᠤᠩᠭᠤᠯ item 2 ᠤᠯᠤᠰ</option>
<option value="3">ᠮᠤᠩᠭᠤᠯ item 3 ᠤᠯᠤᠰ</option>
</select>
</div>
</body>
</html>

33
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-table-001-manual.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, vertical lines</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-lr will display a line of text vertically within a table cell."/>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('../../fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 14px; height: 300px; width: 300px; }
.test span { background-color:orange; color:orange; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-lr; }
</style>
</head>
<body>
<p class="instructions" dir="ltr">Test passes if you see 4 tall, thin orange rectangles.</p>
<div class="test">
<table><tbody>
<tr><th><span lang="mn">ᠮᠤᠩᠭᠤᠯ</span></th><td><span lang="mn">ᠮᠤᠩᠭᠤᠯ</span></td></tr>
<tr><th><span lang="mn">ᠮᠤᠩᠭᠤᠯ</span></th><td><span lang="mn">ᠮᠤᠩᠭᠤᠯ</span></td></tr>
</tbody></table>
</div>
</body>
</html>

26
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vlr-table-002-manual.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-lr, table cell order</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-lr will display table columns horizontally, with the top of the table on the left."/>
<style type="text/css">
.test { font-size: 34px; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-lr; }
</style>
</head>
<body>
<p class="instructions">Test passes if the numbers increase top-to-bottom, starting on the left.</p>
<div class="test">
<table><tbody>
<tr><th>1</th><th>2</th></tr>
<tr><td>3</td><td>4</td></tr>
</tbody></table>
</div>
</body>
</html>

30
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-001-manual.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, vertical lines</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-rl will display a line of text vertically."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 24px; height: 300px; width: 300px; }
.test span { background-color:orange; color:orange; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions" dir="ltr">Test passes if you see a tall, thin orange rectangle.</p>
<div class="test">
<span lang="zh-hans">国际化活动万维网联盟</span>
</div>
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-002-manual.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, line wrap</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-rl will wrap lines from right to left."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 24px; height: 300px; width: 300px; }
.test span { background-color:orange; color:orange; }
.test span#end { background-color:blue; color:blue; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions" dir="ltr">Test passes if the blue rectangle is on the left-most side.</p>
<div class="test">
<span lang="zh-hans">国际化活动万维网联盟国际化活动万维<span id="end">网联盟</span></span>
</div>
</body>
</html>

30
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-003-manual.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, alignment</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-lr will cause lines to display from the right side of the enclosing box."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 24px; height: 300px; width: 300px; }
.test span { background-color:orange; color:orange; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; border: 1px solid orange; }
</style>
</head>
<body>
<p class="instructions" dir="ltr">Test passes if the orange filled rectangle is vertical and on the right side of the square box.</p>
<div class="test">
<span lang="zh-hans">国际化活动万维网联盟</span>
</div>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-005-manual.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, default Han orientation</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="By default, writing-mode:vertical-rl will display chinese characters upright."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions" dir="ltr">Test passes if the text is vertical and the Chinese characters are oriented the same way as on the blue background.</p>
<div class="test" lang="mn">国际化活动万维网联盟</div>
<div class="ref"><img src="support/zh-orientation.png" alt="ref image"/></div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-007-manual.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, default Latin orientation</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-lr will display Latin characters rotated 90° right by default."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.test { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; }
span[lang=en] { color: black; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions">Test passes if the text runs vertically and the orientation of the Latin characters is the same as on the blue background.</p>
<div class="test" lang="zh-hans">国际化活动<span lang="en">W3C i18n</span>万维网联盟</div>
<div class="ref"><img src="support/zh+latin.png" alt="ref image"/></div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-008-manual.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, default Arabic orientation</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters rotated 90° right."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; }
span[lang=ar] { color: black; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions">Test passes if the text runs vertically and the orientation of the Arabic characters is the same as on the blue background.</p>
<div class="test" lang="zh-hans">国际化活动<span lang="ar">نشاط التدويل</span>万维网联盟</div>
<div class="ref"><img src="support/zh+arabic.png" alt="ref image"/></div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-009-manual.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, default Arabic direction</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters progressing up the page."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; }
span[lang=ar] { color: black; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions">Test passes if the text runs vertically and the order of the Arabic characters is the same as on the blue background.</p>
<div class="test" lang="zh-hans">国际化活动<span lang="ar">نشاط التدويل</span>万维网联盟</div>
<div class="ref"><img src="support/zh+arabic.png" alt="ref image"/></div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-010-manual.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, Arabic joining</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="By default, writing-mode:vertical-lr will display Arabic characters using cursive joining."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; }
span[lang=ar] { color: black; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions">Test passes if the text runs vertically and the Arabic characters are joined up as shown on the blue background.</p>
<div class="test" lang="zh-hans">国际化活动<span lang="ar">نشاط التدويل</span>万维网联盟</div>
<div class="ref"><img src="support/zh+arabic.png" alt="ref image"/></div>
</body>
</html>

35
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-012-manual.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, Latin wrapping</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="By default, writing-mode:vertical-rl will wrap Latin text across a line break such that the first word in memory is on the right."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; height: 250px; color: #ccc; }
span[lang=en] { color: black; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
<script>
function setMargin (height) {
document.getElementById('test').style.height = height+'px'
}
</script>
</head>
<body>
<p class="instructions">Test passes if the two Latin words on the left are displayed in the same relative positions around a line break as on the blue background.</p>
<p class="instructions">Use this control to set the line length, if necessary: <input type="text" value="250" style="width: 30px; text-align:right;" onChange="setMargin(this.value);"/>px</p>
<div id="test" class="test" lang="zh-hans">国际化活动<span lang="en">W3C i18n</span>万维网联盟</div>
<div class="ref"><img src="support/zh_en_wrap.png" alt="ref image"/></div>
</body>
</html>

35
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-014-manual.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, Arabic wrapping</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="By default, writing-mode:vertical-rl will arrange Arabic text across a line break such that the first word in memory is on the right-hand side of the line break."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; height: 200px; color: #ccc; }
span[lang=ar] { color: black; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
<script>
function setMargin (height) {
document.getElementById('test').style.height = height+'px'
}
</script>
</head>
<body>
<p class="instructions">Test passes if the two Arabic words are displayed in the same relative positions around the line break as on the blue background.</p>
<p class="instructions">Use this control to set the line length, if necessary: <input type="text" value="200" style="width: 30px; text-align:right;" onChange="setMargin(this.value);"/>px</p>
<div id="test" class="test" lang="zh-hans">国际化活动<span lang="ar">نشاط التدويل</span>万维网联盟</div>
<div class="ref"><img src="support/zh_ar_wrap.png" alt="ref image"/></div>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-015-manual.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, image orientation</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="By default, replaced content such as images is displayed upright."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.test { font-family: webfont, serif; font-size: 24px; float: left; margin-right: 30px; color: #ccc; color: #ccc; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions">Test passes if the text is vertical and the world map has north at the top.</p>
<div id="test" class="test" lang="zh-hans">国际化活动<img src="support/world.gif" alt="ref image"/>万维网联盟</div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-001-manual.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, input type=text</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-rl will display an input field for text vertically, and with vertical text inside."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
input { font-family: webfont; font-size: 34px; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
<div class="test">
<input type="text" value="国际化活动W3C i18n万维网联盟" />
</div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-002-manual.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, input type=text placeholder</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-rl will display an input field for text vertically, and with vertical placeholder text inside."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
input { font-family: webfont; font-size: 34px; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
<div class="test">
<input type="text" placeholder="国际化活动W3C i18n万维网联盟" />
</div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-003-manual.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, textarea</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-rl will display a textarea field vertically, and with vertical text inside."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
textarea { font-family: webfont; font-size: 34px; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
<div class="test">
<textarea rows="3">国际化活动W3C i18n万维网联盟</textarea>
</div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-004-manual.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, textarea placeholder</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-rl will display a textarea field vertically, and with vertical placeholder text inside."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
textarea { font-family: webfont; font-size: 34px; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
<div class="test">
<textarea rows="3" placeholder="国际化活动W3C i18n万维网联盟"></textarea>
</div>
</body>
</html>

34
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-005-manual.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, select, selected item</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-rl will display a select box vertically, and the selected item will be displayed vertically."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
select { font-family: webfont; font-size: 24px; }
.test { text-align: center; vertical-align: middle; width: 100%; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions">Test passes if the displayed selection area is vertical and the text inside it has default vertical settings.</p>
<div class="test">
<select>
<option value="1">国际化活动item1万维网联盟</option>
<option value="2">国际化活动item2万维网联盟</option>
<option value="3">国际化活动item3万维网联盟</option>
</select>
</div>
</body>
</html>

34
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-forms-006-manual.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, select, options</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-rl will display selection options vertically."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
select { font-family: webfont; font-size: 24px; }
.test { text-align: center; vertical-align: middle; width: 100%; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions">Test passes if the selection options displayed when you click on the selector are vertical.</p>
<div class="test">
<select>
<option value="1">国际化活动item1万维网联盟</option>
<option value="2">国际化活动item2万维网联盟</option>
<option value="3">国际化活动item3万维网联盟</option>
</select>
</div>
</body>
</html>

33
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-table-001-manual.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, vertical lines</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-rl will display a line of text vertically within a table cell."/>
<style type="text/css">
@font-face {
font-family: "webfont";
src: url("../../fonts/mplus-1p-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.test, .ref { font-family: webfont, serif; font-size: 14px; height: 300px; width: 300px; }
.test span { background-color:orange; color:orange; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions" dir="ltr">Test passes if you see 4 tall, thin orange rectangles.</p>
<div class="test">
<table><tbody>
<tr><th><span lang="zh">国际化活动</span></th><td><span lang="zh">国际化活动</span></td></tr>
<tr><th><span lang="zh">国际化活动</span></th><td><span lang="zh">国际化活动</span></td></tr>
</tbody></table>
</div>
</body>
</html>

26
tests/wpt/web-platform-tests/css/css-writing-modes/writing-mode-vrl-table-002-manual.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>writing mode:vertical-rl, table cell order</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
<meta name="assert" content="writing-mode:vertical-rl will display table columns horizontally, with the top of the table on the right."/>
<style type="text/css">
.test { font-size: 34px; }
</style>
<!-- this is the test -->
<style type="text/css">
.test { writing-mode: vertical-rl; }
</style>
</head>
<body>
<p class="instructions" dir="ltr">Test passes if the numbers increase top-to-bottom, starting on the right.</p>
<div class="test">
<table><tbody>
<tr><th>1</th><th>2</th></tr>
<tr><td>3</td><td>4</td></tr>
</tbody></table>
</div>
</body>
</html>