mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-20 23:37:33 +09:00
import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo
This commit is contained in:
Roy Tam
commit
dcd9973243
150858 changed files with 23884658 additions and 0 deletions
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family:test;
|
||||
src:url(../fonts/sil/GenR102.ttf);
|
||||
}
|
||||
body { width: 500px; height: 300px; writing-mode: vertical-rl;
|
||||
font:16px/24px test; margin: 0; border: 1px solid gray; }
|
||||
div { margin: 10px; background: #eee; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
First single-column division.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="margin: 0; display: inline-block; height: 145px">
|
||||
Two columns<br>
|
||||
one<br>two<br>three
|
||||
</div><div style="margin: 0; display: inline-block; height: 135px; vertical-align: top">
|
||||
four<br>five<br>six
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Another single-column division.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="margin: 0; display: inline-block; height: 95px">
|
||||
Three columns<br>
|
||||
one
|
||||
</div><div style="margin: 0; display: inline-block; height: 95px">two<br>three<br>four
|
||||
</div><div style="margin: 0; display: inline-block; height: 85px; vertical-align: top">five<br>six
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Final single-column division.
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family:test;
|
||||
src:url(../fonts/sil/GenR102.ttf);
|
||||
}
|
||||
body { width: 500px; height: 300px; writing-mode: vertical-rl;
|
||||
font:16px/24px test; margin: 0; border: 1px solid gray; }
|
||||
div { margin: 10px; background: #eee; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
First single-column division.
|
||||
</div>
|
||||
|
||||
<div style="-moz-column-count:2; -moz-column-gap:10px">
|
||||
Two columns<br>
|
||||
one<br>two<br>three<br>four<br>five<br>six
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Another single-column division.
|
||||
</div>
|
||||
|
||||
<div style="-moz-column-count:3; -moz-column-gap:5px">
|
||||
Three columns<br>
|
||||
one<br>two<br>three<br>four<br>five<br>six
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Final single-column division.
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
33
layout/reftests/writing-mode/1082844-ref.html
Normal file
33
layout/reftests/writing-mode/1082844-ref.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body > div {
|
||||
width:225px;
|
||||
height:225px;
|
||||
}
|
||||
body > div > div {
|
||||
width:200px;
|
||||
height:220px;
|
||||
border:1px solid red;
|
||||
line-height:20px;
|
||||
text-transform: full-width;
|
||||
}
|
||||
.v-rl { writing-mode:vertical-rl; text-orientation:upright }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<div id="test2" class="v-rl">
|
||||
A B C D E
|
||||
F G H I J
|
||||
K L M N O
|
||||
P Q R S T
|
||||
U V W X Y
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
33
layout/reftests/writing-mode/1082844.html
Normal file
33
layout/reftests/writing-mode/1082844.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body > div {
|
||||
width:225px;
|
||||
height:225px;
|
||||
}
|
||||
body > div > div {
|
||||
width:200px;
|
||||
height:220px;
|
||||
border:1px solid red;
|
||||
line-height:20px;
|
||||
text-transform: full-width;
|
||||
}
|
||||
.v-rl { writing-mode:vertical-rl; text-orientation:upright }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<div id="test2" class="v-rl">
|
||||
A B C D E
|
||||
F G H I J
|
||||
K <span>L <span>M N</span> O</span>
|
||||
P Q R S T
|
||||
U V W X Y
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
52
layout/reftests/writing-mode/1083748-ref.html
Normal file
52
layout/reftests/writing-mode/1083748-ref.html
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: test;
|
||||
src: url(../fonts/mplus/mplus-1p-regular.ttf);
|
||||
}
|
||||
body {
|
||||
font-family: test;
|
||||
}
|
||||
body > div {
|
||||
width:410px;
|
||||
height:610px;
|
||||
float:left;
|
||||
border:1px solid green;
|
||||
margin:5px;
|
||||
}
|
||||
body > div > div {
|
||||
width:200px;
|
||||
height:200px;
|
||||
border:1px solid red;
|
||||
line-height:20px;
|
||||
text-transform:full-width;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.v-lr { writing-mode:vertical-lr; text-orientation:upright }
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
b {
|
||||
background-color: rgb(224,255,224);
|
||||
}
|
||||
i {
|
||||
background-color: rgb(255,224,224);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<div class="v-lr">
|
||||
<p>The <i>quick</i> brown fox jumps over the <b>lazy</b> dog.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
48
layout/reftests/writing-mode/1083748.html
Normal file
48
layout/reftests/writing-mode/1083748.html
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: test;
|
||||
src: url(../fonts/mplus/mplus-1p-regular.ttf);
|
||||
}
|
||||
body {
|
||||
font-family: test;
|
||||
}
|
||||
body > div {
|
||||
width:410px;
|
||||
height:610px;
|
||||
float:left;
|
||||
border:1px solid green;
|
||||
margin:5px;
|
||||
}
|
||||
body > div > div {
|
||||
width:200px;
|
||||
height:200px;
|
||||
border:1px solid red;
|
||||
line-height:20px;
|
||||
text-transform:full-width;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.v-lr { writing-mode:vertical-lr; text-orientation:upright }
|
||||
|
||||
b {
|
||||
background-color: rgb(224,255,224);
|
||||
}
|
||||
i {
|
||||
background-color: rgb(255,224,224);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<div class="v-lr">
|
||||
The <i>quick</i> brown fox jumps over the <b>lazy</b> dog.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: dejavu;
|
||||
src: url(../fonts/DejaVuSansMono.woff);
|
||||
}
|
||||
.test {
|
||||
margin:10px;
|
||||
border:1px solid blue;
|
||||
font-family: dejavu;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.1em;
|
||||
word-break:break-all;
|
||||
text-orientation:upright;
|
||||
width:7em;
|
||||
height:7em;
|
||||
}
|
||||
|
||||
.h { writing-mode:horizontal-tb; letter-spacing: 0.4em }
|
||||
.v-lr { writing-mode:vertical-lr; }
|
||||
.v-rl { writing-mode:vertical-rl; }
|
||||
|
||||
b {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.bh1 {
|
||||
border-left: 3px solid cyan;
|
||||
}
|
||||
.bh2 {
|
||||
border-right: 3px solid magenta;
|
||||
}
|
||||
|
||||
.bv1 {
|
||||
border-top: 3px solid cyan;
|
||||
}
|
||||
.bv2 {
|
||||
border-bottom: 3px solid magenta;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="test h">ABCDE<b class="bh1">F</b><b>GHIJKLMNOPQRS</b><b class="bh2">T</b>UVWXYZ</div>
|
||||
|
||||
<div class="test v-lr">ABCDE<b class="bv1">F</b><b>GHIJKLMNOPQRS</b><b class="bv2">T</b>UVWXYZ</div>
|
||||
|
||||
<div class="test v-rl">ABCDE<b class="bv1">F</b><b>GHIJKLMNOPQRS</b><b class="bv2">T</b>UVWXYZ</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
51
layout/reftests/writing-mode/1083848-1-inline-border.html
Normal file
51
layout/reftests/writing-mode/1083848-1-inline-border.html
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: dejavu;
|
||||
src: url(../fonts/DejaVuSansMono.woff);
|
||||
}
|
||||
.test {
|
||||
margin:10px;
|
||||
border:1px solid blue;
|
||||
font-family: dejavu;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.1em;
|
||||
word-break:break-all;
|
||||
text-orientation:upright;
|
||||
width:7em;
|
||||
height:7em;
|
||||
}
|
||||
|
||||
.h { writing-mode:horizontal-tb; letter-spacing: 0.4em }
|
||||
.v-lr { writing-mode:vertical-lr; }
|
||||
.v-rl { writing-mode:vertical-rl; }
|
||||
|
||||
b {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.bh {
|
||||
border-left: 3px solid cyan;
|
||||
border-right: 3px solid magenta;
|
||||
}
|
||||
|
||||
.bv {
|
||||
border-top: 3px solid cyan;
|
||||
border-bottom: 3px solid magenta;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="test h">ABCDE<b class="bh">FGHIJKLMNOPQRST</b>UVWXYZ</div>
|
||||
|
||||
<div class="test v-lr">ABCDE<b class="bv">FGHIJKLMNOPQRST</b>UVWXYZ</div>
|
||||
|
||||
<div class="test v-rl">ABCDE<b class="bv">FGHIJKLMNOPQRST</b>UVWXYZ</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: mplus;
|
||||
src: url(../fonts/mplus/mplus-1p-regular.ttf);
|
||||
}
|
||||
@font-face {
|
||||
font-family: dejavu;
|
||||
src: url(../fonts/DejaVuSansMono.woff);
|
||||
}
|
||||
.test {
|
||||
margin:10px;
|
||||
border:1px solid blue;
|
||||
font-size: 16px;
|
||||
word-break:break-all;
|
||||
text-orientation:upright;
|
||||
width:7.9em;
|
||||
height:7.9em;
|
||||
}
|
||||
|
||||
.h { writing-mode:horizontal-tb; font-family: mplus; text-transform:full-width; }
|
||||
.v-lr { writing-mode:vertical-lr; font-family: dejavu; }
|
||||
.v-rl { writing-mode:vertical-rl; font-family: dejavu; }
|
||||
|
||||
.bgtest {
|
||||
background: url(blue-32x32.png) no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="test h">ABCDE<b class="bgtest">FG</b><b>HIJKLMNOPQRST</b>UVWXYZ</div>
|
||||
|
||||
<div class="test v-lr">ABCDE<b class="bgtest">FG</b><b>HIJKLMNOPQRST</b>UVWXYZ</div>
|
||||
|
||||
<div class="test v-rl">ABCDE<b class="bgtest">FG</b><b>HIJKLMNOPQRST</b>UVWXYZ</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: mplus;
|
||||
src: url(../fonts/mplus/mplus-1p-regular.ttf);
|
||||
}
|
||||
@font-face {
|
||||
font-family: dejavu;
|
||||
src: url(../fonts/DejaVuSansMono.woff);
|
||||
}
|
||||
.test {
|
||||
margin:10px;
|
||||
border:1px solid blue;
|
||||
font-size: 16px;
|
||||
word-break:break-all;
|
||||
text-orientation:upright;
|
||||
width:7.9em;
|
||||
height:7.9em;
|
||||
}
|
||||
|
||||
.h { writing-mode:horizontal-tb; font-family: mplus; text-transform:full-width; }
|
||||
.v-lr { writing-mode:vertical-lr; font-family: dejavu; }
|
||||
.v-rl { writing-mode:vertical-rl; font-family: dejavu; }
|
||||
|
||||
.bgtest {
|
||||
background: url(blue-32x32.png) no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="test h">ABCDE<b class="bgtest">FGHIJKLMNOPQRST</b>UVWXYZ</div>
|
||||
|
||||
<div class="test v-lr">ABCDE<b class="bgtest">FGHIJKLMNOPQRST</b>UVWXYZ</div>
|
||||
|
||||
<div class="test v-rl">ABCDE<b class="bgtest">FGHIJKLMNOPQRST</b>UVWXYZ</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: dejavu;
|
||||
src: url(../fonts/DejaVuSansMono.woff);
|
||||
}
|
||||
.test {
|
||||
margin: 10px;
|
||||
border: 1px solid gray;
|
||||
font: 16px/24px dejavu;
|
||||
word-break: break-all;
|
||||
width: 10em;
|
||||
height: 6.5em;
|
||||
/* we use text-orientation:upright to improve the chances that our
|
||||
glyphs will have an advance of exactly 1em, as the reference
|
||||
rendering relies on this */
|
||||
text-orientation: upright;
|
||||
color: rgba(0,0,255,0.2);
|
||||
}
|
||||
|
||||
.v-lr { writing-mode:vertical-lr; }
|
||||
.v-rl { writing-mode:vertical-rl; }
|
||||
|
||||
.c { background: cyan; }
|
||||
.b { background: blue; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="test v-lr">ABCD<span class="c">E</span><span class="b">F</span><span
|
||||
class="c">G</span><span class="b">H</span><span class="c">I</span><span
|
||||
class="b">J</span><span class="c">K</span><span class="b">L</span><span
|
||||
class="c">M</span><span class="b">N</span><span class="c">O</span><span
|
||||
class="b">P</span><span class="c">Q</span><span class="b">R</span><span
|
||||
class="c">S</span><span class="b">T</span><span class="c">U</span>VWXYZ</div>
|
||||
|
||||
<div class="test v-rl">ABCD<span class="c">E</span><span class="b">F</span><span
|
||||
class="c">G</span><span class="b">H</span><span class="c">I</span><span
|
||||
class="b">J</span><span class="c">K</span><span class="b">L</span><span
|
||||
class="c">M</span><span class="b">N</span><span class="c">O</span><span
|
||||
class="b">P</span><span class="c">Q</span><span class="b">R</span><span
|
||||
class="c">S</span><span class="b">T</span><span class="c">U</span>VWXYZ</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: dejavu;
|
||||
src: url(../fonts/DejaVuSansMono.woff);
|
||||
}
|
||||
.test {
|
||||
margin: 10px;
|
||||
border: 1px solid gray;
|
||||
font: 16px/24px dejavu;
|
||||
word-break: break-all;
|
||||
width: 10em;
|
||||
height: 6.5em;
|
||||
/* we use text-orientation:upright to improve the chances that our
|
||||
glyphs will have an advance of exactly 1em, as the reference
|
||||
rendering relies on this */
|
||||
text-orientation: upright;
|
||||
color: rgba(0,0,255,0.2);
|
||||
}
|
||||
|
||||
.v-lr { writing-mode:vertical-lr; }
|
||||
.v-rl { writing-mode:vertical-rl; }
|
||||
|
||||
.bgtest {
|
||||
background: url(4colors.png); /* A square divided into a 2x2 grid of 4 colors; */
|
||||
/* only the two left squares (blue & cyan) should show */
|
||||
background-size: 32px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="test v-lr">ABCD<span class="bgtest">EFGHIJKLMNOPQRSTU</span>VWXYZ</div>
|
||||
|
||||
<div class="test v-rl">ABCD<span class="bgtest">EFGHIJKLMNOPQRSTU</span>VWXYZ</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
27
layout/reftests/writing-mode/1083892-1-ref.html
Normal file
27
layout/reftests/writing-mode/1083892-1-ref.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Bug 1083892</title>
|
||||
<style>
|
||||
div {
|
||||
width:400px;
|
||||
height:400px;
|
||||
padding:10px;
|
||||
border:1px solid black;
|
||||
writing-mode:vertical-lr;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
This is the first line.<br>
|
||||
Line two.<br>
|
||||
Third and final line.
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
27
layout/reftests/writing-mode/1083892-1.html
Normal file
27
layout/reftests/writing-mode/1083892-1.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Bug 1083892</title>
|
||||
<style>
|
||||
div {
|
||||
width:400px;
|
||||
height:400px;
|
||||
padding:10px;
|
||||
border:1px solid black;
|
||||
writing-mode:vertical-lr;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<p>This is the first line.
|
||||
<p>Line two.
|
||||
<p>Third and final line.
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
28
layout/reftests/writing-mode/1086883-1-ref.html
Normal file
28
layout/reftests/writing-mode/1086883-1-ref.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Bug 1086883</title>
|
||||
<!-- writing mode of #inner div should not affect its position within #outer -->
|
||||
<style>
|
||||
#outer {
|
||||
width:400px;
|
||||
height:300px;
|
||||
padding:50px;
|
||||
border:1px solid black;
|
||||
}
|
||||
#inner {
|
||||
width:200px;
|
||||
height:100px;
|
||||
background:red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
29
layout/reftests/writing-mode/1086883-1a.html
Normal file
29
layout/reftests/writing-mode/1086883-1a.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Bug 1086883</title>
|
||||
<!-- writing mode of #inner div should not affect its position within #outer -->
|
||||
<style>
|
||||
#outer {
|
||||
width:400px;
|
||||
height:300px;
|
||||
padding:50px;
|
||||
border:1px solid black;
|
||||
}
|
||||
#inner {
|
||||
width:200px;
|
||||
height:100px;
|
||||
background:red;
|
||||
writing-mode:vertical-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
29
layout/reftests/writing-mode/1086883-1b.html
Normal file
29
layout/reftests/writing-mode/1086883-1b.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Bug 1086883</title>
|
||||
<!-- writing mode of #inner div should not affect its position within #outer -->
|
||||
<style>
|
||||
#outer {
|
||||
width:400px;
|
||||
height:300px;
|
||||
padding:50px;
|
||||
border:1px solid black;
|
||||
}
|
||||
#inner {
|
||||
width:200px;
|
||||
height:100px;
|
||||
background:red;
|
||||
writing-mode:vertical-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
24
layout/reftests/writing-mode/1088025-1-ref.html
Normal file
24
layout/reftests/writing-mode/1088025-1-ref.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Bug 1083892</title>
|
||||
<style>
|
||||
div {
|
||||
width:300px;
|
||||
height:300px;
|
||||
padding:10px;
|
||||
border:1px solid black;
|
||||
writing-mode:vertical-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
This is the <b><i>first</i> paragraph</b>. It's long enough to wrap onto multiple lines.<br>
|
||||
<b>Paragraph <i>two</i></b>.<br>
|
||||
<b><i>Third and final</i> paragraph</b> of this simple testcase. That's all, folks!
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
27
layout/reftests/writing-mode/1088025-1.html
Normal file
27
layout/reftests/writing-mode/1088025-1.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Bug 1083892</title>
|
||||
<style>
|
||||
div {
|
||||
width:300px;
|
||||
height:300px;
|
||||
padding:10px;
|
||||
border:1px solid black;
|
||||
writing-mode:vertical-rl;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<p>This is the <b><i>first</i> paragraph</b>. It's long enough to wrap onto multiple lines.
|
||||
<p><b>Paragraph <i>two</i></b>.
|
||||
<p><b><i>Third and final</i> paragraph</b> of this simple testcase. That's all, folks!
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
30
layout/reftests/writing-mode/1089388-1-ref.html
Normal file
30
layout/reftests/writing-mode/1089388-1-ref.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.v-lr { writing-mode:vertical-lr; }
|
||||
.v-rl { writing-mode:vertical-rl; }
|
||||
|
||||
div {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background: #ddd;
|
||||
margin: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="v-lr">
|
||||
First part of the block.
|
||||
<i id="test">New text inserted by script, to cause a reflow that slides the following lines.</i>
|
||||
We will insert enough new content that it wraps onto additional lines.
|
||||
<br><br>
|
||||
Here is some more text that follows a forced break.
|
||||
Observe what happens to it when text is added earlier.
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
layout/reftests/writing-mode/1089388-1.html
Normal file
39
layout/reftests/writing-mode/1089388-1.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.v-lr { writing-mode:vertical-lr; }
|
||||
.v-rl { writing-mode:vertical-rl; }
|
||||
|
||||
div {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background: #ddd;
|
||||
margin: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function doTest() {
|
||||
document.getElementById("test").textContent =
|
||||
"New text inserted by script, to cause a reflow that slides the following lines.";
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="doTest()">
|
||||
|
||||
<div class="v-lr">
|
||||
First part of the block.
|
||||
<i id="test"></i>
|
||||
We will insert enough new content that it wraps onto additional lines.
|
||||
<br><br>
|
||||
Here is some more text that follows a forced break.
|
||||
Observe what happens to it when text is added earlier.
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
30
layout/reftests/writing-mode/1089388-2-ref.html
Normal file
30
layout/reftests/writing-mode/1089388-2-ref.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.v-lr { writing-mode:vertical-lr; }
|
||||
.v-rl { writing-mode:vertical-rl; }
|
||||
|
||||
div {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background: #ddd;
|
||||
margin: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="v-rl">
|
||||
First part of the block.
|
||||
<i id="test">New text inserted by script, to cause a reflow that slides the following lines.</i>
|
||||
We will insert enough new content that it wraps onto additional lines.
|
||||
<br><br>
|
||||
Here is some more text that follows a forced break.
|
||||
Observe what happens to it when text is added earlier.
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
layout/reftests/writing-mode/1089388-2.html
Normal file
39
layout/reftests/writing-mode/1089388-2.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.v-lr { writing-mode:vertical-lr; }
|
||||
.v-rl { writing-mode:vertical-rl; }
|
||||
|
||||
div {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background: #ddd;
|
||||
margin: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function doTest() {
|
||||
document.getElementById("test").textContent =
|
||||
"New text inserted by script, to cause a reflow that slides the following lines.";
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="doTest()">
|
||||
|
||||
<div class="v-rl">
|
||||
First part of the block.
|
||||
<i id="test"></i>
|
||||
We will insert enough new content that it wraps onto additional lines.
|
||||
<br><br>
|
||||
Here is some more text that follows a forced break.
|
||||
Observe what happens to it when text is added earlier.
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
37
layout/reftests/writing-mode/1090159-1-ref.html
Normal file
37
layout/reftests/writing-mode/1090159-1-ref.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.h { writing-mode:horizontal-tb; }
|
||||
.v-lr { writing-mode:vertical-lr; text-orientation:sideways-right; }
|
||||
.v-rl { writing-mode:vertical-rl; text-orientation:sideways-right; }
|
||||
|
||||
div {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border: 1px solid red;
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
font: 16px monospace;
|
||||
line-height: 32px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="h">
|
||||
你好吗？ hello
|
||||
</div>
|
||||
|
||||
<div class="v-lr">
|
||||
你好吗？ hello
|
||||
</div>
|
||||
|
||||
<div class="v-rl">
|
||||
你好吗？ hello
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
37
layout/reftests/writing-mode/1090159-1.html
Normal file
37
layout/reftests/writing-mode/1090159-1.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.h { writing-mode:horizontal-tb; }
|
||||
.v-lr { writing-mode:vertical-lr; text-orientation:sideways-right; }
|
||||
.v-rl { writing-mode:vertical-rl; text-orientation:sideways-right; }
|
||||
|
||||
div {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border: 1px solid red;
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
font: 16px monospace;
|
||||
line-height: 32px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="h">
|
||||
你好吗？ <span>hello</span>
|
||||
</div>
|
||||
|
||||
<div class="v-lr">
|
||||
你好吗？ <span>hello</span>
|
||||
</div>
|
||||
|
||||
<div class="v-rl">
|
||||
你好吗？ <span>hello</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
41
layout/reftests/writing-mode/1090168-1-notref.html
Normal file
41
layout/reftests/writing-mode/1090168-1-notref.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
var testFont = '40px sans-serif';
|
||||
|
||||
function test(x, y, text, style, rotation) {
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.width = 400;
|
||||
canvas.height = 400;
|
||||
canvas.style.cssText = 'position:absolute;' + style;
|
||||
document.getElementsByTagName('body')[0].appendChild(canvas);
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x - 20, y); ctx.lineTo(x + 20, y);
|
||||
ctx.moveTo(x, y - 20); ctx.lineTo(x, y + 20);
|
||||
ctx.stroke();
|
||||
ctx.globalAlpha = 1.0;
|
||||
ctx.font = testFont;
|
||||
if (rotation != 0) {
|
||||
ctx.translate(x,y);
|
||||
ctx.rotate(rotation);
|
||||
ctx.translate(-x,-y);
|
||||
}
|
||||
ctx.fillText(text, x, y);
|
||||
}
|
||||
|
||||
// Testcase: vertical text with orientation:sideways-right
|
||||
// test(100, 50, 'Hello', 'writing-mode:vertical-lr;text-orientation:sideways-right', 0);
|
||||
|
||||
// Reference: horizontal text with 90° rotation
|
||||
// test(100, 50, 'Hello', 'writing-mode:horizontal-tb', Math.PI/2);
|
||||
|
||||
// Non-reference: vertical text with orientation:mixed
|
||||
test(100, 50, 'Hello', 'writing-mode:vertical-lr;text-orientation:mixed', 0);
|
||||
|
||||
</script>
|
||||
41
layout/reftests/writing-mode/1090168-1-ref.html
Normal file
41
layout/reftests/writing-mode/1090168-1-ref.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
var testFont = '40px sans-serif';
|
||||
|
||||
function test(x, y, text, style, rotation) {
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.width = 400;
|
||||
canvas.height = 400;
|
||||
canvas.style.cssText = 'position:absolute;' + style;
|
||||
document.getElementsByTagName('body')[0].appendChild(canvas);
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x - 20, y); ctx.lineTo(x + 20, y);
|
||||
ctx.moveTo(x, y - 20); ctx.lineTo(x, y + 20);
|
||||
ctx.stroke();
|
||||
ctx.globalAlpha = 1.0;
|
||||
ctx.font = testFont;
|
||||
if (rotation != 0) {
|
||||
ctx.translate(x,y);
|
||||
ctx.rotate(rotation);
|
||||
ctx.translate(-x,-y);
|
||||
}
|
||||
ctx.fillText(text, x, y);
|
||||
}
|
||||
|
||||
// Testcase: vertical text with orientation:sideways-right
|
||||
// test(100, 50, 'Hello', 'writing-mode:vertical-lr;text-orientation:sideways-right', 0);
|
||||
|
||||
// Reference: horizontal text with 90° rotation
|
||||
test(100, 50, 'Hello', 'writing-mode:horizontal-tb', Math.PI/2);
|
||||
|
||||
// Non-reference: vertical text with orientation:mixed
|
||||
// test(100, 50, 'Hello', 'writing-mode:vertical-lr;text-orientation:mixed', 0);
|
||||
|
||||
</script>
|
||||
41
layout/reftests/writing-mode/1090168-1.html
Normal file
41
layout/reftests/writing-mode/1090168-1.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
var testFont = '40px sans-serif';
|
||||
|
||||
function test(x, y, text, style, rotation) {
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.width = 400;
|
||||
canvas.height = 400;
|
||||
canvas.style.cssText = 'position:absolute;' + style;
|
||||
document.getElementsByTagName('body')[0].appendChild(canvas);
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x - 20, y); ctx.lineTo(x + 20, y);
|
||||
ctx.moveTo(x, y - 20); ctx.lineTo(x, y + 20);
|
||||
ctx.stroke();
|
||||
ctx.globalAlpha = 1.0;
|
||||
ctx.font = testFont;
|
||||
if (rotation != 0) {
|
||||
ctx.translate(x,y);
|
||||
ctx.rotate(rotation);
|
||||
ctx.translate(-x,-y);
|
||||
}
|
||||
ctx.fillText(text, x, y);
|
||||
}
|
||||
|
||||
// Testcase: vertical text with orientation:sideways-right
|
||||
test(100, 50, 'Hello', 'writing-mode:vertical-lr;text-orientation:sideways-right', 0);
|
||||
|
||||
// Reference: horizontal text with 90° rotation
|
||||
// test(100, 50, 'Hello', 'writing-mode:horizontal-tb', Math.PI/2);
|
||||
|
||||
// Non-reference: vertical text with orientation:mixed
|
||||
// test(100, 50, 'Hello', 'writing-mode:vertical-lr;text-orientation:mixed', 0);
|
||||
|
||||
</script>
|
||||
41
layout/reftests/writing-mode/1090168-2-ref.html
Normal file
41
layout/reftests/writing-mode/1090168-2-ref.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
var testFont = '40px sans-serif';
|
||||
|
||||
function test(x, y, text, style, rotation, baseline) {
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.width = 400;
|
||||
canvas.height = 400;
|
||||
canvas.style.cssText = 'position:absolute;' + style;
|
||||
document.getElementsByTagName('body')[0].appendChild(canvas);
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x - 20, y); ctx.lineTo(x + 20, y);
|
||||
ctx.moveTo(x, y - 20); ctx.lineTo(x, y + 20);
|
||||
ctx.stroke();
|
||||
ctx.globalAlpha = 1.0;
|
||||
ctx.font = testFont;
|
||||
if (rotation != 0) {
|
||||
ctx.translate(x,y);
|
||||
ctx.rotate(rotation);
|
||||
ctx.translate(-x,-y);
|
||||
}
|
||||
if (baseline != '') {
|
||||
ctx.textBaseline = baseline;
|
||||
}
|
||||
ctx.fillText(text, x, y);
|
||||
}
|
||||
|
||||
// Testcase: vertical text with orientation:mixed
|
||||
// test(100, 50, 'Hello', 'writing-mode:vertical-lr;text-orientation:mixed', 0, '');
|
||||
|
||||
// Reference: horizontal text with 90° rotation and textBaseline=middle
|
||||
test(100, 50, 'Hello', 'writing-mode:horizontal-tb', Math.PI/2, 'middle');
|
||||
|
||||
</script>
|
||||
41
layout/reftests/writing-mode/1090168-2.html
Normal file
41
layout/reftests/writing-mode/1090168-2.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
var testFont = '40px sans-serif';
|
||||
|
||||
function test(x, y, text, style, rotation, baseline) {
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.width = 400;
|
||||
canvas.height = 400;
|
||||
canvas.style.cssText = 'position:absolute;' + style;
|
||||
document.getElementsByTagName('body')[0].appendChild(canvas);
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x - 20, y); ctx.lineTo(x + 20, y);
|
||||
ctx.moveTo(x, y - 20); ctx.lineTo(x, y + 20);
|
||||
ctx.stroke();
|
||||
ctx.globalAlpha = 1.0;
|
||||
ctx.font = testFont;
|
||||
if (rotation != 0) {
|
||||
ctx.translate(x,y);
|
||||
ctx.rotate(rotation);
|
||||
ctx.translate(-x,-y);
|
||||
}
|
||||
if (baseline != '') {
|
||||
ctx.textBaseline = baseline;
|
||||
}
|
||||
ctx.fillText(text, x, y);
|
||||
}
|
||||
|
||||
// Testcase: vertical text with orientation:mixed
|
||||
test(100, 50, 'Hello', 'writing-mode:vertical-lr;text-orientation:mixed', 0, '');
|
||||
|
||||
// Reference: horizontal text with 90° rotation and textBaseline=middle
|
||||
// test(100, 50, 'Hello', 'writing-mode:horizontal-tb', Math.PI/2, 'middle');
|
||||
|
||||
</script>
|
||||
47
layout/reftests/writing-mode/1090168-3-ref.html
Normal file
47
layout/reftests/writing-mode/1090168-3-ref.html
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
var testFont = '40px sans-serif';
|
||||
|
||||
function test(x, y, text, style, rotation, baseline) {
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.width = 400;
|
||||
canvas.height = 400;
|
||||
canvas.style.cssText = 'position:absolute;' + style;
|
||||
document.getElementsByTagName('body')[0].appendChild(canvas);
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x - 20, y); ctx.lineTo(x + 20, y);
|
||||
ctx.moveTo(x, y - 20); ctx.lineTo(x, y + 20);
|
||||
ctx.stroke();
|
||||
ctx.globalAlpha = 1.0;
|
||||
ctx.font = testFont;
|
||||
if (rotation != 0) {
|
||||
ctx.translate(x,y);
|
||||
ctx.rotate(rotation);
|
||||
ctx.translate(-x,-y);
|
||||
}
|
||||
if (baseline != '') {
|
||||
ctx.textBaseline = baseline;
|
||||
}
|
||||
ctx.fillText(text, x, y);
|
||||
}
|
||||
|
||||
// Testcase: vertical text with various textBaselines
|
||||
// test(100, 50, 'Top', 'writing-mode:vertical-lr', 0, 'top');
|
||||
// test(150, 50, 'Middle', 'writing-mode:vertical-lr', 0, 'middle');
|
||||
// test(200, 50, 'Alphabetic', 'writing-mode:vertical-lr', 0, 'alphabetic');
|
||||
// test(250, 50, 'Bottom', 'writing-mode:vertical-lr', 0, 'bottom');
|
||||
|
||||
// Reference: horizontal text with 90° rotation and the same baselines
|
||||
test(100, 50, 'Top', 'writing-mode:horizontal-tb', Math.PI/2, 'top');
|
||||
test(150, 50, 'Middle', 'writing-mode:horizontal-tb', Math.PI/2, 'middle');
|
||||
test(200, 50, 'Alphabetic', 'writing-mode:horizontal-tb', Math.PI/2, 'alphabetic');
|
||||
test(250, 50, 'Bottom', 'writing-mode:horizontal-tb', Math.PI/2, 'bottom');
|
||||
|
||||
</script>
|
||||
47
layout/reftests/writing-mode/1090168-3.html
Normal file
47
layout/reftests/writing-mode/1090168-3.html
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
var testFont = '40px sans-serif';
|
||||
|
||||
function test(x, y, text, style, rotation, baseline) {
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.width = 400;
|
||||
canvas.height = 400;
|
||||
canvas.style.cssText = 'position:absolute;' + style;
|
||||
document.getElementsByTagName('body')[0].appendChild(canvas);
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x - 20, y); ctx.lineTo(x + 20, y);
|
||||
ctx.moveTo(x, y - 20); ctx.lineTo(x, y + 20);
|
||||
ctx.stroke();
|
||||
ctx.globalAlpha = 1.0;
|
||||
ctx.font = testFont;
|
||||
if (rotation != 0) {
|
||||
ctx.translate(x,y);
|
||||
ctx.rotate(rotation);
|
||||
ctx.translate(-x,-y);
|
||||
}
|
||||
if (baseline != '') {
|
||||
ctx.textBaseline = baseline;
|
||||
}
|
||||
ctx.fillText(text, x, y);
|
||||
}
|
||||
|
||||
// Testcase: vertical text with various textBaselines
|
||||
test(100, 50, 'Top', 'writing-mode:vertical-lr', 0, 'top');
|
||||
test(150, 50, 'Middle', 'writing-mode:vertical-lr', 0, 'middle');
|
||||
test(200, 50, 'Alphabetic', 'writing-mode:vertical-lr', 0, 'alphabetic');
|
||||
test(250, 50, 'Bottom', 'writing-mode:vertical-lr', 0, 'bottom');
|
||||
|
||||
// Reference: horizontal text with 90° rotation and the same baselines
|
||||
// test(100, 50, 'Top', 'writing-mode:horizontal-tb', Math.PI/2, 'top');
|
||||
// test(150, 50, 'Middle', 'writing-mode:horizontal-tb', Math.PI/2, 'middle');
|
||||
// test(200, 50, 'Alphabetic', 'writing-mode:horizontal-tb', Math.PI/2, 'alphabetic');
|
||||
// test(250, 50, 'Bottom', 'writing-mode:horizontal-tb', Math.PI/2, 'bottom');
|
||||
|
||||
</script>
|
||||
35
layout/reftests/writing-mode/1091058-1-ref.html
Normal file
35
layout/reftests/writing-mode/1091058-1-ref.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.h { writing-mode:horizontal-tb; }
|
||||
.v-lr { writing-mode:vertical-lr; }
|
||||
.v-rl { writing-mode:vertical-rl; }
|
||||
|
||||
div {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border: 1px solid red;
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="h">
|
||||
<u>方ABC方方</u><i><u>abc</u></i><u>方方方</u><i><u>xyz</u></i><u>方</u>
|
||||
</div>
|
||||
|
||||
<div class="v-lr">
|
||||
<u>方ABC方方</u><i><u>abc</u></i><u>方方方</u><i><u>xyz</u></i><u>方</u>
|
||||
</div>
|
||||
|
||||
<div class="v-rl">
|
||||
<u>方ABC方方</u><i><u>abc</u></i><u>方方方</u><i><u>xyz</u></i><u>方</u>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
35
layout/reftests/writing-mode/1091058-1.html
Normal file
35
layout/reftests/writing-mode/1091058-1.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.h { writing-mode:horizontal-tb; }
|
||||
.v-lr { writing-mode:vertical-lr; }
|
||||
.v-rl { writing-mode:vertical-rl; }
|
||||
|
||||
div {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border: 1px solid red;
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="h">
|
||||
<u>方ABC方方<i>abc</i>方方方<i>xyz</i>方</u>
|
||||
</div>
|
||||
|
||||
<div class="v-lr">
|
||||
<u>方ABC方方<i>abc</i>方方方<i>xyz</i>方</u>
|
||||
</div>
|
||||
|
||||
<div class="v-rl">
|
||||
<u>方ABC方方<i>abc</i>方方方<i>xyz</i>方</u>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
28
layout/reftests/writing-mode/1094434-1-ref.html
Normal file
28
layout/reftests/writing-mode/1094434-1-ref.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.test {
|
||||
margin: 20px;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<textarea class="test" dir="ltr"> </textarea>
|
||||
|
||||
<textarea class="test" dir="ltr"> </textarea>
|
||||
|
||||
<br>
|
||||
|
||||
<textarea class="test" dir="rtl"> </textarea>
|
||||
|
||||
<textarea class="test" dir="rtl"> </textarea>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
34
layout/reftests/writing-mode/1094434-1.html
Normal file
34
layout/reftests/writing-mode/1094434-1.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.test {
|
||||
margin: 20px;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
padding: 0;
|
||||
}
|
||||
.vlr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vrl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<textarea class="test vlr" dir="ltr"> </textarea>
|
||||
|
||||
<textarea class="test vlr" dir="rtl"> </textarea>
|
||||
|
||||
<br>
|
||||
|
||||
<textarea class="test vrl" dir="ltr"> </textarea>
|
||||
|
||||
<textarea class="test vrl" dir="rtl"> </textarea>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
29
layout/reftests/writing-mode/1094434-2-ref.html
Normal file
29
layout/reftests/writing-mode/1094434-2-ref.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.test {
|
||||
margin: 20px;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
overflow: scroll;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<textarea class="test" dir="ltr"> </textarea>
|
||||
|
||||
<textarea class="test" dir="ltr"> </textarea>
|
||||
|
||||
<br>
|
||||
|
||||
<textarea class="test" dir="rtl"> </textarea>
|
||||
|
||||
<textarea class="test" dir="rtl"> </textarea>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
35
layout/reftests/writing-mode/1094434-2.html
Normal file
35
layout/reftests/writing-mode/1094434-2.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.test {
|
||||
margin: 20px;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
overflow: scroll;
|
||||
padding: 0;
|
||||
}
|
||||
.vlr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.vrl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<textarea class="test vlr" dir="ltr"> </textarea>
|
||||
|
||||
<textarea class="test vlr" dir="rtl"> </textarea>
|
||||
|
||||
<br>
|
||||
|
||||
<textarea class="test vrl" dir="ltr"> </textarea>
|
||||
|
||||
<textarea class="test vrl" dir="rtl"> </textarea>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
43
layout/reftests/writing-mode/1094914-1-ref.html
Normal file
43
layout/reftests/writing-mode/1094914-1-ref.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
#outer {
|
||||
margin: 0px;
|
||||
background: #ddd;
|
||||
font-size: 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#test1 {
|
||||
writing-mode: horizontal-tb;
|
||||
|
||||
height: 50px;
|
||||
width: 100px;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
margin-left: 50px;
|
||||
margin-right: 0px;
|
||||
|
||||
border-top: 10px solid blue;
|
||||
border-left: 20px solid red;
|
||||
border-right: 30px solid green;
|
||||
border-bottom: 40px solid gray;
|
||||
|
||||
display: inline-block;
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="outer">
|
||||
<div id="test1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
43
layout/reftests/writing-mode/1094914-1a.html
Normal file
43
layout/reftests/writing-mode/1094914-1a.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
#outer {
|
||||
margin: 0px;
|
||||
background: #ddd;
|
||||
font-size: 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#test1 {
|
||||
writing-mode: vertical-lr;
|
||||
|
||||
height: 50px;
|
||||
width: 100px;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
margin-left: 50px;
|
||||
margin-right: 0px;
|
||||
|
||||
border-top: 10px solid blue;
|
||||
border-left: 20px solid red;
|
||||
border-right: 30px solid green;
|
||||
border-bottom: 40px solid gray;
|
||||
|
||||
display: inline-block;
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="outer">
|
||||
<div id="test1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
43
layout/reftests/writing-mode/1094914-1b.html
Normal file
43
layout/reftests/writing-mode/1094914-1b.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
#outer {
|
||||
margin: 0px;
|
||||
background: #ddd;
|
||||
font-size: 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#test1 {
|
||||
writing-mode: vertical-rl;
|
||||
|
||||
height: 50px;
|
||||
width: 100px;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
margin-left: 50px;
|
||||
margin-right: 0px;
|
||||
|
||||
border-top: 10px solid blue;
|
||||
border-left: 20px solid red;
|
||||
border-right: 30px solid green;
|
||||
border-bottom: 40px solid gray;
|
||||
|
||||
display: inline-block;
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="outer">
|
||||
<div id="test1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
43
layout/reftests/writing-mode/1096224-1-ref.html
Normal file
43
layout/reftests/writing-mode/1096224-1-ref.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.outer {
|
||||
padding: 2px;
|
||||
border: 1px solid black;
|
||||
background: #ddd;
|
||||
width: 200px;
|
||||
}
|
||||
.inner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: yellow;
|
||||
}
|
||||
.foo {
|
||||
margin-left: 100px;
|
||||
margin-right: 50px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.bar {
|
||||
margin-left: 50px;
|
||||
margin-right: 100px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="outer">
|
||||
<div class="inner foo">
|
||||
</div>
|
||||
<hr>
|
||||
<div class="inner bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
45
layout/reftests/writing-mode/1096224-1a.html
Normal file
45
layout/reftests/writing-mode/1096224-1a.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.outer {
|
||||
padding: 2px;
|
||||
border: 1px solid black;
|
||||
background: #ddd;
|
||||
width: 200px;
|
||||
}
|
||||
.inner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: yellow;
|
||||
}
|
||||
.foo {
|
||||
writing-mode: vertical-lr;
|
||||
margin-left: 100px;
|
||||
margin-right: 50px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.bar {
|
||||
writing-mode: vertical-lr;
|
||||
margin-left: 50px;
|
||||
margin-right: 100px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="outer">
|
||||
<div class="inner foo">
|
||||
</div>
|
||||
<hr>
|
||||
<div class="inner bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
45
layout/reftests/writing-mode/1096224-1b.html
Normal file
45
layout/reftests/writing-mode/1096224-1b.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.outer {
|
||||
padding: 2px;
|
||||
border: 1px solid black;
|
||||
background: #ddd;
|
||||
width: 200px;
|
||||
}
|
||||
.inner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: yellow;
|
||||
}
|
||||
.foo {
|
||||
writing-mode: vertical-rl;
|
||||
margin-left: 100px;
|
||||
margin-right: 50px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.bar {
|
||||
writing-mode: vertical-rl;
|
||||
margin-left: 50px;
|
||||
margin-right: 100px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="outer">
|
||||
<div class="inner foo">
|
||||
</div>
|
||||
<hr>
|
||||
<div class="inner bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
43
layout/reftests/writing-mode/1102175-1-ref.html
Normal file
43
layout/reftests/writing-mode/1102175-1-ref.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body > div {
|
||||
width:100%;
|
||||
height:100%;
|
||||
display:inline-block;
|
||||
}
|
||||
body > div > div {
|
||||
width:400px;
|
||||
height:400px;
|
||||
border:1px solid red;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.v-rl {
|
||||
-ms-writing-mode: tb-rl; /* old syntax. IE */
|
||||
-ms-writing-mode: vertical-rl; /* new syntax */
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
-moz-writing-mode: vertical-rl;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
#test1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper" class="v-rl">
|
||||
<div id="test1">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||||
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
layout/reftests/writing-mode/1102175-1a.html
Normal file
39
layout/reftests/writing-mode/1102175-1a.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body > div {
|
||||
width:402px;
|
||||
height:402px;
|
||||
display:inline-block;
|
||||
}
|
||||
body > div > div {
|
||||
width:400px;
|
||||
height:400px;
|
||||
border:1px solid red;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.v-rl {
|
||||
-ms-writing-mode: tb-rl; /* old syntax. IE */
|
||||
-ms-writing-mode: vertical-rl; /* new syntax */
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
-moz-writing-mode: vertical-rl;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
#test1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body class="v-rl">
|
||||
<div>
|
||||
<div id="test1">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
layout/reftests/writing-mode/1102175-1b.html
Normal file
39
layout/reftests/writing-mode/1102175-1b.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<html class="v-rl">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body > div {
|
||||
width:402px;
|
||||
height:402px;
|
||||
display:inline-block;
|
||||
}
|
||||
body > div > div {
|
||||
width:400px;
|
||||
height:400px;
|
||||
border:1px solid red;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.v-rl {
|
||||
-ms-writing-mode: tb-rl; /* old syntax. IE */
|
||||
-ms-writing-mode: vertical-rl; /* new syntax */
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
-moz-writing-mode: vertical-rl;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
#test1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<div id="test1">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
28
layout/reftests/writing-mode/1103613-1-ref.html
Normal file
28
layout/reftests/writing-mode/1103613-1-ref.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
#outer {
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
margin: 10px;
|
||||
border: 50px solid #ddd;
|
||||
}
|
||||
#test {
|
||||
writing-mode: vertical-lr;
|
||||
margin: 10px;
|
||||
height: 180px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="test">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
27
layout/reftests/writing-mode/1103613-1.html
Normal file
27
layout/reftests/writing-mode/1103613-1.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
#outer {
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
margin: 10px;
|
||||
border: 50px solid #ddd;
|
||||
}
|
||||
#test {
|
||||
writing-mode: vertical-lr;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="test">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.wrapper {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 20px;
|
||||
}
|
||||
.outer {
|
||||
height: 250px;
|
||||
width: 200px;
|
||||
border: 10px solid #ddd;
|
||||
}
|
||||
.inner {
|
||||
font: 12px monospace;
|
||||
background: yellow;
|
||||
overflow: hidden;
|
||||
}
|
||||
.test1 {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
}
|
||||
.test2 {
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
.lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="outer">
|
||||
<div class="inner test1 lr">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="outer">
|
||||
<div class="inner test2 lr">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.wrapper {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 20px;
|
||||
}
|
||||
.outer {
|
||||
height: 250px;
|
||||
width: 200px;
|
||||
border: 10px solid #ddd;
|
||||
}
|
||||
.inner {
|
||||
font: 12px monospace;
|
||||
background: yellow;
|
||||
overflow: hidden;
|
||||
}
|
||||
.test1 {
|
||||
min-width: 180px;
|
||||
max-width: 180px;
|
||||
min-height: 150px;
|
||||
max-height: 150px;
|
||||
}
|
||||
.test2 {
|
||||
min-width: 150px;
|
||||
max-width: 150px;
|
||||
min-height: 200px;
|
||||
max-height: 200px;
|
||||
}
|
||||
.lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="outer">
|
||||
<div class="inner test1 lr">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="outer">
|
||||
<div class="inner test2 lr">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.wrapper {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 20px;
|
||||
}
|
||||
.outer {
|
||||
height: 250px;
|
||||
width: 200px;
|
||||
border: 10px solid #ddd;
|
||||
}
|
||||
.inner {
|
||||
overflow: hidden;
|
||||
background: yellow;
|
||||
}
|
||||
.test1 {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
}
|
||||
.test2 {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="outer">
|
||||
<img class="inner test1" src="foo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="outer">
|
||||
<img class="inner test1" src="foo" dir="rtl">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="outer">
|
||||
<img class="inner test2" src="foo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="outer">
|
||||
<img class="inner test2" src="foo" dir="rtl">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.wrapper {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 20px;
|
||||
}
|
||||
.outer {
|
||||
height: 250px;
|
||||
width: 200px;
|
||||
border: 10px solid #ddd;
|
||||
}
|
||||
.inner {
|
||||
overflow: hidden;
|
||||
background: yellow;
|
||||
}
|
||||
.test1 {
|
||||
min-width: 100px;
|
||||
max-width: 100px;
|
||||
min-height: 150px;
|
||||
max-height: 150px;
|
||||
}
|
||||
.test2 {
|
||||
min-width: 150px;
|
||||
max-width: 150px;
|
||||
min-height: 100px;
|
||||
max-height: 100px;
|
||||
}
|
||||
.lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="outer">
|
||||
<img class="inner test1 lr" src="foo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="outer">
|
||||
<img class="inner test1 rl" src="foo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="outer">
|
||||
<img class="inner test2 lr" src="foo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="outer">
|
||||
<img class="inner test2 rl" src="foo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
button {
|
||||
position: absolute;
|
||||
border: 1px solid blue;
|
||||
margin: 1px;
|
||||
padding: 0;
|
||||
}
|
||||
div {
|
||||
position: absolute;
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button style="top:0px"><img src="" width="20" height="80"></button>
|
||||
|
||||
<button style="top:100px"><img src="" width="80" height="20"></button>
|
||||
|
||||
<!-- solid-color <div>s that should completely cover the buttons above,
|
||||
provided they size themselves properly for their <img> content -->
|
||||
<div style="top:0px; width:40px; height:90px;"></div>
|
||||
|
||||
<div style="top:100px; width:100px; height:40px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
button {
|
||||
position: absolute;
|
||||
border: 1px solid blue;
|
||||
margin: 1px;
|
||||
padding: 0;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
div {
|
||||
position: absolute;
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button style="top:0px"><img src="" width="20" height="80"></button>
|
||||
|
||||
<button style="top:100px"><img src="" width="80" height="20"></button>
|
||||
|
||||
<!-- solid-color <div>s that should completely cover the buttons above,
|
||||
provided they size themselves properly for their <img> content -->
|
||||
<div style="top:0px; width:40px; height:90px;"></div>
|
||||
|
||||
<div style="top:100px; width:100px; height:40px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.outer {
|
||||
width:600px;
|
||||
height:200px;
|
||||
border:1px solid gray;
|
||||
background:#eee;
|
||||
font-size:0px;
|
||||
}
|
||||
.test1 {
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
top:100px;
|
||||
left:300px;
|
||||
border:10px solid green;
|
||||
width:80px;
|
||||
height:30px;
|
||||
}
|
||||
.test2 {
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
top:0px;
|
||||
left:250px;
|
||||
border:10px solid blue;
|
||||
width:80px;
|
||||
height:30px;
|
||||
}
|
||||
.test3 {
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
top:20px;
|
||||
left:230px;
|
||||
border:10px solid yellow;
|
||||
width:80px;
|
||||
height:30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="outer">
|
||||
|
||||
<div class="test3">
|
||||
</div>
|
||||
|
||||
<div class="test2">
|
||||
</div>
|
||||
|
||||
<div class="test1">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.outer {
|
||||
writing-mode:vertical-rl;
|
||||
-webkit-writing-mode:vertical-rl;
|
||||
width:600px;
|
||||
height:200px;
|
||||
border:1px solid gray;
|
||||
background:#eee;
|
||||
}
|
||||
.test1 {
|
||||
border:10px solid green;
|
||||
margin-top:50%; /* should be 50% of 200px, i.e. 100px */
|
||||
width:80px;
|
||||
height:30px;
|
||||
}
|
||||
.test2 {
|
||||
border:10px solid blue;
|
||||
margin-right:25%; /* should be 25% of 200px, i.e. 50px */
|
||||
margin-left:10%; /* should be 10% of 200px, i.e. 20px */
|
||||
width:80px;
|
||||
height:30px;
|
||||
}
|
||||
.test3 {
|
||||
border:10px solid yellow;
|
||||
margin-top:10%; /* should be 10% of 200px, i.e. 20px */
|
||||
width:80px;
|
||||
height:30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="outer">
|
||||
|
||||
<div class="test1">
|
||||
</div>
|
||||
|
||||
<div class="test2">
|
||||
</div>
|
||||
|
||||
<div class="test3">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
107
layout/reftests/writing-mode/1111944-1-list-marker-ref.html
Normal file
107
layout/reftests/writing-mode/1111944-1-list-marker-ref.html
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.outer {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 380px;
|
||||
height: 180px;
|
||||
border: 1px solid blue;
|
||||
margin: 5px;
|
||||
}
|
||||
.ol {
|
||||
margin: 0 12px;
|
||||
}
|
||||
.m1 {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
.m2 {
|
||||
display: inline-block;
|
||||
height: 5em;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
Test for list item markers in vertical mode:
|
||||
<br>
|
||||
<div class="outer" style="writing-mode:vertical-lr;text-orientation:sideways-right">
|
||||
Mode vertical-lr, style lower-roman:
|
||||
<div class="ol">
|
||||
<span class="m1">i. </span>one<br>
|
||||
<span class="m1">ii. </span>two<br>
|
||||
<span class="m1">iii. </span>three<br>
|
||||
<span class="m1">iv. </span>four<br>
|
||||
<span class="m1">v. </span>five<br>
|
||||
<span class="m1">vi. </span>six<br>
|
||||
<span class="m1">vii. </span>seven<br>
|
||||
<span class="m1">viii. </span>eight<br>
|
||||
<span class="m1">ix. </span>nine<br>
|
||||
<span class="m1">x. </span>ten<br>
|
||||
<span class="m1">xi. </span>eleven<br>
|
||||
<span class="m1">xii. </span>twelve<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer" style="writing-mode:vertical-rl;text-orientation:sideways-right">
|
||||
Mode vertical-rl, style hebrew:
|
||||
<div class="ol">
|
||||
<span class="m1">א. </span>one<br>
|
||||
<span class="m1">ב. </span>two<br>
|
||||
<span class="m1">ג. </span>three<br>
|
||||
<span class="m1">ד. </span>four<br>
|
||||
<span class="m1">ה. </span>five<br>
|
||||
<span class="m1">ו. </span>six<br>
|
||||
<span class="m1">ז. </span>seven<br>
|
||||
<span class="m1">ח. </span>eight<br>
|
||||
<span class="m1">ט. </span>nine<br>
|
||||
<span class="m1">י. </span>ten<br>
|
||||
<span class="m1">יא. </span>eleven<br>
|
||||
<span class="m1">יב. </span>twelve<br>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="outer" style="writing-mode:vertical-lr">
|
||||
Mode vertical-lr, style trad-chinese-formal:
|
||||
<div class="ol">
|
||||
<span class="m2">壹、</span>one<br>
|
||||
<span class="m2">貳、</span>two<br>
|
||||
<span class="m2">參、</span>three<br>
|
||||
<span class="m2">肆、</span>four<br>
|
||||
<span class="m2">伍、</span>five<br>
|
||||
<span class="m2">陸、</span>six<br>
|
||||
<span class="m2">柒、</span>seven<br>
|
||||
<span class="m2">捌、</span>eight<br>
|
||||
<span class="m2">玖、</span>nine<br>
|
||||
<span class="m2">壹拾、</span>ten<br>
|
||||
<span class="m2">壹拾壹、</span>eleven<br>
|
||||
<span class="m2">壹拾貳、</span>twelve<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer" style="writing-mode:vertical-rl">
|
||||
Mode vertical-rl, style japanese-informal:
|
||||
<div class="ol">
|
||||
<span class="m2">一、</span>one<br>
|
||||
<span class="m2">二、</span>two<br>
|
||||
<span class="m2">三、</span>three<br>
|
||||
<span class="m2">四、</span>four<br>
|
||||
<span class="m2">五、</span>five<br>
|
||||
<span class="m2">六、</span>six<br>
|
||||
<span class="m2">七、</span>seven<br>
|
||||
<span class="m2">八、</span>eight<br>
|
||||
<span class="m2">九、</span>nine<br>
|
||||
<span class="m2">十、</span>ten<br>
|
||||
<span class="m2">十一、</span>eleven<br>
|
||||
<span class="m2">十二、</span>twelve<br>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
55
layout/reftests/writing-mode/1111944-1-list-marker.html
Normal file
55
layout/reftests/writing-mode/1111944-1-list-marker.html
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 380px;
|
||||
height: 180px;
|
||||
border: 1px solid blue;
|
||||
margin: 5px;
|
||||
}
|
||||
ol {
|
||||
margin: 0 12px;
|
||||
padding: 40px 0 0 0;
|
||||
}
|
||||
li { margin:0; padding:0 }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
Test for list item markers in vertical mode:
|
||||
<br>
|
||||
<div style="writing-mode:vertical-lr;text-orientation:sideways-right">
|
||||
Mode vertical-lr, style lower-roman:
|
||||
<ol style="list-style-type:lower-roman">
|
||||
<li>one<li>two<li>three<li>four<li>five<li>six<li>seven<li>eight<li>nine<li>ten<li>eleven<li>twelve
|
||||
</ol>
|
||||
</div>
|
||||
<div style="writing-mode:vertical-rl;text-orientation:sideways-right">
|
||||
Mode vertical-rl, style hebrew:
|
||||
<ol style="list-style-type:hebrew">
|
||||
<li>one<li>two<li>three<li>four<li>five<li>six<li>seven<li>eight<li>nine<li>ten<li>eleven<li>twelve
|
||||
</ol>
|
||||
</div>
|
||||
<br>
|
||||
<div style="writing-mode:vertical-lr">
|
||||
Mode vertical-lr, style trad-chinese-formal:
|
||||
<ol style="list-style-type:trad-chinese-formal;padding-top:5em">
|
||||
<li>one<li>two<li>three<li>four<li>five<li>six<li>seven<li>eight<li>nine<li>ten<li>eleven<li>twelve
|
||||
</ol>
|
||||
</div>
|
||||
<div style="writing-mode:vertical-rl">
|
||||
Mode vertical-rl, style japanese-informal:
|
||||
<ol style="list-style-type:japanese-informal;padding-top:5em">
|
||||
<li>one<li>two<li>three<li>four<li>five<li>six<li>seven<li>eight<li>nine<li>ten<li>eleven<li>twelve
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: ahem;
|
||||
src: url(../fonts/Ahem.ttf);
|
||||
}
|
||||
div {
|
||||
height: 100px;
|
||||
font: 16px/24px ahem;
|
||||
}
|
||||
#test1 {
|
||||
writing-mode: vertical-lr;
|
||||
text-orientation: upright;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test1">
|
||||
<span>ab<br>cd</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
28
layout/reftests/writing-mode/1115916-1-vertical-metrics.html
Normal file
28
layout/reftests/writing-mode/1115916-1-vertical-metrics.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: ahem;
|
||||
src: url(../fonts/Ahem.ttf);
|
||||
}
|
||||
div {
|
||||
height: 100px;
|
||||
font: 16px/24px ahem;
|
||||
}
|
||||
#test1 {
|
||||
writing-mode: vertical-lr;
|
||||
text-orientation: upright;
|
||||
}
|
||||
span {
|
||||
background: red; /* should not be visible */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test1">
|
||||
<span>ab<br>cd</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: ahem;
|
||||
src: url(../fonts/Ahem.ttf);
|
||||
}
|
||||
|
||||
div {
|
||||
font-family: ahem;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.lr {
|
||||
writing-mode: vertical-lr;
|
||||
text-orientation: sideways-right;
|
||||
height: 40px;
|
||||
}
|
||||
.rl {
|
||||
writing-mode: vertical-lr;
|
||||
text-orientation: sideways-right;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.c { position: relative; top: 10px; left: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="lr c">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
<div class="lr c">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
<div class="lr c">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
<div class="lr c">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
<div class="lr c">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="rl c">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
<div class="rl c">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
<div class="rl c">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
<div class="rl c">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
<div class="rl c">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: ahem;
|
||||
src: url(../fonts/Ahem.ttf);
|
||||
}
|
||||
|
||||
div {
|
||||
font-family: ahem;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.lr {
|
||||
writing-mode: vertical-lr;
|
||||
text-orientation: sideways-right;
|
||||
height: 40px;
|
||||
}
|
||||
.rl {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: sideways-right;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.a { position: relative; top: 10px; left: 10px; }
|
||||
.b { position: relative; top: 10px; left: 10px; }
|
||||
.c { position: relative; top: 10px; left: 10px; }
|
||||
.d { position: relative; top: 10px; left: 10px; }
|
||||
.e { position: relative; top: 10px; left: 10px; }
|
||||
|
||||
/* resolution-dependent offsets: we want CSS px values that will correspond
|
||||
to less that 0.5 device pixels either side of where 10px falls, so they
|
||||
all snap to the same device-pixel value */
|
||||
|
||||
/* XXX For higher-than-retina density, we punt; the test becomes a no-op */
|
||||
|
||||
@media (max-resolution: 2dppx) {
|
||||
.a { left: 9.8px; }
|
||||
.b { left: 9.9px; }
|
||||
.c { left: 10px; }
|
||||
.d { left: 10.1px; }
|
||||
.e { left: 10.2px; }
|
||||
}
|
||||
|
||||
@media (max-resolution: 1.5dppx) {
|
||||
.a { left: 9.7px; }
|
||||
.b { left: 9.85px; }
|
||||
.c { left: 10px; }
|
||||
.d { left: 10.15px; }
|
||||
.e { left: 10.3px; }
|
||||
}
|
||||
|
||||
@media (max-resolution: 1dppx) {
|
||||
.a { left: 9.6px; }
|
||||
.b { left: 9.8px; }
|
||||
.c { left: 10px; }
|
||||
.d { left: 10.2px; }
|
||||
.e { left: 10.4px; }
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="lr a">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
<div class="lr b">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
<div class="lr c">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
<div class="lr d">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
<div class="lr e">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="rl a">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
<div class="rl b">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
<div class="rl c">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
<div class="rl d">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
<div class="rl e">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Bug 1117227 - text-overflow on vertical text</title>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: DejaVuSansMono;
|
||||
src: url(../fonts/DejaVuSansMono.woff);
|
||||
}
|
||||
body {
|
||||
font: 16px DejaVuSansMono;
|
||||
text-orientation: sideways-right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.c {
|
||||
block-size: 3em; inline-size: 4em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.vlr { writing-mode: vertical-lr; }
|
||||
.vrl { writing-mode: vertical-rl; }
|
||||
.t { margin-inline-start: -1em; }
|
||||
m { display: inline-block; }
|
||||
|
||||
#tests { position: relative; }
|
||||
#tests > div { position: absolute; }
|
||||
.r1 { top: 0em; }
|
||||
.r2 { top: 4.5em; }
|
||||
.c1 { left: 0em; }
|
||||
.c2 { left: 4em; }
|
||||
.c3 { left: 8em; }
|
||||
.c4 { left: 12em; }
|
||||
.c5 { left: 16em; }
|
||||
.c6 { left: 20em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p style="font-family: sans-serif">Test for text-overflow in vertical mode:</p>
|
||||
|
||||
<div id="tests">
|
||||
<div class="r1 c1"><div class="c vrl"><span class="t"> 123456<m>…</m></span></div></div>
|
||||
<div class="r1 c2"><div class="c vlr"><span class="t"> 123456<m>…</m></span></div></div>
|
||||
<div class="r1 c3"><div class="c vrl"><span class="t"> <m>…</m>3456<m>…</m></span></div></div>
|
||||
<div class="r1 c4"><div class="c vlr"><span class="t"> <m>…</m>3456<m>…</m></span></div></div>
|
||||
<div class="r1 c5"><div class="c vrl"><span class="t"> <m>…</m>345678 </span></div></div>
|
||||
<div class="r1 c6"><div class="c vlr"><span class="t"> <m>…</m>345678 </span></div></div>
|
||||
|
||||
<div class="r2 c1"><div class="c vrl"><span class="t"> 123456<m>$</m></span></div></div>
|
||||
<div class="r2 c2"><div class="c vlr"><span class="t"> 123456<m>$</m></span></div></div>
|
||||
<div class="r2 c3"><div class="c vrl"><span class="t"> <m>^</m>3456<m>$</m></span></div></div>
|
||||
<div class="r2 c4"><div class="c vlr"><span class="t"> <m>^</m>3456<m>$</m></span></div></div>
|
||||
<div class="r2 c5"><div class="c vrl"><span class="t"> <m>^</m>3456<m>…</m></span></div></div>
|
||||
<div class="r2 c6"><div class="c vlr"><span class="t"> <m>^</m>3456<m>…</m></span></div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
60
layout/reftests/writing-mode/1117227-1-text-overflow.html
Normal file
60
layout/reftests/writing-mode/1117227-1-text-overflow.html
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Bug 1117227 - text-overflow on vertical text</title>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: DejaVuSansMono;
|
||||
src: url(../fonts/DejaVuSansMono.woff);
|
||||
}
|
||||
body {
|
||||
font: 16px DejaVuSansMono;
|
||||
text-orientation: sideways-right;
|
||||
}
|
||||
.c {
|
||||
block-size: 3em; inline-size: 4em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.e { text-overflow: ellipsis; }
|
||||
.ee { text-overflow: ellipsis ellipsis; }
|
||||
.ec { text-overflow: ellipsis clip; }
|
||||
.s { text-overflow: '$'; }
|
||||
.ss { text-overflow: '^' '$'; }
|
||||
.se { text-overflow: '^' ellipsis; }
|
||||
.vlr { writing-mode: vertical-lr; }
|
||||
.vrl { writing-mode: vertical-rl; }
|
||||
.t { margin-inline-start: -1em; }
|
||||
|
||||
#tests { position: relative; }
|
||||
#tests > div { position: absolute; }
|
||||
.r1 { top: 0em; }
|
||||
.r2 { top: 4.5em; }
|
||||
.c1 { left: 0em; }
|
||||
.c2 { left: 4em; }
|
||||
.c3 { left: 8em; }
|
||||
.c4 { left: 12em; }
|
||||
.c5 { left: 16em; }
|
||||
.c6 { left: 20em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p style="font-family: sans-serif">Test for text-overflow in vertical mode:</p>
|
||||
|
||||
<div id="tests">
|
||||
<div class="r1 c1"><div class="c e vrl"><span class="t">0123456789</span></div></div>
|
||||
<div class="r1 c2"><div class="c e vlr"><span class="t">0123456789</span></div></div>
|
||||
<div class="r1 c3"><div class="c ee vrl"><span class="t">0123456789</span></div></div>
|
||||
<div class="r1 c4"><div class="c ee vlr"><span class="t">0123456789</span></div></div>
|
||||
<div class="r1 c5"><div class="c ec vrl"><span class="t">0123456789</span></div></div>
|
||||
<div class="r1 c6"><div class="c ec vlr"><span class="t">0123456789</span></div></div>
|
||||
|
||||
<div class="r2 c1"><div class="c s vrl"><span class="t">0123456789</span></div></div>
|
||||
<div class="r2 c2"><div class="c s vlr"><span class="t">0123456789</span></div></div>
|
||||
<div class="r2 c3"><div class="c ss vrl"><span class="t">0123456789</span></div></div>
|
||||
<div class="r2 c4"><div class="c ss vlr"><span class="t">0123456789</span></div></div>
|
||||
<div class="r2 c5"><div class="c se vrl"><span class="t">0123456789</span></div></div>
|
||||
<div class="r2 c6"><div class="c se vlr"><span class="t">0123456789</span></div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Bug 1122366 - margin collapsing</title>
|
||||
<style type="text/css">
|
||||
div {
|
||||
font: 40px/1em serif;
|
||||
height: 4em;
|
||||
}
|
||||
div.wrapper {
|
||||
margin: 10px;
|
||||
background: blue;
|
||||
border-left: green solid .5em;
|
||||
border-right: green solid 1.5em;
|
||||
width: 2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
43
layout/reftests/writing-mode/1122366-1-margin-collapse.html
Normal file
43
layout/reftests/writing-mode/1122366-1-margin-collapse.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Bug 1122366 - margin collapsing</title>
|
||||
<style type="text/css">
|
||||
div {
|
||||
font: 40px/1em serif;
|
||||
height: 4em;
|
||||
}
|
||||
div.wrapper {
|
||||
margin: 10px;
|
||||
background: blue;
|
||||
border-left: green solid .5em;
|
||||
border-right: green solid 1.5em;
|
||||
}
|
||||
div.lr {
|
||||
-webkit-writing-mode: vertical-lr;
|
||||
writing-mode: tb-lr; /* IE11 */
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
div.rl {
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
writing-mode: tb-rl; /* IE11 */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
div.widthless
|
||||
{
|
||||
margin-right: 2em;
|
||||
width: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper lr">
|
||||
<div class="widthless"></div>
|
||||
<div class="widthless"></div>
|
||||
</div>
|
||||
<div class="wrapper rl">
|
||||
<div class="widthless"></div>
|
||||
<div class="widthless"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Maximum height on fieldset</title>
|
||||
<style>
|
||||
div {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
fieldset {
|
||||
background:rgba(0,0,0,0.1);
|
||||
border-color:teal;
|
||||
border-width:2px;
|
||||
height:100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<fieldset>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit. Duis odio est, cursus non adipiscing at, fringilla
|
||||
quis eros. Sed volutpat nibh sit amet ante molestie a
|
||||
vehicula nulla gravida. Mauris elementum cursus urna id
|
||||
vestibulum.</p>
|
||||
</fieldset>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Maximum height on fieldset</title>
|
||||
<style>
|
||||
div {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
fieldset {
|
||||
background:rgba(0,0,0,0.1);
|
||||
border-color:teal;
|
||||
border-width:2px;
|
||||
max-height:100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<fieldset>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit. Duis odio est, cursus non adipiscing at, fringilla
|
||||
quis eros. Sed volutpat nibh sit amet ante molestie a
|
||||
vehicula nulla gravida. Mauris elementum cursus urna id
|
||||
vestibulum.</p>
|
||||
</fieldset>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Minimum height on fieldset</title>
|
||||
<style>
|
||||
div {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
fieldset {
|
||||
background:rgba(0,0,0,0.1);
|
||||
border-color:teal;
|
||||
border-width:2px;
|
||||
height:200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<fieldset>
|
||||
<p>Lorem ipsum.</p>
|
||||
</fieldset>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Minimum height on fieldset</title>
|
||||
<style>
|
||||
div {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
fieldset {
|
||||
background:rgba(0,0,0,0.1);
|
||||
border-color:teal;
|
||||
border-width:2px;
|
||||
min-height:200px;
|
||||
max-height:400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<fieldset>
|
||||
<p>Lorem ipsum.</p>
|
||||
</fieldset>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div><img src="green-100x100.png" width="100" height="100" alt="Image download support must be enabled"></img></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div {
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
top: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div><img src="green-100x100.png" width="100" height="100" alt="Image download support must be enabled"></img></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("left-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("right-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: rtl;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("left-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
writing-mode: vertical-lr;
|
||||
direction: ltr;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("left-bottom-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("right-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
writing-mode: vertical-rl;
|
||||
direction: ltr;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("right-bottom-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
writing-mode: vertical-rl;
|
||||
direction: rtl;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("right-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: end;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("left-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: end;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: rtl;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("left-bottom-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: end;
|
||||
writing-mode: vertical-lr;
|
||||
direction: ltr;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("left-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: end;
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("right-bottom-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: end;
|
||||
writing-mode: vertical-rl;
|
||||
direction: ltr;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("right-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: end;
|
||||
writing-mode: vertical-rl;
|
||||
direction: rtl;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("left-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: left;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("left-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: left;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: rtl;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("left-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: left;
|
||||
writing-mode: vertical-lr;
|
||||
direction: ltr;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("left-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: left;
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("right-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: left;
|
||||
writing-mode: vertical-rl;
|
||||
direction: ltr;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("right-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: left;
|
||||
writing-mode: vertical-rl;
|
||||
direction: rtl;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("right-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: right;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("right-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: right;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: rtl;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("left-bottom-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: right;
|
||||
writing-mode: vertical-lr;
|
||||
direction: ltr;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("left-bottom-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: right;
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("right-bottom-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: right;
|
||||
writing-mode: vertical-rl;
|
||||
direction: ltr;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("right-bottom-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: right;
|
||||
writing-mode: vertical-rl;
|
||||
direction: rtl;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("left-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: start;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("right-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: start;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: rtl;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Writing Modes</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes">
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div.outer {
|
||||
background: red url("left-top-300x300.png");
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
text-align: start;
|
||||
writing-mode: vertical-lr;
|
||||
direction: ltr;
|
||||
}
|
||||
div.inner {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue