Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-writing-modes/writing-mode-vertical-rl-003.htm - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>CSS Writing Modes Test: writing-mode: horizontal-tb nested in vertical-rl</title>
<link rel="author" title="KISAKA Toshihiro" href="mailto:toshihiro@kisaka.jp">
<!-- You must have at least one spec link, but may have as many as are covered in the test. -->
<!-- Be sure to make the main testing area first in the order -->
<!-- The match link is only required if this is a reftest -->
<link rel="match" href="writing-mode-vertical-rl-003-ref.htm">
<meta name="flags" content="ahem">
<meta name="assert" content="when child block has its own writing-mode, child block's writing-mode overwrites parent block's writing-mode.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style type="text/css">
div {
writing-mode: vertical-rl;
}
div p {
background: yellow;
color: blue;
font: 20px/1 Ahem;
height: 6em;
margin: 10px;
white-space: pre;
width: 6em;
}
div p:nth-child(2) {
background: pink;
}
p#test {
writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<p>Upper three blocks are identical to the lower three blocks including each character positions.</p>
<div>
<p>ab cd
e fg h
i jkl
mn
o q rs
t uv</p>
<p id="test">ab cd
e fg h
i jkl
mn
o q rs
t uv</p>
<p>ab cd
e fg h
i jkl
mn
o q rs
t uv</p>
</div>
<div>
<p>ab cd
e fg h
i jkl
mn
o q rs
t uv</p>
<p> h s
d l r
cgk v
fj qu
b n
aeimot</p>
<p>ab cd
e fg h
i jkl
mn
o q rs
t uv</p>
</div>
</body>
</html>