Skip to content

[css-writing-modes] Add vertical writing mode tests #16576

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 30, 2019
Merged

[css-writing-modes] Add vertical writing mode tests #16576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f320e29
[css-writing-modes] Add vertical writing mode tests
xfq Apr 28, 2019
1d92b48
Trim trailing whitespace
xfq Apr 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions css/css-writing-modes/writing-mode-vlr-001-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:[email protected]"/>
<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 changes: 31 additions & 0 deletions css/css-writing-modes/writing-mode-vlr-002-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:[email protected]"/>
<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 changes: 30 additions & 0 deletions css/css-writing-modes/writing-mode-vlr-003-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:[email protected]"/>
<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 changes: 28 additions & 0 deletions css/css-writing-modes/writing-mode-vlr-005-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:[email protected]"/>
<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 changes: 28 additions & 0 deletions css/css-writing-modes/writing-mode-vlr-006-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:[email protected]"/>
<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 changes: 29 additions & 0 deletions css/css-writing-modes/writing-mode-vlr-007-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:[email protected]"/>
<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 changes: 29 additions & 0 deletions css/css-writing-modes/writing-mode-vlr-008-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:[email protected]"/>
<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 changes: 29 additions & 0 deletions css/css-writing-modes/writing-mode-vlr-009-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:[email protected]"/>
<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 changes: 29 additions & 0 deletions css/css-writing-modes/writing-mode-vlr-010-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:[email protected]"/>
<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 changes: 35 additions & 0 deletions css/css-writing-modes/writing-mode-vlr-012-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:[email protected]"/>
<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 changes: 35 additions & 0 deletions css/css-writing-modes/writing-mode-vlr-014-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:[email protected]"/>
<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 changes: 27 additions & 0 deletions css/css-writing-modes/writing-mode-vlr-015-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:[email protected]"/>
<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>
Loading