diff options
Diffstat (limited to 'layout/reftests/writing-mode')
443 files changed, 16218 insertions, 0 deletions
diff --git a/layout/reftests/writing-mode/1079154-1-vertical-rl-columns-ref.html b/layout/reftests/writing-mode/1079154-1-vertical-rl-columns-ref.html new file mode 100644 index 0000000000..bbf1705df8 --- /dev/null +++ b/layout/reftests/writing-mode/1079154-1-vertical-rl-columns-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1079154-1-vertical-rl-columns.html b/layout/reftests/writing-mode/1079154-1-vertical-rl-columns.html new file mode 100644 index 0000000000..2dc848283d --- /dev/null +++ b/layout/reftests/writing-mode/1079154-1-vertical-rl-columns.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="column-count:2; 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="column-count:3; 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> diff --git a/layout/reftests/writing-mode/1082844-ref.html b/layout/reftests/writing-mode/1082844-ref.html new file mode 100644 index 0000000000..954b0ef232 --- /dev/null +++ b/layout/reftests/writing-mode/1082844-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1082844.html b/layout/reftests/writing-mode/1082844.html new file mode 100644 index 0000000000..b63c2167d4 --- /dev/null +++ b/layout/reftests/writing-mode/1082844.html @@ -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> diff --git a/layout/reftests/writing-mode/1083748-ref.html b/layout/reftests/writing-mode/1083748-ref.html new file mode 100644 index 0000000000..92a3f3273a --- /dev/null +++ b/layout/reftests/writing-mode/1083748-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1083748.html b/layout/reftests/writing-mode/1083748.html new file mode 100644 index 0000000000..fff142eb8e --- /dev/null +++ b/layout/reftests/writing-mode/1083748.html @@ -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> diff --git a/layout/reftests/writing-mode/1083848-1-inline-border-ref.html b/layout/reftests/writing-mode/1083848-1-inline-border-ref.html new file mode 100644 index 0000000000..d252cc1978 --- /dev/null +++ b/layout/reftests/writing-mode/1083848-1-inline-border-ref.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> diff --git a/layout/reftests/writing-mode/1083848-1-inline-border.html b/layout/reftests/writing-mode/1083848-1-inline-border.html new file mode 100644 index 0000000000..38795f1391 --- /dev/null +++ b/layout/reftests/writing-mode/1083848-1-inline-border.html @@ -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> diff --git a/layout/reftests/writing-mode/1083848-2-inline-background-ref.html b/layout/reftests/writing-mode/1083848-2-inline-background-ref.html new file mode 100644 index 0000000000..b7d18e7fbc --- /dev/null +++ b/layout/reftests/writing-mode/1083848-2-inline-background-ref.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> diff --git a/layout/reftests/writing-mode/1083848-2-inline-background.html b/layout/reftests/writing-mode/1083848-2-inline-background.html new file mode 100644 index 0000000000..0591587b2b --- /dev/null +++ b/layout/reftests/writing-mode/1083848-2-inline-background.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> diff --git a/layout/reftests/writing-mode/1083848-3-inline-background-repeat-ref.html b/layout/reftests/writing-mode/1083848-3-inline-background-repeat-ref.html new file mode 100644 index 0000000000..cc93be8f51 --- /dev/null +++ b/layout/reftests/writing-mode/1083848-3-inline-background-repeat-ref.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> diff --git a/layout/reftests/writing-mode/1083848-3-inline-background-repeat.html b/layout/reftests/writing-mode/1083848-3-inline-background-repeat.html new file mode 100644 index 0000000000..ac9dd02c5b --- /dev/null +++ b/layout/reftests/writing-mode/1083848-3-inline-background-repeat.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> diff --git a/layout/reftests/writing-mode/1083892-1-ref.html b/layout/reftests/writing-mode/1083892-1-ref.html new file mode 100644 index 0000000000..66ff5b9a90 --- /dev/null +++ b/layout/reftests/writing-mode/1083892-1-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1083892-1.html b/layout/reftests/writing-mode/1083892-1.html new file mode 100644 index 0000000000..fa7c7a9aa8 --- /dev/null +++ b/layout/reftests/writing-mode/1083892-1.html @@ -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> diff --git a/layout/reftests/writing-mode/1086883-1-ref.html b/layout/reftests/writing-mode/1086883-1-ref.html new file mode 100644 index 0000000000..ed15cdf9b6 --- /dev/null +++ b/layout/reftests/writing-mode/1086883-1-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1086883-1a.html b/layout/reftests/writing-mode/1086883-1a.html new file mode 100644 index 0000000000..3e004439e6 --- /dev/null +++ b/layout/reftests/writing-mode/1086883-1a.html @@ -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> diff --git a/layout/reftests/writing-mode/1086883-1b.html b/layout/reftests/writing-mode/1086883-1b.html new file mode 100644 index 0000000000..24d6f9b56e --- /dev/null +++ b/layout/reftests/writing-mode/1086883-1b.html @@ -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> diff --git a/layout/reftests/writing-mode/1088025-1-ref.html b/layout/reftests/writing-mode/1088025-1-ref.html new file mode 100644 index 0000000000..0ed0f34b1d --- /dev/null +++ b/layout/reftests/writing-mode/1088025-1-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1088025-1.html b/layout/reftests/writing-mode/1088025-1.html new file mode 100644 index 0000000000..8100958449 --- /dev/null +++ b/layout/reftests/writing-mode/1088025-1.html @@ -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> diff --git a/layout/reftests/writing-mode/1089388-1-ref.html b/layout/reftests/writing-mode/1089388-1-ref.html new file mode 100644 index 0000000000..38ccba0e16 --- /dev/null +++ b/layout/reftests/writing-mode/1089388-1-ref.html @@ -0,0 +1,31 @@ +<!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; + text-rendering: optimizeLegibility; +} +</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> diff --git a/layout/reftests/writing-mode/1089388-1.html b/layout/reftests/writing-mode/1089388-1.html new file mode 100644 index 0000000000..fc1209b42c --- /dev/null +++ b/layout/reftests/writing-mode/1089388-1.html @@ -0,0 +1,40 @@ +<!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; + text-rendering: optimizeLegibility; +} +</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> diff --git a/layout/reftests/writing-mode/1089388-2-ref.html b/layout/reftests/writing-mode/1089388-2-ref.html new file mode 100644 index 0000000000..34fc1d548f --- /dev/null +++ b/layout/reftests/writing-mode/1089388-2-ref.html @@ -0,0 +1,31 @@ +<!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; + text-rendering: optimizeLegibility; +} +</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> diff --git a/layout/reftests/writing-mode/1089388-2.html b/layout/reftests/writing-mode/1089388-2.html new file mode 100644 index 0000000000..8214828917 --- /dev/null +++ b/layout/reftests/writing-mode/1089388-2.html @@ -0,0 +1,40 @@ +<!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; + text-rendering: optimizeLegibility; +} +</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> diff --git a/layout/reftests/writing-mode/1090159-1-ref.html b/layout/reftests/writing-mode/1090159-1-ref.html new file mode 100644 index 0000000000..4678efe9ec --- /dev/null +++ b/layout/reftests/writing-mode/1090159-1-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1090159-1.html b/layout/reftests/writing-mode/1090159-1.html new file mode 100644 index 0000000000..eabded9b11 --- /dev/null +++ b/layout/reftests/writing-mode/1090159-1.html @@ -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> diff --git a/layout/reftests/writing-mode/1090168-1-notref.html b/layout/reftests/writing-mode/1090168-1-notref.html new file mode 100644 index 0000000000..9480faf73d --- /dev/null +++ b/layout/reftests/writing-mode/1090168-1-notref.html @@ -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> diff --git a/layout/reftests/writing-mode/1090168-1-ref.html b/layout/reftests/writing-mode/1090168-1-ref.html new file mode 100644 index 0000000000..8f9520cc1b --- /dev/null +++ b/layout/reftests/writing-mode/1090168-1-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1090168-1.html b/layout/reftests/writing-mode/1090168-1.html new file mode 100644 index 0000000000..443678678c --- /dev/null +++ b/layout/reftests/writing-mode/1090168-1.html @@ -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> diff --git a/layout/reftests/writing-mode/1090168-2-ref.html b/layout/reftests/writing-mode/1090168-2-ref.html new file mode 100644 index 0000000000..f12a5156cd --- /dev/null +++ b/layout/reftests/writing-mode/1090168-2-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1090168-2.html b/layout/reftests/writing-mode/1090168-2.html new file mode 100644 index 0000000000..631b7a9092 --- /dev/null +++ b/layout/reftests/writing-mode/1090168-2.html @@ -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> diff --git a/layout/reftests/writing-mode/1090168-3-ref.html b/layout/reftests/writing-mode/1090168-3-ref.html new file mode 100644 index 0000000000..212c675899 --- /dev/null +++ b/layout/reftests/writing-mode/1090168-3-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1090168-3.html b/layout/reftests/writing-mode/1090168-3.html new file mode 100644 index 0000000000..f22a22acd3 --- /dev/null +++ b/layout/reftests/writing-mode/1090168-3.html @@ -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> diff --git a/layout/reftests/writing-mode/1091058-1-ref.html b/layout/reftests/writing-mode/1091058-1-ref.html new file mode 100644 index 0000000000..acce74148d --- /dev/null +++ b/layout/reftests/writing-mode/1091058-1-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1091058-1.html b/layout/reftests/writing-mode/1091058-1.html new file mode 100644 index 0000000000..69d5f0979d --- /dev/null +++ b/layout/reftests/writing-mode/1091058-1.html @@ -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> diff --git a/layout/reftests/writing-mode/1094434-1-ref.html b/layout/reftests/writing-mode/1094434-1-ref.html new file mode 100644 index 0000000000..df8564d2b5 --- /dev/null +++ b/layout/reftests/writing-mode/1094434-1-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1094434-1.html b/layout/reftests/writing-mode/1094434-1.html new file mode 100644 index 0000000000..9639377c71 --- /dev/null +++ b/layout/reftests/writing-mode/1094434-1.html @@ -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> diff --git a/layout/reftests/writing-mode/1094434-2-ref.html b/layout/reftests/writing-mode/1094434-2-ref.html new file mode 100644 index 0000000000..3182e7cfda --- /dev/null +++ b/layout/reftests/writing-mode/1094434-2-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1094434-2.html b/layout/reftests/writing-mode/1094434-2.html new file mode 100644 index 0000000000..2c6873fbb9 --- /dev/null +++ b/layout/reftests/writing-mode/1094434-2.html @@ -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> diff --git a/layout/reftests/writing-mode/1094914-1-ref.html b/layout/reftests/writing-mode/1094914-1-ref.html new file mode 100644 index 0000000000..28e1efe43f --- /dev/null +++ b/layout/reftests/writing-mode/1094914-1-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1094914-1a.html b/layout/reftests/writing-mode/1094914-1a.html new file mode 100644 index 0000000000..2234aa1a4a --- /dev/null +++ b/layout/reftests/writing-mode/1094914-1a.html @@ -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> diff --git a/layout/reftests/writing-mode/1094914-1b.html b/layout/reftests/writing-mode/1094914-1b.html new file mode 100644 index 0000000000..e815348ada --- /dev/null +++ b/layout/reftests/writing-mode/1094914-1b.html @@ -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> diff --git a/layout/reftests/writing-mode/1096224-1-ref.html b/layout/reftests/writing-mode/1096224-1-ref.html new file mode 100644 index 0000000000..196258ef8a --- /dev/null +++ b/layout/reftests/writing-mode/1096224-1-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1096224-1a.html b/layout/reftests/writing-mode/1096224-1a.html new file mode 100644 index 0000000000..53ea4ab592 --- /dev/null +++ b/layout/reftests/writing-mode/1096224-1a.html @@ -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> diff --git a/layout/reftests/writing-mode/1096224-1b.html b/layout/reftests/writing-mode/1096224-1b.html new file mode 100644 index 0000000000..fe617b2fcf --- /dev/null +++ b/layout/reftests/writing-mode/1096224-1b.html @@ -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> diff --git a/layout/reftests/writing-mode/1102175-1-ref.html b/layout/reftests/writing-mode/1102175-1-ref.html new file mode 100644 index 0000000000..64804f6e25 --- /dev/null +++ b/layout/reftests/writing-mode/1102175-1-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1102175-1a.html b/layout/reftests/writing-mode/1102175-1a.html new file mode 100644 index 0000000000..8b3c7df58d --- /dev/null +++ b/layout/reftests/writing-mode/1102175-1a.html @@ -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> diff --git a/layout/reftests/writing-mode/1102175-1b.html b/layout/reftests/writing-mode/1102175-1b.html new file mode 100644 index 0000000000..63a9202867 --- /dev/null +++ b/layout/reftests/writing-mode/1102175-1b.html @@ -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> diff --git a/layout/reftests/writing-mode/1103613-1-ref.html b/layout/reftests/writing-mode/1103613-1-ref.html new file mode 100644 index 0000000000..4054b2d841 --- /dev/null +++ b/layout/reftests/writing-mode/1103613-1-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1103613-1.html b/layout/reftests/writing-mode/1103613-1.html new file mode 100644 index 0000000000..b7b40ba234 --- /dev/null +++ b/layout/reftests/writing-mode/1103613-1.html @@ -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> diff --git a/layout/reftests/writing-mode/1105268-1-min-max-dimensions-ref.html b/layout/reftests/writing-mode/1105268-1-min-max-dimensions-ref.html new file mode 100644 index 0000000000..90347bc05f --- /dev/null +++ b/layout/reftests/writing-mode/1105268-1-min-max-dimensions-ref.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> diff --git a/layout/reftests/writing-mode/1105268-1-min-max-dimensions.html b/layout/reftests/writing-mode/1105268-1-min-max-dimensions.html new file mode 100644 index 0000000000..1d4764187d --- /dev/null +++ b/layout/reftests/writing-mode/1105268-1-min-max-dimensions.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> diff --git a/layout/reftests/writing-mode/1105268-2-min-max-dimensions-ref.html b/layout/reftests/writing-mode/1105268-2-min-max-dimensions-ref.html new file mode 100644 index 0000000000..6ca2ba2e99 --- /dev/null +++ b/layout/reftests/writing-mode/1105268-2-min-max-dimensions-ref.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> diff --git a/layout/reftests/writing-mode/1105268-2-min-max-dimensions.html b/layout/reftests/writing-mode/1105268-2-min-max-dimensions.html new file mode 100644 index 0000000000..3df6d3b622 --- /dev/null +++ b/layout/reftests/writing-mode/1105268-2-min-max-dimensions.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> diff --git a/layout/reftests/writing-mode/1106669-1-intrinsic-for-container-ref.html b/layout/reftests/writing-mode/1106669-1-intrinsic-for-container-ref.html new file mode 100644 index 0000000000..0f0d09eb54 --- /dev/null +++ b/layout/reftests/writing-mode/1106669-1-intrinsic-for-container-ref.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> diff --git a/layout/reftests/writing-mode/1106669-1-intrinsic-for-container.html b/layout/reftests/writing-mode/1106669-1-intrinsic-for-container.html new file mode 100644 index 0000000000..214c346d33 --- /dev/null +++ b/layout/reftests/writing-mode/1106669-1-intrinsic-for-container.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> diff --git a/layout/reftests/writing-mode/1108923-1-percentage-margins-ref.html b/layout/reftests/writing-mode/1108923-1-percentage-margins-ref.html new file mode 100644 index 0000000000..ecd5c175dc --- /dev/null +++ b/layout/reftests/writing-mode/1108923-1-percentage-margins-ref.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> diff --git a/layout/reftests/writing-mode/1108923-1-percentage-margins.html b/layout/reftests/writing-mode/1108923-1-percentage-margins.html new file mode 100644 index 0000000000..71a6d7f662 --- /dev/null +++ b/layout/reftests/writing-mode/1108923-1-percentage-margins.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> diff --git a/layout/reftests/writing-mode/1111944-1-list-marker-ref.html b/layout/reftests/writing-mode/1111944-1-list-marker-ref.html new file mode 100644 index 0000000000..f0676fbd40 --- /dev/null +++ b/layout/reftests/writing-mode/1111944-1-list-marker-ref.html @@ -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> diff --git a/layout/reftests/writing-mode/1111944-1-list-marker.html b/layout/reftests/writing-mode/1111944-1-list-marker.html new file mode 100644 index 0000000000..cd7f2eda2b --- /dev/null +++ b/layout/reftests/writing-mode/1111944-1-list-marker.html @@ -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> diff --git a/layout/reftests/writing-mode/1115916-1-vertical-metrics-ref.html b/layout/reftests/writing-mode/1115916-1-vertical-metrics-ref.html new file mode 100644 index 0000000000..f900e37a5a --- /dev/null +++ b/layout/reftests/writing-mode/1115916-1-vertical-metrics-ref.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> diff --git a/layout/reftests/writing-mode/1115916-1-vertical-metrics.html b/layout/reftests/writing-mode/1115916-1-vertical-metrics.html new file mode 100644 index 0000000000..9916b4a54b --- /dev/null +++ b/layout/reftests/writing-mode/1115916-1-vertical-metrics.html @@ -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> diff --git a/layout/reftests/writing-mode/1117210-1-vertical-baseline-snap-ref.html b/layout/reftests/writing-mode/1117210-1-vertical-baseline-snap-ref.html new file mode 100644 index 0000000000..2ebaf81dc4 --- /dev/null +++ b/layout/reftests/writing-mode/1117210-1-vertical-baseline-snap-ref.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> diff --git a/layout/reftests/writing-mode/1117210-1-vertical-baseline-snap.html b/layout/reftests/writing-mode/1117210-1-vertical-baseline-snap.html new file mode 100644 index 0000000000..88eca655e0 --- /dev/null +++ b/layout/reftests/writing-mode/1117210-1-vertical-baseline-snap.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> diff --git a/layout/reftests/writing-mode/1117227-1-text-overflow-ref.html b/layout/reftests/writing-mode/1117227-1-text-overflow-ref.html new file mode 100644 index 0000000000..41b3d42e39 --- /dev/null +++ b/layout/reftests/writing-mode/1117227-1-text-overflow-ref.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> diff --git a/layout/reftests/writing-mode/1117227-1-text-overflow.html b/layout/reftests/writing-mode/1117227-1-text-overflow.html new file mode 100644 index 0000000000..a09e3449c0 --- /dev/null +++ b/layout/reftests/writing-mode/1117227-1-text-overflow.html @@ -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> diff --git a/layout/reftests/writing-mode/1122366-1-margin-collapse-ref.html b/layout/reftests/writing-mode/1122366-1-margin-collapse-ref.html new file mode 100644 index 0000000000..315ea6c452 --- /dev/null +++ b/layout/reftests/writing-mode/1122366-1-margin-collapse-ref.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> diff --git a/layout/reftests/writing-mode/1122366-1-margin-collapse.html b/layout/reftests/writing-mode/1122366-1-margin-collapse.html new file mode 100644 index 0000000000..80e0fad184 --- /dev/null +++ b/layout/reftests/writing-mode/1122366-1-margin-collapse.html @@ -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> diff --git a/layout/reftests/writing-mode/1124636-1-fieldset-max-height-ref.html b/layout/reftests/writing-mode/1124636-1-fieldset-max-height-ref.html new file mode 100644 index 0000000000..7de3adf568 --- /dev/null +++ b/layout/reftests/writing-mode/1124636-1-fieldset-max-height-ref.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> diff --git a/layout/reftests/writing-mode/1124636-1-fieldset-max-height.html b/layout/reftests/writing-mode/1124636-1-fieldset-max-height.html new file mode 100644 index 0000000000..8cd5c9e275 --- /dev/null +++ b/layout/reftests/writing-mode/1124636-1-fieldset-max-height.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> diff --git a/layout/reftests/writing-mode/1124636-2-fieldset-min-height-ref.html b/layout/reftests/writing-mode/1124636-2-fieldset-min-height-ref.html new file mode 100644 index 0000000000..e01d1dabc6 --- /dev/null +++ b/layout/reftests/writing-mode/1124636-2-fieldset-min-height-ref.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> diff --git a/layout/reftests/writing-mode/1124636-2-fieldset-min-height.html b/layout/reftests/writing-mode/1124636-2-fieldset-min-height.html new file mode 100644 index 0000000000..72f139bb4a --- /dev/null +++ b/layout/reftests/writing-mode/1124636-2-fieldset-min-height.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> diff --git a/layout/reftests/writing-mode/1127488-align-bottom-left-ref.html b/layout/reftests/writing-mode/1127488-align-bottom-left-ref.html new file mode 100644 index 0000000000..af2d3d9421 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-bottom-left-ref.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> diff --git a/layout/reftests/writing-mode/1127488-align-bottom-right-ref.html b/layout/reftests/writing-mode/1127488-align-bottom-right-ref.html new file mode 100644 index 0000000000..9e9d792297 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-bottom-right-ref.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> diff --git a/layout/reftests/writing-mode/1127488-align-default-horizontal-tb-ltr.html b/layout/reftests/writing-mode/1127488-align-default-horizontal-tb-ltr.html new file mode 100644 index 0000000000..9dcbb305f7 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-default-horizontal-tb-ltr.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> diff --git a/layout/reftests/writing-mode/1127488-align-default-horizontal-tb-rtl.html b/layout/reftests/writing-mode/1127488-align-default-horizontal-tb-rtl.html new file mode 100644 index 0000000000..d4fcd0ea30 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-default-horizontal-tb-rtl.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> diff --git a/layout/reftests/writing-mode/1127488-align-default-vertical-lr-ltr.html b/layout/reftests/writing-mode/1127488-align-default-vertical-lr-ltr.html new file mode 100644 index 0000000000..ae0a69bde9 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-default-vertical-lr-ltr.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> diff --git a/layout/reftests/writing-mode/1127488-align-default-vertical-lr-rtl.html b/layout/reftests/writing-mode/1127488-align-default-vertical-lr-rtl.html new file mode 100644 index 0000000000..d83b2370fa --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-default-vertical-lr-rtl.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> diff --git a/layout/reftests/writing-mode/1127488-align-default-vertical-rl-ltr.html b/layout/reftests/writing-mode/1127488-align-default-vertical-rl-ltr.html new file mode 100644 index 0000000000..a70ed3e9cd --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-default-vertical-rl-ltr.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> diff --git a/layout/reftests/writing-mode/1127488-align-default-vertical-rl-rtl.html b/layout/reftests/writing-mode/1127488-align-default-vertical-rl-rtl.html new file mode 100644 index 0000000000..c57877551a --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-default-vertical-rl-rtl.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> diff --git a/layout/reftests/writing-mode/1127488-align-end-horizontal-tb-ltr.html b/layout/reftests/writing-mode/1127488-align-end-horizontal-tb-ltr.html new file mode 100644 index 0000000000..782784fb4a --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-end-horizontal-tb-ltr.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> diff --git a/layout/reftests/writing-mode/1127488-align-end-horizontal-tb-rtl.html b/layout/reftests/writing-mode/1127488-align-end-horizontal-tb-rtl.html new file mode 100644 index 0000000000..cda08e24f7 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-end-horizontal-tb-rtl.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> diff --git a/layout/reftests/writing-mode/1127488-align-end-vertical-lr-ltr.html b/layout/reftests/writing-mode/1127488-align-end-vertical-lr-ltr.html new file mode 100644 index 0000000000..a01ed838d8 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-end-vertical-lr-ltr.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> diff --git a/layout/reftests/writing-mode/1127488-align-end-vertical-lr-rtl.html b/layout/reftests/writing-mode/1127488-align-end-vertical-lr-rtl.html new file mode 100644 index 0000000000..d7d697707b --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-end-vertical-lr-rtl.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> diff --git a/layout/reftests/writing-mode/1127488-align-end-vertical-rl-ltr.html b/layout/reftests/writing-mode/1127488-align-end-vertical-rl-ltr.html new file mode 100644 index 0000000000..d9bd2cdf50 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-end-vertical-rl-ltr.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> diff --git a/layout/reftests/writing-mode/1127488-align-end-vertical-rl-rtl.html b/layout/reftests/writing-mode/1127488-align-end-vertical-rl-rtl.html new file mode 100644 index 0000000000..4c5c8e609e --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-end-vertical-rl-rtl.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> diff --git a/layout/reftests/writing-mode/1127488-align-left-horizontal-tb-ltr.html b/layout/reftests/writing-mode/1127488-align-left-horizontal-tb-ltr.html new file mode 100644 index 0000000000..5c27f26317 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-left-horizontal-tb-ltr.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> diff --git a/layout/reftests/writing-mode/1127488-align-left-horizontal-tb-rtl.html b/layout/reftests/writing-mode/1127488-align-left-horizontal-tb-rtl.html new file mode 100644 index 0000000000..4a358149ee --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-left-horizontal-tb-rtl.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> diff --git a/layout/reftests/writing-mode/1127488-align-left-vertical-lr-ltr.html b/layout/reftests/writing-mode/1127488-align-left-vertical-lr-ltr.html new file mode 100644 index 0000000000..c39eb52261 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-left-vertical-lr-ltr.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> diff --git a/layout/reftests/writing-mode/1127488-align-left-vertical-lr-rtl.html b/layout/reftests/writing-mode/1127488-align-left-vertical-lr-rtl.html new file mode 100644 index 0000000000..d7709b433d --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-left-vertical-lr-rtl.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> diff --git a/layout/reftests/writing-mode/1127488-align-left-vertical-rl-ltr.html b/layout/reftests/writing-mode/1127488-align-left-vertical-rl-ltr.html new file mode 100644 index 0000000000..b2a77b32e9 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-left-vertical-rl-ltr.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> diff --git a/layout/reftests/writing-mode/1127488-align-left-vertical-rl-rtl.html b/layout/reftests/writing-mode/1127488-align-left-vertical-rl-rtl.html new file mode 100644 index 0000000000..1ad09717cb --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-left-vertical-rl-rtl.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> diff --git a/layout/reftests/writing-mode/1127488-align-right-horizontal-tb-ltr.html b/layout/reftests/writing-mode/1127488-align-right-horizontal-tb-ltr.html new file mode 100644 index 0000000000..52e76192a3 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-right-horizontal-tb-ltr.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> diff --git a/layout/reftests/writing-mode/1127488-align-right-horizontal-tb-rtl.html b/layout/reftests/writing-mode/1127488-align-right-horizontal-tb-rtl.html new file mode 100644 index 0000000000..ceaf162b2f --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-right-horizontal-tb-rtl.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> diff --git a/layout/reftests/writing-mode/1127488-align-right-vertical-lr-ltr.html b/layout/reftests/writing-mode/1127488-align-right-vertical-lr-ltr.html new file mode 100644 index 0000000000..74aecd9534 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-right-vertical-lr-ltr.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> diff --git a/layout/reftests/writing-mode/1127488-align-right-vertical-lr-rtl.html b/layout/reftests/writing-mode/1127488-align-right-vertical-lr-rtl.html new file mode 100644 index 0000000000..bbc9ee5143 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-right-vertical-lr-rtl.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> diff --git a/layout/reftests/writing-mode/1127488-align-right-vertical-rl-ltr.html b/layout/reftests/writing-mode/1127488-align-right-vertical-rl-ltr.html new file mode 100644 index 0000000000..071ed49575 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-right-vertical-rl-ltr.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> diff --git a/layout/reftests/writing-mode/1127488-align-right-vertical-rl-rtl.html b/layout/reftests/writing-mode/1127488-align-right-vertical-rl-rtl.html new file mode 100644 index 0000000000..2b09236afb --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-right-vertical-rl-rtl.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> diff --git a/layout/reftests/writing-mode/1127488-align-start-horizontal-tb-ltr.html b/layout/reftests/writing-mode/1127488-align-start-horizontal-tb-ltr.html new file mode 100644 index 0000000000..2a199d4b14 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-start-horizontal-tb-ltr.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> diff --git a/layout/reftests/writing-mode/1127488-align-start-horizontal-tb-rtl.html b/layout/reftests/writing-mode/1127488-align-start-horizontal-tb-rtl.html new file mode 100644 index 0000000000..8ce6cb3a77 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-start-horizontal-tb-rtl.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> diff --git a/layout/reftests/writing-mode/1127488-align-start-vertical-lr-ltr.html b/layout/reftests/writing-mode/1127488-align-start-vertical-lr-ltr.html new file mode 100644 index 0000000000..6926e007e8 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-start-vertical-lr-ltr.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> diff --git a/layout/reftests/writing-mode/1127488-align-start-vertical-lr-rtl.html b/layout/reftests/writing-mode/1127488-align-start-vertical-lr-rtl.html new file mode 100644 index 0000000000..bc386949c3 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-start-vertical-lr-rtl.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: start; + 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> diff --git a/layout/reftests/writing-mode/1127488-align-start-vertical-rl-ltr.html b/layout/reftests/writing-mode/1127488-align-start-vertical-rl-ltr.html new file mode 100644 index 0000000000..f57b8f5f6a --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-start-vertical-rl-ltr.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: 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> diff --git a/layout/reftests/writing-mode/1127488-align-start-vertical-rl-rtl.html b/layout/reftests/writing-mode/1127488-align-start-vertical-rl-rtl.html new file mode 100644 index 0000000000..ded86fc027 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-start-vertical-rl-rtl.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: start; + 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> diff --git a/layout/reftests/writing-mode/1127488-align-top-left-ref.html b/layout/reftests/writing-mode/1127488-align-top-left-ref.html new file mode 100644 index 0000000000..b253a7fa96 --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-top-left-ref.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: 0px; + } + </style> + </head> + <body> + <div><img src="green-100x100.png" width="100" height="100" alt="Image download support must be enabled"></img></div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1127488-align-top-right-ref.html b/layout/reftests/writing-mode/1127488-align-top-right-ref.html new file mode 100644 index 0000000000..448ac8fb1e --- /dev/null +++ b/layout/reftests/writing-mode/1127488-align-top-right-ref.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: 0px; + } + </style> + </head> + <body> + <div><img src="green-100x100.png" width="100" height="100" alt="Image download support must be enabled"></img></div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1130907-intrinsic-sizing-1-ref.html b/layout/reftests/writing-mode/1130907-intrinsic-sizing-1-ref.html new file mode 100644 index 0000000000..1817d739ee --- /dev/null +++ b/layout/reftests/writing-mode/1130907-intrinsic-sizing-1-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Test for intrinsic sizing of float around contents with border</title> + <style> + body { font-family: sans-serif; line-height: 1.4em; } + div { float: left; border: 2px solid blue; margin: 5px; padding: 1px; } + span { display: inline-block; } + br { clear: both; } + .h { writing-mode: horizontal-tb; } + .v-lr { writing-mode: vertical-lr; } + .v-rl { writing-mode: vertical-rl; } + .y { background: yellow; color: transparent; } + .i { inline-size: 2em; } + .b { block-size: 2em; inline-size: 100%; } + </style> + </head> + <body> + <p>In each case, the blue border should neatly enclose the text and its yellow border-block.</p> + <div class="h"> + <span><span class="y i" style="inline-size:2em;">x</span>123321</span> + </div> + <div class="h"> + <span>123321<span class="y i" style="inline-size:2em;">x</span></span> + </div> + <div class="h"> + <span><span class="y b">x</span><br>123321</span> + </div> + <div class="h"> + <span>123321<br><span class="y b">x</span></span> + </div> + <br> + <div class="v-lr"> + <span><span class="y i" style="inline-size:2em;">x</span>123321</span> + </div> + <div class="v-lr"> + <span>123321<span class="y i" style="inline-size:2em;">x</span></span> + </div> + <div class="v-lr"> + <span><span class="y b">x</span><br>123321</span> + </div> + <div class="v-lr"> + <span>123321<br><span class="y b">x</span></span> + </div> + <br> + <div class="v-rl"> + <span><span class="y i" style="inline-size:2em;">x</span>123321</span> + </div> + <div class="v-rl"> + <span>123321<span class="y i" style="inline-size:2em;">x</span></span> + </div> + <div class="v-rl"> + <span><span class="y b">x</span><br>123321</span> + </div> + <div class="v-rl"> + <span>123321<br><span class="y b">x</span></span> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1130907-intrinsic-sizing-1.html b/layout/reftests/writing-mode/1130907-intrinsic-sizing-1.html new file mode 100644 index 0000000000..dd8126d00b --- /dev/null +++ b/layout/reftests/writing-mode/1130907-intrinsic-sizing-1.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Test for intrinsic sizing of float around contents with border</title> + <style> + body { font-family: sans-serif; line-height: 1.4em; } + div { float: left; border: 2px solid blue; margin: 5px; padding: 1px; } + span { display: inline-block; } + br { clear: both; } + .h { writing-mode: horizontal-tb; } + .v-lr { writing-mode: vertical-lr; } + .v-rl { writing-mode: vertical-rl; } + .a { border-inline-start: 2em solid #ff0; } + .b { border-inline-end: 2em solid #ff0; } + .c { border-block-start: 2em solid #ff0; } + .d { border-block-end: 2em solid #ff0; } + </style> + </head> + <body> + <p>In each case, the blue border should neatly enclose the text and its yellow border-block.</p> + <div class="h"> + <span class="a">123321</span> + </div> + <div class="h"> + <span class="b">123321</span> + </div> + <div class="h"> + <span class="c">123321</span> + </div> + <div class="h"> + <span class="d">123321</span> + </div> + <br> + <div class="v-lr"> + <span class="a">123321</span> + </div> + <div class="v-lr"> + <span class="b">123321</span> + </div> + <div class="v-lr"> + <span class="c">123321</span> + </div> + <div class="v-lr"> + <span class="d">123321</span> + </div> + <br> + <div class="v-rl"> + <span class="a">123321</span> + </div> + <div class="v-rl"> + <span class="b">123321</span> + </div> + <div class="v-rl"> + <span class="c">123321</span> + </div> + <div class="v-rl"> + <span class="d">123321</span> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1130907-intrinsic-sizing-2-ref.html b/layout/reftests/writing-mode/1130907-intrinsic-sizing-2-ref.html new file mode 100644 index 0000000000..f4005e0be9 --- /dev/null +++ b/layout/reftests/writing-mode/1130907-intrinsic-sizing-2-ref.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Test for intrinsic sizing of float around contents with border</title> + <style> + body { font-family: sans-serif; line-height: 1.4em; } + .h, .v-lr, .v-rl { float: left; border: 2px solid blue; margin: 1.5em; padding: 1px; } + .sw { text-orientation: sideways-right; } + span { display: inline-block; } + br { clear: both; } + .h { writing-mode: horizontal-tb; } + .v-lr { writing-mode: vertical-lr; } + .v-rl { writing-mode: vertical-rl; } + .i { inline-size: 1.5em; } + </style> + </head> + <body> + <p>In each case, the blue border should neatly enclose the text.</p> + <div class="h"> + <span>12<span class="i"></span><b>33</b>21</span> + </div> + <div class="h"> + <span>12<b>33</b><span class="i"></span>21</span> + </div> + <div class="h"> + <span>12<b>33</b>21</span> + </div> + <div class="h"> + <span>12<b>33</b>21</span> + </div> + <br> + <div class="v-lr"> + <span>12<span class="i"></span><b>33</b>21</span> + </div> + <div class="v-lr"> + <span>12<b>33</b><span class="i"></span>21</span> + </div> + <div class="v-lr"> + <span>12<b>33</b>21</span> + </div> + <div class="v-lr"> + <span>12<b>33</b>21</span> + </div> + <div class="v-lr sw"> + <span>12<b>33</b>21</span> + </div> + <div class="v-lr sw"> + <span>12<b>33</b>21</span> + </div> + <br> + <div class="v-rl"> + <span>12<span class="i"></span><b>33</b>21</span> + </div> + <div class="v-rl"> + <span>12<b>33</b><span class="i"></span>21</span> + </div> + <div class="v-rl"> + <span>12<b>33</b>21</span> + </div> + <div class="v-rl"> + <span>12<b>33</b>21</span> + </div> + <div class="v-rl sw"> + <span>12<b>33</b>21</span> + </div> + <div class="v-rl sw"> + <span>12<b>33</b>21</span> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html b/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html new file mode 100644 index 0000000000..cef3f3d377 --- /dev/null +++ b/layout/reftests/writing-mode/1130907-intrinsic-sizing-2.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Test for intrinsic sizing of float around contents with border</title> + <style> + body { font-family: sans-serif; line-height: 1.4em; } + .h, .v-lr, .v-rl { float: left; border: 2px solid blue; margin: 1.5em; padding: 1px; } + .sw { text-orientation: sideways-right; } + span { display: inline-block; } + br { clear: both; } + .h { writing-mode: horizontal-tb; } + .v-lr { writing-mode: vertical-lr; } + .v-rl { writing-mode: vertical-rl; } + .a { border-inline-start: 1.5em solid transparent; } + .b { border-inline-end: 1.5em solid transparent; } + .c { border-block-start: 1.5em solid transparent; } + .d { border-block-end: 1.5em solid transparent; } + </style> + </head> + <body> + <p>In each case, the blue border should neatly enclose the text.</p> + <div class="h"> + <span>12<b class="a">33</b>21</span> + </div> + <div class="h"> + <span>12<b class="b">33</b>21</span> + </div> + <div class="h"> + <span>12<b class="c">33</b>21</span> + </div> + <div class="h"> + <span>12<b class="d">33</b>21</span> + </div> + <br> + <div class="v-lr"> + <div>12<b class="a">33</b>21</div> + </div> + <div class="v-lr"> + <div>12<b class="b">33</b>21</div> + </div> + <div class="v-lr"> + <div>12<b class="c">33</b>21</div> + </div> + <div class="v-lr"> + <div>12<b class="d">33</b>21</div> + </div> + <div class="v-lr sw"> + <div>12<b class="c">33</b>21</div> + </div> + <div class="v-lr sw"> + <div>12<b class="d">33</b>21</div> + </div> + <br> + <div class="v-rl"> + <div>12<b class="a">33</b>21</div> + </div> + <div class="v-rl"> + <div>12<b class="b">33</b>21</div> + </div> + <div class="v-rl"> + <div>12<b class="c">33</b>21</div> + </div> + <div class="v-rl"> + <div>12<b class="d">33</b>21</div> + </div> + <div class="v-rl sw"> + <div>12<b class="c">33</b>21</div> + </div> + <div class="v-rl sw"> + <div>12<b class="d">33</b>21</div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1131013-vertical-bidi-ref.html b/layout/reftests/writing-mode/1131013-vertical-bidi-ref.html new file mode 100644 index 0000000000..dbd67da9b2 --- /dev/null +++ b/layout/reftests/writing-mode/1131013-vertical-bidi-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>vertical bidi</title> + <style type="text/css"> +div { + writing-mode: vertical-rl; + text-orientation: sideways-right; + height: 200px; + width: 100px; + text-align: end; + background: yellow; + line-height: 1.5em; +} + </style> + </head> + <body> + <div>xyz <b>ג bar</b> ב foo א abc</div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1131013-vertical-bidi.html b/layout/reftests/writing-mode/1131013-vertical-bidi.html new file mode 100644 index 0000000000..c2f90920fd --- /dev/null +++ b/layout/reftests/writing-mode/1131013-vertical-bidi.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>vertical bidi</title> + <style type="text/css"> +div { + writing-mode: vertical-rl; + text-orientation: sideways-right; + height: 200px; + width: 100px; + text-align: start; + background: yellow; + line-height: 1.5em; +} + </style> + </head> + <body> + <div dir="rtl">abc א foo ב <b>bar ג</b> xyz</div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1133945-1-vertical-align-ref.html b/layout/reftests/writing-mode/1133945-1-vertical-align-ref.html new file mode 100644 index 0000000000..d561a0cf12 --- /dev/null +++ b/layout/reftests/writing-mode/1133945-1-vertical-align-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Test for bug 1133945</title> + <style> + body { writing-mode: vertical-rl; line-height: 60px; } + div { display: inline-block; width: 20px; height: 10px; background: blue; } + .d { position: relative; left: -20px; } + .e { position: relative; left: 20px; } + </style> + </head> + <body> + a <div class="a"></div> b <div class="b"></div> c <div class="c"></div> + d <div class="d"></div> e <div class="e"></div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1133945-1-vertical-align.html b/layout/reftests/writing-mode/1133945-1-vertical-align.html new file mode 100644 index 0000000000..7f4859799f --- /dev/null +++ b/layout/reftests/writing-mode/1133945-1-vertical-align.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Test for bug 1133945</title> + <style> + body { writing-mode: vertical-rl; line-height: 60px; } + div { display: inline-block; width: 20px; height: 10px; background: blue; } + .a { vertical-align: initial; } + .b { vertical-align: middle; } + .c { vertical-align: 0; } + .d { vertical-align: -20px; } + .e { vertical-align: 20px; } + </style> + </head> + <body> + a <div class="a"></div> b <div class="b"></div> c <div class="c"></div> + d <div class="d"></div> e <div class="e"></div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1134744-radio-checkbox-baseline-1-ref.html b/layout/reftests/writing-mode/1134744-radio-checkbox-baseline-1-ref.html new file mode 100644 index 0000000000..f9b2658d18 --- /dev/null +++ b/layout/reftests/writing-mode/1134744-radio-checkbox-baseline-1-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1134744 testcase</title> +<meta charset="utf-8"> +<style> +input { margin: 0 } +div { + height: 200px; + margin: 1px; + padding: 1px; +} +</style> +</head> +<body> +<!-- these two blocks should look the same --> +<div style="writing-mode: vertical-lr; text-orientation: sideways-right"> + <label><input type="checkbox">Checkbox</label></br> + <label><input type="radio">Radio</label></br> +</div> +<div style="writing-mode: vertical-rl; text-orientation: sideways-right"> + <label><input type="radio">Radio</label></br> + <label><input type="checkbox">Checkbox</label></br> +</div> +</body> +</html> diff --git a/layout/reftests/writing-mode/1134744-radio-checkbox-baseline-1.html b/layout/reftests/writing-mode/1134744-radio-checkbox-baseline-1.html new file mode 100644 index 0000000000..479b830ccf --- /dev/null +++ b/layout/reftests/writing-mode/1134744-radio-checkbox-baseline-1.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1134744 testcase</title> +<meta charset="utf-8"> +<style> +input { margin: 0 } +div { + height: 200px; + margin: 1px; + padding: 1px; +} +</style> +</head> +<body> +<!-- these two blocks should look the same --> +<div style="writing-mode: vertical-rl; text-orientation: sideways-right"> + <label><input type="radio">Radio</label></br> + <label><input type="checkbox">Checkbox</label></br> +</div> +<div style="writing-mode: vertical-lr; text-orientation: sideways-right"> + <label><input type="checkbox">Checkbox</label></br> + <label><input type="radio">Radio</label></br> +</div> +</body> +</html> diff --git a/layout/reftests/writing-mode/1134849-orthogonal-inline-ref.html b/layout/reftests/writing-mode/1134849-orthogonal-inline-ref.html new file mode 100644 index 0000000000..c059c7f408 --- /dev/null +++ b/layout/reftests/writing-mode/1134849-orthogonal-inline-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Test for bug 1134849</title> + <style> + div { display: inline-block; vertical-align: top; + inline-size: 12em; block-size: 15em; + border: solid silver; margin: 10px; } + p { margin: 5px; } + .h { writing-mode: horizontal-tb; } + .v-lr { writing-mode: vertical-lr; } + .v-rl { writing-mode: vertical-rl; } + p > span, p > b { display: inline-block; } + p > span > b { display: inline; } + </style> + </head> + <body> + <div class="h"> + <p>The <span class="v-lr">quick <b>brown</b> fox</span> jumps over<br>the <b class="v-rl">lazy</b> dog.</p> + </div> + <div class="v-lr"> + <p>The <span class="h">quick <b>brown</b> fox</span> jumps over<br>the <b class="h">lazy</b> dog.</p> + </div> + <div class="v-rl"> + <p>The <span class="h">quick <b>brown</b> fox</span> jumps over<br>the <b class="h">lazy</b> dog.</p> + </div> + <br> + inline-block + </body> +</html> diff --git a/layout/reftests/writing-mode/1134849-orthogonal-inline.html b/layout/reftests/writing-mode/1134849-orthogonal-inline.html new file mode 100644 index 0000000000..26dfc17cd9 --- /dev/null +++ b/layout/reftests/writing-mode/1134849-orthogonal-inline.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Test for bug 1134849</title> + <style> + div { display: inline-block; vertical-align: top; + inline-size: 12em; block-size: 15em; + border: solid silver; margin: 10px; } + p { margin: 5px; } + .h { writing-mode: horizontal-tb; } + .v-lr { writing-mode: vertical-lr; } + .v-rl { writing-mode: vertical-rl; } + span, b { display: inline; } /* but because they're orthogonal, this will compute to inline-block */ + </style> + </head> + <body> + <div class="h"> + <p>The <span class="v-lr" id="test">quick <b>brown</b> fox</span> jumps over<br>the <b class="v-rl">lazy</b> dog.</p> + </div> + <div class="v-lr"> + <p>The <span class="h">quick <b>brown</b> fox</span> jumps over<br>the <b class="h">lazy</b> dog.</p> + </div> + <div class="v-rl"> + <p>The <span class="h">quick <b>brown</b> fox</span> jumps over<br>the <b class="h">lazy</b> dog.</p> + </div> + <br> + <script> + /* this should append "inline-block" to the document, not "inline" */ + document.write(window.getComputedStyle(document.querySelector("#test")).display); + </script> + </body> +</html> diff --git a/layout/reftests/writing-mode/1135361-ruby-justify-1-ref.html b/layout/reftests/writing-mode/1135361-ruby-justify-1-ref.html new file mode 100644 index 0000000000..d7d64b3fa9 --- /dev/null +++ b/layout/reftests/writing-mode/1135361-ruby-justify-1-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Test for bug 1135361</title> + <style> + body { + font: 48px sans-serif; + } + div { + display: inline-block; + width: 3em; + border: 1px solid silver; + padding: .5em; + } + p { + writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; + -ms-writing-mode: tb-rl; /* old syntax. IE */ + text-orientation: upright; + -webkit-text-orientation: upright; + height: 4ch; + } + rt { + font-size: 20%; /* ensure ruby is small enough that it won't affect inline spacing */ + } + span { + display: inline-block; + height: .5ch; /* shim for fake justification */ + } + </style> + </head> + <body> + <div> + <p> + <span></span><ruby>東<rt>to</rt></ruby> + </p> + </div> + <div> + <p style="text-align:right;"> + <ruby>京<rt>kyo</rt></ruby><span></span> + </p> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1135361-ruby-justify-1.html b/layout/reftests/writing-mode/1135361-ruby-justify-1.html new file mode 100644 index 0000000000..880837161b --- /dev/null +++ b/layout/reftests/writing-mode/1135361-ruby-justify-1.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Test for bug 1135361</title> + <style> + body { + font: 48px sans-serif; + } + div { + display: inline-block; + width: 3em; + border: 1px solid silver; + padding: .5em; + } + p { + writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; + -ms-writing-mode: tb-rl; /* old syntax. IE */ + text-orientation: upright; + -webkit-text-orientation: upright; + height: 4ch; + text-align: justify; + text-align-last: justify; + } + rt { + font-size: 20%; /* ensure ruby is small enough that it won't affect inline spacing */ + } + .t { + color: transparent; + } + </style> + </head> + <body> + <div> + <p> + <ruby>東<rt>to</rt></ruby><ruby class="t">京<rt>kyo</rt></ruby> + </p> + </div> + <div> + <p> + <ruby class="t">東<rt>to</rt></ruby><ruby>京<rt>kyo</rt></ruby> + </p> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1136557-1-nested-spans-ref.html b/layout/reftests/writing-mode/1136557-1-nested-spans-ref.html new file mode 100644 index 0000000000..929cce15a1 --- /dev/null +++ b/layout/reftests/writing-mode/1136557-1-nested-spans-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>Testcase, bug 1136557</title> +<style> +.a { font: 12px serif } +.b { font: 12.25px serif } +.c { font: 12.5px serif } +.d { font: 12.75px serif } +.e { font: 12px sans-serif } +.f { font: 12.25px sans-serif } +.g { font: 12.5px sans-serif } +.h { font: 12.75px sans-serif } +.i { font: 12px monospace } +.j { font: 12.25px monospace } +.k { font: 12.5px monospace } +.l { font: 12.75px monospace } +</style> +</head> +<body> +<div style="writing-mode:vertical-lr"> +<p class="a">xyzzy</p> +<p class="b">xyzzy</p> +<p class="c">xyzzy</p> +<p class="d">xyzzy</p> +<p class="e">xyzzy</p> +<p class="f">xyzzy</p> +<p class="g">xyzzy</p> +<p class="h">xyzzy</p> +<p class="i">xyzzy</p> +<p class="j">xyzzy</p> +<p class="k">xyzzy</p> +<p class="l">xyzzy</p> +</div> +</body> +</html> diff --git a/layout/reftests/writing-mode/1136557-1-nested-spans.html b/layout/reftests/writing-mode/1136557-1-nested-spans.html new file mode 100644 index 0000000000..1258523738 --- /dev/null +++ b/layout/reftests/writing-mode/1136557-1-nested-spans.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>Testcase, bug 1136557</title> +<style> +.a { font: 12px serif } +.b { font: 12.25px serif } +.c { font: 12.5px serif } +.d { font: 12.75px serif } +.e { font: 12px sans-serif } +.f { font: 12.25px sans-serif } +.g { font: 12.5px sans-serif } +.h { font: 12.75px sans-serif } +.i { font: 12px monospace } +.j { font: 12.25px monospace } +.k { font: 12.5px monospace } +.l { font: 12.75px monospace } +</style> +</head> +<body> +<div style="writing-mode:vertical-lr"> +<p class="a">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="b">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="c">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="d">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="e">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="f">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="g">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="h">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="i">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="j">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="k">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="l">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +</div> +</body> +</html> diff --git a/layout/reftests/writing-mode/1136557-2-nested-spans-ref.html b/layout/reftests/writing-mode/1136557-2-nested-spans-ref.html new file mode 100644 index 0000000000..753c658de8 --- /dev/null +++ b/layout/reftests/writing-mode/1136557-2-nested-spans-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<html lang="zh-cn"> +<head> +<meta charset="utf-8"> +<title>Testcase, bug 1136557</title> +<style> +.a { font: 12px serif } +.b { font: 12.25px serif } +.c { font: 12.5px serif } +.d { font: 12.75px serif } +.e { font: 12px sans-serif } +.f { font: 12.25px sans-serif } +.g { font: 12.5px sans-serif } +.h { font: 12.75px sans-serif } +.i { font: 12px monospace } +.j { font: 12.25px monospace } +.k { font: 12.5px monospace } +.l { font: 12.75px monospace } +</style> +</head> +<body> +<div style="writing-mode:vertical-lr"> +<p class="a">xyzzy</p> +<p class="b">xyzzy</p> +<p class="c">xyzzy</p> +<p class="d">xyzzy</p> +<p class="e">xyzzy</p> +<p class="f">xyzzy</p> +<p class="g">xyzzy</p> +<p class="h">xyzzy</p> +<p class="i">xyzzy</p> +<p class="j">xyzzy</p> +<p class="k">xyzzy</p> +<p class="l">xyzzy</p> +</div> +</body> +</html> diff --git a/layout/reftests/writing-mode/1136557-2-nested-spans.html b/layout/reftests/writing-mode/1136557-2-nested-spans.html new file mode 100644 index 0000000000..26a6cca72d --- /dev/null +++ b/layout/reftests/writing-mode/1136557-2-nested-spans.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<html lang="zh-cn"> +<head> +<meta charset="utf-8"> +<title>Testcase, bug 1136557</title> +<style> +.a { font: 12px serif } +.b { font: 12.25px serif } +.c { font: 12.5px serif } +.d { font: 12.75px serif } +.e { font: 12px sans-serif } +.f { font: 12.25px sans-serif } +.g { font: 12.5px sans-serif } +.h { font: 12.75px sans-serif } +.i { font: 12px monospace } +.j { font: 12.25px monospace } +.k { font: 12.5px monospace } +.l { font: 12.75px monospace } +</style> +</head> +<body> +<div style="writing-mode:vertical-lr"> +<p class="a">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="b">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="c">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="d">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="e">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="f">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="g">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="h">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="i">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="j">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="k">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="l">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +</div> +</body> +</html> diff --git a/layout/reftests/writing-mode/1136557-3-nested-spans-ref.html b/layout/reftests/writing-mode/1136557-3-nested-spans-ref.html new file mode 100644 index 0000000000..9cbec254fa --- /dev/null +++ b/layout/reftests/writing-mode/1136557-3-nested-spans-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<html lang="ja"> +<head> +<meta charset="utf-8"> +<title>Testcase, bug 1136557</title> +<style> +.a { font: 12px serif } +.b { font: 12.25px serif } +.c { font: 12.5px serif } +.d { font: 12.75px serif } +.e { font: 12px sans-serif } +.f { font: 12.25px sans-serif } +.g { font: 12.5px sans-serif } +.h { font: 12.75px sans-serif } +.i { font: 12px monospace } +.j { font: 12.25px monospace } +.k { font: 12.5px monospace } +.l { font: 12.75px monospace } +</style> +</head> +<body> +<div style="writing-mode:vertical-lr"> +<p class="a">xyzzy</p> +<p class="b">xyzzy</p> +<p class="c">xyzzy</p> +<p class="d">xyzzy</p> +<p class="e">xyzzy</p> +<p class="f">xyzzy</p> +<p class="g">xyzzy</p> +<p class="h">xyzzy</p> +<p class="i">xyzzy</p> +<p class="j">xyzzy</p> +<p class="k">xyzzy</p> +<p class="l">xyzzy</p> +</div> +</body> +</html> diff --git a/layout/reftests/writing-mode/1136557-3-nested-spans.html b/layout/reftests/writing-mode/1136557-3-nested-spans.html new file mode 100644 index 0000000000..3d7297153b --- /dev/null +++ b/layout/reftests/writing-mode/1136557-3-nested-spans.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<html lang="ja"> +<head> +<meta charset="utf-8"> +<title>Testcase, bug 1136557</title> +<style> +.a { font: 12px serif } +.b { font: 12.25px serif } +.c { font: 12.5px serif } +.d { font: 12.75px serif } +.e { font: 12px sans-serif } +.f { font: 12.25px sans-serif } +.g { font: 12.5px sans-serif } +.h { font: 12.75px sans-serif } +.i { font: 12px monospace } +.j { font: 12.25px monospace } +.k { font: 12.5px monospace } +.l { font: 12.75px monospace } +</style> +</head> +<body> +<div style="writing-mode:vertical-lr"> +<p class="a">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="b">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="c">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="d">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="e">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="f">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="g">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="h">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="i">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="j">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="k">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +<p class="l">xy<span><span><span><span><span><span><span><span><span><span>zzy</p> +</div> +</body> +</html> diff --git a/layout/reftests/writing-mode/1138356-1-button-contents-alignment-ref.html b/layout/reftests/writing-mode/1138356-1-button-contents-alignment-ref.html new file mode 100644 index 0000000000..dde5a0c771 --- /dev/null +++ b/layout/reftests/writing-mode/1138356-1-button-contents-alignment-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<html> +<style type="text/css"> +button { + writing-mode: vertical-lr; + -moz-appearance: none; +} +#a { } +#b { width: 50px; } +#c { padding: 20px; } +#d { padding-left: 20px; } +#e { padding-right: 20px; } +#f { width: 50px; padding: 20px; visibility: hidden; } /* expected to mismatch */ +#g { width: 50px; padding-left: 20px; } +#h { width: 50px; padding-right: 20px; } +#i { padding-top: 20px; } +#j { padding-bottom: 20px; } +</style> + +<!-- except for button #f, these should all render the same in both + vertical-rl and vertical-lr writing modes --> +<button id="a">Button</button> +<button id="b">Button</button> +<button id="c">Button</button> +<button id="d">Button</button> +<button id="e">Button</button> +<button id="f">Button</button> +<button id="g">Button</button> +<button id="h">Button</button> +<button id="i">Button</button> +<button id="j">Button</button> diff --git a/layout/reftests/writing-mode/1138356-1-button-contents-alignment.html b/layout/reftests/writing-mode/1138356-1-button-contents-alignment.html new file mode 100644 index 0000000000..545f3adc22 --- /dev/null +++ b/layout/reftests/writing-mode/1138356-1-button-contents-alignment.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<html> +<style type="text/css"> +button { + writing-mode: vertical-rl; + -moz-appearance: none; +} +#a { } +#b { width: 50px; } +#c { padding: 20px; } +#d { padding-left: 20px; } +#e { padding-right: 20px; } +#f { width: 50px; padding: 20px; visibility: hidden; } /* expected to mismatch */ +#g { width: 50px; padding-left: 20px; } +#h { width: 50px; padding-right: 20px; } +#i { padding-top: 20px; } +#j { padding-bottom: 20px; } +</style> + +<!-- except for button #f, these should all render the same in both + vertical-rl and vertical-lr writing modes --> +<button id="a">Button</button> +<button id="b">Button</button> +<button id="c">Button</button> +<button id="d">Button</button> +<button id="e">Button</button> +<button id="f">Button</button> +<button id="g">Button</button> +<button id="h">Button</button> +<button id="i">Button</button> +<button id="j">Button</button> diff --git a/layout/reftests/writing-mode/1138356-2-button-contents-alignment-notref.html b/layout/reftests/writing-mode/1138356-2-button-contents-alignment-notref.html new file mode 100644 index 0000000000..03a4a053ce --- /dev/null +++ b/layout/reftests/writing-mode/1138356-2-button-contents-alignment-notref.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<html> +<style type="text/css"> +button { + writing-mode: vertical-lr; + -moz-appearance: none; + visibility: hidden; +} +#a { } +#b { width: 50px; } +#c { padding: 20px; } +#d { padding-left: 20px; } +#e { padding-right: 20px; } +#f { width: 50px; padding: 20px; visibility: visible; } /* expected to mismatch */ +#g { width: 50px; padding-left: 20px; } +#h { width: 50px; padding-right: 20px; } +#i { padding-top: 20px; } +#j { padding-bottom: 20px; } +</style> + +<!-- except for button #f, these should all render the same in both + vertical-rl and vertical-lr writing modes --> +<button id="a">Button</button> +<button id="b">Button</button> +<button id="c">Button</button> +<button id="d">Button</button> +<button id="e">Button</button> +<button id="f">Button</button> +<button id="g">Button</button> +<button id="h">Button</button> +<button id="i">Button</button> +<button id="j">Button</button> diff --git a/layout/reftests/writing-mode/1138356-2-button-contents-alignment.html b/layout/reftests/writing-mode/1138356-2-button-contents-alignment.html new file mode 100644 index 0000000000..2010b62091 --- /dev/null +++ b/layout/reftests/writing-mode/1138356-2-button-contents-alignment.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<html> +<style type="text/css"> +button { + writing-mode: vertical-rl; + -moz-appearance: none; + visibility: hidden; +} +#a { } +#b { width: 50px; } +#c { padding: 20px; } +#d { padding-left: 20px; } +#e { padding-right: 20px; } +#f { width: 50px; padding: 20px; visibility: visible; } /* expected to mismatch */ +#g { width: 50px; padding-left: 20px; } +#h { width: 50px; padding-right: 20px; } +#i { padding-top: 20px; } +#j { padding-bottom: 20px; } +</style> + +<!-- except for button #f, these should all render the same in both + vertical-rl and vertical-lr writing modes --> +<button id="a">Button</button> +<button id="b">Button</button> +<button id="c">Button</button> +<button id="d">Button</button> +<button id="e">Button</button> +<button id="f">Button</button> +<button id="g">Button</button> +<button id="h">Button</button> +<button id="i">Button</button> +<button id="j">Button</button> diff --git a/layout/reftests/writing-mode/1144501-1-block-end-margin-orthogonal-size-ref.html b/layout/reftests/writing-mode/1144501-1-block-end-margin-orthogonal-size-ref.html new file mode 100644 index 0000000000..bdf34ff763 --- /dev/null +++ b/layout/reftests/writing-mode/1144501-1-block-end-margin-orthogonal-size-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> +<head> + <title>Bug 1144501 testcase</title> + <meta charset="utf-8"> + <style type="text/css"> + .outer { + width: 300px; + height: 100px; + border: 1px solid silver; + margin: 8px 0; + display: inline-block; + vertical-align: top; + } + p { + margin: 0; + background: #eee; + } + .hr { + background-color: green; + border: transparent none 0px; + height: 10px; + margin: 0px; + width: 100%; + } + </style> +</head> +<body> + <div class="outer"> + <p style="margin-top:20px"> + There should be a horizontal green bar the full width of the div. + </p> + <div class="hr"></div> + </div> + <div class="outer"> + <p style="margin-right:20px"> + There should be a horizontal green bar the full width of the div. + </p> + <div class="hr"></div> + </div> + <br> + <div class="outer"> + <p style="margin-bottom:20px"> + There should be a horizontal green bar the full width of the div. + </p> + <div class="hr"></div> + </div> + <div class="outer"> + <p style="margin-left:20px"> + There should be a horizontal green bar the full width of the div. + </p> + <div class="hr"></div> + </div> +</body> +</html> diff --git a/layout/reftests/writing-mode/1144501-1a-block-end-margin-orthogonal-size.html b/layout/reftests/writing-mode/1144501-1a-block-end-margin-orthogonal-size.html new file mode 100644 index 0000000000..5c819ac45b --- /dev/null +++ b/layout/reftests/writing-mode/1144501-1a-block-end-margin-orthogonal-size.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> + <title>Bug 1144501 testcase</title> + <meta charset="utf-8"> + <style type="text/css"> + .outer { + width: 300px; + height: 100px; + border: 1px solid silver; + margin: 8px 0; + display: inline-block; + vertical-align: top; + } + p { + margin: 0; + background: #eee; + } + .hr { + background-color: green; + border: transparent none 0px; + height: 10px; + margin: 0px; + width: 100%; + writing-mode: vertical-lr; + } + </style> +</head> +<body> + <div class="outer"> + <p style="margin-top:20px"> + There should be a horizontal green bar the full width of the div. + </p> + <div class="hr"></div> + </div> + <div class="outer"> + <p style="margin-right:20px"> + There should be a horizontal green bar the full width of the div. + </p> + <div class="hr"></div> + </div> + <br> + <div class="outer"> + <p style="margin-bottom:20px"> + There should be a horizontal green bar the full width of the div. + </p> + <div class="hr"></div> + </div> + <div class="outer"> + <p style="margin-left:20px"> + There should be a horizontal green bar the full width of the div. + </p> + <div class="hr"></div> + </div> +</body> +</html> diff --git a/layout/reftests/writing-mode/1144501-1b-block-end-margin-orthogonal-size.html b/layout/reftests/writing-mode/1144501-1b-block-end-margin-orthogonal-size.html new file mode 100644 index 0000000000..d15952c776 --- /dev/null +++ b/layout/reftests/writing-mode/1144501-1b-block-end-margin-orthogonal-size.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> + <title>Bug 1144501 testcase</title> + <meta charset="utf-8"> + <style type="text/css"> + .outer { + width: 300px; + height: 100px; + border: 1px solid silver; + margin: 8px 0; + display: inline-block; + vertical-align: top; + } + p { + margin: 0; + background: #eee; + } + .hr { + background-color: green; + border: transparent none 0px; + height: 10px; + margin: 0px; + width: 100%; + writing-mode: vertical-rl; + } + </style> +</head> +<body> + <div class="outer"> + <p style="margin-top:20px"> + There should be a horizontal green bar the full width of the div. + </p> + <div class="hr"></div> + </div> + <div class="outer"> + <p style="margin-right:20px"> + There should be a horizontal green bar the full width of the div. + </p> + <div class="hr"></div> + </div> + <br> + <div class="outer"> + <p style="margin-bottom:20px"> + There should be a horizontal green bar the full width of the div. + </p> + <div class="hr"></div> + </div> + <div class="outer"> + <p style="margin-left:20px"> + There should be a horizontal green bar the full width of the div. + </p> + <div class="hr"></div> + </div> +</body> +</html> diff --git a/layout/reftests/writing-mode/1147834-bottom-left-ref.html b/layout/reftests/writing-mode/1147834-bottom-left-ref.html new file mode 100644 index 0000000000..22a7807fe0 --- /dev/null +++ b/layout/reftests/writing-mode/1147834-bottom-left-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Overconstrained relative positioning</title> + <style> + .test { + border: 1px solid black; + height: 200px; + width: 400px; + } + #inner1 { + position: relative; + left: 0px; + top: 20px; + height: 180px; + width: 360px; + background-color: teal; + } + </style> + </head> + <body> + <div class="test"> + <div id="inner1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1147834-bottom-right-ref.html b/layout/reftests/writing-mode/1147834-bottom-right-ref.html new file mode 100644 index 0000000000..7b04cf659b --- /dev/null +++ b/layout/reftests/writing-mode/1147834-bottom-right-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Overconstrained relative positioning</title> + <style> + .test { + border: 1px solid black; + height: 200px; + width: 400px; + } + #inner1 { + position: relative; + left: 40px; + top: 20px; + height: 180px; + width: 360px; + background-color: teal; + } + </style> + </head> + <body> + <div class="test"> + <div id="inner1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1147834-relative-overconstrained-horizontal-tb-ltr.html b/layout/reftests/writing-mode/1147834-relative-overconstrained-horizontal-tb-ltr.html new file mode 100644 index 0000000000..4ce2980af5 --- /dev/null +++ b/layout/reftests/writing-mode/1147834-relative-overconstrained-horizontal-tb-ltr.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Overconstrained relative positioning</title> + <style> + .test { + border: 1px solid black; + height: 200px; + width: 400px; + writing-mode: horizontal-tb; + direction: ltr; + } + #inner1 { + position: relative; + left: 40px; + right: 40px; + top: 20px; + bottom: 20px; + height: 180px; + width: 360px; + background-color: teal; + } + </style> + </head> + <body> + <div class="test"> + <div id="inner1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1147834-relative-overconstrained-horizontal-tb-rtl.html b/layout/reftests/writing-mode/1147834-relative-overconstrained-horizontal-tb-rtl.html new file mode 100644 index 0000000000..1c35de714e --- /dev/null +++ b/layout/reftests/writing-mode/1147834-relative-overconstrained-horizontal-tb-rtl.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Overconstrained relative positioning</title> + <style> + .test { + border: 1px solid black; + height: 200px; + width: 400px; + writing-mode: horizontal-tb; + direction: rtl; + } + #inner1 { + position: relative; + left: 40px; + right: 40px; + top: 20px; + bottom: 20px; + height: 180px; + width: 360px; + background-color: teal; + } + </style> + </head> + <body> + <div class="test"> + <div id="inner1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1147834-relative-overconstrained-vertical-lr-ltr.html b/layout/reftests/writing-mode/1147834-relative-overconstrained-vertical-lr-ltr.html new file mode 100644 index 0000000000..397c7f06eb --- /dev/null +++ b/layout/reftests/writing-mode/1147834-relative-overconstrained-vertical-lr-ltr.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Overconstrained relative positioning</title> + <style> + .test { + border: 1px solid black; + height: 200px; + width: 400px; + writing-mode: vertical-lr; + direction: ltr; + } + #inner1 { + position: relative; + left: 40px; + right: 40px; + top: 20px; + bottom: 20px; + height: 180px; + width: 360px; + background-color: teal; + } + </style> + </head> + <body> + <div class="test"> + <div id="inner1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1147834-relative-overconstrained-vertical-lr-rtl.html b/layout/reftests/writing-mode/1147834-relative-overconstrained-vertical-lr-rtl.html new file mode 100644 index 0000000000..9221df1012 --- /dev/null +++ b/layout/reftests/writing-mode/1147834-relative-overconstrained-vertical-lr-rtl.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Overconstrained relative positioning</title> + <style> + .test { + border: 1px solid black; + height: 200px; + width: 400px; + writing-mode: vertical-lr; + direction: rtl; + } + #inner1 { + position: relative; + left: 40px; + right: 40px; + top: 20px; + bottom: 20px; + height: 180px; + width: 360px; + background-color: teal; + } + </style> + </head> + <body> + <div class="test"> + <div id="inner1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1147834-relative-overconstrained-vertical-rl-ltr.html b/layout/reftests/writing-mode/1147834-relative-overconstrained-vertical-rl-ltr.html new file mode 100644 index 0000000000..cbed4d39d9 --- /dev/null +++ b/layout/reftests/writing-mode/1147834-relative-overconstrained-vertical-rl-ltr.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Overconstrained relative positioning</title> + <style> + .test { + border: 1px solid black; + height: 200px; + width: 400px; + writing-mode: vertical-rl; + direction: ltr; + } + #inner1 { + position: relative; + left: 40px; + right: 40px; + top: 20px; + bottom: 20px; + height: 180px; + width: 360px; + background-color: teal; + } + </style> + </head> + <body> + <div class="test"> + <div id="inner1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1147834-relative-overconstrained-vertical-rl-rtl.html b/layout/reftests/writing-mode/1147834-relative-overconstrained-vertical-rl-rtl.html new file mode 100644 index 0000000000..c6645d489f --- /dev/null +++ b/layout/reftests/writing-mode/1147834-relative-overconstrained-vertical-rl-rtl.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Overconstrained relative positioning</title> + <style> + .test { + border: 1px solid black; + height: 200px; + width: 400px; + writing-mode: vertical-rl; + direction: rtl; + } + #inner1 { + position: relative; + left: 40px; + right: 40px; + top: 20px; + bottom: 20px; + height: 180px; + width: 360px; + background-color: teal; + } + </style> + </head> + <body> + <div class="test"> + <div id="inner1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1147834-top-left-ref.html b/layout/reftests/writing-mode/1147834-top-left-ref.html new file mode 100644 index 0000000000..2b0914c6f9 --- /dev/null +++ b/layout/reftests/writing-mode/1147834-top-left-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Overconstrained relative positioning</title> + <style> + .test { + border: 1px solid black; + height: 200px; + width: 400px; + } + #inner1 { + position: relative; + left: 0px; + top: 0px; + height: 180px; + width: 360px; + background-color: teal; + } + </style> + </head> + <body> + <div class="test"> + <div id="inner1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1147834-top-right-ref.html b/layout/reftests/writing-mode/1147834-top-right-ref.html new file mode 100644 index 0000000000..8fa07ec082 --- /dev/null +++ b/layout/reftests/writing-mode/1147834-top-right-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Overconstrained relative positioning</title> + <style> + .test { + border: 1px solid black; + height: 200px; + width: 400px; + } + #inner1 { + position: relative; + left: 40px; + top: 0px; + height: 180px; + width: 360px; + background-color: teal; + } + </style> + </head> + <body> + <div class="test"> + <div id="inner1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1151993-1-orthogonal-block-size-ref.html b/layout/reftests/writing-mode/1151993-1-orthogonal-block-size-ref.html new file mode 100644 index 0000000000..fe11c1704d --- /dev/null +++ b/layout/reftests/writing-mode/1151993-1-orthogonal-block-size-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Bug 1151993 - sizing of orthogonal block</title> + <style> + .outer { + width: 400px; + height: 300px; + border: 1px solid silver; + overflow: visible; + display: inline-block; + margin: 10px; + vertical-align: top; + } + .test1 { + background: yellow; + width: 100px; + height: 40px; + } + .test2 { + background: yellow; + width: 100px; + height: 300px; + } + </style> + </head> + <body> + <div class="outer"> + <p>Lorem ipsum dolor sit amet, illum harum sed cu, ex mea delectus recteque. + Sit aperiri incorrupte cu. Et eam ullum minim disputando, no usu stet postea.</p> + <div class="test1"></div> + <p>Cu ornatus accusam nam, minim impedit omittantur vel ne. + Qui detraxit temporibus contentiones te.</p> + </div> + <div class="outer"> + <p>Lorem ipsum dolor sit amet, illum harum sed cu, ex mea delectus recteque. + Sit aperiri incorrupte cu. Et eam ullum minim disputando, no usu stet postea.</p> + <div class="test2"></div> + <p>Cu ornatus accusam nam, minim impedit omittantur vel ne. + Qui detraxit temporibus contentiones te.</p> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1151993-1-orthogonal-block-size.html b/layout/reftests/writing-mode/1151993-1-orthogonal-block-size.html new file mode 100644 index 0000000000..7920de7116 --- /dev/null +++ b/layout/reftests/writing-mode/1151993-1-orthogonal-block-size.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Bug 1151993 - sizing of orthogonal block</title> + <style> + .outer { + width: 400px; + height: 300px; + border: 1px solid silver; + overflow: visible; + display: inline-block; + margin: 10px; + vertical-align: top; + } + .v-lr { + writing-mode: vertical-lr; + background: yellow; + font-weight: bold; + width: 100px; + } + span { + display: inline-block; + height: 40px; + } + </style> + </head> + <body> + <div class="outer"> + <p>Lorem ipsum dolor sit amet, illum harum sed cu, ex mea delectus recteque. + Sit aperiri incorrupte cu. Et eam ullum minim disputando, no usu stet postea.</p> + <div class="v-lr"><span class="test"></span></div> <!-- single line: shrink-wrapped --> + <p>Cu ornatus accusam nam, minim impedit omittantur vel ne. + Qui detraxit temporibus contentiones te.</p> + </div> + <div class="outer"> + <p>Lorem ipsum dolor sit amet, illum harum sed cu, ex mea delectus recteque. + Sit aperiri incorrupte cu. Et eam ullum minim disputando, no usu stet postea.</p> + <div class="v-lr"> + <span></span> <span></span> <span></span> <span></span> <span></span> + <span></span> <span></span> <span></span> <span></span> <span></span> + <span></span> <span></span> <span></span> <span></span> <span></span> + </div> <!-- multi-line: use containing block's height as inline size --> + <p>Cu ornatus accusam nam, minim impedit omittantur vel ne. + Qui detraxit temporibus contentiones te.</p> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/1152941-1-orthogonal-blocksize-overflow-ref.html b/layout/reftests/writing-mode/1152941-1-orthogonal-blocksize-overflow-ref.html new file mode 100644 index 0000000000..d7748e024a --- /dev/null +++ b/layout/reftests/writing-mode/1152941-1-orthogonal-blocksize-overflow-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +html { + -webkit-writing-mode: vertical-rl; + writing-mode: vertical-rl; + font: 16px/24px monospace; + padding: 20px; +} +body { + width: 40em; + height: 25em; +} +blockquote { + -webkit-writing-mode: horizontal-tb; + writing-mode: horizontal-tb; + width: 20em; + color: transparent; +} +</style> +</head> + +<body> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac fringilla quam, + eu ultricies augue.</p> + + <blockquote> + <!-- Short enough text that it won't overflow. --> + <p>Ut accumsan dui eu elit dapibus rutrum. Nunc tristique urna eget ex dictum + placerat. Nunc venenatis enim sed odio iaculis, consequat consectetur sem + elementum.</p> + </blockquote> + + <p>Maecenas nec ornare ligula. Phasellus eleifend + elit leo, nec vestibulum sapien consectetur quis.</p> +</body> +</html> diff --git a/layout/reftests/writing-mode/1152941-1-orthogonal-blocksize-overflow.html b/layout/reftests/writing-mode/1152941-1-orthogonal-blocksize-overflow.html new file mode 100644 index 0000000000..5ce03d1525 --- /dev/null +++ b/layout/reftests/writing-mode/1152941-1-orthogonal-blocksize-overflow.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +html { + -webkit-writing-mode: vertical-rl; + writing-mode: vertical-rl; + font: 16px/24px monospace; + padding: 20px; +} +body { + width: 40em; + height: 25em; +} +blockquote { + -webkit-writing-mode: horizontal-tb; + writing-mode: horizontal-tb; + width: 20em; + color: transparent; +} +</style> +</head> + +<body> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac fringilla quam, + eu ultricies augue.</p> + + <blockquote> + <!-- The (invisible) text in the orthogonal block should NOT make following + content vanish if it overflows the <body>'s height! --> + <p>Ut accumsan dui eu elit dapibus rutrum. Nunc tristique urna eget ex dictum + placerat. Nunc venenatis enim sed odio iaculis, consequat consectetur sem + elementum.</p> + + <p>Fusce eros eros, eleifend eget eros at, convallis tempor tortor. Cras + at gravida leo. Proin ultricies ipsum vitae felis suscipit, a tincidunt orci + mattis. Cras in suscipit mauris.</p> + + <p>Etiam eu pellentesque nisi. Quisque + ullamcorper dui odio, eu feugiat nunc interdum vitae. Morbi egestas dolor a + nulla pellentesque, faucibus tincidunt diam facilisis. Suspendisse at urna + varius, pellentesque nibh non, venenatis ante.</p> + + <p>Nullam aliquet orci vel dui + dapibus, nec facilisis enim interdum. Morbi condimentum venenatis commodo. Sed + viverra diam nec lacinia congue. Etiam ultrices luctus volutpat.</p> + </blockquote> + + <p>Maecenas nec ornare ligula. Phasellus eleifend + elit leo, nec vestibulum sapien consectetur quis.</p> +</body> +</html> diff --git a/layout/reftests/writing-mode/1156021-text-indent-percent-ref.html b/layout/reftests/writing-mode/1156021-text-indent-percent-ref.html new file mode 100644 index 0000000000..0bb7fcba82 --- /dev/null +++ b/layout/reftests/writing-mode/1156021-text-indent-percent-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +body { + font-size: 10px; +} +div { + width: 100px; + height: 200px; + margin: 5px; + border: 1px solid silver; + display: inline-block; + vertical-align: top; +} +p { + inline-size: 100%; + margin: 0; +} +span { + display: inline-block; + width: 20px; + height: 20px; + background: green; + position: relative; +} +</style> +</head> +<body> +<div> <p><span style="left: 20px;"></span></p> </div> +<div> <p><span style="left: 60px;"></span></p> </div> +<div> <p><span style="top: 40px;"></span></p> </div> +<div> <p><span style="top: 140px;"></span></p> </div> +<div> <p><span style="top: 40px; left: 80px;"></span></p> </div> +<div> <p><span style="top: 140px; left: 80px;"></span></p> </div> +<br> +<div> <p><span style="left: 20px;"></span></p> </div> +<div> <p><span style="left: 60px;"></span></p> </div> +<div> <p><span style="top: 40px;"></span></p> </div> +<div> <p><span style="top: 140px;"></span></p> </div> +<div> <p><span style="top: 40px;"></span></p> </div> +<div> <p><span style="top: 140px;"></span></p> </div> +</body> +</html> diff --git a/layout/reftests/writing-mode/1156021-text-indent-percent.html b/layout/reftests/writing-mode/1156021-text-indent-percent.html new file mode 100644 index 0000000000..b37a202e2c --- /dev/null +++ b/layout/reftests/writing-mode/1156021-text-indent-percent.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +body { + font-size: 10px; +} +div { + width: 100px; + height: 200px; + margin: 5px; + border: 1px solid silver; + display: inline-block; + vertical-align: top; +} +.vlr { + writing-mode: vertical-lr; +} +.vrl { + writing-mode: vertical-rl; +} +p { + inline-size: 100%; + text-indent: 20%; + margin: 0; +} +span { + display: inline-block; + width: 20px; + height: 20px; + background: green; +} +</style> +</head> +<body> +<div> <p><span></span></p> </div> +<div dir="rtl"> <p><span></span></p> </div> +<div class="vlr"> <p><span></span></p> </div> +<div class="vlr" dir="rtl"> <p><span></span></p> </div> +<div class="vrl"> <p><span></span></p> </div> +<div class="vrl" dir="rtl"> <p><span></span></p> </div> +<br> +<div> <p><span></span></p> </div> +<div> <p dir="rtl"><span></span></p> </div> +<div> <p class="vlr"><span></span></p> </div> +<div> <p class="vlr" dir="rtl"><span></span></p> </div> +<div> <p class="vrl"><span></span></p> </div> +<div> <p class="vrl" dir="rtl"><span></span></p> </div> +</body> +</html> diff --git a/layout/reftests/writing-mode/1157752-upright-bidi-ref.html b/layout/reftests/writing-mode/1157752-upright-bidi-ref.html new file mode 100644 index 0000000000..6be780e664 --- /dev/null +++ b/layout/reftests/writing-mode/1157752-upright-bidi-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +body { + -webkit-writing-mode: vertical-rl; + writing-mode: vertical-rl; + font: 16px/24px sans-serif; + padding: 20px; + width: 300px; + height: 400px; +} +.sideways { + -webkit-text-orientation: sideways-right; + text-orientation: sideways-right; +} +.upright { + -webkit-text-orientation: upright; + text-orientation: upright; +} +</style> +</head> + +<body> +<div class=sideways> +Bidi עברית text +</div> + +<div dir=rtl class=sideways> +Bidi עברית text +</div> + +<div class=upright> +<bdo dir=ltr>Bidi עברית text</bdo> +</div> + +<div dir=rtl class=upright> +<bdo dir=ltr>Bidi עברית text</bdo> +</div> + +</body> +</html> diff --git a/layout/reftests/writing-mode/1157752-upright-bidi.html b/layout/reftests/writing-mode/1157752-upright-bidi.html new file mode 100644 index 0000000000..551e75b122 --- /dev/null +++ b/layout/reftests/writing-mode/1157752-upright-bidi.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +body { + -webkit-writing-mode: vertical-rl; + writing-mode: vertical-rl; + font: 16px/24px sans-serif; + padding: 20px; + width: 300px; + height: 400px; +} +.sideways { + -webkit-text-orientation: sideways-right; + text-orientation: sideways-right; +} +.upright { + -webkit-text-orientation: upright; + text-orientation: upright; +} +</style> +</head> + +<body> +<div class=sideways> +Bidi עברית text +</div> + +<div dir=rtl class=sideways> +Bidi עברית text +</div> + +<div class=upright> +Bidi עברית text +</div> + +<div dir=rtl class=upright> +Bidi עברית text +</div> + +</body> +</html> diff --git a/layout/reftests/writing-mode/1157758-1-vertical-arabic-ref.html b/layout/reftests/writing-mode/1157758-1-vertical-arabic-ref.html new file mode 100644 index 0000000000..e3ec37a5a3 --- /dev/null +++ b/layout/reftests/writing-mode/1157758-1-vertical-arabic-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +html { + -webkit-writing-mode: vertical-rl; + writing-mode: vertical-rl; + -webkit-text-orientation: upright; + text-orientation: upright; +} +</style> +</head> + +<body> + 你 <bdo dir=ltr>ا‌ل‌ع‌ر‌ب‌ي</bdo> 好！ +</body> +</html> diff --git a/layout/reftests/writing-mode/1157758-1-vertical-arabic.html b/layout/reftests/writing-mode/1157758-1-vertical-arabic.html new file mode 100644 index 0000000000..ddd084379a --- /dev/null +++ b/layout/reftests/writing-mode/1157758-1-vertical-arabic.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +html { + -webkit-writing-mode: vertical-rl; + writing-mode: vertical-rl; + -webkit-text-orientation: upright; + text-orientation: upright; +} +</style> +</head> + +<body> + 你 العربي 好！ +</body> +</html> diff --git a/layout/reftests/writing-mode/1158549-1-vertical-block-size-constraints-ref.html b/layout/reftests/writing-mode/1158549-1-vertical-block-size-constraints-ref.html new file mode 100644 index 0000000000..15520d034d --- /dev/null +++ b/layout/reftests/writing-mode/1158549-1-vertical-block-size-constraints-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +body { + font: 16px/20px sans-serif; + width: 600px; + height: 500px; + padding: 5px; + border: 1px solid gray; +} +blockquote { + background: #eee; + -webkit-writing-mode: vertical-rl; + writing-mode: vertical-rl; + width: 600px; + height: 200px; + margin: 0; + padding: 10px 0; +} +</style> +</head> + +<body> +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac fringilla quam, +eu ultricies augue. Aliquam ante orci, egestas eu pulvinar eget, ullamcorper eu +elit. Phasellus tristique vulputate odio, quis ultricies justo rutrum in. Mauris +auctor est in sagittis eleifend.</p> + +<blockquote> +<p>Ut accumsan dui eu elit dapibus rutrum. Nunc tristique urna eget ex dictum +placerat. Nunc venenatis enim sed odio iaculis, consequat consectetur sem +elementum. Fusce eros eros, eleifend eget eros at, convallis tempor tortor. Cras +at gravida leo. Proin ultricies ipsum vitae felis suscipit, a tincidunt orci +mattis. Cras in suscipit mauris.</p> +</blockquote> + +<p>Vivamus lobortis hendrerit vehicula. Nullam dapibus ante et commodo lacinia. +Sed tincidunt pretium ligula, eget porta metus pharetra eget. Mauris pharetra +tortor convallis nisi varius facilisis.</p> + +</body> +</html> diff --git a/layout/reftests/writing-mode/1158549-1-vertical-block-size-constraints.html b/layout/reftests/writing-mode/1158549-1-vertical-block-size-constraints.html new file mode 100644 index 0000000000..2ef3d1cda2 --- /dev/null +++ b/layout/reftests/writing-mode/1158549-1-vertical-block-size-constraints.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +body { + font: 16px/20px sans-serif; + width: 600px; + height: 500px; + padding: 5px; + border: 1px solid gray; +} +blockquote { + background: #eee; + -webkit-writing-mode: vertical-rl; + writing-mode: vertical-rl; + min-width: 100%; + max-height: 40%; + margin: 0; + padding: 10px 0; +} +</style> +</head> + +<body> +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac fringilla quam, +eu ultricies augue. Aliquam ante orci, egestas eu pulvinar eget, ullamcorper eu +elit. Phasellus tristique vulputate odio, quis ultricies justo rutrum in. Mauris +auctor est in sagittis eleifend.</p> + +<blockquote> +<p>Ut accumsan dui eu elit dapibus rutrum. Nunc tristique urna eget ex dictum +placerat. Nunc venenatis enim sed odio iaculis, consequat consectetur sem +elementum. Fusce eros eros, eleifend eget eros at, convallis tempor tortor. Cras +at gravida leo. Proin ultricies ipsum vitae felis suscipit, a tincidunt orci +mattis. Cras in suscipit mauris.</p> +</blockquote> + +<p>Vivamus lobortis hendrerit vehicula. Nullam dapibus ante et commodo lacinia. +Sed tincidunt pretium ligula, eget porta metus pharetra eget. Mauris pharetra +tortor convallis nisi varius facilisis.</p> + +</body> +</html> diff --git a/layout/reftests/writing-mode/1163238-orthogonal-auto-margins-ref.html b/layout/reftests/writing-mode/1163238-orthogonal-auto-margins-ref.html new file mode 100644 index 0000000000..2842969d09 --- /dev/null +++ b/layout/reftests/writing-mode/1163238-orthogonal-auto-margins-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <style> + body { + border: 1px solid blue; + } + .vlr { + border: 5px solid green; + width: 200px; + height: 400px; + margin: 0px auto; + } + .h1 { + border: 10px solid red; + width: 100px; + height: 200px; + margin-top: 90px; + } + .vrl { + background: yellow; + width: 50px; + height: 75px; + padding-top: 25px; + margin-left: 25px; + } + .h2 { + background: black; + width: 20px; + height: 50px; + margin-left: 30px; + } + </style> +</head> +<body> + <div class="vlr"> + <div class="h1"> + <div class="vrl"> + <div class="h2"> diff --git a/layout/reftests/writing-mode/1163238-orthogonal-auto-margins.html b/layout/reftests/writing-mode/1163238-orthogonal-auto-margins.html new file mode 100644 index 0000000000..e4758ec6fe --- /dev/null +++ b/layout/reftests/writing-mode/1163238-orthogonal-auto-margins.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <style> + body { + border: 1px solid blue; + } + .vlr { + border: 5px solid green; + width: 200px; + height: 400px; + writing-mode: vertical-lr; + margin: auto; + } + .h1 { + border: 10px solid red; + width: 100px; + height: 200px; + writing-mode: horizontal-tb; + margin: auto; + } + .vrl { + background: yellow; + width: 50px; + height: 100px; + writing-mode: vertical-rl; + margin: auto; + } + .h2 { + background: black; + width: 20px; + height: 50px; + writing-mode: horizontal-tb; + margin: auto; + } + </style> +</head> +<body> + <div class="vlr"> + <div class="h1"> + <div class="vrl"> + <div class="h2"> diff --git a/layout/reftests/writing-mode/1174450-intrinsic-sizing-ref.html b/layout/reftests/writing-mode/1174450-intrinsic-sizing-ref.html new file mode 100644 index 0000000000..3645fa0066 --- /dev/null +++ b/layout/reftests/writing-mode/1174450-intrinsic-sizing-ref.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1174450</title> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; line-height:16px; padding:0; margin:0; } + +div.v, div.h { + display: block; + position: relative; + border: 1px dashed silver; + width:74px; + height:24px; +} +div.h { + width:62px; + height:61.2px; +} +.h span { + margin: 7px 13px 32px 12px; + padding: 1px 3px 6px 19px; +} +.v span { + margin: 7px 13px 30px 5px; + padding: 1px 3px 2px 7px; +} + +span { + display: block; + position: absolute; + width: 30px; + height: 10px; + background: lime; + border-width: 5px 9px 1px 7px; + border-style: solid; +} + +.a { position:absolute; } +.t2 {top:100px;} +.t3 {top:200px;} +.t4 {top:300px;} + + </style> +</head> +<body> + + +<div class="a t1"> +<pre>vertical container, horizontal child</pre> +<div class="v"><span class="h"></span></div> +</div> +<div class="a t2"> +<pre>vertical container, vertical child</pre> +<div class="v"><span class="v"></span></div> +</div> +<div class="a t3"> +<pre>horizontal container, horizontal child</pre> +<div class="h"><span class="h"></span></div> +</div> +<div class="a t4"> +<pre>horizontal container, vertical child</pre> +<div class="h"><span class="v"></span></div> +</div> + +</body> +</html> diff --git a/layout/reftests/writing-mode/1174450-intrinsic-sizing.html b/layout/reftests/writing-mode/1174450-intrinsic-sizing.html new file mode 100644 index 0000000000..e7cd5585c4 --- /dev/null +++ b/layout/reftests/writing-mode/1174450-intrinsic-sizing.html @@ -0,0 +1,63 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1174450</title> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; line-height:16px; padding:0; margin:0; } + +div.h, div.v { + display: block; + border: 1px dashed silver; + float: left; +} +.v { + writing-mode: vertical-lr; +} +.h { + writing-mode: horizontal-tb; +} + +span { + display: block; + width: 30px; + height: 10px; + background: lime; + margin: 7px 13px 50% 20%; + padding: 1px 3px 10% 30%; + border-width: 5px 9px 1px 7px; + border-style: solid; +} + +.a { position:absolute; } +.t2 {top:100px;} +.t3 {top:200px;} +.t4 {top:300px;} + + </style> +</head> +<body> + + +<div class="a t1"> +<pre>vertical container, horizontal child</pre> +<div class="v"><span class="h"></span></div> +</div> +<div class="a t2"> +<pre>vertical container, vertical child</pre> +<div class="v"><span class="v"></span></div> +</div> +<div class="a t3"> +<pre>horizontal container, horizontal child</pre> +<div class="h"><span class="h"></span></div> +</div> +<div class="a t4"> +<pre>horizontal container, vertical child</pre> +<div class="h"><span class="v"></span></div> +</div> + +</body> +</html> diff --git a/layout/reftests/writing-mode/1175789-underline-overline-1-ref.html b/layout/reftests/writing-mode/1175789-underline-overline-1-ref.html new file mode 100644 index 0000000000..b788d6bae8 --- /dev/null +++ b/layout/reftests/writing-mode/1175789-underline-overline-1-ref.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<html> + <head> + <title>Bug 1175789 - underline and overline in various language</title> + <style type="text/css"> + body { + font-family: "Arial", "Helvetica", "sans-serif"; + } + div { + padding: .5em 1em; + line-height: 2em; + } + .underline { + text-decoration: underline; + } + .overline { + text-decoration: overline; + } + </style> + </head> + <body> + <dl> + <dt>lang="en-US"</dt> + <dd lang="en-US"> + <div style="writing-mode: vertical-rl;"> + <span class="underline">underline</span><br> + <span class="overline">overline</span> + </div> + <div style="writing-mode: vertical-lr;"> + <span class="underline">underline</span><br> + <span class="overline">overline</span> + </div> + </dd> + <dt>lang="ja"</dt> + <dd lang="en-US"> + <div style="writing-mode: vertical-rl;"> + <span class="overline">underline</span><br> + <span class="underline">overline</span> + </div> + <div style="writing-mode: vertical-lr;"> + <span class="overline">underline</span><br> + <span class="underline">overline</span> + </div> + </dd> + <dt>lang="ko"</dt> + <dd lang="en-US"> + <div style="writing-mode: vertical-rl;"> + <span class="overline">underline</span><br> + <span class="underline">overline</span> + </div> + <div style="writing-mode: vertical-lr;"> + <span class="overline">underline</span><br> + <span class="underline">overline</span> + </div> + </dd> + <dt>lang="ja-JP"</dt> + <dd lang="en-US"> + <div style="writing-mode: vertical-rl;"> + <span class="overline">underline</span><br> + <span class="underline">overline</span> + </div> + <div style="writing-mode: vertical-lr;"> + <span class="overline">underline</span><br> + <span class="underline">overline</span> + </div> + </dd> + <dt>lang="ko-KR"</dt> + <dd lang="en-US"> + <div style="writing-mode: vertical-rl;"> + <span class="overline">underline</span><br> + <span class="underline">overline</span> + </div> + <div style="writing-mode: vertical-lr;"> + <span class="overline">underline</span><br> + <span class="underline">overline</span> + </div> + </dd> + <dt>lang="zh"</dt> + <dd lang="en-US"> + <div style="writing-mode: vertical-rl;"> + <span class="underline">underline</span><br> + <span class="overline">overline</span> + </div> + <div style="writing-mode: vertical-lr;"> + <span class="underline">underline</span><br> + <span class="overline">overline</span> + </div> + </dd> + </dl> + </body> +</html> diff --git a/layout/reftests/writing-mode/1175789-underline-overline-1.html b/layout/reftests/writing-mode/1175789-underline-overline-1.html new file mode 100644 index 0000000000..1044a9dca5 --- /dev/null +++ b/layout/reftests/writing-mode/1175789-underline-overline-1.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<html> + <head> + <title>Bug 1175789 - underline and overline in various language</title> + <style type="text/css"> + body { + font-family: "Arial", "Helvetica", "sans-serif"; + } + div { + padding: .5em 1em; + line-height: 2em; + } + .underline { + text-decoration: underline; + } + .overline { + text-decoration: overline; + } + </style> + </head> + <body> + <dl> + <dt>lang="en-US"</dt> + <dd lang="en-US"> + <div style="writing-mode: vertical-rl;"> + <span class="underline">underline</span><br> + <span class="overline">overline</span> + </div> + <div style="writing-mode: vertical-lr;"> + <span class="underline">underline</span><br> + <span class="overline">overline</span> + </div> + </dd> + <dt>lang="ja"</dt> + <dd lang="ja"> + <div style="writing-mode: vertical-rl;"> + <span class="underline">underline</span><br> + <span class="overline">overline</span> + </div> + <div style="writing-mode: vertical-lr;"> + <span class="underline">underline</span><br> + <span class="overline">overline</span> + </div> + </dd> + <dt>lang="ko"</dt> + <dd lang="ko"> + <div style="writing-mode: vertical-rl;"> + <span class="underline">underline</span><br> + <span class="overline">overline</span> + </div> + <div style="writing-mode: vertical-lr;"> + <span class="underline">underline</span><br> + <span class="overline">overline</span> + </div> + </dd> + <dt>lang="ja-JP"</dt> + <dd lang="ja-JP"> + <div style="writing-mode: vertical-rl;"> + <span class="underline">underline</span><br> + <span class="overline">overline</span> + </div> + <div style="writing-mode: vertical-lr;"> + <span class="underline">underline</span><br> + <span class="overline">overline</span> + </div> + </dd> + <dt>lang="ko-KR"</dt> + <dd lang="ko-KR"> + <div style="writing-mode: vertical-rl;"> + <span class="underline">underline</span><br> + <span class="overline">overline</span> + </div> + <div style="writing-mode: vertical-lr;"> + <span class="underline">underline</span><br> + <span class="overline">overline</span> + </div> + </dd> + <dt>lang="zh"</dt> + <dd lang="zh"> + <div style="writing-mode: vertical-rl;"> + <span class="underline">underline</span><br> + <span class="overline">overline</span> + </div> + <div style="writing-mode: vertical-lr;"> + <span class="underline">underline</span><br> + <span class="overline">overline</span> + </div> + </dd> + </dl> + </body> +</html> diff --git a/layout/reftests/writing-mode/1188061-1-nsChangeHint_ClearAncestorIntrinsics-ref.html b/layout/reftests/writing-mode/1188061-1-nsChangeHint_ClearAncestorIntrinsics-ref.html new file mode 100644 index 0000000000..90e80637b2 --- /dev/null +++ b/layout/reftests/writing-mode/1188061-1-nsChangeHint_ClearAncestorIntrinsics-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> + +html { writing-mode: vertical-rl; } + +</style> +<body> + +<p>The following blue box should have uniform padding around all sides.</p> + +<div style="float: left; background: olive; padding: 5px;"> + <div id="c" style="background: blue; height: 100px; width: 100px"> + </div> +</div> + +<p style="clear:left">Note that if you zoom the page after it loads +it fixes the problem by causing a reflow.</p> diff --git a/layout/reftests/writing-mode/1188061-1-nsChangeHint_ClearAncestorIntrinsics.html b/layout/reftests/writing-mode/1188061-1-nsChangeHint_ClearAncestorIntrinsics.html new file mode 100644 index 0000000000..44f90e85ed --- /dev/null +++ b/layout/reftests/writing-mode/1188061-1-nsChangeHint_ClearAncestorIntrinsics.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<style> + +html { writing-mode: vertical-rl; } + +</style> +<body> + +<p>The following blue box should have uniform padding around all sides.</p> + +<div style="float: left; background: olive; padding: 5px;"> + <div id="c" style="background: blue; height: 200px; width: 100px"> + </div> +</div> + +<p style="clear:left">Note that if you zoom the page after it loads +it fixes the problem by causing a reflow.</p> + +<script> + +var div = document.getElementById("c") +var flush_and_ignore = div.offsetTop; +div.style.height = "100px"; + +</script> diff --git a/layout/reftests/writing-mode/1188061-2-nsChangeHint_UpdateComputedBSize-ref.html b/layout/reftests/writing-mode/1188061-2-nsChangeHint_UpdateComputedBSize-ref.html new file mode 100644 index 0000000000..716e11c603 --- /dev/null +++ b/layout/reftests/writing-mode/1188061-2-nsChangeHint_UpdateComputedBSize-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html> +<style> + +html { writing-mode: vertical-rl; } + +</style> +<body> + +<p>The following image should have uniform padding around all sides.</p> + + +<div style="width: 150px; float: left; background: yellow; padding: 5px;"> + <div style="width: 100%"> + <!-- 32x32 blue image --> + <img style="width: 100%" src="data:image/png; charset=binary;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAChJREFUSMftzUEBAAAEBLCjf2dK8NsKrJLJp84zgUAgEAgEAoFAcGUBocYBP+pqhN4AAAAASUVORK5CYII="> + </div> +</div> + +<p style="clear:left">Note that if you zoom the page after it loads +it fixes the problem by causing a reflow.</p> diff --git a/layout/reftests/writing-mode/1188061-2-nsChangeHint_UpdateComputedBSize.html b/layout/reftests/writing-mode/1188061-2-nsChangeHint_UpdateComputedBSize.html new file mode 100644 index 0000000000..22c32aefda --- /dev/null +++ b/layout/reftests/writing-mode/1188061-2-nsChangeHint_UpdateComputedBSize.html @@ -0,0 +1,34 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<style> + +html { writing-mode: vertical-rl; } + +</style> +<body onload="run()"> + +<p>The following image should have uniform padding around all sides.</p> + + +<div style="width: 200px; float: left; background: yellow; padding: 5px;"> + <div style="width: 100%"> + <!-- 32x32 blue image --> + <img style="width: 100%" src="data:image/png; charset=binary;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAChJREFUSMftzUEBAAAEBLCjf2dK8NsKrJLJp84zgUAgEAgEAoFAcGUBocYBP+pqhN4AAAAASUVORK5CYII="> + </div> +</div> + +<p style="clear:left">Note that if you zoom the page after it loads +it fixes the problem by causing a reflow.</p> + +<script> + +function run() { + /* needs to happen after the image loads */ + var img = document.getElementsByTagName("img")[0]; + var flush_and_ignore = img.offsetTop; + img.parentNode.parentNode.style.width = "150px"; + + document.documentElement.removeAttribute("class"); +} + +</script> diff --git a/layout/reftests/writing-mode/1193519-sideways-lr-1-ref.html b/layout/reftests/writing-mode/1193519-sideways-lr-1-ref.html new file mode 100644 index 0000000000..e3c96714c7 --- /dev/null +++ b/layout/reftests/writing-mode/1193519-sideways-lr-1-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +div { padding: 5px; display: inline-block; } +span { display: block; width: 2em; } +span:nth-child(1) { background: red; height: 1em; } +span:nth-child(2) { background: orange; height: 1.1em; } +span:nth-child(3) { background: yellow; height: 1.3em; } +span:nth-child(4) { background: green; height: 1.5em; } +span:nth-child(5) { background: blue; height: 1.7em; } +span:nth-child(6) { background: indigo; height: 1.9em; } +span:nth-child(7) { background: violet; height: 2em; } +</style> +</head> + +<body> + +<p>All four columns should look the same: +<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> +<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> +<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> +<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> diff --git a/layout/reftests/writing-mode/1193519-sideways-lr-1.html b/layout/reftests/writing-mode/1193519-sideways-lr-1.html new file mode 100644 index 0000000000..66df9d85f7 --- /dev/null +++ b/layout/reftests/writing-mode/1193519-sideways-lr-1.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +div { padding: 5px; display: inline-block; } +.vlr { writing-mode: vertical-lr; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; text-orientation: sideways; } +.slr { writing-mode: sideways-lr; } +.srl { writing-mode: sideways-rl; } +span { display: inline-block; block-size: 2em; vertical-align: middle; } +span:nth-child(1) { background: red; inline-size: 1em; } +span:nth-child(2) { background: orange; inline-size: 1.1em; } +span:nth-child(3) { background: yellow; inline-size: 1.3em; } +span:nth-child(4) { background: green; inline-size: 1.5em; } +span:nth-child(5) { background: blue; inline-size: 1.7em; } +span:nth-child(6) { background: indigo; inline-size: 1.9em; } +span:nth-child(7) { background: violet; inline-size: 2em; } +</style> +</head> + +<body> + +<p>All four columns should look the same: +<div dir=ltr class="vrl"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> +<div dir=ltr class="vlr"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> +<div dir=ltr class="srl"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> +<div dir=rtl class="slr"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> diff --git a/layout/reftests/writing-mode/1193519-sideways-lr-2-ref.html b/layout/reftests/writing-mode/1193519-sideways-lr-2-ref.html new file mode 100644 index 0000000000..681cb2890a --- /dev/null +++ b/layout/reftests/writing-mode/1193519-sideways-lr-2-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +div { padding: 5px; display: inline-block; } +span { display: block; width: 2em; } +span:nth-child(7) { background: red; height: 1em; } +span:nth-child(6) { background: orange; height: 1.1em; } +span:nth-child(5) { background: yellow; height: 1.3em; } +span:nth-child(4) { background: green; height: 1.5em; } +span:nth-child(3) { background: blue; height: 1.7em; } +span:nth-child(2) { background: indigo; height: 1.9em; } +span:nth-child(1) { background: violet; height: 2em; } +</style> +</head> + +<body> + +<p>All four columns should look the same: +<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> +<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> +<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> +<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> diff --git a/layout/reftests/writing-mode/1193519-sideways-lr-2.html b/layout/reftests/writing-mode/1193519-sideways-lr-2.html new file mode 100644 index 0000000000..5a6e7ea0ea --- /dev/null +++ b/layout/reftests/writing-mode/1193519-sideways-lr-2.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +div { padding: 5px; display: inline-block; } +.vlr { writing-mode: vertical-lr; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; text-orientation: sideways; } +.slr { writing-mode: sideways-lr; } +.srl { writing-mode: sideways-rl; } +span { display: inline-block; block-size: 2em; vertical-align: middle; } +span:nth-child(1) { background: red; inline-size: 1em; } +span:nth-child(2) { background: orange; inline-size: 1.1em; } +span:nth-child(3) { background: yellow; inline-size: 1.3em; } +span:nth-child(4) { background: green; inline-size: 1.5em; } +span:nth-child(5) { background: blue; inline-size: 1.7em; } +span:nth-child(6) { background: indigo; inline-size: 1.9em; } +span:nth-child(7) { background: violet; inline-size: 2em; } +</style> +</head> + +<body> + +<p>All four columns should look the same: +<div dir=rtl class="vrl"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> +<div dir=rtl class="vlr"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> +<div dir=rtl class="srl"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> +<div dir=ltr class="slr"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> diff --git a/layout/reftests/writing-mode/1193519-sideways-lr-3-ref.html b/layout/reftests/writing-mode/1193519-sideways-lr-3-ref.html new file mode 100644 index 0000000000..e9ac42e259 --- /dev/null +++ b/layout/reftests/writing-mode/1193519-sideways-lr-3-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +div { border: 1px solid silver; padding: 5px; writing-mode: sideways-rl; transform: rotate(180deg); } +span { padding: 5px; color: transparent; } +span:nth-child(1) { background: red; } +span:nth-child(2) { background: orange; } +span:nth-child(3) { background: yellow; } +span:nth-child(4) { background: green; } +span:nth-child(5) { background: blue; } +span:nth-child(6) { background: indigo; } +span:nth-child(7) { background: violet; } +</style> +</head> + +<body> + +<div><span>one</span> <span>two</span> <span>three</span> <span>four</span> + <span>five</span> <span>six</span> <span>seven</span></div> diff --git a/layout/reftests/writing-mode/1193519-sideways-lr-3.html b/layout/reftests/writing-mode/1193519-sideways-lr-3.html new file mode 100644 index 0000000000..09287844eb --- /dev/null +++ b/layout/reftests/writing-mode/1193519-sideways-lr-3.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +div { border: 1px solid silver; padding: 5px; writing-mode: sideways-lr; } +span { padding: 5px; color: transparent; } +span:nth-child(1) { background: red; } +span:nth-child(2) { background: orange; } +span:nth-child(3) { background: yellow; } +span:nth-child(4) { background: green; } +span:nth-child(5) { background: blue; } +span:nth-child(6) { background: indigo; } +span:nth-child(7) { background: violet; } +</style> +</head> + +<body> + +<div><span>one</span> <span>two</span> <span>three</span> <span>four</span> + <span>five</span> <span>six</span> <span>seven</span></div> diff --git a/layout/reftests/writing-mode/1193519-sideways-lr-4-ref.html b/layout/reftests/writing-mode/1193519-sideways-lr-4-ref.html new file mode 100644 index 0000000000..368d38834f --- /dev/null +++ b/layout/reftests/writing-mode/1193519-sideways-lr-4-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +div { display: inline-block; border: 1px solid silver; padding: 5px; + line-height: 2em; writing-mode: sideways-rl; transform: rotate(180deg); } +span { padding: 5px; color: transparent; } +span:nth-child(1) { background: red; } +span:nth-child(2) { background: orange; } +span:nth-child(3) { background: yellow; } +span:nth-child(4) { background: green; } +span:nth-child(5) { background: blue; } +span:nth-child(6) { background: indigo; } +span:nth-child(7) { background: violet; } +</style> +</head> + +<body> + +<div><span>"One</span> <span>two</span> + <span>three</span> <span>four</span> <span>five</span> + <span>six</span> <span>seven."</span></div> + +<div dir=rtl><span>"One</span> <span>two</span> + <span>three</span> <span>four</span> <span>five</span> + <span>six</span> <span>seven."</span></div> diff --git a/layout/reftests/writing-mode/1193519-sideways-lr-4.html b/layout/reftests/writing-mode/1193519-sideways-lr-4.html new file mode 100644 index 0000000000..f01956e3f6 --- /dev/null +++ b/layout/reftests/writing-mode/1193519-sideways-lr-4.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +div { display: inline-block; border: 1px solid silver; padding: 5px; + line-height: 2em; writing-mode: sideways-lr; } +span { padding: 5px; color: transparent; } +span:nth-child(1) { background: red; } +span:nth-child(2) { background: orange; } +span:nth-child(3) { background: yellow; } +span:nth-child(4) { background: green; } +span:nth-child(5) { background: blue; } +span:nth-child(6) { background: indigo; } +span:nth-child(7) { background: violet; } +</style> +</head> + +<body> + +<div><span>"One</span> <span>two</span> + <span>three</span> <span>four</span> <span>five</span> + <span>six</span> <span>seven."</span></div> + +<div dir=rtl><span>"One</span> <span>two</span> + <span>three</span> <span>four</span> <span>five</span> + <span>six</span> <span>seven."</span></div> diff --git a/layout/reftests/writing-mode/1193519-sideways-lr-decoration-1-ref.html b/layout/reftests/writing-mode/1193519-sideways-lr-decoration-1-ref.html new file mode 100644 index 0000000000..24cac4884b --- /dev/null +++ b/layout/reftests/writing-mode/1193519-sideways-lr-decoration-1-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<div style="width:300px; + height:300px; + text-align:center; + line-height:150px; + transform:rotate(-90deg);"> + <span style="text-decoration:underline;">under</span> + <span style="text-decoration:overline;">over</span> + <span style="text-decoration:line-through;">through</span> +</div> diff --git a/layout/reftests/writing-mode/1193519-sideways-lr-decoration-1.html b/layout/reftests/writing-mode/1193519-sideways-lr-decoration-1.html new file mode 100644 index 0000000000..a9cc3dd73b --- /dev/null +++ b/layout/reftests/writing-mode/1193519-sideways-lr-decoration-1.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<div style="width:300px; + height:300px; + text-align:center; + line-height:150px; + writing-mode:sideways-lr;"> + <span style="text-decoration:underline;">under</span> + <span style="text-decoration:overline;">over</span> + <span style="text-decoration:line-through;">through</span> +</div> diff --git a/layout/reftests/writing-mode/1196887-1-computed-display-inline-block-ref.html b/layout/reftests/writing-mode/1196887-1-computed-display-inline-block-ref.html new file mode 100644 index 0000000000..502e5a9645 --- /dev/null +++ b/layout/reftests/writing-mode/1196887-1-computed-display-inline-block-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<p>There should be no red:</p> +<div style="background: green; width: 100px; height: 100px;"></div> diff --git a/layout/reftests/writing-mode/1196887-1-computed-display-inline-block.html b/layout/reftests/writing-mode/1196887-1-computed-display-inline-block.html new file mode 100644 index 0000000000..676cd3d221 --- /dev/null +++ b/layout/reftests/writing-mode/1196887-1-computed-display-inline-block.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<p>There should be no red:</p> +<div style="background: red; width: 100px; height: 100px; position: absolute; z-index: -1;"></div> +<div style="background: green; writing-mode: vertical-rl; width: 100px;"> + <span style="writing-mode: vertical-lr; height: 100px;"> diff --git a/layout/reftests/writing-mode/1205787-legacy-svg-values-1-ref.html b/layout/reftests/writing-mode/1205787-legacy-svg-values-1-ref.html new file mode 100644 index 0000000000..251f574151 --- /dev/null +++ b/layout/reftests/writing-mode/1205787-legacy-svg-values-1-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<style> +/* These are the CSS values that the testcase rules should compute to: */ +.tb { writing-mode: vertical-rl; inline-size: 10em; } +.tbrl { writing-mode: vertical-rl; } +.lr { writing-mode: horizontal-tb; } +</style> +<div class=tb> +Hello +<span class=lr>horizontal</span> +world +</div> + +<div>One <span class=tbrl>two</span> three</div> + +<!-- replace the <span> contents with their computed writing-mode --> +<script> +var s = document.querySelectorAll("span"); +for (i = 0; i < s.length; i++) { + s[i].textContent = window.getComputedStyle(s[i]).writingMode; +} + +document.documentElement.removeAttribute("class"); +</script> diff --git a/layout/reftests/writing-mode/1205787-legacy-svg-values-1.html b/layout/reftests/writing-mode/1205787-legacy-svg-values-1.html new file mode 100644 index 0000000000..2e73e68c41 --- /dev/null +++ b/layout/reftests/writing-mode/1205787-legacy-svg-values-1.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<style> +/* SVG1.1 writing-mode values that should compute to standard CSS values: */ +.tb { writing-mode: tb; inline-size: 10em; } +.tbrl { writing-mode: tb-rl; } +.lr { writing-mode: lr; } +</style> +<div class=tb> +Hello +<span class=lr>horizontal</span> +world +</div> + +<div>One <span class=tbrl>two</span> three</div> + +<!-- replace the <span> contents with their computed writing-mode --> +<script> +var s = document.querySelectorAll("span"); +for (i = 0; i < s.length; i++) { + s[i].textContent = window.getComputedStyle(s[i]).writingMode; +} + +document.documentElement.removeAttribute("class"); +</script> diff --git a/layout/reftests/writing-mode/1216747-1-notref.html b/layout/reftests/writing-mode/1216747-1-notref.html new file mode 100644 index 0000000000..373fd99b7e --- /dev/null +++ b/layout/reftests/writing-mode/1216747-1-notref.html @@ -0,0 +1,3 @@ +<!DOCTYPE HTML> + +<div>This should have min-content width (i.e., many line breaks).</div> diff --git a/layout/reftests/writing-mode/1216747-1-ref.html b/layout/reftests/writing-mode/1216747-1-ref.html new file mode 100644 index 0000000000..b040151976 --- /dev/null +++ b/layout/reftests/writing-mode/1216747-1-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<style> + +div { + width: min-content; +} + +</style> + +<div>This should have min-content width (i.e., many line breaks).</div> diff --git a/layout/reftests/writing-mode/1216747-1.html b/layout/reftests/writing-mode/1216747-1.html new file mode 100644 index 0000000000..6e3fba5077 --- /dev/null +++ b/layout/reftests/writing-mode/1216747-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<style> + +div { + width: min-content; +} + +</style> + +<!-- If you delete this div, the bug goes away, because we don't cache + vertical-specific data in the rule tree. --> +<div style="writing-mode: vertical-rl"></div> + +<div>This should have min-content width (i.e., many line breaks).</div> diff --git a/layout/reftests/writing-mode/1243125-1-floats-overflowing-ref.html b/layout/reftests/writing-mode/1243125-1-floats-overflowing-ref.html new file mode 100644 index 0000000000..35b2d8239a --- /dev/null +++ b/layout/reftests/writing-mode/1243125-1-floats-overflowing-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html>
+<html>
+<head>
+ <title>Bug 1243125 testcase</title>
+ <meta charset="utf-8">
+ <style type="text/css">
+ div {
+ overflow: hidden;
+ height: 20px;
+ width: 300px;
+ background: green;
+ margin: 8px 0;
+ }
+ </style>
+</head>
+<body>
+ <p>There should be 9 green bars</p>
+
+ <div></div>
+ <div></div>
+ <div></div>
+
+ <div></div>
+ <div></div>
+ <div></div>
+
+ <div></div>
+ <div></div>
+ <div></div>
+</body>
+</html>
diff --git a/layout/reftests/writing-mode/1243125-1-floats-overflowing.html b/layout/reftests/writing-mode/1243125-1-floats-overflowing.html new file mode 100644 index 0000000000..463396fbf2 --- /dev/null +++ b/layout/reftests/writing-mode/1243125-1-floats-overflowing.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> + <title>Bug 1243125 testcase</title> + <meta charset="utf-8"> + <style type="text/css"> + div { + overflow: hidden; + height: 20px; + width: 300px; + background: red; + margin: 8px 0; + } + .h-tb { writing-mode: horizontal-tb; } + .v-lr { writing-mode: vertical-lr; } + .v-rl { writing-mode: vertical-rl; } + span { + float: left; + height: 21px; + width: 301px; + background: green; + } + </style> +</head> +<body> + <p>There should be 9 green bars</p> + + <div class="h-tb"><span class="h-tb"></span></div> + <div class="h-tb"><span class="v-lr"></span></div> + <div class="h-tb"><span class="v-rl"></span></div> + + <div class="v-lr"><span class="h-tb"></span></div> + <div class="v-lr"><span class="v-lr"></span></div> + <div class="v-lr"><span class="v-rl"></span></div> + + <div class="v-rl"><span class="h-tb"></span></div> + <div class="v-rl"><span class="v-lr"></span></div> + <div class="v-rl"><span class="v-rl"></span></div> +</body> +</html> diff --git a/layout/reftests/writing-mode/1248248-1-orientation-break-glyphrun-ref.html b/layout/reftests/writing-mode/1248248-1-orientation-break-glyphrun-ref.html new file mode 100644 index 0000000000..60b02f4c3f --- /dev/null +++ b/layout/reftests/writing-mode/1248248-1-orientation-break-glyphrun-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +@font-face { + font-family: test; + src: url('../fonts/gw1270797.ttf') format("truetype"); +} +html { + font-size: 72pt; + font-family: test, sans-serif; + writing-mode: vertical-rl; + text-orientation: mixed; +} +</style> +</head> +<body> +神神神神 +</body> +</html> diff --git a/layout/reftests/writing-mode/1248248-1-orientation-break-glyphrun.html b/layout/reftests/writing-mode/1248248-1-orientation-break-glyphrun.html new file mode 100644 index 0000000000..793c57046f --- /dev/null +++ b/layout/reftests/writing-mode/1248248-1-orientation-break-glyphrun.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +@font-face { + font-family: test; + src: url('../fonts/gw1270797.ttf') format("truetype"); +} +html { + font-size: 72pt; + font-family: test, sans-serif; + writing-mode: vertical-rl; + text-orientation: mixed; +} +</style> +</head> +<body> +神神󠄀神󠄃神︀ +</body> +</html> diff --git a/layout/reftests/writing-mode/1302389-scrolled-rect-1-ref.html b/layout/reftests/writing-mode/1302389-scrolled-rect-1-ref.html new file mode 100644 index 0000000000..ce1d92680b --- /dev/null +++ b/layout/reftests/writing-mode/1302389-scrolled-rect-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<body> +<div style="height: 300px; + width: min-content; + font-size: 0; + line-height: 0; + border: 1px solid gray; + overflow: scroll;"> + <div style="height: 100%; + width: 100px; + border: 50px solid blue;"> diff --git a/layout/reftests/writing-mode/1302389-scrolled-rect-1a.html b/layout/reftests/writing-mode/1302389-scrolled-rect-1a.html new file mode 100644 index 0000000000..48b1563219 --- /dev/null +++ b/layout/reftests/writing-mode/1302389-scrolled-rect-1a.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<body> +<div style="writing-mode: vertical-lr; + height: 300px; + font-size: 0; + line-height: 0; + border: 1px solid gray; + overflow: scroll;"> + <div style="height: 100%; + width: 100px; + border: 50px solid blue;"> diff --git a/layout/reftests/writing-mode/1302389-scrolled-rect-1b.html b/layout/reftests/writing-mode/1302389-scrolled-rect-1b.html new file mode 100644 index 0000000000..a71e0d00c9 --- /dev/null +++ b/layout/reftests/writing-mode/1302389-scrolled-rect-1b.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<body> +<div style="writing-mode: sideways-lr; + height: 300px; + font-size: 0; + line-height: 0; + border: 1px solid gray; + overflow: scroll; + direction: rtl;"> + <div style="height: 100%; + width: 100px; + border: 50px solid blue;"> diff --git a/layout/reftests/writing-mode/1302389-scrolled-rect-1c.html b/layout/reftests/writing-mode/1302389-scrolled-rect-1c.html new file mode 100644 index 0000000000..6e71cf61af --- /dev/null +++ b/layout/reftests/writing-mode/1302389-scrolled-rect-1c.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<script> +function scroll() { + document.getElementsByTagName("div")[0].scrollTop = -200; +} +</script> +<body onload="scroll()"> +<div style="writing-mode: vertical-lr; + height: 300px; + font-size: 0; + line-height: 0; + border: 1px solid gray; + overflow: scroll; + direction: rtl;"> + <div style="height: 100%; + width: 100px; + border: 50px solid blue;"> diff --git a/layout/reftests/writing-mode/1302389-scrolled-rect-1d.html b/layout/reftests/writing-mode/1302389-scrolled-rect-1d.html new file mode 100644 index 0000000000..094cf90125 --- /dev/null +++ b/layout/reftests/writing-mode/1302389-scrolled-rect-1d.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<script> +function scroll() { + document.getElementsByTagName("div")[0].scrollTop = -200; +} +</script> +<body onload="scroll()"> +<div style="writing-mode: sideways-lr; + height: 300px; + font-size: 0; + line-height: 0; + border: 1px solid gray; + overflow: scroll;"> + <div style="height: 100%; + width: 100px; + border: 50px solid blue;"> diff --git a/layout/reftests/writing-mode/1302389-scrolled-rect-2-ref.html b/layout/reftests/writing-mode/1302389-scrolled-rect-2-ref.html new file mode 100644 index 0000000000..01b55031b5 --- /dev/null +++ b/layout/reftests/writing-mode/1302389-scrolled-rect-2-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<script> +function scroll() { + document.getElementsByTagName("div")[0].scrollTop = 200; +} +</script> +<body onload="scroll()"> +<div style="height: 300px; + width: min-content; + font-size: 0; + line-height: 0; + border: 1px solid gray; + overflow: scroll;"> + <div style="height: 100%; + width: 100px; + border: 50px solid blue;"> diff --git a/layout/reftests/writing-mode/1302389-scrolled-rect-2a.html b/layout/reftests/writing-mode/1302389-scrolled-rect-2a.html new file mode 100644 index 0000000000..ecf00333b4 --- /dev/null +++ b/layout/reftests/writing-mode/1302389-scrolled-rect-2a.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<body> +<div style="writing-mode: vertical-lr; + height: 300px; + font-size: 0; + line-height: 0; + border: 1px solid gray; + overflow: scroll; + direction: rtl;"> + <div style="height: 100%; + width: 100px; + border: 50px solid blue;"> diff --git a/layout/reftests/writing-mode/1302389-scrolled-rect-2b.html b/layout/reftests/writing-mode/1302389-scrolled-rect-2b.html new file mode 100644 index 0000000000..5611e0e2cb --- /dev/null +++ b/layout/reftests/writing-mode/1302389-scrolled-rect-2b.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<body> +<div style="writing-mode: sideways-lr; + height: 300px; + font-size: 0; + line-height: 0; + border: 1px solid gray; + overflow: scroll;"> + <div style="height: 100%; + width: 100px; + border: 50px solid blue;"> diff --git a/layout/reftests/writing-mode/1302389-scrolled-rect-2c.html b/layout/reftests/writing-mode/1302389-scrolled-rect-2c.html new file mode 100644 index 0000000000..687d021651 --- /dev/null +++ b/layout/reftests/writing-mode/1302389-scrolled-rect-2c.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<script> +function scroll() { + document.getElementsByTagName("div")[0].scrollTop = 200; +} +</script> +<body onload="scroll()"> +<div style="writing-mode: vertical-lr; + height: 300px; + font-size: 0; + line-height: 0; + border: 1px solid gray; + overflow: scroll;"> + <div style="height: 100%; + width: 100px; + border: 50px solid blue;"> diff --git a/layout/reftests/writing-mode/1302389-scrolled-rect-2d.html b/layout/reftests/writing-mode/1302389-scrolled-rect-2d.html new file mode 100644 index 0000000000..941729cdd3 --- /dev/null +++ b/layout/reftests/writing-mode/1302389-scrolled-rect-2d.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<script> +function scroll() { + document.getElementsByTagName("div")[0].scrollTop = 200; +} +</script> +<body onload="scroll()"> +<div style="writing-mode: sideways-lr; + height: 300px; + font-size: 0; + line-height: 0; + border: 1px solid gray; + overflow: scroll; + direction: rtl;"> + <div style="height: 100%; + width: 100px; + border: 50px solid blue;"> diff --git a/layout/reftests/writing-mode/1302734-bidi-plaintext-1-ref.html b/layout/reftests/writing-mode/1302734-bidi-plaintext-1-ref.html new file mode 100644 index 0000000000..c84053be8a --- /dev/null +++ b/layout/reftests/writing-mode/1302734-bidi-plaintext-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +div { + width: 50px; + height: 100px; + border: 1px solid gray; + display: inline-block; + writing-mode: vertical-rl; +} +</style> +<div>x</div> diff --git a/layout/reftests/writing-mode/1302734-bidi-plaintext-1a.html b/layout/reftests/writing-mode/1302734-bidi-plaintext-1a.html new file mode 100644 index 0000000000..45234bd6cf --- /dev/null +++ b/layout/reftests/writing-mode/1302734-bidi-plaintext-1a.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<style> +div { + width: 50px; + height: 100px; + border: 1px solid gray; + display: inline-block; + writing-mode: vertical-rl; +} +</style> +<!-- unicode-bidi:plaintext should resolve to LTR, ignoring the dir attribute --> +<div dir="rtl" style="unicode-bidi:plaintext;">x</div> diff --git a/layout/reftests/writing-mode/1302734-bidi-plaintext-1b.html b/layout/reftests/writing-mode/1302734-bidi-plaintext-1b.html new file mode 100644 index 0000000000..cd1dc7b005 --- /dev/null +++ b/layout/reftests/writing-mode/1302734-bidi-plaintext-1b.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<style> +div { + width: 50px; + height: 100px; + border: 1px solid gray; + display: inline-block; + writing-mode: vertical-rl; +} +</style> +<!-- unicode-bidi:plaintext should resolve to LTR, ignoring the direction property --> +<div style="direction:rtl; unicode-bidi:plaintext;">x</div> diff --git a/layout/reftests/writing-mode/1302734-bidi-plaintext-2-ref.html b/layout/reftests/writing-mode/1302734-bidi-plaintext-2-ref.html new file mode 100644 index 0000000000..47cdba9edb --- /dev/null +++ b/layout/reftests/writing-mode/1302734-bidi-plaintext-2-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +div { + width: 50px; + height: 100px; + border: 1px solid gray; + display: inline-block; + writing-mode: vertical-rl; +} +</style> +<div style="text-align:end">x</div> diff --git a/layout/reftests/writing-mode/1302734-bidi-plaintext-2a.html b/layout/reftests/writing-mode/1302734-bidi-plaintext-2a.html new file mode 100644 index 0000000000..0d7019f736 --- /dev/null +++ b/layout/reftests/writing-mode/1302734-bidi-plaintext-2a.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<style> +div { + width: 50px; + height: 100px; + border: 1px solid gray; + display: inline-block; + writing-mode: vertical-rl; +} +</style> +<!-- dir="rtl" should make the text bottom-aligned (i.e. line-right) --> +<div dir="rtl">x</div> diff --git a/layout/reftests/writing-mode/1302734-bidi-plaintext-2b.html b/layout/reftests/writing-mode/1302734-bidi-plaintext-2b.html new file mode 100644 index 0000000000..8045069b7b --- /dev/null +++ b/layout/reftests/writing-mode/1302734-bidi-plaintext-2b.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<style> +div { + width: 50px; + height: 100px; + border: 1px solid gray; + display: inline-block; + writing-mode: vertical-rl; +} +</style> +<!-- direction:rtl should make the text bottom-aligned (i.e. line-right) --> +<div style="direction:rtl;">x</div> diff --git a/layout/reftests/writing-mode/1302734-bidi-plaintext-2c.html b/layout/reftests/writing-mode/1302734-bidi-plaintext-2c.html new file mode 100644 index 0000000000..6780133610 --- /dev/null +++ b/layout/reftests/writing-mode/1302734-bidi-plaintext-2c.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<style> +div { + width: 50px; + height: 100px; + border: 1px solid gray; + display: inline-block; + writing-mode: vertical-rl; +} +</style> +<!-- unicode-bidi:plaintext should resolve to RTL, ignoring the dir attribute --> +<div dir="ltr" style="unicode-bidi:plaintext;">‏x</div> diff --git a/layout/reftests/writing-mode/1302734-bidi-plaintext-2d.html b/layout/reftests/writing-mode/1302734-bidi-plaintext-2d.html new file mode 100644 index 0000000000..989415e3ee --- /dev/null +++ b/layout/reftests/writing-mode/1302734-bidi-plaintext-2d.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<style> +div { + width: 50px; + height: 100px; + border: 1px solid gray; + display: inline-block; + writing-mode: vertical-rl; +} +</style> +<!-- unicode-bidi:plaintext should resolve to RTL, ignoring the direction property --> +<div style="direction:ltr; unicode-bidi:plaintext;">‏x</div> diff --git a/layout/reftests/writing-mode/1361631-mongolian-upright-1-ref.html b/layout/reftests/writing-mode/1361631-mongolian-upright-1-ref.html new file mode 100644 index 0000000000..c870b9bc55 --- /dev/null +++ b/layout/reftests/writing-mode/1361631-mongolian-upright-1-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<style> +@font-face { + font-family: test; + src: url(../fonts/NotoSansMongolian-Regular.ttf); +} +div { + writing-mode: vertical-lr; + text-orientation: mixed; + font-family: test; + font-size: 32px; +} +</style> +<div> +ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ diff --git a/layout/reftests/writing-mode/1361631-mongolian-upright-1.html b/layout/reftests/writing-mode/1361631-mongolian-upright-1.html new file mode 100644 index 0000000000..298d6c2552 --- /dev/null +++ b/layout/reftests/writing-mode/1361631-mongolian-upright-1.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<style> +@font-face { + font-family: test; + src: url(../fonts/NotoSansMongolian-Regular.ttf); +} +div { + writing-mode: vertical-lr; + text-orientation: upright; /* should have no effect on Mongolian */ + font-family: test; + font-size: 32px; +} +</style> +<div> +ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ diff --git a/layout/reftests/writing-mode/1395926-vertical-upright-gpos-1-ref.html b/layout/reftests/writing-mode/1395926-vertical-upright-gpos-1-ref.html new file mode 100644 index 0000000000..5ee6f23907 --- /dev/null +++ b/layout/reftests/writing-mode/1395926-vertical-upright-gpos-1-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> + +<style> +@font-face { font-family: Charis; src: url(../fonts/sil/CharisSIL-R.ttf); } +div { writing-mode: vertical-rl; text-orientation: upright; } +p { position: absolute; top: 50px; } +.times { font: 36px Times New Roman, DejaVu Serif, serif; letter-spacing: .25em; left: 50px; } +.arial { font: 36px Arial, DejaVu Sans, sans-serif; letter-spacing: .25em; left: 150px; } +.charis { font: 36px Charis, serif; letter-spacing: .25em; left: 250px; } +.overlay { color: transparent; background: green; } +</style> + +Red diacritics should <i>not</i> extend beyond the green boxes: + +<div> +<p class="times overlay"> A̕ḅ̩c̭d̅ẻ̆̈ +<p class="arial overlay"> A̕ḅ̩c̭d̅ẻ̆̈ +<p class="charis overlay"> A̕ḅ̩c̭d̅ẻ̆̈ +</div> diff --git a/layout/reftests/writing-mode/1395926-vertical-upright-gpos-1.html b/layout/reftests/writing-mode/1395926-vertical-upright-gpos-1.html new file mode 100644 index 0000000000..2f6f46fd38 --- /dev/null +++ b/layout/reftests/writing-mode/1395926-vertical-upright-gpos-1.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> + +<style> +@font-face { font-family: Charis; src: url(../fonts/sil/CharisSIL-R.ttf); } +div { writing-mode: vertical-rl; text-orientation: upright; } +p { position: absolute; top: 50px; color: red; } +.times { font: 36px Times New Roman, DejaVu Serif, serif; letter-spacing: .25em; left: 50px; } +.arial { font: 36px Arial, DejaVu Sans, sans-serif; letter-spacing: .25em; left: 150px; } +.charis { font: 36px Charis, serif; letter-spacing: .25em; left: 250px; } +.overlay { color: transparent; background: green; } +</style> + +Red diacritics should <i>not</i> extend beyond the green boxes: + +<div> +<p class="times"> A̕ḅ̩c̭d̅ẻ̆̈ +<p class="times overlay"> A̕ḅ̩c̭d̅ẻ̆̈ +<p class="arial"> A̕ḅ̩c̭d̅ẻ̆̈ +<p class="arial overlay"> A̕ḅ̩c̭d̅ẻ̆̈ +<p class="charis"> A̕ḅ̩c̭d̅ẻ̆̈ +<p class="charis overlay"> A̕ḅ̩c̭d̅ẻ̆̈ +</div> diff --git a/layout/reftests/writing-mode/1673510-1-ref.html b/layout/reftests/writing-mode/1673510-1-ref.html new file mode 100644 index 0000000000..bbccf2b24f --- /dev/null +++ b/layout/reftests/writing-mode/1673510-1-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<style> +@font-face { + font-family: test; + src: url(../fonts/ShipporiMincho-Regular.subset.otf); +} +.ref { + font: 40px test; + writing-mode: vertical-rl; + float: left; + text-orientation: upright; +} +</style> +<p>The three wavy dash glyphs below should all look the same: + +<div class=ref>〜</div> +<div class=ref>〜</div> +<div class=ref>〜</div> diff --git a/layout/reftests/writing-mode/1673510-1.html b/layout/reftests/writing-mode/1673510-1.html new file mode 100644 index 0000000000..f2769427d6 --- /dev/null +++ b/layout/reftests/writing-mode/1673510-1.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<style> +@font-face { + font-family: test; + src: url(../fonts/ShipporiMincho-Regular.subset.otf); +} +.ref, .test { + font: 40px test; + writing-mode: vertical-rl; + float: left; +} +.ref { + text-orientation: upright; +} +.hide { + color: transparent; +} +</style> +<p>The three wavy dash glyphs below should all look the same: + +<div class=ref>〜</div><!-- with explicit orientation:upright --> +<div class=test>〜<span class=hide>ㄅ</span></div><!-- with bopomofo letter --> +<div class=test>〜<span class=hide>丁</span></div><!-- with CJK ideograph --> diff --git a/layout/reftests/writing-mode/4colors.png b/layout/reftests/writing-mode/4colors.png Binary files differnew file mode 100644 index 0000000000..250273aae3 --- /dev/null +++ b/layout/reftests/writing-mode/4colors.png diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1-ref.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1-ref.html new file mode 100644 index 0000000000..fc6e6b5afb --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; + writing-mode: vertical-lr; position: absolute; left: 0; top: 0; } +.test { background: #aaa; position: absolute; left: 0; top: 0; width: 2em; height: 100%; } +.rel { position: relative; } +img { position: absolute; left: 0; top: 34px; + width: 30px; height: 40px; background: green; border: 5px solid yellow; } +</style> +<body> +<div class="rel"> + <div class="test"><span class="abc">abc</span><img src=""></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1a.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1a.html new file mode 100644 index 0000000000..e3a9f414df --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1a.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vlr { writing-mode: vertical-lr; } +.rel { position: relative; } +img { position: absolute; width: 30px; height: 40px; background: green; border: 5px solid yellow; } +</style> +<body> +<div class="vlr"> + <div class="test"><span class="abc">abc</span><img src=""></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1b.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1b.html new file mode 100644 index 0000000000..12e79285da --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1b.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vlr { writing-mode: vertical-lr; } +.rel { position: relative; } +img { position: absolute; width: 30px; height: 40px; background: green; border: 5px solid yellow; } +</style> +<body> +<div class="vlr rel"> + <div class="test"><span class="abc">abc</span><img src=""></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1c.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1c.html new file mode 100644 index 0000000000..234d9b86fa --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-1c.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vlr { writing-mode: vertical-lr; } +.rel { position: relative; } +img { position: absolute; width: 30px; height: 40px; background: green; border: 5px solid yellow; } +</style> +<body> +<div class="vlr"> + <div class="test rel"><span class="abc">abc</span><img src=""></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2-ref.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2-ref.html new file mode 100644 index 0000000000..69f635771e --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; + writing-mode: vertical-lr; position: absolute; left: 0; top: 0; } +.test { background: #aaa; position: absolute; left: 0; top: 0; width: 2em; height: 100%; } +.rel { position: relative; } +img { position: absolute; left: 0; top: 34px; + background: green; border: 5px solid yellow; } +</style> +<body> +<div class="rel"> + <div class="test"><span class="abc">abc</span><img src="blue-32x32.png"></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2a.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2a.html new file mode 100644 index 0000000000..26a039659f --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2a.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vlr { writing-mode: vertical-lr; } +.rel { position: relative; } +img { position: absolute; background: green; border: 5px solid yellow; } +</style> +<body> +<div class="vlr"> + <div class="test"><span class="abc">abc</span><img src="blue-32x32.png"></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2b.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2b.html new file mode 100644 index 0000000000..d5960f00f2 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2b.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vlr { writing-mode: vertical-lr; } +.rel { position: relative; } +img { position: absolute; background: green; border: 5px solid yellow; } +</style> +<body> +<div class="vlr rel"> + <div class="test"><span class="abc">abc</span><img src="blue-32x32.png"></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2c.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2c.html new file mode 100644 index 0000000000..37798c920f --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-2c.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vlr { writing-mode: vertical-lr; } +.rel { position: relative; } +img { position: absolute; background: green; border: 5px solid yellow; } +</style> +<body> +<div class="vlr"> + <div class="test rel"><span class="abc">abc</span><img src="blue-32x32.png"></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3-ref.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3-ref.html new file mode 100644 index 0000000000..87e0c4e8fc --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 120px; height: 150px; border: 5px solid blue; } +.vlr { writing-mode: vertical-lr; } +span { display: inline-block; padding: 5px; block-size: 1.5em; border: 2px solid red; } +p { margin: 0; padding: 2px; border: 2px solid green; inline-size: -moz-fit-content; } +</style> +<body> +<div> + <div class="vlr"><span>abc def</span><p>xyzzy</p></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3a.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3a.html new file mode 100644 index 0000000000..2231ad7bdb --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3a.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 120px; height: 150px; border: 5px solid blue; } +.vlr { writing-mode: vertical-lr; } +.rel { position: relative; } +span { display: inline-block; padding: 5px; block-size: 1.5em; border: 2px solid red; } +p { position: absolute; margin: 0; padding: 2px; border: 2px solid green; } +</style> +<body> +<div class="vlr"> + <div><span>abc def</span><p>xyzzy</p></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3b.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3b.html new file mode 100644 index 0000000000..f75b01b1ab --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3b.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 120px; height: 150px; border: 5px solid blue; } +.vlr { writing-mode: vertical-lr; } +.rel { position: relative; } +span { display: inline-block; padding: 5px; block-size: 1.5em; border: 2px solid red; } +p { position: absolute; margin: 0; padding: 2px; border: 2px solid green; } +</style> +<body> +<div class="vlr rel"> + <div><span>abc def</span><p>xyzzy</p></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3c.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3c.html new file mode 100644 index 0000000000..d2a1511d66 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-3c.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 120px; height: 150px; border: 5px solid blue; } +.vlr { writing-mode: vertical-lr; } +.rel { position: relative; } +span { display: inline-block; padding: 5px; block-size: 1.5em; border: 2px solid red; } +p { position: absolute; margin: 0; padding: 2px; border: 2px solid green; } +</style> +<body> +<div class="vlr"> + <div class="rel"><span>abc def</span><p>xyzzy</p></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4-ref.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4-ref.html new file mode 100644 index 0000000000..4a6eda9992 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; + position: absolute; right: 0; top: 0; } +.test { writing-mode: vertical-rl; background: #aaa; + position: absolute; right: 0; top: 0; width: 2em; height: 100%; } +.rel { position: relative; } +img { position: absolute; right: 0; top: 34px; + width: 30px; height: 40px; background: green; border: 5px solid yellow; } +</style> +<body> +<div class="rel"> + <div class="test"><span class="abc">abc</span><img src=""></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4a.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4a.html new file mode 100644 index 0000000000..5c7ecab700 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4a.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vrl { writing-mode: vertical-rl; } +.rel { position: relative; } +img { position: absolute; width: 30px; height: 40px; background: green; border: 5px solid yellow; } +</style> +<body> +<div class="vrl"> + <div class="test"><span class="abc">abc</span><img src=""></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4b.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4b.html new file mode 100644 index 0000000000..1e51065b7a --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4b.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vrl { writing-mode: vertical-rl; } +.rel { position: relative; } +img { position: absolute; width: 30px; height: 40px; background: green; border: 5px solid yellow; } +</style> +<body> +<div class="vrl rel"> + <div class="test"><span class="abc">abc</span><img src=""></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4c.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4c.html new file mode 100644 index 0000000000..edc8b870e4 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-4c.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vrl { writing-mode: vertical-rl; } +.rel { position: relative; } +img { position: absolute; width: 30px; height: 40px; background: green; border: 5px solid yellow; } +</style> +<body> +<div class="vrl"> + <div class="test rel"><span class="abc">abc</span><img src=""></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5-ref.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5-ref.html new file mode 100644 index 0000000000..cf0b18aca1 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; + position: absolute; right: 0; top: 0; } +.test { writing-mode: vertical-rl; background: #aaa; + position: absolute; right: 0; top: 0; width: 2em; height: 100%; } +.rel { position: relative; } +img { position: absolute; right: 0; top: 34px; + background: green; border: 5px solid yellow; } +</style> +<body> +<div class="rel"> + <div class="test"><span class="abc">abc</span><img src="blue-32x32.png"></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5a.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5a.html new file mode 100644 index 0000000000..fd7e3ceadd --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5a.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vrl { writing-mode: vertical-rl; } +.rel { position: relative; } +img { position: absolute; background: green; border: 5px solid yellow; } +</style> +<body> +<div class="vrl"> + <div class="test"><span class="abc">abc</span><img src="blue-32x32.png"></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5b.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5b.html new file mode 100644 index 0000000000..2b48fcaa82 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5b.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vrl { writing-mode: vertical-rl; } +.rel { position: relative; } +img { position: absolute; background: green; border: 5px solid yellow; } +</style> +<body> +<div class="vrl rel"> + <div class="test"><span class="abc">abc</span><img src="blue-32x32.png"></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5c.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5c.html new file mode 100644 index 0000000000..3923017a4c --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-5c.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 100px; height: 150px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vrl { writing-mode: vertical-rl; } +.rel { position: relative; } +img { position: absolute; background: green; border: 5px solid yellow; } +</style> +<body> +<div class="vrl"> + <div class="test rel"><span class="abc">abc</span><img src="blue-32x32.png"></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6-ref.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6-ref.html new file mode 100644 index 0000000000..c681510040 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 120px; height: 150px; border: 5px solid blue; } +.vrl { writing-mode: vertical-rl; } +span { display: inline-block; padding: 5px; block-size: 1.5em; border: 2px solid red; } +p { margin: 0; padding: 2px; border: 2px solid green; inline-size: -moz-fit-content; } +</style> +<body> +<div class="vrl"> + <div><span>abc def</span><p>xyzzy</p></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6a.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6a.html new file mode 100644 index 0000000000..41f6681c93 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6a.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 120px; height: 150px; border: 5px solid blue; } +.vrl { writing-mode: vertical-rl; } +.rel { position: relative; } +span { display: inline-block; padding: 5px; block-size: 1.5em; border: 2px solid red; } +p { position: absolute; margin: 0; padding: 2px; border: 2px solid green; } +</style> +<body> +<div class="vrl"> + <div><span>abc def</span><p>xyzzy</p></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6b.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6b.html new file mode 100644 index 0000000000..d768e575c6 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6b.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 120px; height: 150px; border: 5px solid blue; } +.vrl { writing-mode: vertical-rl; } +.rel { position: relative; } +span { display: inline-block; padding: 5px; block-size: 1.5em; border: 2px solid red; } +p { position: absolute; margin: 0; padding: 2px; border: 2px solid green; } +</style> +<body> +<div class="vrl rel"> + <div><span>abc def</span><p>xyzzy</p></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6c.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6c.html new file mode 100644 index 0000000000..111443acf2 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-6c.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 120px; height: 150px; border: 5px solid blue; } +.vrl { writing-mode: vertical-rl; } +.rel { position: relative; } +span { display: inline-block; padding: 5px; block-size: 1.5em; border: 2px solid red; } +p { position: absolute; margin: 0; padding: 2px; border: 2px solid green; } +</style> +<body> +<div class="vrl"> + <div class="rel"><span>abc def</span><p>xyzzy</p></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7-ref.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7-ref.html new file mode 100644 index 0000000000..77ad9c15bd --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; + writing-mode: vertical-lr; position: absolute; left: 0; top: 0; } +.test { background: #aaa; position: absolute; left: 0; top: 0; width: 2em; height: 100%; } +.rel { position: relative; } +iframe { + position: absolute; left: 0; top: 34px; + background: yellow; border: 5px solid green; + width: 300px; height: 150px; +} +</style> +<body> +<div class="rel"> + <div class="test"><span class="abc">abc</span><iframe src="data:text/html,hello"></iframe></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7a.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7a.html new file mode 100644 index 0000000000..906757ae95 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7a.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vlr { writing-mode: vertical-lr; } +.rel { position: relative; } +iframe { position: absolute; background: yellow; border: 5px solid green; } +</style> +<body> +<div class="vlr"> + <div class="test"><span class="abc">abc</span><iframe src="data:text/html,hello"></iframe></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7b.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7b.html new file mode 100644 index 0000000000..9056e75cb4 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7b.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vlr { writing-mode: vertical-lr; } +.rel { position: relative; } +iframe { position: absolute; background: yellow; border: 5px solid green; } +</style> +<body> +<div class="vlr rel"> + <div class="test"><span class="abc">abc</span><iframe src="data:text/html,hello"></iframe></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7c.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7c.html new file mode 100644 index 0000000000..d21dbaa1e0 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-7c.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vlr { writing-mode: vertical-lr; } +.rel { position: relative; } +iframe { position: absolute; background: yellow; border: 5px solid green; } +</style> +<body> +<div class="vlr"> + <div class="test rel"><span class="abc">abc</span><iframe src="data:text/html,hello"></iframe></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8-ref.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8-ref.html new file mode 100644 index 0000000000..33e90d3f80 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; + writing-mode: vertical-rl; position: absolute; right: 0; top: 0; } +.test { background: #aaa; position: absolute; right: 0; top: 0; width: 2em; height: 100%; } +.rel { position: relative; } +iframe { + position: absolute; right: 0; top: 34px; + background: yellow; border: 5px solid green; + width: 300px; height: 150px; +} +</style> +<body> +<div class="rel"> + <div class="test"><span class="abc">abc</span><iframe src="data:text/html,hello"></iframe></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8a.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8a.html new file mode 100644 index 0000000000..ccca0406c1 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8a.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vrl { writing-mode: vertical-rl; } +.rel { position: relative; } +iframe { position: absolute; background: yellow; border: 5px solid green; } +</style> +<body> +<div class="vrl"> + <div class="test"><span class="abc">abc</span><iframe src="data:text/html,hello"></iframe></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8b.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8b.html new file mode 100644 index 0000000000..948c0ee097 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8b.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vrl { writing-mode: vertical-rl; } +.rel { position: relative; } +iframe { position: absolute; background: yellow; border: 5px solid green; } +</style> +<body> +<div class="vrl rel"> + <div class="test"><span class="abc">abc</span><iframe src="data:text/html,hello"></iframe></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8c.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8c.html new file mode 100644 index 0000000000..c8b95701b4 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-8c.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vrl { writing-mode: vertical-rl; } +.rel { position: relative; } +iframe { position: absolute; background: yellow; border: 5px solid green; } +</style> +<body> +<div class="vrl"> + <div class="test rel"><span class="abc">abc</span><iframe src="data:text/html,hello"></iframe></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-9-ref.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-9-ref.html new file mode 100644 index 0000000000..5fb3e94d0b --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-9-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; + writing-mode: vertical-rl; position: absolute; right: 0; top: 0; } +.test { background: #aaa; position: absolute; right: 0; top: 0; width: 2em; height: 100%; } +.rel { position: relative; } +video { + position: absolute; right: 0; top: 34px; + background: yellow; border: 5px solid green; + width: 300px; height: 150px; +} +</style> +<body> +<div class="rel"> + <div class="test"><span class="abc">abc</span><video src=""></video></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-9a.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-9a.html new file mode 100644 index 0000000000..9793bdb7c8 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-9a.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vrl { writing-mode: vertical-rl; } +.rel { position: relative; } +video { position: absolute; background: yellow; border: 5px solid green; } +</style> +<body> +<div class="vrl"> + <div class="test"><span class="abc">abc</span><video src=""></video></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-9b.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-9b.html new file mode 100644 index 0000000000..142885c305 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-9b.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vrl { writing-mode: vertical-rl; } +.rel { position: relative; } +video { position: absolute; background: yellow; border: 5px solid green; } +</style> +<body> +<div class="vrl rel"> + <div class="test"><span class="abc">abc</span><video src=""></video></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-9c.html b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-9c.html new file mode 100644 index 0000000000..a06ce59549 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/1183431-orthogonal-modes-9c.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<style> +body>div { margin: 50px 20px; width: 400px; height: 500px; border: 5px solid blue; } +.abc { display: inline-block; border: 2px solid red; inline-size: 30px; } +.test { background: #aaa; width: 2em; } +.vrl { writing-mode: vertical-rl; } +.rel { position: relative; } +video { position: absolute; background: yellow; border: 5px solid green; } +</style> +<body> +<div class="vrl"> + <div class="test rel"><span class="abc">abc</span><video src=""></video></div> +</div> diff --git a/layout/reftests/writing-mode/abspos/blue-32x32.png b/layout/reftests/writing-mode/abspos/blue-32x32.png Binary files differnew file mode 100644 index 0000000000..deefd19b2a --- /dev/null +++ b/layout/reftests/writing-mode/abspos/blue-32x32.png diff --git a/layout/reftests/writing-mode/abspos/reftest.list b/layout/reftests/writing-mode/abspos/reftest.list new file mode 100644 index 0000000000..8a2f033881 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/reftest.list @@ -0,0 +1,27 @@ +== 1183431-orthogonal-modes-1a.html 1183431-orthogonal-modes-1-ref.html +== 1183431-orthogonal-modes-1b.html 1183431-orthogonal-modes-1-ref.html +== 1183431-orthogonal-modes-1c.html 1183431-orthogonal-modes-1-ref.html +== 1183431-orthogonal-modes-2a.html 1183431-orthogonal-modes-2-ref.html +== 1183431-orthogonal-modes-2b.html 1183431-orthogonal-modes-2-ref.html +== 1183431-orthogonal-modes-2c.html 1183431-orthogonal-modes-2-ref.html +== 1183431-orthogonal-modes-3a.html 1183431-orthogonal-modes-3-ref.html +== 1183431-orthogonal-modes-3b.html 1183431-orthogonal-modes-3-ref.html +== 1183431-orthogonal-modes-3c.html 1183431-orthogonal-modes-3-ref.html +== 1183431-orthogonal-modes-4a.html 1183431-orthogonal-modes-4-ref.html +== 1183431-orthogonal-modes-4b.html 1183431-orthogonal-modes-4-ref.html +== 1183431-orthogonal-modes-4c.html 1183431-orthogonal-modes-4-ref.html +== 1183431-orthogonal-modes-5a.html 1183431-orthogonal-modes-5-ref.html +== 1183431-orthogonal-modes-5b.html 1183431-orthogonal-modes-5-ref.html +== 1183431-orthogonal-modes-5c.html 1183431-orthogonal-modes-5-ref.html +fails == 1183431-orthogonal-modes-6a.html 1183431-orthogonal-modes-6-ref.html # bug 1191801 +== 1183431-orthogonal-modes-6b.html 1183431-orthogonal-modes-6-ref.html +== 1183431-orthogonal-modes-6c.html 1183431-orthogonal-modes-6-ref.html +== 1183431-orthogonal-modes-7a.html 1183431-orthogonal-modes-7-ref.html +== 1183431-orthogonal-modes-7b.html 1183431-orthogonal-modes-7-ref.html +== 1183431-orthogonal-modes-7c.html 1183431-orthogonal-modes-7-ref.html +== 1183431-orthogonal-modes-8a.html 1183431-orthogonal-modes-8-ref.html +== 1183431-orthogonal-modes-8b.html 1183431-orthogonal-modes-8-ref.html +== 1183431-orthogonal-modes-8c.html 1183431-orthogonal-modes-8-ref.html +== 1183431-orthogonal-modes-9a.html 1183431-orthogonal-modes-9-ref.html +== 1183431-orthogonal-modes-9b.html 1183431-orthogonal-modes-9-ref.html +== 1183431-orthogonal-modes-9c.html 1183431-orthogonal-modes-9-ref.html diff --git a/layout/reftests/writing-mode/abspos/support/Ahem.ttf b/layout/reftests/writing-mode/abspos/support/Ahem.ttf Binary files differnew file mode 100644 index 0000000000..ac81cb0316 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/support/Ahem.ttf diff --git a/layout/reftests/writing-mode/abspos/support/ahem.css b/layout/reftests/writing-mode/abspos/support/ahem.css new file mode 100644 index 0000000000..2d07a1d562 --- /dev/null +++ b/layout/reftests/writing-mode/abspos/support/ahem.css @@ -0,0 +1,4 @@ +@font-face { + font-family: Ahem; + src: url("Ahem.ttf"); +} diff --git a/layout/reftests/writing-mode/blue-32x32.png b/layout/reftests/writing-mode/blue-32x32.png Binary files differnew file mode 100644 index 0000000000..deefd19b2a --- /dev/null +++ b/layout/reftests/writing-mode/blue-32x32.png diff --git a/layout/reftests/writing-mode/font-inflation-1-ref.html b/layout/reftests/writing-mode/font-inflation-1-ref.html new file mode 100644 index 0000000000..fc99dfda85 --- /dev/null +++ b/layout/reftests/writing-mode/font-inflation-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<style> +body { writing-mode: vertical-lr; text-orientation: sideways-right; } +#outer { width: 0; height: 0; } +#inner { font-size: 12px; width: 100%; height: 100%; } +</style> +<div id="outer"> +<div id="inner">Inflated? diff --git a/layout/reftests/writing-mode/font-inflation-1a.html b/layout/reftests/writing-mode/font-inflation-1a.html new file mode 100644 index 0000000000..39eb4ef94b --- /dev/null +++ b/layout/reftests/writing-mode/font-inflation-1a.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<style> +body { writing-mode: vertical-lr; text-orientation: sideways-right; } +#outer { width: 450px; } +#inner { font-size: 12px; width: 100%; height: 100%; } +</style> +<div id="outer"> +<div id="inner">Inflated? diff --git a/layout/reftests/writing-mode/font-inflation-1b.html b/layout/reftests/writing-mode/font-inflation-1b.html new file mode 100644 index 0000000000..554f53287b --- /dev/null +++ b/layout/reftests/writing-mode/font-inflation-1b.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<style> +body { writing-mode: vertical-lr; text-orientation: sideways-right; } +#outer { width: 600px; } +#inner { font-size: 12px; width: 100%; height: 100%; } +</style> +<div id="outer"> +<div id="inner">Inflated? diff --git a/layout/reftests/writing-mode/font-inflation-1c-ref.html b/layout/reftests/writing-mode/font-inflation-1c-ref.html new file mode 100644 index 0000000000..a15d0488b4 --- /dev/null +++ b/layout/reftests/writing-mode/font-inflation-1c-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<style> +body { writing-mode: vertical-lr; text-orientation: sideways-right; } +#outer { width: 0; height: 0; } +/* +In a 450px container, the minimum font size at 15em per line is 30px. +This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px. +*/ +#inner { font-size: 34px; width: 100%; height: 100%; } +</style> +<div id="outer"> +<div id="inner">Inflated? diff --git a/layout/reftests/writing-mode/font-inflation-1c.html b/layout/reftests/writing-mode/font-inflation-1c.html new file mode 100644 index 0000000000..32d963d04c --- /dev/null +++ b/layout/reftests/writing-mode/font-inflation-1c.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<style> +body { writing-mode: vertical-lr; text-orientation: sideways-right; } +#outer { height: 450px; } +#inner { font-size: 12px; width: 100%; height: 100%; } +</style> +<div id="outer"> +<div id="inner">Inflated? diff --git a/layout/reftests/writing-mode/font-inflation-1d-ref.html b/layout/reftests/writing-mode/font-inflation-1d-ref.html new file mode 100644 index 0000000000..9e36cb6d21 --- /dev/null +++ b/layout/reftests/writing-mode/font-inflation-1d-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<style> +body { writing-mode: vertical-lr; text-orientation: sideways-right; } +#outer { width: 0; height: 0; } +/* +In a 600px container, the minimum font size at 15em per line is 40px. +This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px. +*/ +#inner { font-size: 44px; width: 100%; height: 100%; } +</style> +<div id="outer"> +<div id="inner">Inflated? diff --git a/layout/reftests/writing-mode/font-inflation-1d.html b/layout/reftests/writing-mode/font-inflation-1d.html new file mode 100644 index 0000000000..e00a0efb08 --- /dev/null +++ b/layout/reftests/writing-mode/font-inflation-1d.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<style> +body { writing-mode: vertical-lr; text-orientation: sideways-right; } +#outer { height: 600px; } +#inner { font-size: 12px; width: 100%; height: 100%; } +</style> +<div id="outer"> +<div id="inner">Inflated? diff --git a/layout/reftests/writing-mode/font-inflation-1e.html b/layout/reftests/writing-mode/font-inflation-1e.html new file mode 100644 index 0000000000..44d295e905 --- /dev/null +++ b/layout/reftests/writing-mode/font-inflation-1e.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<style> +html { writing-mode: vertical-lr; text-orientation: sideways-right; } +#outer { width: 450px; } +#inner { font-size: 12px; width: 100%; height: 100%; } +</style> +<div id="outer"> +<div id="inner">Inflated? + +<script> +// When AccessibleCaret is enabled, the above markup is sufficient to trigger +// the assertion on the custom content container. This script forces +// AccessibleCaret to show, and tests that font inflation doesn't trigger +// assertion for elements in the custom content container subtree. +var sel = window.getSelection(); +sel.selectAllChildren(document.documentElement); +document.documentElement.offsetWidth; +sel.removeAllRanges(); +</script> diff --git a/layout/reftests/writing-mode/green-100x100.png b/layout/reftests/writing-mode/green-100x100.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/layout/reftests/writing-mode/green-100x100.png diff --git a/layout/reftests/writing-mode/left-bottom-300x300.png b/layout/reftests/writing-mode/left-bottom-300x300.png Binary files differnew file mode 100644 index 0000000000..cd565a8b82 --- /dev/null +++ b/layout/reftests/writing-mode/left-bottom-300x300.png diff --git a/layout/reftests/writing-mode/left-top-300x300.png b/layout/reftests/writing-mode/left-top-300x300.png Binary files differnew file mode 100644 index 0000000000..68961d9d0a --- /dev/null +++ b/layout/reftests/writing-mode/left-top-300x300.png diff --git a/layout/reftests/writing-mode/reftest.list b/layout/reftests/writing-mode/reftest.list new file mode 100644 index 0000000000..a9de1ad2cb --- /dev/null +++ b/layout/reftests/writing-mode/reftest.list @@ -0,0 +1,192 @@ +# This directory contains tests for vertical text and logical layout coordinates. + +== 1079154-1-vertical-rl-columns.html 1079154-1-vertical-rl-columns-ref.html +== 1082844.html 1082844-ref.html +== 1083748.html 1083748-ref.html +== 1083848-1-inline-border.html 1083848-1-inline-border-ref.html +== 1083848-2-inline-background.html 1083848-2-inline-background-ref.html +fuzzy-if(gtkWidget,0-255,0-2) fuzzy-if(winWidget||Android,0-4,0-8704) == 1083848-3-inline-background-repeat.html 1083848-3-inline-background-repeat-ref.html +== 1083892-1.html 1083892-1-ref.html +== 1086883-1a.html 1086883-1-ref.html +== 1086883-1b.html 1086883-1-ref.html +== 1088025-1.html 1088025-1-ref.html +== 1089388-1.html 1089388-1-ref.html +== 1089388-2.html 1089388-2-ref.html +== 1090159-1.html 1090159-1-ref.html +== 1090168-1.html 1090168-1-ref.html +!= 1090168-1.html 1090168-1-notref.html +== 1090168-2.html 1090168-2-ref.html +fuzzy-if(azureSkia,0-255,0-2700) == 1090168-3.html 1090168-3-ref.html # bug 1230357 mark fuzzy for skia. +== 1091058-1.html 1091058-1-ref.html +random-if(useDrawSnapshot) == 1094434-1.html 1094434-1-ref.html +== 1094434-2.html 1094434-2-ref.html +== 1094914-1a.html 1094914-1-ref.html +== 1094914-1b.html 1094914-1-ref.html +== 1096224-1a.html 1096224-1-ref.html +== 1096224-1b.html 1096224-1-ref.html +== 1102175-1a.html 1102175-1-ref.html +== 1102175-1b.html 1102175-1-ref.html +== 1103613-1.html 1103613-1-ref.html +== 1105268-1-min-max-dimensions.html 1105268-1-min-max-dimensions-ref.html +== 1105268-2-min-max-dimensions.html 1105268-2-min-max-dimensions-ref.html +== 1106669-1-intrinsic-for-container.html 1106669-1-intrinsic-for-container-ref.html +== 1108923-1-percentage-margins.html 1108923-1-percentage-margins-ref.html +fuzzy-if(Android,0-128,0-94) == 1111944-1-list-marker.html 1111944-1-list-marker-ref.html +fuzzy(0-116,0-94) fuzzy-if(winWidget,0-135,0-124) == 1115916-1-vertical-metrics.html 1115916-1-vertical-metrics-ref.html +== 1117210-1-vertical-baseline-snap.html 1117210-1-vertical-baseline-snap-ref.html +== 1117227-1-text-overflow.html 1117227-1-text-overflow-ref.html +== 1122366-1-margin-collapse.html 1122366-1-margin-collapse-ref.html +== 1124636-1-fieldset-max-height.html 1124636-1-fieldset-max-height-ref.html +== 1124636-2-fieldset-min-height.html 1124636-2-fieldset-min-height-ref.html + +== ua-style-sheet-margin-1.html ua-style-sheet-margin-1-ref.html +== ua-style-sheet-margin-2.html ua-style-sheet-margin-2-ref.html +== ua-style-sheet-margin-3.html ua-style-sheet-margin-3-ref.html +== ua-style-sheet-margin-4.html ua-style-sheet-margin-4-ref.html +== ua-style-sheet-margin-5.html ua-style-sheet-margin-5-ref.html +== ua-style-sheet-margin-6.html ua-style-sheet-margin-6-ref.html +== ua-style-sheet-margin-7.html ua-style-sheet-margin-7-ref.html +== ua-style-sheet-margin-8.html ua-style-sheet-margin-8-ref.html +== ua-style-sheet-margin-9.html ua-style-sheet-margin-9-ref.html +== ua-style-sheet-margin-10.html ua-style-sheet-margin-10-ref.html +== ua-style-sheet-margin-11.html ua-style-sheet-margin-11-ref.html +== ua-style-sheet-margin-12.html ua-style-sheet-margin-12-ref.html +== ua-style-sheet-margin-13.html ua-style-sheet-margin-13-ref.html +== ua-style-sheet-margin-14.html ua-style-sheet-margin-14-ref.html +== ua-style-sheet-border-2.html ua-style-sheet-border-2-ref.html +== ua-style-sheet-border-3.html ua-style-sheet-border-3-ref.html +== ua-style-sheet-border-4.html ua-style-sheet-border-4-ref.html +== ua-style-sheet-border-5.html ua-style-sheet-border-5-ref.html +== ua-style-sheet-size-1.html ua-style-sheet-size-1-ref.html +== ua-style-sheet-size-2.html ua-style-sheet-size-2-ref.html + +== ua-style-sheet-fieldset-1.html ua-style-sheet-fieldset-1-ref.html + +# Android theme uses different padding in themed textareas by default. +skip-if(Android) == ua-style-sheet-textarea-1.html ua-style-sheet-textarea-1a-ref.html +skip-if(Android) == ua-style-sheet-textarea-1.html ua-style-sheet-textarea-1c-ref.html + +fuzzy-if(Android,0-1,0-18) == ua-style-sheet-checkbox-radio-1.html ua-style-sheet-checkbox-radio-1-ref.html +# Android uses different margins for buttons compared to the ref. +skip-if(Android) fuzzy-if(!Android,0-2,0-6) == ua-style-sheet-button-1.html chrome://reftest/content/writing-mode/ua-style-sheet-button-1a-ref.html + +# Android uses different margins for buttons compared to the ref. +skip-if(Android) == ua-style-sheet-input-color-1.html chrome://reftest/content/writing-mode/ua-style-sheet-input-color-1-ref.html +fuzzy-if(gtkWidget,0-1,0-15) == ua-style-sheet-input-number-1.html ua-style-sheet-input-number-1-ref.html + +== 1127488-align-default-horizontal-tb-ltr.html 1127488-align-top-left-ref.html +== 1127488-align-start-horizontal-tb-ltr.html 1127488-align-top-left-ref.html +== 1127488-align-end-horizontal-tb-ltr.html 1127488-align-top-right-ref.html +== 1127488-align-left-horizontal-tb-ltr.html 1127488-align-top-left-ref.html +== 1127488-align-right-horizontal-tb-ltr.html 1127488-align-top-right-ref.html +== 1127488-align-default-horizontal-tb-rtl.html 1127488-align-top-right-ref.html +== 1127488-align-start-horizontal-tb-rtl.html 1127488-align-top-right-ref.html +== 1127488-align-end-horizontal-tb-rtl.html 1127488-align-top-left-ref.html +== 1127488-align-left-horizontal-tb-rtl.html 1127488-align-top-left-ref.html +== 1127488-align-right-horizontal-tb-rtl.html 1127488-align-top-right-ref.html +== 1127488-align-default-vertical-rl-rtl.html 1127488-align-bottom-right-ref.html +== 1127488-align-start-vertical-rl-rtl.html 1127488-align-bottom-right-ref.html +== 1127488-align-end-vertical-rl-rtl.html 1127488-align-top-right-ref.html +== 1127488-align-left-vertical-rl-rtl.html 1127488-align-top-right-ref.html +== 1127488-align-right-vertical-rl-rtl.html 1127488-align-bottom-right-ref.html +== 1127488-align-default-vertical-rl-ltr.html 1127488-align-top-right-ref.html +== 1127488-align-start-vertical-rl-ltr.html 1127488-align-top-right-ref.html +== 1127488-align-end-vertical-rl-ltr.html 1127488-align-bottom-right-ref.html +== 1127488-align-left-vertical-rl-ltr.html 1127488-align-top-right-ref.html +== 1127488-align-right-vertical-rl-ltr.html 1127488-align-bottom-right-ref.html +== 1127488-align-default-vertical-lr-rtl.html 1127488-align-bottom-left-ref.html +== 1127488-align-start-vertical-lr-rtl.html 1127488-align-bottom-left-ref.html +== 1127488-align-end-vertical-lr-rtl.html 1127488-align-top-left-ref.html +== 1127488-align-left-vertical-lr-rtl.html 1127488-align-top-left-ref.html +== 1127488-align-right-vertical-lr-rtl.html 1127488-align-bottom-left-ref.html +== 1127488-align-default-vertical-lr-ltr.html 1127488-align-top-left-ref.html +== 1127488-align-start-vertical-lr-ltr.html 1127488-align-top-left-ref.html +== 1127488-align-end-vertical-lr-ltr.html 1127488-align-bottom-left-ref.html +== 1127488-align-left-vertical-lr-ltr.html 1127488-align-top-left-ref.html +== 1127488-align-right-vertical-lr-ltr.html 1127488-align-bottom-left-ref.html +== 1130907-intrinsic-sizing-1.html 1130907-intrinsic-sizing-1-ref.html +== 1130907-intrinsic-sizing-2.html 1130907-intrinsic-sizing-2-ref.html +== 1131013-vertical-bidi.html 1131013-vertical-bidi-ref.html +== 1133945-1-vertical-align.html 1133945-1-vertical-align-ref.html +== 1134744-radio-checkbox-baseline-1.html 1134744-radio-checkbox-baseline-1-ref.html +== 1134849-orthogonal-inline.html 1134849-orthogonal-inline-ref.html +fails-if(geckoview) == 1135361-ruby-justify-1.html 1135361-ruby-justify-1-ref.html # Bug 1558513 for GV +fuzzy(0-159,0-111) == 1136557-1-nested-spans.html 1136557-1-nested-spans-ref.html +fuzzy(0-159,0-111) == 1136557-2-nested-spans.html 1136557-2-nested-spans-ref.html +fuzzy-if(winWidget,0-255,0-236) == 1136557-3-nested-spans.html 1136557-3-nested-spans-ref.html +== 1138356-1-button-contents-alignment.html 1138356-1-button-contents-alignment-ref.html +!= 1138356-2-button-contents-alignment.html 1138356-2-button-contents-alignment-notref.html + +# Font inflation behaves wrong in vertical writing mode: bug 1138495 +test-pref(dom.meta-viewport.enabled,true) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == font-inflation-1a.html font-inflation-1-ref.html +test-pref(dom.meta-viewport.enabled,true) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == font-inflation-1b.html font-inflation-1-ref.html +test-pref(dom.meta-viewport.enabled,true) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) != font-inflation-1c.html font-inflation-1-ref.html +test-pref(dom.meta-viewport.enabled,true) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) != font-inflation-1d.html font-inflation-1-ref.html +pref(dom.meta-viewport.enabled,true) pref(font.size.inflation.emPerLine,15) pref(font.size.inflation.forceEnabled,true) pref(font.size.inflation.lineThreshold,0) != font-inflation-1c.html font-inflation-1d.html +test-pref(dom.meta-viewport.enabled,true) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == font-inflation-1c.html font-inflation-1c-ref.html +test-pref(dom.meta-viewport.enabled,true) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == font-inflation-1d.html font-inflation-1d-ref.html +test-pref(dom.meta-viewport.enabled,true) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) test-pref(layout.accessiblecaret.enabled,true) == font-inflation-1e.html font-inflation-1-ref.html + +== 1144501-1a-block-end-margin-orthogonal-size.html 1144501-1-block-end-margin-orthogonal-size-ref.html +== 1144501-1b-block-end-margin-orthogonal-size.html 1144501-1-block-end-margin-orthogonal-size-ref.html +== 1147834-relative-overconstrained-horizontal-tb-ltr.html 1147834-bottom-right-ref.html +== 1147834-relative-overconstrained-horizontal-tb-rtl.html 1147834-bottom-left-ref.html +== 1147834-relative-overconstrained-vertical-lr-ltr.html 1147834-bottom-right-ref.html +== 1147834-relative-overconstrained-vertical-lr-rtl.html 1147834-top-right-ref.html +== 1147834-relative-overconstrained-vertical-rl-ltr.html 1147834-bottom-left-ref.html +== 1147834-relative-overconstrained-vertical-rl-rtl.html 1147834-top-left-ref.html +== 1151993-1-orthogonal-block-size.html 1151993-1-orthogonal-block-size-ref.html +== 1152941-1-orthogonal-blocksize-overflow.html 1152941-1-orthogonal-blocksize-overflow-ref.html +== 1156021-text-indent-percent.html 1156021-text-indent-percent-ref.html +== 1157752-upright-bidi.html 1157752-upright-bidi-ref.html +== 1157758-1-vertical-arabic.html 1157758-1-vertical-arabic-ref.html +== 1158549-1-vertical-block-size-constraints.html 1158549-1-vertical-block-size-constraints-ref.html +== 1163238-orthogonal-auto-margins.html 1163238-orthogonal-auto-margins-ref.html +== 1174450-intrinsic-sizing.html 1174450-intrinsic-sizing-ref.html +== 1175789-underline-overline-1.html 1175789-underline-overline-1-ref.html # bug 1442637 +== 1188061-1-nsChangeHint_ClearAncestorIntrinsics.html 1188061-1-nsChangeHint_ClearAncestorIntrinsics-ref.html +== 1188061-2-nsChangeHint_UpdateComputedBSize.html 1188061-2-nsChangeHint_UpdateComputedBSize-ref.html + +# tests involving sideways-lr mode +random-if(gtkWidget) == 1193519-sideways-lr-1.html 1193519-sideways-lr-1-ref.html +random-if(gtkWidget) == 1193519-sideways-lr-2.html 1193519-sideways-lr-2-ref.html +fuzzy-if(winWidget,0-3,0-84) == 1193519-sideways-lr-3.html 1193519-sideways-lr-3-ref.html +fuzzy-if(winWidget,0-3,0-112) fails-if(Android) random-if(gtkWidget) == 1193519-sideways-lr-4.html 1193519-sideways-lr-4-ref.html # see bug 1366692. Rounding error with WR enabled, and on Android. +fuzzy-if(gtkWidget,0-255,0-12) fuzzy-if(cocoaWidget,0-65,0-69) fuzzy-if(geckoview,0-255,0-13) == 1193519-sideways-lr-decoration-1.html 1193519-sideways-lr-decoration-1-ref.html + +== 1196887-1-computed-display-inline-block.html 1196887-1-computed-display-inline-block-ref.html +== 1205787-legacy-svg-values-1.html 1205787-legacy-svg-values-1-ref.html + +== 1216747-1.html 1216747-1-ref.html +!= 1216747-1.html 1216747-1-notref.html + +== 1243125-1-floats-overflowing.html 1243125-1-floats-overflowing-ref.html + +skip-if(Android) == 1248248-1-orientation-break-glyphrun.html 1248248-1-orientation-break-glyphrun-ref.html # Android bug 1250229 + +== 1302734-bidi-plaintext-1a.html 1302734-bidi-plaintext-1-ref.html +== 1302734-bidi-plaintext-1b.html 1302734-bidi-plaintext-1-ref.html +== 1302734-bidi-plaintext-2a.html 1302734-bidi-plaintext-2-ref.html +== 1302734-bidi-plaintext-2b.html 1302734-bidi-plaintext-2-ref.html +== 1302734-bidi-plaintext-2c.html 1302734-bidi-plaintext-2-ref.html +== 1302734-bidi-plaintext-2d.html 1302734-bidi-plaintext-2-ref.html + +== 1302389-scrolled-rect-1a.html 1302389-scrolled-rect-1-ref.html +fuzzy-if(Android,0-54,0-852) == 1302389-scrolled-rect-1b.html 1302389-scrolled-rect-1-ref.html +fuzzy-if(Android,0-54,0-852) fuzzy-if(gtkWidget,0-1,0-25) fuzzy-if(cocoaWidget,0-1,0-2) == 1302389-scrolled-rect-1c.html 1302389-scrolled-rect-1-ref.html +fuzzy-if(gtkWidget,0-1,0-25) fuzzy-if(cocoaWidget,0-1,0-2) == 1302389-scrolled-rect-1d.html 1302389-scrolled-rect-1-ref.html +fuzzy-if(Android,0-54,0-852) fuzzy-if(gtkWidget,0-1,0-25) fuzzy-if(cocoaWidget,0-1,0-2) == 1302389-scrolled-rect-2a.html 1302389-scrolled-rect-2-ref.html +fuzzy-if(gtkWidget,0-1,0-25) fuzzy-if(cocoaWidget,0-1,0-2) == 1302389-scrolled-rect-2b.html 1302389-scrolled-rect-2-ref.html +== 1302389-scrolled-rect-2c.html 1302389-scrolled-rect-2-ref.html +fuzzy-if(Android,0-54,0-852) == 1302389-scrolled-rect-2d.html 1302389-scrolled-rect-2-ref.html + +== 1361631-mongolian-upright-1.html 1361631-mongolian-upright-1-ref.html +== 1395926-vertical-upright-gpos-1.html 1395926-vertical-upright-gpos-1-ref.html +== 1673510-1.html 1673510-1-ref.html # bug 1770273 + +# Suite of tests from Gérard Talbot in bug 1079151 +# Frequent Windows 7 load failed: timed out waiting for test to complete (waiting for onload scripts to complete), bug 1167155 and friends +include abspos/reftest.list + +# Tests for tables with vertical writing modes +include tables/reftest.list diff --git a/layout/reftests/writing-mode/right-bottom-300x300.png b/layout/reftests/writing-mode/right-bottom-300x300.png Binary files differnew file mode 100644 index 0000000000..1182ceefcc --- /dev/null +++ b/layout/reftests/writing-mode/right-bottom-300x300.png diff --git a/layout/reftests/writing-mode/right-top-300x300.png b/layout/reftests/writing-mode/right-top-300x300.png Binary files differnew file mode 100644 index 0000000000..0387861a2f --- /dev/null +++ b/layout/reftests/writing-mode/right-top-300x300.png diff --git a/layout/reftests/writing-mode/swatch-yellow.png b/layout/reftests/writing-mode/swatch-yellow.png Binary files differnew file mode 100644 index 0000000000..1591aa0e2e --- /dev/null +++ b/layout/reftests/writing-mode/swatch-yellow.png diff --git a/layout/reftests/writing-mode/tables/1259168-ref.html b/layout/reftests/writing-mode/tables/1259168-ref.html new file mode 100644 index 0000000000..d3ad50a52c --- /dev/null +++ b/layout/reftests/writing-mode/tables/1259168-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html +><title>Only one 300px*300px green quadrate. No red</title +><body style="overflow: hidden; max-width: 800px; max-height: 500px;" +><h1>Only one 300px*300px green quadrate. No red.</h1 + +><table style="width: 300px; height: 300px; background: red; border-spacing: 0px; border: 0;" +><tr + ><td style="width: 300px; background: green; color: white; padding: 0; border: 0;"></td +></tr +></table + +></body> diff --git a/layout/reftests/writing-mode/tables/1259168-slr.html b/layout/reftests/writing-mode/tables/1259168-slr.html new file mode 100644 index 0000000000..7e23c041d1 --- /dev/null +++ b/layout/reftests/writing-mode/tables/1259168-slr.html @@ -0,0 +1,12 @@ +<!DOCTYPE html +><title>Only one 300px*300px green quadrate. No red</title +><body style="overflow: hidden; max-width: 800px; max-height: 500px;" +><h1>Only one 300px*300px green quadrate. No red.</h1 + +><table style="writing-mode: sideways-lr; width: 100px; height: 300px; background: red; border-spacing: 0px; border: 0;" +><tr + ><td style="width: 300px; background: green; color: white; padding: 0; border: 0;"></td +></tr +></table + +></body> diff --git a/layout/reftests/writing-mode/tables/1259168-srl.html b/layout/reftests/writing-mode/tables/1259168-srl.html new file mode 100644 index 0000000000..291a8d2afe --- /dev/null +++ b/layout/reftests/writing-mode/tables/1259168-srl.html @@ -0,0 +1,12 @@ +<!DOCTYPE html +><title>Only one 300px*300px green quadrate. No red</title +><body style="overflow: hidden; max-width: 800px; max-height: 500px;" +><h1>Only one 300px*300px green quadrate. No red.</h1 + +><table style="writing-mode: sideways-rl; width: 100px; height: 300px; background: red; border-spacing: 0px; border: 0;" +><tr + ><td style="width: 300px; background: green; color: white; padding: 0; border: 0;"></td +></tr +></table + +></body> diff --git a/layout/reftests/writing-mode/tables/1259168-vlr.html b/layout/reftests/writing-mode/tables/1259168-vlr.html new file mode 100644 index 0000000000..cca077e63a --- /dev/null +++ b/layout/reftests/writing-mode/tables/1259168-vlr.html @@ -0,0 +1,12 @@ +<!DOCTYPE html +><title>Only one 300px*300px green quadrate. No red</title +><body style="overflow: hidden; max-width: 800px; max-height: 500px;" +><h1>Only one 300px*300px green quadrate. No red.</h1 + +><table style="writing-mode: vertical-lr; width: 100px; height: 300px; background: red; border-spacing: 0px; border: 0;" +><tr + ><td style="width: 300px; background: green; color: white; padding: 0; border: 0;"></td +></tr +></table + +></body> diff --git a/layout/reftests/writing-mode/tables/1259168-vrl.html b/layout/reftests/writing-mode/tables/1259168-vrl.html new file mode 100644 index 0000000000..73af01a75c --- /dev/null +++ b/layout/reftests/writing-mode/tables/1259168-vrl.html @@ -0,0 +1,12 @@ +<!DOCTYPE html +><title>Only one 300px*300px green quadrate. No red</title +><body style="overflow: hidden; max-width: 800px; max-height: 500px;" +><h1>Only one 300px*300px green quadrate. No red.</h1 + +><table style="writing-mode: vertical-rl; width: 100px; height: 300px; background: red; border-spacing: 0px; border: 0;" +><tr + ><td style="width: 300px; background: green; color: white; padding: 0; border: 0;"></td +></tr +></table + +></body> diff --git a/layout/reftests/writing-mode/tables/border-collapse-bevels-1-ref.html b/layout/reftests/writing-mode/tables/border-collapse-bevels-1-ref.html new file mode 100644 index 0000000000..5d5a430589 --- /dev/null +++ b/layout/reftests/writing-mode/tables/border-collapse-bevels-1-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border-spacing: 0; + border-collapse: collapse; +} +td { + border-top: 10px solid rgba(0,0,255,0.3); + border-right: 20px solid rgba(255,0,0,0.3); + border-bottom: 30px solid rgba(0,255,0,0.3); + border-left: 40px solid rgba(255,0,255,0.3); + width: 50px; + height: 50px; + padding: 0; +} +</style> +</head> +<body> + +<div> +<table> +<tr><td> </td></tr> +</table> +</div> diff --git a/layout/reftests/writing-mode/tables/border-collapse-bevels-1a.html b/layout/reftests/writing-mode/tables/border-collapse-bevels-1a.html new file mode 100644 index 0000000000..4bfcc00770 --- /dev/null +++ b/layout/reftests/writing-mode/tables/border-collapse-bevels-1a.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border-spacing: 0; + border-collapse: collapse; + direction: rtl; +} +td { + border-top: 10px solid rgba(0,0,255,0.3); + border-right: 20px solid rgba(255,0,0,0.3); + border-bottom: 30px solid rgba(0,255,0,0.3); + border-left: 40px solid rgba(255,0,255,0.3); + width: 50px; + height: 50px; + padding: 0; +} +</style> +</head> +<body> + +<div> +<table> +<tr><td> </td></tr> +</table> +</div> diff --git a/layout/reftests/writing-mode/tables/border-collapse-bevels-1b.html b/layout/reftests/writing-mode/tables/border-collapse-bevels-1b.html new file mode 100644 index 0000000000..d1535ce443 --- /dev/null +++ b/layout/reftests/writing-mode/tables/border-collapse-bevels-1b.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border-spacing: 0; + border-collapse: collapse; + writing-mode: vertical-lr; +} +td { + border-top: 10px solid rgba(0,0,255,0.3); + border-right: 20px solid rgba(255,0,0,0.3); + border-bottom: 30px solid rgba(0,255,0,0.3); + border-left: 40px solid rgba(255,0,255,0.3); + width: 50px; + height: 50px; + padding: 0; +} +</style> +</head> +<body> + +<div> +<table> +<tr><td> </td></tr> +</table> +</div> diff --git a/layout/reftests/writing-mode/tables/border-collapse-bevels-1c.html b/layout/reftests/writing-mode/tables/border-collapse-bevels-1c.html new file mode 100644 index 0000000000..30e8bdb8bf --- /dev/null +++ b/layout/reftests/writing-mode/tables/border-collapse-bevels-1c.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border-spacing: 0; + border-collapse: collapse; + writing-mode: vertical-rl; +} +td { + border-top: 10px solid rgba(0,0,255,0.3); + border-right: 20px solid rgba(255,0,0,0.3); + border-bottom: 30px solid rgba(0,255,0,0.3); + border-left: 40px solid rgba(255,0,255,0.3); + width: 50px; + height: 50px; + padding: 0; +} +</style> +</head> +<body> + +<div> +<table> +<tr><td> </td></tr> +</table> +</div> diff --git a/layout/reftests/writing-mode/tables/border-collapse-bevels-1d.html b/layout/reftests/writing-mode/tables/border-collapse-bevels-1d.html new file mode 100644 index 0000000000..b621cde1a0 --- /dev/null +++ b/layout/reftests/writing-mode/tables/border-collapse-bevels-1d.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border-spacing: 0; + border-collapse: collapse; + writing-mode: vertical-lr; + direction: rtl; +} +td { + border-top: 10px solid rgba(0,0,255,0.3); + border-right: 20px solid rgba(255,0,0,0.3); + border-bottom: 30px solid rgba(0,255,0,0.3); + border-left: 40px solid rgba(255,0,255,0.3); + width: 50px; + height: 50px; + padding: 0; +} +</style> +</head> +<body> + +<div> +<table> +<tr><td> </td></tr> +</table> +</div> diff --git a/layout/reftests/writing-mode/tables/border-collapse-bevels-1e.html b/layout/reftests/writing-mode/tables/border-collapse-bevels-1e.html new file mode 100644 index 0000000000..82ea6e1520 --- /dev/null +++ b/layout/reftests/writing-mode/tables/border-collapse-bevels-1e.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border-spacing: 0; + border-collapse: collapse; + writing-mode: vertical-rl; + direction: rtl; +} +td { + border-top: 10px solid rgba(0,0,255,0.3); + border-right: 20px solid rgba(255,0,0,0.3); + border-bottom: 30px solid rgba(0,255,0,0.3); + border-left: 40px solid rgba(255,0,255,0.3); + width: 50px; + height: 50px; + padding: 0; +} +</style> +</head> +<body> + +<div> +<table> +<tr><td> </td></tr> +</table> +</div> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-002-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-002-ref.html new file mode 100644 index 0000000000..3ce178442a --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-002-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + .test { writing-mode: vertical-lr; } + div.stripe + { + width: 24px; + height: 100px; + } + div.blue {background-color: blue;} + div.black {background-color: black;} + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <div class="black stripe"></div> + <div class="blue stripe"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-002-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-002-vlr.html new file mode 100644 index 0000000000..99aeab7868 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-002-vlr.html @@ -0,0 +1,53 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Value other than 'auto' for column height sets height of cells in the column</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A column element with a value other than 'auto' for the 'height' property sets the height for the column of cells it contains."> + <style type="text/css"> + .test { writing-mode: vertical-lr; } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 200px; + } + #col + { + height: 100px; + } + td + { + padding: 0; + width: 24px; + } + #cell + { + background: black; + } + #div1 + { + background: blue; + width: 24px; + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <col id="col"> + <col> + <tr> + <td id="cell">X</td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-002-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-002-vrl.html new file mode 100644 index 0000000000..adbbff9259 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-002-vrl.html @@ -0,0 +1,54 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Value other than 'auto' for column height sets height of cells in the column</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A column element with a value other than 'auto' for the 'height' property sets the height for the column of cells it contains."> + <style type="text/css"> + .test { writing-mode: vertical-rl; } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 200px; + } + #col + { + height: 100px; + } + td + { + padding: 0; + width: 24px; + } + #cell + { + background: blue; + color: blue; + } + #div1 + { + background: black; + width: 24px; + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <col id="col"> + <col> + <tr> + <td id="cell">X</td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-003-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-003-vlr.html new file mode 100644 index 0000000000..30913cbf78 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-003-vlr.html @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Cell in the first row with specified height sets the height for the column</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with specified non-auto 'height' sets the height for its column in the absence of a column element with specified non-auto height."> + <style type="text/css"> + .test { writing-mode: vertical-lr; } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 200px; + } + td + { + padding: 0; + } + #cell + { + background: black; + height: 100px; + width: 24px; + + } + #div1 + { + background: blue; + width: 24px; + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <tr> + <td id="cell">X</td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-003-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-003-vrl.html new file mode 100644 index 0000000000..0dd80b978b --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-003-vrl.html @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Cell in the first row with specified height sets the height for the column</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with specified non-auto 'height' sets the height for its column in the absence of a column element with specified non-auto height."> + <style type="text/css"> + .test { writing-mode: vertical-rl; } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 200px; + } + td + { + padding: 0; + } + #cell + { + background: blue; + height: 100px; + width: 24px; + color: blue; + } + #div1 + { + background: black; + width: 24px; + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <tr> + <td id="cell">X</td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-004-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-004-ref.html new file mode 100644 index 0000000000..f1575a900e --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-004-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + .test { writing-mode: vertical-lr; } + div.stripe + { + width: 20px; + height: 100px; + } + div#blue-stripe {background-color: blue;} + div#reference {background-color: black;} + div.middle { width: 20px; height: 50px; } + div.bottom { background-color: orange; float: right; } + div.top { background-color: silver; float: left; } + </style> + </head> + <body> + <p>Test passes if the blue and black bars are the same height +and the gray and orange boxes are half of that height.</p> + <div class="test"> + <div class="stripe" id="reference"></div> + <div class="stripe"> + <div class="middle top"></div> + <div class="middle bottom"></div> + </div> + <div class="stripe" id="blue-stripe"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-004-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-004-vlr.html new file mode 100644 index 0000000000..a8a6a8f9fa --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-004-vlr.html @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="The height of a column-spanning cell (which determines column heights in fixed table layout) is divided over the columns it spans."> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + table + { + border-collapse: collapse; + margin: 0; + table-layout: fixed; + height: 100px; + } + #cell1 + { + background: black; + height: 98px; + } + td + { + width: 20px; + padding: 0; + } + #cell2 + { + background: silver; + } + #cell3 + { + background: orange; + } + #div1 + { + background: blue; + width: 20px; + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if the blue and black bars are the same height +and the gray and orange boxes are half of that height.</p> + <div class="test"> + <table> + <tr> + <td id="cell1" colspan="2"></td> + </tr> + <tr> + <td id="cell2"></td> + <td id="cell3"></td> + </tr> + </table> + <div id="div1"></div> + </test> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-004-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-004-vrl.html new file mode 100644 index 0000000000..efa93023be --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-004-vrl.html @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="The height of a column-spanning cell (which determines column heights in fixed table layout) is divided over the columns it spans."> + <style type="text/css"> + div.test { writing-mode: vertical-rl; } + table + { + border-collapse: collapse; + margin: 0; + table-layout: fixed; + height: 100px; + } + #cell1 + { + background: blue; + height: 98px; + } + td + { + width: 20px; + padding: 0; + } + #cell2 + { + background: silver; + } + #cell3 + { + background: orange; + } + #div1 + { + background: black; + width: 20px; + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if the blue and black bars are the same height +and the gray and orange boxes are half of that height.</p> + <div class="test"> + <table> + <tr> + <td id="cell1" colspan="2"></td> + </tr> + <tr> + <td id="cell2"></td> + <td id="cell3"></td> + </tr> + </table> + <div id="div1"></div> + </test> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-005-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-005-ref.html new file mode 100644 index 0000000000..8f1efad6da --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-005-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Leftover table height is divided evenly among auto-sized columns</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Any remaining vertical table space is divided evenly among columns which do not have specified heights."> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + #div1 + { + width: 100px; + height: 300px; + } + #div1 > div + { + float: left; + } + .px50 + { + height: 50px; + } + #px100 + { + height: 100px; + } + </style> + </head> + <body> + <div class="test"> + <div id="div1"> + <div class="px50">1</div> + <div class="px50">2</div> + <div id="px100">3</div> + <div class="px50">4</div> + <div class="px50">5</div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-005-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-005-vlr.html new file mode 100644 index 0000000000..1b2288946f --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-005-vlr.html @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Leftover table height is divided evenly among auto-sized columns</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Any remaining vertical table space is divided evenly among columns which do not have specified heights."> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + table + { + border-spacing: 0; + table-layout: fixed; + height: 300px; + } + #col1 + { + height: 50px; + } + td + { + padding: 0; + } + #cell1 + { + height: 50px; + } + #cell2 + { + height: 100px; + } + </style> + </head> + <body> + <div class="test"> + <table> + <col id="col1"> + <col> + <col> + <col> + <col> + <col> + <tr> + <td>1</td> + <td id="cell1">2</td> + <td id="cell2" colspan="2">3</td> + <td>4</td> + <td>5</td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-005-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-005-vrl.html new file mode 100644 index 0000000000..bc22d3db6c --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-005-vrl.html @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Leftover table height is divided evenly among auto-sized columns</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Any remaining vertical table space is divided evenly among columns which do not have specified heights."> + <style type="text/css"> + div.test { writing-mode: vertical-rl; } + table + { + border-spacing: 0; + table-layout: fixed; + height: 300px; + } + #col1 + { + height: 50px; + } + td + { + padding: 0; + } + #cell1 + { + height: 50px; + } + #cell2 + { + height: 100px; + } + </style> + </head> + <body> + <div class="test"> + <table> + <col id="col1"> + <col> + <col> + <col> + <col> + <col> + <tr> + <td>1</td> + <td id="cell1">2</td> + <td id="cell2" colspan="2">3</td> + <td>4</td> + <td>5</td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-006-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-006-ref.html new file mode 100644 index 0000000000..42e28b5e39 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-006-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + div.stripe + { + height: 10px; + width: 100px; + } + div.blue {background-color: blue;} + div.orange {background-color: orange;} + </style> + </head> + <body> + <p>Test passes if all of the blue lines below appear to have the same height.</p> + <div class="blue stripe"></div> + <div class="orange stripe"></div> + <div class="blue stripe"></div> + <div class="orange stripe"></div> + <div class="blue stripe"></div> + <div class="orange stripe"></div> + <div class="blue stripe"></div> + <div class="orange stripe"></div> + <div class="blue stripe"></div> + <div class="orange stripe"></div> + <div class="blue stripe"></div> + <div class="orange stripe"></div> + <div class="blue stripe"></div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-006-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-006-vlr.html new file mode 100644 index 0000000000..3ccbff1eda --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-006-vlr.html @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Remaining table height is divided evenly among non auto-sized columns (minus borders and cell spacing)</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Any remaining horizontal table space is divided evenly among columns which do not have specified heights (minus borders and cell spacing)."> + <style type="text/css"> + table + { + writing-mode: vertical-lr; + background: blue; + border-collapse: separate; + border-spacing: 10px 0; + table-layout: fixed; + height: 130px; + } + td + { + background: blue; + border-top: 10px solid orange; + border-bottom: 10px solid orange; + width: 100px; + padding: 0; + } + #specified + { + height: 10px; + } + </style> + </head> + <body> + <p>Test passes if all of the blue lines below appear to have the same height.</p> + <table> + <tr> + <td id="specified"></td> + <td></td> + <td></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-006-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-006-vrl.html new file mode 100644 index 0000000000..821e4c6820 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-006-vrl.html @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Remaining table height is divided evenly among non auto-sized columns (minus borders and cell spacing)</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Any remaining horizontal table space is divided evenly among columns which do not have specified heights (minus borders and cell spacing)."> + <style type="text/css"> + table + { + writing-mode: vertical-rl; + background: blue; + border-collapse: separate; + border-spacing: 10px 0; + table-layout: fixed; + height: 130px; + } + td + { + background: blue; + border-top: 10px solid orange; + border-bottom: 10px solid orange; + width: 100px; + padding: 0; + } + #specified + { + height: 10px; + } + </style> + </head> + <body> + <p>Test passes if all of the blue lines below appear to have the same height.</p> + <table> + <tr> + <td id="specified"></td> + <td></td> + <td></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-007-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-007-ref.html new file mode 100644 index 0000000000..4313090884 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-007-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + .test { writing-mode: vertical-lr; } + div.stripe + { + width: 24px; + height: 200px; + } + div.blue {background-color: blue;} + div.black {background-color: black;} + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <div class="black stripe"></div> + <div class="blue stripe"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-007-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-007-vlr.html new file mode 100644 index 0000000000..9cd003f81c --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-007-vlr.html @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table height is maximum between table and sum of column 'height' (table height wins)</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A fixed layout table's height will be its specified height if that height is greater than the sum of its columns' heights."> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + table + { + border-spacing: 0; + table-layout: fixed; + } + td + { + background: black; + padding: 0; + height: 50px; + width: 24px; + } + #div1 + { + background: blue; + width: 24px; + } + #div1, table + { + height: 200px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <tr> + <td>X</td> + <td>X</td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-007-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-007-vrl.html new file mode 100644 index 0000000000..b5b3e30027 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-007-vrl.html @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table height is maximum between table and sum of column 'height' (table height wins)</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A fixed layout table's height will be its specified height if that height is greater than the sum of its columns' heights."> + <style type="text/css"> + div.test { writing-mode: vertical-rl; } + table + { + border-spacing: 0; + table-layout: fixed; + } + td + { + background: blue; + padding: 0; + height: 50px; + width: 24px; + color: blue; + } + #div1 + { + background: black; + width: 24px; + } + #div1, table + { + height: 200px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <tr> + <td>X</td> + <td>X</td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-009-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-009-ref.html new file mode 100644 index 0000000000..89ca8ffaff --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-009-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Cell that overflows a fixed-height table</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A cell that overflows the fixed table height uses its 'overflow' property to determine whether to clip the overflow content."> + <style type="text/css"> + div.test { + writing-mode: vertical-lr; + } + div.prose { + writing-mode: horizontal-tb; + width: 180px; + padding: 1em; + } + div.textContainer + { + height: 100px; + border: 1px solid blue; + margin: 2px; + } + #hidden + { + overflow: hidden; + } + </style> + </head> + <body> + <div class="test"> + <div class="textContainer">FillerTextFillerTextFillerTextFiller</div> + <div class="prose">Test passes if the text in the blue rectangle to the left + of this line spills outside of its bottom border and the text + in the blue rectangle to the right of this line is contained + within the rectangle's border (and appears to be cut off on + its bottom edge).</div> + <div class="textContainer" id="hidden">FillerTextFillerTextFillerTextFiller</div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-009-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-009-vlr.html new file mode 100644 index 0000000000..5d26b97281 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-009-vlr.html @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Cell that overflows a fixed-height table</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A cell that overflows the fixed table height uses its 'overflow' property to determine whether to clip the overflow content."> + <style type="text/css"> + div.test { + writing-mode: vertical-lr; + } + div.prose { + writing-mode: horizontal-tb; + width: 180px; + margin: 1em; + } + table + { + table-layout: fixed; + height: 100px; + } + td + { + border: 1px solid blue; + height: 100px; + padding: 0px; + } + #hidden + { + overflow: hidden; + } + </style> + </head> + <body> + <div class="test"> + <table><tr><td>FillerTextFillerTextFillerTextFiller</td></tr></table> + <div class="prose">Test passes if the text in the blue rectangle to the left + of this line spills outside of its bottom border and the text + in the blue rectangle to the right of this line is contained + within the rectangle's border (and appears to be cut off on + its bottom edge).</div> + <table><tr><td id="hidden">FillerTextFillerTextFillerTextFiller</td></tr></table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-009-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-009-vrl.html new file mode 100644 index 0000000000..639103d158 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-009-vrl.html @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Cell that overflows a fixed-height table</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A cell that overflows the fixed table height uses its 'overflow' property to determine whether to clip the overflow content."> + <style type="text/css"> + div.test { + writing-mode: vertical-rl; + } + div.prose { + writing-mode: horizontal-tb; + width: 180px; + margin: 1em; + } + table + { + table-layout: fixed; + height: 100px; + } + td + { + border: 1px solid blue; + height: 100px; + padding: 0px; + } + #hidden + { + overflow: hidden; + } + </style> + </head> + <body> + <div class="test"> + <table><tr><td id="hidden">FillerTextFillerTextFillerTextFiller</td></tr></table> + <div class="prose">Test passes if the text in the blue rectangle to the left + of this line spills outside of its bottom border and the text + in the blue rectangle to the right of this line is contained + within the rectangle's border (and appears to be cut off on + its bottom edge).</div> + <table><tr><td>FillerTextFillerTextFillerTextFiller</td></tr></table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-010-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-010-ref.html new file mode 100644 index 0000000000..db95aef2f7 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-010-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + .test { writing-mode: vertical-lr; text-orientation: sideways-right; } + div.stripe + { + width: 2em; + line-height: 2em; + height: 200px; + } + div.blue {background-color: blue; } + div.black {background-color: black;} + span.text { position: relative; top: 100px; white-space: pre;} + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height and the +blue box has the words "Filler Text" in the middle, +overflowing below the box.</p> + <div class="test"> + <div class="blue stripe"></div> + <div class="blue stripe"><span class="text">Filler Text Filler Text Filler Text</span></div> + <div class="blue stripe"></div> + <div class="black stripe"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-010-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-010-vlr.html new file mode 100644 index 0000000000..b33feafb5d --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-010-vlr.html @@ -0,0 +1,70 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Subsequent rows in fixed table layout</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Cells in subsequent rows after the first do not affect column heights in fixed table layout."> + <style type="text/css"> + div.test { + writing-mode: vertical-lr; + text-orientation: sideways-right; + } + table + { + border-spacing: 0; + table-layout: fixed; + } + td + { + background: blue; + color: blue; + padding: 0; + width: 2em; + } + #overflow + { + color: black; + overflow: visible; + white-space: pre; + } + #div1 + { + background: black; + width: 2em; + } + table, .row1 + { + height: 100px; + } + .row2, #div1 + { + height: 200px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height and the +blue box has the words "Filler Text" in the middle, +overflowing below the box.</p> + <div class="test"> + <table> + <tr> + <td class="row1"></td> + <td class="row1"></td> + </tr> + <tr> + <td></td> + <td id="overflow">Filler Text Filler Text Filler Text</td> + </tr> + <tr> + <td class="row2"></td> + <td class="row2"></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-010-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-010-vrl.html new file mode 100644 index 0000000000..c608c51199 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-010-vrl.html @@ -0,0 +1,70 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Subsequent rows in fixed table layout</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Cells in subsequent rows after the first do not affect column heights in fixed table layout."> + <style type="text/css"> + div.test { + writing-mode: vertical-rl; + text-orientation: sideways-right; + } + table + { + border-spacing: 0; + table-layout: fixed; + } + td + { + background: blue; + color: blue; + padding: 0; + width: 2em; + } + #overflow + { + color: black; + overflow: visible; + white-space: pre; + } + #div1 + { + background: black; + width: 2em; + } + table, .row1 + { + height: 100px; + } + .row2, #div1 + { + height: 200px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height and the +blue box has the words "Filler Text" in the middle, +overflowing below the box.</p> + <div class="test"> + <div id="div1"></div> + <table> + <tr> + <td class="row1"></td> + <td class="row1"></td> + </tr> + <tr> + <td></td> + <td id="overflow">Filler Text Filler Text Filler Text</td> + </tr> + <tr> + <td class="row2"></td> + <td class="row2"></td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-012-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-012-ref.html new file mode 100644 index 0000000000..52e387c9f7 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-012-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + .test { writing-mode: vertical-lr; } + div.stripe + { + width: 24px; + height: 50px; + } + div.blue {background-color: blue;} + div.black {background-color: black;} + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <div class="black stripe"></div> + <div class="blue stripe"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-012-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-012-vlr.html new file mode 100644 index 0000000000..ef25ceedc8 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-012-vlr.html @@ -0,0 +1,54 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout - specified column height overrides first-cell specified height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A column element with specified height sets the height of the column, even if the first-row cell has a specified height."> + <style type="text/css"> + div.test + { + writing-mode: vertical-lr; + } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 200px; + } + td { padding: 0px; } + #col + { + height: 50px; + } + #cell + { + background: black; + height: 175px; + width: 24px; + } + #div1 + { + background: blue; + width: 24px; + height: 50px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <col id="col"> + <col> + <tr> + <td id="cell">X</td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-012-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-012-vrl.html new file mode 100644 index 0000000000..e443494973 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-012-vrl.html @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout - specified column height overrides first-cell specified height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A column element with specified height sets the height of the column, even if the first-row cell has a specified height."> + <style type="text/css"> + div.test + { + writing-mode: vertical-rl; + } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 200px; + } + td { padding: 0px; } + #col + { + height: 50px; + } + #cell + { + background: blue; + color: blue; + height: 175px; + width: 24px; + } + #div1 + { + background: black; + width: 24px; + height: 50px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <col id="col"> + <col> + <tr> + <td id="cell">X</td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-013-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-013-vlr.html new file mode 100644 index 0000000000..4d8f763866 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-013-vlr.html @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout - specified column-group height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Specified column-group height is ignored in fixed table layout."> + <style type="text/css"> + div.test + { + writing-mode: vertical-lr; + } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 200px; + } + td { padding: 0px; } + #colgroup + { + height: 50px; + } + #cell + { + background: black; + } + #div1 + { + background: blue; + height: 100px; + } + #div1, #cell + { + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <colgroup id="colgroup"> + <col> + </colgroup> + <colgroup> + <col> + </colgroup> + <tr> + <td id="cell"></td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-013-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-013-vrl.html new file mode 100644 index 0000000000..147c3db0fd --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-013-vrl.html @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout - specified column-group height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="Specified column-group height is ignored in fixed table layout."> + <style type="text/css"> + div.test + { + writing-mode: vertical-rl; + } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 200px; + } + td { padding: 0px; } + #colgroup + { + height: 50px; + } + #cell + { + background: blue; + } + #div1 + { + background: black; + height: 100px; + } + #div1, #cell + { + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <colgroup id="colgroup"> + <col> + </colgroup> + <colgroup> + <col> + </colgroup> + <tr> + <td id="cell"></td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-014-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-014-vlr.html new file mode 100644 index 0000000000..0f9a51ac82 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-014-vlr.html @@ -0,0 +1,62 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout - specified column height overrides specified column-group height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A column that has both a column height and column-group height specified will use its column specified height."> + <style type="text/css"> + div.test + { + writing-mode: vertical-lr; + } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 100px; + } + td { padding: 0px; } + #colgroup + { + height: 300px; + } + #cell + { + background: black; + } + #div1 + { + background: blue; + } + #div1, #cell + { + width: 24px; + } + #div1, #col + { + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <colgroup id="colgroup"> + <col id="col"> + </colgroup> + <colgroup> + <col> + </colgroup> + <tr> + <td id="cell"></td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-014-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-014-vrl.html new file mode 100644 index 0000000000..aac53493c6 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-014-vrl.html @@ -0,0 +1,62 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout - specified column height overrides specified column-group height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A column that has both a column height and column-group height specified will use its column specified height."> + <style type="text/css"> + div.test + { + writing-mode: vertical-rl; + } + table + { + border-collapse: collapse; + table-layout: fixed; + height: 100px; + } + td { padding: 0px; } + #colgroup + { + height: 300px; + } + #cell + { + background: blue; + } + #div1 + { + background: black; + } + #div1, #cell + { + width: 24px; + } + #div1, #col + { + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <colgroup id="colgroup"> + <col id="col"> + </colgroup> + <colgroup> + <col> + </colgroup> + <tr> + <td id="cell"></td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-015-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-015-vlr.html new file mode 100644 index 0000000000..cbb026d34f --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-015-vlr.html @@ -0,0 +1,60 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout - specified cell height overrides specified column-group height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A column that has both a cell height and column-group height specified will use its cell specified height."> + <style type="text/css"> + div.test + { + writing-mode: vertical-lr; + } + table + { + border-spacing: 0; + table-layout: fixed; + height: 200px; + } + td { padding: 0px; } + #colgroup + { + height: 75px; + } + #cell + { + background: black; + height: 100px; + } + #div1 + { + background: blue; + height: 100px; + } + #div1, td + { + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <colgroup id="colgroup"> + <col> + </colgroup> + <colgroup> + <col> + </colgroup> + <tr> + <td id="cell"></td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-015-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-015-vrl.html new file mode 100644 index 0000000000..50f378d860 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-015-vrl.html @@ -0,0 +1,63 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table layout - specified cell height overrides specified column-group height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A column that has both a cell height and column-group height specified will use its cell specified height."> + <style type="text/css"> + div.test + { + writing-mode: vertical-rl; + } + table + { + border-spacing: 0; + table-layout: fixed; + height: 200px; + } + #colgroup + { + height: 75px; + } + #cell + { + background: blue; + height: 100px; + } + td + { + padding: 0; + } + #div1 + { + background: black; + height: 100px; + } + #div1, td + { + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <colgroup id="colgroup"> + <col> + </colgroup> + <colgroup> + <col> + </colgroup> + <tr> + <td id="cell"></td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-016-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-016-vlr.html new file mode 100644 index 0000000000..ad4b6944e0 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-016-vlr.html @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table height is maximum between table and sum of column 'height' (sum of columns' heights wins)</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A fixed layout table's height will be the sum of its columns' heights if that number is greater than the table's specified height."> + <style type="text/css"> + div.test + { + writing-mode: vertical-lr; + } + table + { + border-spacing: 0; + table-layout: fixed; + height: 75px; + } + td + { + background: black; + padding: 0; + height: 25px; + } + #div1 + { + background: blue; + height: 100px; + } + #div1, td + { + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <tr> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-016-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-016-vrl.html new file mode 100644 index 0000000000..604dacbe49 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-016-vrl.html @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: Fixed table height is maximum between table and sum of column 'height' (sum of columns' heights wins)</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout"> + <meta name="flags" content=""> + <meta name="assert" content="A fixed layout table's height will be the sum of its columns' heights if that number is greater than the table's specified height."> + <style type="text/css"> + div.test + { + writing-mode: vertical-rl; + } + table + { + border-spacing: 0; + table-layout: fixed; + height: 75px; + } + td + { + background: blue; + padding: 0; + height: 25px; + } + #div1 + { + background: black; + height: 100px; + } + #div1, td + { + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same height.</p> + <div class="test"> + <table> + <tr> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + </table> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-017-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-017-ref.html new file mode 100644 index 0000000000..237db1a831 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-017-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + div.test { + writing-mode: vertical-lr; + padding-left: 4px; } + div.stripe + { + width: 24px; + margin-right: 4px; + margin-top: 172px; + height: 160px; + } + div.blue {background-color: blue;} + div.orange {background-color: orange; margin-left: 0px} + </style> + </head> + <body> + <p>Test passes if the orange stripe is exactly as high as the blue stripe and is vertically positioned the same.</p> + <div class="test"> + <div class="orange stripe"></div> + <div class="blue stripe"></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-017-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-017-vlr.html new file mode 100644 index 0000000000..d3d0e4d025 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-017-vlr.html @@ -0,0 +1,90 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-017-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated and predicted when in 'border-collapse: separate' model." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + table + { + border-collapse: separate; + border-spacing: 4px; + table-layout: fixed; + height: 420px; + } + col#test + { + background-color: orange; + height: 40%; + } + td#third-cell {color: orange;} + td { padding: 0px; width: 24px;} + div#reference + { + background-color: blue; + color: blue; + top: 172px; + width: 24px; + /* + 3 vertical border-spacing separate the start + of table box and the start of 3rd column. + The first 2 columns should each be 80px exactly + since "Any remaining columns equally divide the + remaining vertical table space (minus [table] borders or + cell spacing)." So: + 0px : table border-top + + + 4px : 1st border-spacing + + + 80px : 1st column : (420 - 20) mult by (60% divided by 3) + + + 4px : 2nd border-spacing + + + 80px : 2nd column : (420 - 20) mult by (60% divided by 3) + + + 4px: 3rd border-spacing + ======== + 172px + */ + position: relative; + height: 160px; + /* + 420px : total height of table + - + 20px : 5 times vertical border-spacing + - + 0px : total of vertical table borders + ======== + 400px + mult by + 40% + ======== + 160px + */ + } + </style> + </head> + <body> + <p>Test passes if the orange stripe is exactly as high as the blue stripe and is vertically positioned the same.</p> + <div class="test"> + <table> + <col> + <col> + <col id="test"> + <col> + <tr> + <td></td> + <td></td> + <td id="third-cell">col</td> + <td></td> + </tr> + </table> + <div id="reference">ref</div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-017-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-017-vrl.html new file mode 100644 index 0000000000..b4d90e3a13 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-017-vrl.html @@ -0,0 +1,90 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-017-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated and predicted when in 'border-collapse: separate' model." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-rl; } + table + { + border-collapse: separate; + border-spacing: 4px; + table-layout: fixed; + height: 420px; + } + col#test + { + background-color: orange; + height: 40%; + } + td#third-cell {color: orange;} + td { padding: 0px; width: 24px;} + div#reference + { + background-color: blue; + color: blue; + top: 172px; + width: 24px; + /* + 3 vertical border-spacing separate the start + of table box and the start of 3rd column. + The first 2 columns should each be 80px exactly + since "Any remaining columns equally divide the + remaining vertical table space (minus [table] borders or + cell spacing)." So: + 0px : table border-top + + + 4px : 1st border-spacing + + + 80px : 1st column : (420 - 20) mult by (60% divided by 3) + + + 4px : 2nd border-spacing + + + 80px : 2nd column : (420 - 20) mult by (60% divided by 3) + + + 4px: 3rd border-spacing + ======== + 172px + */ + position: relative; + height: 160px; + /* + 420px : total height of table + - + 20px : 5 times vertical border-spacing + - + 0px : total of vertical table borders + ======== + 400px + mult by + 40% + ======== + 160px + */ + } + </style> + </head> + <body> + <p>Test passes if the orange stripe is exactly as high as the blue stripe and is vertically positioned the same.</p> + <div class="test"> + <div id="reference">ref</div> + <table> + <col> + <col> + <col id="test"> + <col> + <tr> + <td></td> + <td></td> + <td id="third-cell">col</td> + <td></td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-018-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-018-vlr.html new file mode 100644 index 0000000000..266caae5ee --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-018-vlr.html @@ -0,0 +1,93 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-017-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated and predicted when in 'border-collapse: separate' model." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + table + { + border: solid white; + border-width: 6px 0px; + border-collapse: separate; + border-spacing: 2px 4px; + table-layout: fixed; + height: 422px; + } + col#test + { + background-color: orange; + height: 40%; + } + td#third-cell {color: orange;} + td {padding: 0px; width: 24px;} + div#reference + { + background-color: blue; + color: blue; + top: 172px; + width: 24px; + /* + 3 vertical border-spacing and the table + border-left separate the start + of table box and the start of 3rd column. + The first 2 columns should each be 80px exactly + since "Any remaining columns equally divide the + remaining vertical table space (minus [table] borders or + cell spacing)." So: + 6px : table border-left + + + 2px : 1st border-spacing + + + 80px : 1st column : (422 - 10 - 12) mult by (60% divided by 3) + + + 2px : 2nd border-spacing + + + 80px : 2nd column : (422 - 10 - 12) mult by (60% divided by 3) + + + 2px : 3rd border-spacing + ========= + 172px + */ + position: relative; + height: 160px; + /* + 422px : total height of table + - + 12px : total height of vertical borders of table + - + 10px : 5 times vertical border-spacing + ======== + 400px + mult by + 40% + ======== + 160px + */ + } + </style> + </head> + <body> + <p>Test passes if the orange stripe is exactly as high as the blue stripe and is vertically positioned the same.</p> + <div class="test"> + <table> + <col> + <col> + <col id="test"> + <col> + <tr> + <td></td> + <td></td> + <td id="third-cell">col</td> + <td></td> + </tr> + </table> + <div id="reference">ref</div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-018-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-018-vrl.html new file mode 100644 index 0000000000..7b3f3f5170 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-018-vrl.html @@ -0,0 +1,94 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-017-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated and predicted when in 'border-collapse: separate' model." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-rl; } + table + { + border: solid white; + border-width: 6px 0px; + border-collapse: separate; + border-spacing: 2px 4px; + table-layout: fixed; + height: 422px; + } + col#test + { + background-color: orange; + height: 40%; + } + td#third-cell {color: orange;} + td {padding: 0px;} + td { width: 24px; } + div#reference + { + background-color: blue; + color: blue; + width: 24px; + top: 172px; + /* + 3 vertical border-spacing and the table + border-left separate the start + of table box and the start of 3rd column. + The first 2 columns should each be 80px exactly + since "Any remaining columns equally divide the + remaining vertical table space (minus [table] borders or + cell spacing)." So: + 6px : table border-left + + + 2px : 1st border-spacing + + + 80px : 1st column : (422 - 10 - 12) mult by (60% divided by 3) + + + 2px : 2nd border-spacing + + + 80px : 2nd column : (422 - 10 - 12) mult by (60% divided by 3) + + + 2px : 3rd border-spacing + ========= + 172px + */ + position: relative; + height: 160px; + /* + 422px : total height of table + - + 12px : total height of vertical borders of table + - + 10px : 5 times vertical border-spacing + ======== + 400px + mult by + 40% + ======== + 160px + */ + } + </style> + </head> + <body> + <p>Test passes if the orange stripe is exactly as high as the blue stripe and is vertically positioned the same.</p> + <div class="test"> + <div id="reference">ref</div> + <table> + <col> + <col> + <col id="test"> + <col> + <tr> + <td></td> + <td></td> + <td id="third-cell">col</td> + <td></td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-021-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-021-ref.html new file mode 100644 index 0000000000..67214d000b --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-021-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + div.wrapper { + writing-mode: vertical-lr; + margin-top: 52px; + } + div.stripe + { + display: inline-block; + margin-left: 4px; + margin-top: 8px; + margin-bottom: 7px; + width: 24px; + } + div.fuchsia + { + height: 52px; + background-color: fuchsia; + } + div.olive + { + height: 88px; + background-color: olive; + } + div.orange + { + height: 124px; + background-color: orange; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive and orange) stripes have respectively the same heights and the same vertical positions.</p> + <div class="wrapper"> + <div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div></div> + <div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-021-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-021-vlr.html new file mode 100644 index 0000000000..e929c92b25 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-021-vlr.html @@ -0,0 +1,140 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-021-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + table + { + border: white solid; + border-width: 29px 0px; /* vertical table border height is 58px total */ + border-collapse: separate; + border-spacing: 15px 4px; /* vertical border-spacing height is 75px total */ + table-layout: fixed; + height: 533px; + /* + "With this (fast) algorithm, the vertical layout of + the table does not depend on the contents of the cells; + it only depends on the table's height, the height of + the columns, and borders or cell spacing." + http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout + So, + 533px : total table height + - + 58px : total vertical border height + - + 75px : total vertical border-spacing height + ======== + 400px : total to split among the 4 columns + */ + } + col#first + { + background-color: fuchsia; + height: 13%; + /* 400px multiplied by 13% = 52px */ + } + col#second + { + background-color: olive; + height: 22%; + /* 400px multiplied by 22% = 88px */ + } + col#third + { + background-color: orange; + height: 31%; + /* 400px multiplied by 31% = 124px */ + /* + 100% - (13% + 22% + 31%) == 34% for last column + */ + } + td {padding: 10px 0px; width: 24px; } + td#first-cell {color: fuchsia;} + td#second-cell {color: olive;} + td#third-cell {color: orange;} + div {padding: 0px;} + div#reference1st + { + background-color: fuchsia; + color: fuchsia; + top: 44px; /* 29px border-top of table + 15px border-spacing == 44px */ + position: relative; + height: 52px; + width: 24px; + } + div#reference2nd + { + background-color: olive; + color: olive; + right: 24px; + top: 111px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px : 2nd border-spacing + ======= + 111px + */ + position: relative; + height: 88px; + width: 24px; + } + div#reference3rd + { + background-color: orange; + right: 48px; + color: orange; + top: 214px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px : 2nd border-spacing + + + 88px : height of second column + + + 15px : 3rd border-spacing + ======= + 214px + */ + position: relative; + height: 124px; + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive and orange) stripes have respectively the same heights and the same vertical positions.</p> + <div class="test"> + <table> + <col id="first"> + <col id="second"> + <col id="third"> + <col> + <tr> + <td id="first-cell">1st</td> + <td id="second-cell">2nd</td> + <td id="third-cell">3rd</td> + <td></td> + </tr> + </table> + <div id="reference1st">ref</div> + <div id="reference2nd">ref</div> + <div id="reference3rd">ref</div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-021-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-021-vrl.html new file mode 100644 index 0000000000..0486684b93 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-021-vrl.html @@ -0,0 +1,140 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-021-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-rl; } + table + { + border: white solid; + border-width: 29px 0px; /* vertical table border height is 58px total */ + border-collapse: separate; + border-spacing: 15px 4px; /* vertical border-spacing height is 75px total */ + table-layout: fixed; + height: 533px; + /* + "With this (fast) algorithm, the vertical layout of + the table does not depend on the contents of the cells; + it only depends on the table's height, the height of + the columns, and borders or cell spacing." + http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout + So, + 533px : total table height + - + 58px : total vertical border height + - + 75px : total vertical border-spacing height + ======== + 400px : total to split among the 4 columns + */ + } + col#first + { + background-color: fuchsia; + height: 13%; + /* 400px multiplied by 13% = 52px */ + } + col#second + { + background-color: olive; + height: 22%; + /* 400px multiplied by 22% = 88px */ + } + col#third + { + background-color: orange; + height: 31%; + /* 400px multiplied by 31% = 124px */ + /* + 100% - (13% + 22% + 31%) == 34% for last column + */ + } + td {padding: 10px 0px; width: 24px; } + td#first-cell {color: fuchsia;} + td#second-cell {color: olive;} + td#third-cell {color: orange;} + div {padding: 0px; } + div#reference1st + { + background-color: fuchsia; + color: fuchsia; + right: 48px; + top: 44px; /* 29px border-top of table + 15px border-spacing == 44px */ + position: relative; + height: 52px; + width: 24px; + } + div#reference2nd + { + background-color: olive; + color: olive; + right: 24px; + top: 111px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px : 2nd border-spacing + ======= + 111px + */ + position: relative; + height: 88px; + width: 24px; + } + div#reference3rd + { + background-color: orange; + color: orange; + top: 214px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px : 2nd border-spacing + + + 88px : height of second column + + + 15px : 3rd border-spacing + ======= + 214px + */ + position: relative; + height: 124px; + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive and orange) stripes have respectively the same heights and the same vertical positions.</p> + <div class="test"> + <div id="reference1st">ref</div> + <div id="reference2nd">ref</div> + <div id="reference3rd">ref</div> + <table> + <col id="first"> + <col id="second"> + <col id="third"> + <col> + <tr> + <td id="first-cell">1st</td> + <td id="second-cell">2nd</td> + <td id="third-cell">3rd</td> + <td></td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-022-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-022-ref.html new file mode 100644 index 0000000000..febe38ac47 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-022-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + div.wrapper { + writing-mode: vertical-lr; + margin-top: 52px; + } + div.stripe + { + display: inline-block; + margin-left: 4px; + margin-top: 8px; + margin-bottom: 7px; + width: 24px; + } + div.fuchsia + { + height: 52px; + background-color: fuchsia; + } + div.olive + { + height: 100px; + background-color: olive; + } + div.orange + { + height: 124px; + background-color: orange; + } + div.lime + { + height: 124px; + background-color: lime; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p> + <div class="wrapper"> + <div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div><div class="lime stripe"></div></div> + <div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div><div class="lime stripe"></div></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-022-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-022-vlr.html new file mode 100644 index 0000000000..cfeef6be81 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-022-vlr.html @@ -0,0 +1,170 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height and absolute height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-022-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + table + { + border: white solid; + border-width: 29px 0px; /* vertical table border height is 58px total */ + border-collapse: separate; + border-spacing: 15px 4px; /* vertical border-spacing height is 75px total */ + table-layout: fixed; + height: 533px; + /* + "With this (fast) algorithm, the vertical layout of + the table does not depend on the contents of the cells; + it only depends on the table's height, the height of + the columns, and [table] borders or cell spacing." + So, + 533px : total table height + - + 58px : total vertical border-spacing height + - + 75px : total vertical border-spacing height + ======== + 400px : total to split among the 4 columns + */ + } + col#first + { + background-color: fuchsia; + height: 13%; + /* 400px multiplied by 13% = 52px */ + } + col#second + { + background-color: olive; + height: 100px; + } + col#third + { + background-color: orange; + height: 31%; + /* 400px multiplied by 31% = 124px */ + /* + 300px - (52px + 124px) = 124px for last column + */ + } + col#fourth {background-color: lime;} + td {padding: 10px 0px; width: 24px; } + td#first-cell {color: fuchsia;} + td#second-cell {color: olive;} + td#third-cell {color: orange;} + td#fourth-cell {color: lime;} + div {padding: 0px;} + div#reference1st + { + background-color: fuchsia; + color: fuchsia; + top: 44px; /* 29px border-top of table + 15px border-spacing == 44px */ + position: relative; + height: 52px; + width: 24px; + } + div#reference2nd + { + background-color: olive; + color: olive; + right: 24px; + top: 111px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px border-spacing + ====== + 111px + */ + position: relative; + height: 100px; + width: 24px; + } + div#reference3rd + { + background-color: orange; + right: 48px; + color: orange; + top: 226px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px : 2nd border-spacing + + + 100px : height of second column + + + 15px : 3rd border-spacing + ======= + 226px + */ + position: relative; + height: 124px; + width: 24px; + } + div#reference4th + { + background-color: lime; + right: 72px; + color: lime; + top: 365px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px : 2nd border-spacing + + + 100px : height of second column + + + 15px : 3rd border-spacing + + + 124px : height of third column + + + 15px : 4th border-spacing + ======= + 365px + */ + position: relative; + height: 124px; + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p> + <div class="test"> + <table> + <col id="first"> + <col id="second"> + <col id="third"> + <col id="fourth"> + <tr> + <td id="first-cell">1st</td> + <td id="second-cell">2nd</td> + <td id="third-cell">3rd</td> + <td id="fourth-cell">4th</td> + </tr> + </table> + <div id="reference1st">ref</div> + <div id="reference2nd">ref</div> + <div id="reference3rd">ref</div> + <div id="reference4th">ref</div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-022-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-022-vrl.html new file mode 100644 index 0000000000..c26b0938fc --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-022-vrl.html @@ -0,0 +1,170 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height and absolute height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-022-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-rl; } + table + { + border: white solid; + border-width: 29px 0px; /* vertical table border height is 58px total */ + border-collapse: separate; + border-spacing: 15px 4px; /* vertical border-spacing height is 75px total */ + table-layout: fixed; + height: 533px; + /* + "With this (fast) algorithm, the vertical layout of + the table does not depend on the contents of the cells; + it only depends on the table's height, the height of + the columns, and [table] borders or cell spacing." + So, + 533px : total table height + - + 58px : total vertical border-spacing height + - + 75px : total vertical border-spacing height + ======== + 400px : total to split among the 4 columns + */ + } + col#first + { + background-color: fuchsia; + height: 13%; + /* 400px multiplied by 13% = 52px */ + } + col#second + { + background-color: olive; + height: 100px; + } + col#third + { + background-color: orange; + height: 31%; + /* 400px multiplied by 31% = 124px */ + /* + 300px - (52px + 124px) = 124px for last column + */ + } + col#fourth {background-color: lime;} + td {padding: 10px 0px; width: 24px; } + td#first-cell {color: fuchsia;} + td#second-cell {color: olive;} + td#third-cell {color: orange;} + td#fourth-cell {color: lime;} + div {padding: 0px;} + div#reference1st + { + background-color: fuchsia; + color: fuchsia; + top: 44px; /* 29px border-top of table + 15px border-spacing == 44px */ + right: 72px; + position: relative; + height: 52px; + width: 24px; + } + div#reference2nd + { + background-color: olive; + color: olive; + right: 48px; + top: 111px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px border-spacing + ====== + 111px + */ + position: relative; + height: 100px; + width: 24px; + } + div#reference3rd + { + background-color: orange; + right: 24px; + color: orange; + top: 226px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px : 2nd border-spacing + + + 100px : height of second column + + + 15px : 3rd border-spacing + ======= + 226px + */ + position: relative; + height: 124px; + width: 24px; + } + div#reference4th + { + background-color: lime; + color: lime; + top: 365px; + /* + 29px : border-top of table + + + 15px : 1st border-spacing + + + 52px : height of first column + + + 15px : 2nd border-spacing + + + 100px : height of second column + + + 15px : 3rd border-spacing + + + 124px : height of third column + + + 15px : 4th border-spacing + ======= + 365px + */ + position: relative; + height: 124px; + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p> + <div class="test"> + <div id="reference1st">ref</div> + <div id="reference2nd">ref</div> + <div id="reference3rd">ref</div> + <div id="reference4th">ref</div> + <table> + <col id="first"> + <col id="second"> + <col id="third"> + <col id="fourth"> + <tr> + <td id="first-cell">1st</td> + <td id="second-cell">2nd</td> + <td id="third-cell">3rd</td> + <td id="fourth-cell">4th</td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-023-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-023-ref.html new file mode 100644 index 0000000000..4211763ab4 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-023-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + div.wrapper { + writing-mode: vertical-lr; + margin-top: 34px; + } + div.stripe + { + display: inline-block; + margin-left: 4px; + margin-top: 11px; + margin-bottom: 7px; + width: 24px; + } + div.fuchsia + { + height: 52px; + background-color: fuchsia; + } + div.olive + { + height: 100px; + background-color: olive; + } + div.orange + { + height: 124px; + background-color: orange; + } + div.lime + { + height: 124px; + background-color: lime; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p> + <div class="wrapper"> + <div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div><div class="lime stripe"></div></div> + <div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div><div class="lime stripe"></div></div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-023-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-023-vlr.html new file mode 100644 index 0000000000..57eed6640d --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-023-vlr.html @@ -0,0 +1,175 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height and absolute height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-023-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + body + { + margin: 8px; + height: 640px; + } + table + { + border: white solid; + border-width: 11px 0px; /* vertical table border height is 22px total */ + border-collapse: separate; + border-spacing: 18px 4px; /* vertical border-spacing height is 90px total */ + table-layout: fixed; + height: 80%; /* 640px mult by 80% == 512px */ + /* + "With this (fast) algorithm, the vertical layout of + the table does not depend on the contents of the cells; + it only depends on the table's height, the height of + the columns, and [table] borders or cell spacing." + So, + 512px : total table height + - + 90px : total vertical border-spacing height + - + 22px : total vertical border-spacing height + ======== + 400px : total to split among the 4 columns + */ + } + col#first + { + background-color: fuchsia; + height: 13%; + /* 400px multiplied by 13% = 52px */ + } + col#second + { + background-color: olive; + height: 100px; + } + col#third + { + background-color: orange; + height: 31%; + /* 400px multiplied by 31% = 124px */ + /* + 400px - (52px + 100px + 124px) = 124px for last column + */ + } + col#fourth {background-color: lime;} + td {padding: 10px 0px; width: 24px; } + td#first-cell {color: fuchsia;} + td#second-cell {color: olive;} + td#third-cell {color: orange;} + td#fourth-cell {color: lime;} + div {padding: 0px;} + div#reference1st + { + background-color: fuchsia; + color: fuchsia; + top: 29px; /* 11px border-top of table + 18px border-spacing == 29px */ + position: relative; + height: 52px; + width: 24px; + } + div#reference2nd + { + background-color: olive; + right: 24px; + color: olive; + top: 99px; + /* + 11px : border-top of table + + + 18px : 1st border-spacing + + + 52px : height of first column + + + 18px : 2nd border-spacing + ======= + 99px + */ + position: relative; + height: 100px; + width: 24px; + } + div#reference3rd + { + background-color: orange; + right: 48px; + color: orange; + top: 217px; + /* + 11px : border-top of table + + + 18px : 1st border-spacing + + + 52px : height of first column + + + 18px : 2nd border-spacing + + + 100px : height of second column + + + 18px : 3rd border-spacing + ======= + 217px + */ + position: relative; + height: 124px; + width: 24px; + } + div#reference4th + { + background-color: lime; + right: 72px; + color: lime; + top: 359px; + /* + 11px : border-top of table + + + 18px : 1st border-spacing + + + 52px : height of first column + + + 18px : 2nd border-spacing + + + 100px : height of second column + + + 18px : 3rd border-spacing + + + 124px : height of third column + + + 18px : 4th border-spacing + ======= + 359px + */ + position: relative; + height: 124px; + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p> + <div class="test"> + <table> + <col id="first"> + <col id="second"> + <col id="third"> + <col id="fourth"> + <tr> + <td id="first-cell">1st</td> + <td id="second-cell">2nd</td> + <td id="third-cell">3rd</td> + <td id="fourth-cell">4th</td> + </tr> + </table> + <div id="reference1st">ref</div> + <div id="reference2nd">ref</div> + <div id="reference3rd">ref</div> + <div id="reference4th">ref</div> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-023-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-023-vrl.html new file mode 100644 index 0000000000..3f6b042d8b --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-023-vrl.html @@ -0,0 +1,175 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height and absolute height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-023-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-rl; } + body + { + margin: 8px; + height: 640px; + } + table + { + border: white solid; + border-width: 11px 0px; /* vertical table border height is 22px total */ + border-collapse: separate; + border-spacing: 18px 4px; /* vertical border-spacing height is 90px total */ + table-layout: fixed; + height: 80%; /* 640px mult by 80% == 512px */ + /* + "With this (fast) algorithm, the vertical layout of + the table does not depend on the contents of the cells; + it only depends on the table's height, the height of + the columns, and [table] borders or cell spacing." + So, + 512px : total table height + - + 90px : total vertical border-spacing height + - + 22px : total vertical border-spacing height + ======== + 400px : total to split among the 4 columns + */ + } + col#first + { + background-color: fuchsia; + height: 13%; + /* 400px multiplied by 13% = 52px */ + } + col#second + { + background-color: olive; + height: 100px; + } + col#third + { + background-color: orange; + height: 31%; + /* 400px multiplied by 31% = 124px */ + /* + 400px - (52px + 100px + 124px) = 124px for last column + */ + } + col#fourth {background-color: lime;} + td {padding: 10px 0px; width: 24px; } + td#first-cell {color: fuchsia;} + td#second-cell {color: olive;} + td#third-cell {color: orange;} + td#fourth-cell {color: lime;} + div {padding: 0px;} + div#reference1st + { + background-color: fuchsia; + color: fuchsia; + top: 29px; /* 11px border-top of table + 18px border-spacing == 29px */ + right: 72px; + position: relative; + height: 52px; + width: 24px; + } + div#reference2nd + { + background-color: olive; + right: 48px; + color: olive; + top: 99px; + /* + 11px : border-top of table + + + 18px : 1st border-spacing + + + 52px : height of first column + + + 18px : 2nd border-spacing + ======= + 99px + */ + position: relative; + height: 100px; + width: 24px; + } + div#reference3rd + { + background-color: orange; + right: 24px; + color: orange; + top: 217px; + /* + 11px : border-top of table + + + 18px : 1st border-spacing + + + 52px : height of first column + + + 18px : 2nd border-spacing + + + 100px : height of second column + + + 18px : 3rd border-spacing + ======= + 217px + */ + position: relative; + height: 124px; + width: 24px; + } + div#reference4th + { + background-color: lime; + color: lime; + top: 359px; + /* + 11px : border-top of table + + + 18px : 1st border-spacing + + + 52px : height of first column + + + 18px : 2nd border-spacing + + + 100px : height of second column + + + 18px : 3rd border-spacing + + + 124px : height of third column + + + 18px : 4th border-spacing + ======= + 359px + */ + position: relative; + height: 124px; + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p> + <div class="test"> + <div id="reference1st">ref</div> + <div id="reference2nd">ref</div> + <div id="reference3rd">ref</div> + <div id="reference4th">ref</div> + <table> + <col id="first"> + <col id="second"> + <col id="third"> + <col id="fourth"> + <tr> + <td id="first-cell">1st</td> + <td id="second-cell">2nd</td> + <td id="third-cell">3rd</td> + <td id="fourth-cell">4th</td> + </tr> + </table> + </div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-025-ref.html b/layout/reftests/writing-mode/tables/fixed-table-layout-025-ref.html new file mode 100644 index 0000000000..172b85ac9a --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-025-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <style type="text/css"> + div.square + { + width: 100px; + height: 100px; + } + div.green + { + background-color: green; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="green square"></div> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-025-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-025-vlr.html new file mode 100644 index 0000000000..530eeee5aa --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-025-vlr.html @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.htm"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-lr; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + height: 50%; + } + td#left-red-cell, td#right-red-cell {background-color: red;} + td {padding: 25px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="left-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="right-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-025-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-025-vrl.html new file mode 100644 index 0000000000..26ffd948b7 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-025-vrl.html @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-rl; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + height: 50%; + } + td#left-red-cell, td#right-red-cell {background-color: red;} + td {padding: 25px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="left-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="right-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-026-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-026-vlr.html new file mode 100644 index 0000000000..5abcba40f0 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-026-vlr.html @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-lr; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 25px; + border-bottom: green solid 25px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td {padding: 0px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-026-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-026-vrl.html new file mode 100644 index 0000000000..bd4b2438bc --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-026-vrl.html @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-rl; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 25px; + border-bottom: green solid 25px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td {padding: 0px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-027-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-027-vlr.html new file mode 100644 index 0000000000..120475baa3 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-027-vlr.html @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-lr; + border-collapse: collapse; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 25px; + border-bottom: green solid 25px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td#top-red-cell {border-bottom: red solid 24px;} + td#bottom-red-cell {border-top: red solid 25px;} + td {padding: 0px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-027-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-027-vrl.html new file mode 100644 index 0000000000..bd30dacef1 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-027-vrl.html @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-rl; + border-collapse: collapse; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 25px; + border-bottom: green solid 25px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td#top-red-cell {border-bottom: red solid 24px;} + td#bottom-red-cell {border-top: red solid 25px;} + td {padding: 0px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-028-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-028-vlr.html new file mode 100644 index 0000000000..9837521763 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-028-vlr.html @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-lr; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 15px; + border-bottom: green solid 15px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td {padding: 10px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-028-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-028-vrl.html new file mode 100644 index 0000000000..f975ed45fd --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-028-vrl.html @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-rl; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 15px; + border-bottom: green solid 15px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td {padding: 10px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-029-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-029-vlr.html new file mode 100644 index 0000000000..4b55f1f46e --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-029-vlr.html @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-lr; + border-collapse: collapse; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 16px; + border-bottom: green solid 16px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td#top-red-cell {border-bottom: red solid 15px;} + td#bottom-red-cell {border-top: red solid 16px;} + td {padding: 9px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-029-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-029-vrl.html new file mode 100644 index 0000000000..08f7458d8b --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-029-vrl.html @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-rl; + border-collapse: collapse; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 16px; + border-bottom: green solid 16px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td#top-red-cell {border-bottom: red solid 15px;} + td#bottom-red-cell {border-top: red solid 16px;} + td {padding: 9px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-030-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-030-vlr.html new file mode 100644 index 0000000000..e68ff76429 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-030-vlr.html @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-lr; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 25px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td {padding: 25px 50px 0px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-030-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-030-vrl.html new file mode 100644 index 0000000000..a88bfe0ccb --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-030-vrl.html @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-rl; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-top: green solid 25px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td {padding: 25px 50px 0px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-031-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-031-vlr.html new file mode 100644 index 0000000000..047daac238 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-031-vlr.html @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-lr; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-bottom: green solid 25px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td {padding: 25px 50px 0px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-031-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-031-vrl.html new file mode 100644 index 0000000000..cc9ea74c89 --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-031-vrl.html @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model"> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing"> + <link rel="match" href="fixed-table-layout-025-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell."> + <style type="text/css"> + table + { + writing-mode: vertical-rl; + border-spacing: 0px; + table-layout: fixed; + height: 100px; + } + td#middle-green-cell + { + background-color: green; + border-bottom: green solid 25px; + height: 50%; + } + td#top-red-cell, td#bottom-red-cell {background-color: red;} + td {padding: 25px 50px 0px 50px;} + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <table> + <tr> + <td id="top-red-cell"></td> + <td id="middle-green-cell"></td> + <td id="bottom-red-cell"></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/writing-mode/tables/multicol-count-002-ref.xht b/layout/reftests/writing-mode/tables/multicol-count-002-ref.xht new file mode 100644 index 0000000000..499debaf14 --- /dev/null +++ b/layout/reftests/writing-mode/tables/multicol-count-002-ref.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 --> + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: yellow; + font: 1.25em/1 Ahem; + width: 21em; + } + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <!-- body of reference case rewritten by Jonathan Kew to use Ahem glyphs instead of images, + to reduce antialiasing fuzz in comparison with testcases --> + <div> + XXXX XXXX XXXX XXXX + X X X X X X + X X X X X X + XXXX XXXX XXXX XXXX + X X X X X + X X X X X + X X X XXXX XXXX + +</div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/reftest.list b/layout/reftests/writing-mode/tables/reftest.list new file mode 100644 index 0000000000..5ba2bf9c0e --- /dev/null +++ b/layout/reftests/writing-mode/tables/reftest.list @@ -0,0 +1,96 @@ +== vertical-table-1a.html vertical-table-1-ref.html +== vertical-table-1b.html vertical-table-1-ref.html +== vertical-table-2a.html vertical-table-2-ref.html +fuzzy(0-3,0-750) == vertical-table-2b.html vertical-table-2-ref.html +== vertical-table-rowspan-1.html vertical-table-rowspan-1-ref.html +== vertical-table-rowspan-2.html vertical-table-rowspan-2-ref.html +== vertical-table-colspan-1.html vertical-table-colspan-1-ref.html +== vertical-table-colspan-2.html vertical-table-colspan-2-ref.html +== vertical-table-specified-width-1.html vertical-table-specified-width-1-ref.html +== vertical-table-specified-width-2.html vertical-table-specified-width-2-ref.html +fuzzy-if(cocoaWidget,0-141,0-24) == vertical-border-collapse-1.html vertical-border-collapse-1-ref.html +fuzzy-if(cocoaWidget,0-141,0-24) == vertical-border-collapse-2.html vertical-border-collapse-2-ref.html + +== fixed-table-layout-002-vlr.html fixed-table-layout-002-ref.html +== fixed-table-layout-003-vlr.html fixed-table-layout-002-ref.html +== fixed-table-layout-004-vlr.html fixed-table-layout-004-ref.html +== fixed-table-layout-005-vlr.html fixed-table-layout-005-ref.html +== fixed-table-layout-006-vlr.html fixed-table-layout-006-ref.html +== fixed-table-layout-007-vlr.html fixed-table-layout-007-ref.html +== fixed-table-layout-009-vlr.html fixed-table-layout-009-ref.html +fuzzy-if(Android,0-255,0-400) == fixed-table-layout-010-vlr.html fixed-table-layout-010-ref.html +== fixed-table-layout-012-vlr.html fixed-table-layout-012-ref.html +== fixed-table-layout-013-vlr.html fixed-table-layout-002-ref.html +== fixed-table-layout-014-vlr.html fixed-table-layout-002-ref.html +== fixed-table-layout-015-vlr.html fixed-table-layout-002-ref.html +== fixed-table-layout-016-vlr.html fixed-table-layout-002-ref.html +fuzzy(0-1,0-56) fuzzy-if(Android,0-1,0-63) == fixed-table-layout-017-vlr.html fixed-table-layout-017-ref.html +fuzzy(0-1,0-56) fuzzy-if(Android,0-1,0-63) == fixed-table-layout-018-vlr.html fixed-table-layout-017-ref.html +fuzzy(0-1,0-102) == fixed-table-layout-021-vlr.html fixed-table-layout-021-ref.html +fuzzy(0-1,0-102) == fixed-table-layout-022-vlr.html fixed-table-layout-022-ref.html +fuzzy(0-1,0-102) == fixed-table-layout-023-vlr.html fixed-table-layout-023-ref.html +== fixed-table-layout-025-vlr.html fixed-table-layout-025-ref.html +== fixed-table-layout-026-vlr.html fixed-table-layout-025-ref.html +== fixed-table-layout-027-vlr.html fixed-table-layout-025-ref.html +== fixed-table-layout-028-vlr.html fixed-table-layout-025-ref.html +== fixed-table-layout-029-vlr.html fixed-table-layout-025-ref.html +== fixed-table-layout-030-vlr.html fixed-table-layout-025-ref.html +== fixed-table-layout-031-vlr.html fixed-table-layout-025-ref.html + +== fixed-table-layout-002-vrl.html fixed-table-layout-002-ref.html +== fixed-table-layout-003-vrl.html fixed-table-layout-002-ref.html +== fixed-table-layout-004-vrl.html fixed-table-layout-004-ref.html +== fixed-table-layout-005-vrl.html fixed-table-layout-005-ref.html +== fixed-table-layout-006-vrl.html fixed-table-layout-006-ref.html +== fixed-table-layout-007-vrl.html fixed-table-layout-007-ref.html +== fixed-table-layout-009-vrl.html fixed-table-layout-009-ref.html +fuzzy-if(Android,0-255,0-400) == fixed-table-layout-010-vrl.html fixed-table-layout-010-ref.html +== fixed-table-layout-012-vrl.html fixed-table-layout-012-ref.html +== fixed-table-layout-013-vrl.html fixed-table-layout-002-ref.html +== fixed-table-layout-014-vrl.html fixed-table-layout-002-ref.html +== fixed-table-layout-015-vrl.html fixed-table-layout-002-ref.html +== fixed-table-layout-016-vrl.html fixed-table-layout-002-ref.html +fuzzy(0-1,0-56) fuzzy-if(Android,0-1,0-63) == fixed-table-layout-017-vrl.html fixed-table-layout-017-ref.html +fuzzy(0-1,0-56) fuzzy-if(Android,0-1,0-63) == fixed-table-layout-018-vrl.html fixed-table-layout-017-ref.html +fuzzy(0-1,0-102) == fixed-table-layout-021-vrl.html fixed-table-layout-021-ref.html +fuzzy(0-1,0-102) == fixed-table-layout-022-vrl.html fixed-table-layout-022-ref.html +fuzzy(0-1,0-102) == fixed-table-layout-023-vrl.html fixed-table-layout-023-ref.html +== fixed-table-layout-025-vrl.html fixed-table-layout-025-ref.html +== fixed-table-layout-026-vrl.html fixed-table-layout-025-ref.html +== fixed-table-layout-027-vrl.html fixed-table-layout-025-ref.html +== fixed-table-layout-028-vrl.html fixed-table-layout-025-ref.html +== fixed-table-layout-029-vrl.html fixed-table-layout-025-ref.html +== fixed-table-layout-030-vrl.html fixed-table-layout-025-ref.html +== fixed-table-layout-031-vrl.html fixed-table-layout-025-ref.html + +== s72-border-spacing-002.xht s72-border-spacing-002-ref.xht +== s72-border-spacing-003.xht s72-border-spacing-002-ref.xht +== s72-border-spacing-004.xht s72-border-spacing-002-ref.xht +== s72-border-spacing-005.xht s72-border-spacing-002-ref.xht +fuzzy-if(winWidget,0-48,0-600) fuzzy-if(cocoaWidget,0-19,0-97) == wm-row-progression-002.xht multicol-count-002-ref.xht +fuzzy-if(winWidget,0-48,0-600) fuzzy-if(cocoaWidget,0-19,0-97) == wm-row-progression-003.xht multicol-count-002-ref.xht +fuzzy-if(winWidget,0-48,0-600) fuzzy-if(cocoaWidget,0-19,0-97) == wm-row-progression-004.xht multicol-count-002-ref.xht +fuzzy-if(winWidget,0-48,0-600) fuzzy-if(cocoaWidget,0-19,0-97) == wm-row-progression-005.xht multicol-count-002-ref.xht +fuzzy-if(winWidget,0-48,0-600) fuzzy-if(cocoaWidget,0-19,0-97) == wm-row-progression-006.xht multicol-count-002-ref.xht +fuzzy-if(winWidget,0-48,0-600) fuzzy-if(cocoaWidget,0-19,0-97) == wm-row-progression-007.xht multicol-count-002-ref.xht + +fuzzy-if(Android,0-255,0-38) == table-caption-top-1.html table-caption-top-1-ref.html +fuzzy-if(Android,0-255,0-38) == table-caption-bottom-1.html table-caption-bottom-1-ref.html + +== border-collapse-bevels-1a.html border-collapse-bevels-1-ref.html +fuzzy-if(cocoaWidget,0-23,0-162) == border-collapse-bevels-1b.html border-collapse-bevels-1-ref.html +fuzzy-if(cocoaWidget,0-23,0-162) == border-collapse-bevels-1c.html border-collapse-bevels-1-ref.html +fuzzy-if(cocoaWidget,0-23,0-162) == border-collapse-bevels-1d.html border-collapse-bevels-1-ref.html +fuzzy-if(cocoaWidget,0-23,0-162) == border-collapse-bevels-1e.html border-collapse-bevels-1-ref.html + +== vertical-rl-row-progression-1a.html vertical-rl-row-progression-1-ref.html +== vertical-rl-row-progression-1b.html vertical-rl-row-progression-1-ref.html +== sideways-lr-row-progression-1a.html sideways-lr-row-progression-1-ref.html +== sideways-lr-row-progression-1b.html sideways-lr-row-progression-1-ref.html +== sideways-rl-row-progression-1a.html sideways-rl-row-progression-1-ref.html +== sideways-rl-row-progression-1b.html sideways-rl-row-progression-1-ref.html + +== 1259168-ref.html 1259168-vrl.html +== 1259168-ref.html 1259168-vlr.html +== 1259168-ref.html 1259168-srl.html +== 1259168-ref.html 1259168-slr.html diff --git a/layout/reftests/writing-mode/tables/s72-border-spacing-002-ref.xht b/layout/reftests/writing-mode/tables/s72-border-spacing-002-ref.xht new file mode 100644 index 0000000000..958ba060f1 --- /dev/null +++ b/layout/reftests/writing-mode/tables/s72-border-spacing-002-ref.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <meta name="flags" content="image" /> + + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div><img src="support/swatch-green.png" width="100" height="200" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/s72-border-spacing-002.xht b/layout/reftests/writing-mode/tables/s72-border-spacing-002.xht new file mode 100644 index 0000000000..3e8ba5d5e0 --- /dev/null +++ b/layout/reftests/writing-mode/tables/s72-border-spacing-002.xht @@ -0,0 +1,144 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: border-spacing - first value is specified and non-zero in 'vertical-rl' table</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/#dimension-mapping" title="7.2 Dimension Mapping" /> + <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders" title="17.6.1 The separated borders model" /> + <link rel="match" href="s72-border-spacing-002-ref.xht" /> + + <!-- + To be replaced with + <link rel="match" href="border-spacing-wm-002-ref.xht" /> + --> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that first value of 'border-spacing' represents, from top to bottom, a) spacing between logical table right padding (physical table top padding) and rightmost cells and b) inter-column spacing and c) spacing between leftmost cells and logical table left padding (physical table bottom padding)." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + table + { + border-spacing: 0.5em 0em; /* computes to logical horizontal border-spacing: 10px */ + font: 1.25em/1 Ahem; /* computes to 20px/20px */ + padding: 1.25em 0em; /* computes to padding-top: 25px and padding-bottom: 25px */ + -ah-writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; + writing-mode: tb-rl; /* IE11 */ + writing-mode: vertical-rl; + } + + td + { + height: 0.5em; + padding: 0em; + width: 1em; + } + + /* + + 0px width of nth row 20px TOP + | | + =================================== 0x (0em) ||| + | table padding-top 25px (1.25em) | ||| + | with red background=color | \ ||| / + | with red background=color | \ / + | with red background=color | \ / + | with red background=color | v + =================================== 25px (1.25em) + |logical righ border-spacing: 10px| + | with red background=color | + =================================== 35px (1.75em) + | height of 1st td 10px (0.5em) | ||| + | with red background=color | ||| + =================================== 45px (2.25em) \ ||| / + |inter-column spacing 10px (0.5em)| \ / + | with red background=color | \ / + =================================== 55px (2.75em) v + | height of 2nd td 10px (0.5em) | + | with red background=color | + =================================== 65px (3.25em) + |logical left border-spacing: 10px| ||| + | with red background=color | ||| + =================================== 75px (3.75em) \ ||| / + |tble padding-bottom 25px (1.25em)| \ / + | with red background=color | \ / + | with red background=color | v + | with red background=color | + | with red background=color | + =================================== 100px (5em) BOTTOM + + */ + + div#reference-overlapping-green + { + background-color: green; + height: 6.25em; + position: absolute; + width: 6.25em; + } + + div#reference-overlapped-red + { + background-color: red; + height: 6.25em; + position: absolute; + width: 6.25em; + z-index: -1; + } + + table#test-overlapped-red + { + background-color: red; + } + + table#test-overlapping-green + { + background-color: green; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div id="reference-overlapping-green"></div> + + <table id="test-overlapped-red"> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + </table> + + <div id="reference-overlapped-red"></div> + + <table id="test-overlapping-green"> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/s72-border-spacing-003.xht b/layout/reftests/writing-mode/tables/s72-border-spacing-003.xht new file mode 100644 index 0000000000..eba0a9dd51 --- /dev/null +++ b/layout/reftests/writing-mode/tables/s72-border-spacing-003.xht @@ -0,0 +1,144 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: border-spacing - first value is specified and non-zero in 'vertical-lr' table</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/#dimension-mapping" title="7.2 Dimension Mapping" /> + <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders" title="17.6.1 The separated borders model" /> + <link rel="match" href="s72-border-spacing-002-ref.xht" /> + + <!-- + To be replaced with + <link rel="match" href="border-spacing-wm-002-ref.xht" /> + --> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that first value of 'border-spacing' represents, from top to bottom, a) spacing between logical table left padding (physical table top padding) and leftmost cells and b) inter-column spacing and c) spacing between rightmost cells and logical table right padding (physical table bottom padding)." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + table + { + border-spacing: 0.5em 0em; /* computes to logical horizontal border-spacing: 10px */ + font: 1.25em/1 Ahem; /* computes to 20px/20px */ + padding: 1.25em 0em; /* computes to padding-top: 25px and padding-bottom: 25px */ + -ah-writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; + writing-mode: tb-lr; /* IE11 */ + writing-mode: vertical-lr; + } + + td + { + height: 0.5em; + padding: 0em; + width: 1em; + } + + /* + + 0px width of nth row 20px TOP + | | + =================================== 0x (0em) ||| + | table padding-top 25px (1.25em) | ||| + | with red background=color | \ ||| / + | with red background=color | \ / + | with red background=color | \ / + | with red background=color | v + =================================== 25px (1.25em) + |logical left border-spacing: 10px| + | with red background=color | + =================================== 35px (1.75em) + | height of 1st td 10px (0.5em) | ||| + | with red background=color | ||| + =================================== 45px (2.25em) \ ||| / + |inter-column spacing 10px (0.5em)| \ / + | with red background=color | \ / + =================================== 55px (2.75em) v + | height of 2nd td 10px (0.5em) | + | with red background=color | + =================================== 65px (3.25em) + |logical righ border-spacing: 10px| ||| + | with red background=color | ||| + =================================== 75px (3.75em) \ ||| / + |tble padding-bottom 25px (1.25em)| \ / + | with red background=color | \ / + | with red background=color | v + | with red background=color | + | with red background=color | + =================================== 100px (5em) BOTTOM + + */ + + div#reference-overlapping-green + { + background-color: green; + height: 6.25em; + position: absolute; + width: 6.25em; + } + + div#reference-overlapped-red + { + background-color: red; + height: 6.25em; + position: absolute; + width: 6.25em; + z-index: -1; + } + + table#test-overlapped-red + { + background-color: red; + } + + table#test-overlapping-green + { + background-color: green; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div id="reference-overlapping-green"></div> + + <table id="test-overlapped-red"> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + </table> + + <div id="reference-overlapped-red"></div> + + <table id="test-overlapping-green"> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + <tr><td></td><td></td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/s72-border-spacing-004.xht b/layout/reftests/writing-mode/tables/s72-border-spacing-004.xht new file mode 100644 index 0000000000..db81c77c87 --- /dev/null +++ b/layout/reftests/writing-mode/tables/s72-border-spacing-004.xht @@ -0,0 +1,124 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: border-spacing - second value is specified and non-zero in 'vertical-rl' table</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/#dimension-mapping" title="7.2 Dimension Mapping" /> + <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders" title="17.6.1 The separated borders model" /> + <link rel="match" href="s72-border-spacing-002-ref.xht" /> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that second value of 'border-spacing' represents, from right to left, a) spacing between logical table top padding (physical table right padding) and topmost cells and b) inter-row spacing and c) between bottommost cells and logical table bottom padding (physical table left padding)." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + table + { + border-spacing: 0em 0.5em; /* computes to logical vertical border-spacing: 10px */ + font: 1.25em/1 Ahem; /* computes to 20px/20px */ + padding: 0em 1.25em; /* computes to padding-left: 25px and padding-right: 25px */ + -ah-writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; + writing-mode: tb-rl; /* IE11 */ + writing-mode: vertical-rl; + } + + td + { + height: 1em; + padding: 0em; + width: 0.5em; + } + + /* + + 0px 25px 35px 45px 55px 65px 75px 100px + | padding-left | left | 2nd | middle | 1st | right | padding-right| + | of table | vert. | right | vert. | right | vert. | of table | + | | border | most | border | most | border | | + | | spacing| row | spacing| row | spacing| | +20| | | | | | | | +px| | | | | | | | + | | | | | | | | + | | | | | | | | + | | | | | | | | +40| | | | | | | | +px| | | | | | | | + | | | | | | | | + | | | | | | | | + | | | | | | | | +60| | | | | | | | +px| | | | | | | | + | | | | | | | | + | | | | | | | | + | | | | | | | | +80| | | | | | | | +px| | | | | | | | + | | | | | | | | + | | | | | | | | + | | | | | | | | +00| | | | | | | | +px| | | | | | | | + + */ + + div#reference-overlapping-green + { + background-color: green; + height: 6.25em; + position: absolute; + width: 6.25em; + } + + div#reference-overlapped-red + { + background-color: red; + height: 6.25em; + position: absolute; + width: 6.25em; + z-index: -1; + } + + table#test-overlapped-red + { + background-color: red; + } + + table#test-overlapping-green + { + background-color: green; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div id="reference-overlapping-green"></div> + + <table id="test-overlapped-red"> + + <tr><td></td><td></td><td></td><td></td><td></td></tr> + + <tr><td></td><td></td><td></td><td></td><td></td></tr> + + </table> + + <div id="reference-overlapped-red"></div> + + <table id="test-overlapping-green"> + + <tr><td></td><td></td><td></td><td></td><td></td></tr> + + <tr><td></td><td></td><td></td><td></td><td></td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/s72-border-spacing-005.xht b/layout/reftests/writing-mode/tables/s72-border-spacing-005.xht new file mode 100644 index 0000000000..0fd61d0f22 --- /dev/null +++ b/layout/reftests/writing-mode/tables/s72-border-spacing-005.xht @@ -0,0 +1,124 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: border-spacing - second value is specified and non-zero in 'vertical-lr' table</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/#dimension-mapping" title="7.2 Dimension Mapping" /> + <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders" title="17.6.1 The separated borders model" /> + <link rel="match" href="s72-border-spacing-002-ref.xht" /> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that second value of 'border-spacing' represents, from left to right, a) spacing between logical table top padding (physical table left padding) and topmost cells and b) inter-row spacing and c) spacing between bottommost cells and logical table bottom padding (physical table right padding)." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + table + { + border-spacing: 0em 0.5em; /* computes to logical vertical border-spacing: 10px */ + font: 1.25em/1 Ahem; /* computes to 20px/20px */ + padding: 0em 1.25em; /* computes to padding-left: 25px and padding-right: 25px */ + -ah-writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; + writing-mode: tb-lr; /* IE11 */ + writing-mode: vertical-lr; + } + + td + { + height: 1em; + padding: 0em; + width: 0.5em; + } + + /* + + 0px 25px 35px 45px 55px 65px 75px 100px + | padding-left | left | 2nd | middle | 1st | right | padding-right| + | of table | vert. | row | vert. | right | vert. | of table | + | | border | | border | most | border | | + | | spacing| | spacing| row | spacing| | +20| | | | | | | | +px| | | | | | | | + | | | | | | | | + | | | | | | | | + | | | | | | | | +40| | | | | | | | +px| | | | | | | | + | | | | | | | | + | | | | | | | | + | | | | | | | | +60| | | | | | | | +px| | | | | | | | + | | | | | | | | + | | | | | | | | + | | | | | | | | +80| | | | | | | | +px| | | | | | | | + | | | | | | | | + | | | | | | | | + | | | | | | | | +00| | | | | | | | +px| | | | | | | | + + */ + + div#reference-overlapping-green + { + background-color: green; + height: 6.25em; + position: absolute; + width: 6.25em; + } + + div#reference-overlapped-red + { + background-color: red; + height: 6.25em; + position: absolute; + width: 6.25em; + z-index: -1; + } + + table#test-overlapped-red + { + background-color: red; + } + + table#test-overlapping-green + { + background-color: green; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div id="reference-overlapping-green"></div> + + <table id="test-overlapped-red"> + + <tr><td></td><td></td><td></td><td></td><td></td></tr> + + <tr><td></td><td></td><td></td><td></td><td></td></tr> + + </table> + + <div id="reference-overlapped-red"></div> + + <table id="test-overlapping-green"> + + <tr><td></td><td></td><td></td><td></td><td></td></tr> + + <tr><td></td><td></td><td></td><td></td><td></td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1-ref.html b/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1-ref.html new file mode 100644 index 0000000000..930ce16dd9 --- /dev/null +++ b/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title>CSS Reference: sideways-lr Table Row/Rowgroup/Cell Ordering</title> +<link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com"> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> +<!-- based on vertical-rl Table Row/Rowgroup/Cell Ordering tests by Elika J. Etemad --> + +<style> + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table> + <tr> + <td rowspan=2> + <td class="e"> + <td rowspan=2 colspan=2> + <td rowspan=3> + <td class="d"> + </tr> + <tr> + <td rowspan=2> + <td class="c"> + </tr> + <tr> + <td class="b"> + <td class="f"> + <td class="g"> + <td rowspan=2> + </tr> + <tr> + <td class="a"> + <td colspan=3> + <td class="h"> + </tr> +</table> diff --git a/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1a.html b/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1a.html new file mode 100644 index 0000000000..68d15a91c9 --- /dev/null +++ b/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1a.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>CSS Test: sideways-lr Table Row/Rowgroup/Cell Ordering</title> +<link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com"> +<meta name="assert" content="This test checks that sideways-lr tables order rows/rowgroups left to right and cells bottom-to-top (LTR) per 'direction'."> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> +<!-- based on vertical-rl Table Row/Rowgroup/Cell Ordering tests by Elika J. Etemad --> + +<style> + .test { + writing-mode: sideways-lr; + } + + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table class="test"> + <thead> + <tr> + <td class="a"> + <td class="b"> + <td colspan=2> + </tr> + </thead> + <tfoot> + <tr> + <td colspan=2> + <td class="c"> + <td class="d"> + </tr> + </tfoot> + <tbody> + <tr> + <td rowspan=3> + <td colspan=2> + <td class="e"> + </tr> + <tr> + <td class="f"> + <td rowspan=2 colspan=2> + </tr> + <tr> + <td class="g"> + </tr> + </tbody> + <tbody> + <tr> + <td class="h"> + <td colspan=3> + </tr> + </tbody> +</table> diff --git a/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1b.html b/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1b.html new file mode 100644 index 0000000000..70172efb94 --- /dev/null +++ b/layout/reftests/writing-mode/tables/sideways-lr-row-progression-1b.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<title>CSS Test: sideways-lr Table Row/Rowgroup/Cell Ordering</title> +<link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com"> +<meta name="assert" content="This test checks that sideways-lr tables order rows/rowgroups left to right and cells top-to-bottom (RTL) per 'direction'."> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> +<!-- based on vertical-rl Table Row/Rowgroup/Cell Ordering tests by Elika J. Etemad --> + +<style> + .test { + writing-mode: sideways-lr; + direction: rtl; + } + + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table class="test"> + <thead> + <tr> + <td colspan=2> + <td class="b"> + <td class="a"> + </tr> + </thead> + <tfoot> + <tr> + <td class="d"> + <td class="c"> + <td colspan=2> + </tr> + </tfoot> + <tbody> + <tr> + <td class="e"> + <td colspan=2> + <td rowspan=3> + </tr> + <tr> + <td rowspan=2 colspan=2> + <td class="f"> + </tr> + <tr> + <td class="g"> + </tr> + </tbody> + <tbody> + <tr> + <td colspan=3> + <td class="h"> + </tr> + </tbody> +</table> diff --git a/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1-ref.html b/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1-ref.html new file mode 100644 index 0000000000..64f29765e7 --- /dev/null +++ b/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<title>CSS Reference: sideways-rl Table Row/Rowgroup/Cell Ordering</title> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> +<!-- based on equivalent testcase for vertical-rl mode by Elika J. Etemad --> + +<style> + .test { + writing-mode: sideways-rl; + } + + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table class="reference"> + <tr> + <td rowspan=2> + <td class="h"> + <td colspan=3"> + <td class="a"> + </tr> + <tr> + <td rowspan=3"> + <td class="g"> + <td class="f"> + <td rowspan=2"> + <td class="b"> + </tr> + <tr> + <td class="c"> + <td rowspan=2 colspan=2> + <td rowspan=2> + </tr> + <tr> + <td class="d"> + <td class="e"> + </tr> +</table> diff --git a/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1a.html b/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1a.html new file mode 100644 index 0000000000..c2096757f7 --- /dev/null +++ b/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1a.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>CSS Test: sideways-rl Table Row/Rowgroup/Cell Ordering</title> +<meta name="assert" content="This test checks that sideways-rl tables order rows/rowgroups right to left and cells top-to-bottom (LTR) per 'direction'."> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> +<!-- based on equivalent testcase for vertical-rl mode by Elika J. Etemad --> + +<style> + .test { + writing-mode: sideways-rl; + direction: ltr; + } + + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table class="test"> + <thead> + <tr> + <td class="a"> + <td class="b"> + <td colspan=2> + </tr> + </thead> + <tfoot> + <tr> + <td colspan=2> + <td class="c"> + <td class="d"> + </tr> + </tfoot> + <tbody> + <tr> + <td rowspan=3> + <td colspan=2> + <td class="e"> + </tr> + <tr> + <td class="f"> + <td rowspan=2 colspan=2> + </tr> + <tr> + <td class="g"> + </tr> + </tbody> + <tbody> + <tr> + <td class="h"> + <td colspan=3> + </tr> + </tbody> +</table> diff --git a/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1b.html b/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1b.html new file mode 100644 index 0000000000..5ef6875511 --- /dev/null +++ b/layout/reftests/writing-mode/tables/sideways-rl-row-progression-1b.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>CSS Test: sideways-rl Table Row/Rowgroup/Cell Ordering</title> +<meta name="assert" content="This test checks that sideways-rl tables order rows/rowgroups right to left and cells bottom-to-top (RTL) per 'direction'."> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> +<!-- based on equivalent testcase for vertical-rl mode by Elika J. Etemad --> + +<style> + .test { + writing-mode: sideways-rl; + direction: rtl; + } + + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table class="test"> + <thead> + <tr> + <td colspan=2> + <td class="b"> + <td class="a"> + </tr> + </thead> + <tfoot> + <tr> + <td class="d"> + <td class="c"> + <td colspan=2> + </tr> + </tfoot> + <tbody> + <tr> + <td class="e"> + <td colspan=2> + <td rowspan=3> + </tr> + <tr> + <td rowspan=2 colspan=2> + <td class="f"> + </tr> + <tr> + <td class="g"> + </tr> + </tbody> + <tbody> + <tr> + <td colspan=3> + <td class="h"> + </tr> + </tbody> +</table> diff --git a/layout/reftests/writing-mode/tables/support/ahem.css b/layout/reftests/writing-mode/tables/support/ahem.css new file mode 100644 index 0000000000..cf2cd818f4 --- /dev/null +++ b/layout/reftests/writing-mode/tables/support/ahem.css @@ -0,0 +1,4 @@ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} diff --git a/layout/reftests/writing-mode/tables/support/swatch-green.png b/layout/reftests/writing-mode/tables/support/swatch-green.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/layout/reftests/writing-mode/tables/support/swatch-green.png diff --git a/layout/reftests/writing-mode/tables/table-caption-bottom-1-ref.html b/layout/reftests/writing-mode/tables/table-caption-bottom-1-ref.html new file mode 100644 index 0000000000..ae36e72e88 --- /dev/null +++ b/layout/reftests/writing-mode/tables/table-caption-bottom-1-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { + font: 0px sans-serif; +} +body > div { + margin-bottom: 10px; +} +.h { + writing-mode: horizontal-tb; +} +.vlr { + writing-mode: vertical-lr; +} +.vrl { + writing-mode: vertical-rl; +} +.t { + width: 200px; + height: 100px; + background: silver; +} +.c { + background: cyan; + text-align: center; + min-block-size: 20px; + font-size: 12px; +} +</style> +</head> +<body> + +<div class="h"> + <div class="t"></div> + <div class="c" style="width: 200px">table caption</div> +</div> + +<div class="h"> + <div class="t"></div> + <div class="c" style="width: 200px">table caption</div> +</div> + +<div class="vlr"> + <div class="t"></div> + <div class="c" style="height: 100px">table caption</div> +</div> + +<div class="vrl"> + <div class="t"></div> + <div class="c" style="height: 100px">table caption</div> +</div> diff --git a/layout/reftests/writing-mode/tables/table-caption-bottom-1.html b/layout/reftests/writing-mode/tables/table-caption-bottom-1.html new file mode 100644 index 0000000000..74cd13dd2a --- /dev/null +++ b/layout/reftests/writing-mode/tables/table-caption-bottom-1.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { + font: 12px sans-serif; +} +.h { + writing-mode: horizontal-tb; +} +.vlr { + writing-mode: vertical-lr; +} +.vrl { + writing-mode: vertical-rl; +} +.ltr { + direction: ltr; +} +.rtl { + direction: rtl; +} +table { + border-spacing: 0; + margin-bottom: 10px; + caption-side: bottom; +} +td { + width: 200px; + height: 100px; + background: silver; + padding: 0; +} +caption { + background: cyan; + min-block-size: 20px; +} +</style> +</head> +<body> + +<table class="h ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="h rtl"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="vlr ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="vrl ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> diff --git a/layout/reftests/writing-mode/tables/table-caption-top-1-ref.html b/layout/reftests/writing-mode/tables/table-caption-top-1-ref.html new file mode 100644 index 0000000000..ac90c6ec20 --- /dev/null +++ b/layout/reftests/writing-mode/tables/table-caption-top-1-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { + font: 0px sans-serif; +} +body > div { + margin-bottom: 10px; +} +.h { + writing-mode: horizontal-tb; +} +.vlr { + writing-mode: vertical-lr; +} +.vrl { + writing-mode: vertical-rl; +} +.t { + width: 200px; + height: 100px; + background: silver; +} +.c { + background: cyan; + text-align: center; + min-block-size: 20px; + font-size: 12px; +} +</style> +</head> +<body> + +<div class="h"> + <div class="c" style="width: 200px">table caption</div> + <div class="t"></div> +</div> + +<div class="h"> + <div class="c" style="width: 200px">table caption</div> + <div class="t"></div> +</div> + +<div class="vlr"> + <div class="c" style="height: 100px">table caption</div> + <div class="t"></div> +</div> + +<div class="vrl"> + <div class="c" style="height: 100px">table caption</div> + <div class="t"></div> +</div> diff --git a/layout/reftests/writing-mode/tables/table-caption-top-1.html b/layout/reftests/writing-mode/tables/table-caption-top-1.html new file mode 100644 index 0000000000..5955d01461 --- /dev/null +++ b/layout/reftests/writing-mode/tables/table-caption-top-1.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { + font: 12px sans-serif; +} +.h { + writing-mode: horizontal-tb; +} +.vlr { + writing-mode: vertical-lr; +} +.vrl { + writing-mode: vertical-rl; +} +.ltr { + direction: ltr; +} +.rtl { + direction: rtl; +} +table { + border-spacing: 0; + margin-bottom: 10px; + caption-side: top; +} +td { + width: 200px; + height: 100px; + background: silver; + padding: 0; +} +caption { + background: cyan; + min-block-size: 20px; +} +</style> +</head> +<body> + +<table class="h ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="h rtl"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="vlr ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> + +<table class="vrl ltr"> + <caption>table caption</caption> + <tr><td></td></tr> +</table> diff --git a/layout/reftests/writing-mode/tables/vertical-border-collapse-1-ref.html b/layout/reftests/writing-mode/tables/vertical-border-collapse-1-ref.html new file mode 100644 index 0000000000..30e67d7dda --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-border-collapse-1-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border: 8px solid silver; + border-right-color: #666; + border-bottom-color: #333; + border-spacing: 5px; + border-collapse: collapse; +} +td { + border: 4px solid black; + height: 50px; + width: 20px; + text-align: center; +} +tr:nth-child(2) > td { + height: 80px; +} +tr:nth-child(4) > td { + height: 120px; +} +col:nth-child(even) { + background: #ffc; +} +col:nth-child(odd) { + background: #cff; +} +col:nth-child(1) { + background: #fcf; + width: 50px; +} +</style> +</head> +<body> + +<table> +<col/><col/><col/><col/><col/> +<tr> <td rowspan=3> </td> <td colspan=3> </td> <td> </td> </tr> +<tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> +<tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> +<tr> <td> </td> <td> </td> <td colspan=2> </td> <td> </td> </tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-border-collapse-1.html b/layout/reftests/writing-mode/tables/vertical-border-collapse-1.html new file mode 100644 index 0000000000..599302ff79 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-border-collapse-1.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border: 8px solid silver; + border-right-color: #666; + border-bottom-color: #333; + border-spacing: 5px; + border-collapse: collapse; + writing-mode: vertical-lr; +} +td { + border: 4px solid black; + height: 50px; + width: 20px; + text-align: center; +} +td.w1 { + height: 80px; +} +td.w2 { + height: 120px; +} +tr:nth-child(even) { + background: #ffc; +} +tr:nth-child(odd) { + background: #cff; +} +tr:nth-child(1) { + background: #fcf; + width: 50px; +} +</style> +</head> +<body> + +<table> +<tr><td colspan=3> </td> <td> </td> </tr> +<tr><td rowspan=3> </td><td class="w1"> </td><td> </td><td> </td> </tr> +<tr> <td> </td> <td> </td><td rowspan=2> </td> </tr> +<tr> <td> </td> <td> </td> </tr> +<tr><td> </td> <td> </td> <td> </td><td class="w2"> </td></tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-border-collapse-2-ref.html b/layout/reftests/writing-mode/tables/vertical-border-collapse-2-ref.html new file mode 100644 index 0000000000..a74ee00655 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-border-collapse-2-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border: 8px solid silver; + border-right-color: #666; + border-bottom-color: #333; + border-spacing: 5px; + border-collapse: collapse; +} +td { + border: 4px solid black; + height: 50px; + width: 20px; + text-align: center; +} +tr:nth-child(2) > td { + height: 80px; +} +tr:nth-child(4) > td { + height: 120px; +} +col:nth-child(even) { + background: #ffc; +} +col:nth-child(odd) { + background: #cff; +} +col:nth-child(5) { + background: #fcf; + width: 50px; +} +</style> +</head> +<body> + +<table> +<col/><col/><col/><col/><col/> +<tr> <td> </td> <td colspan=3> </td> <td rowspan=3> </td> </tr> +<tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> +<tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> +<tr> <td> </td> <td colspan=2 style="background:#cff"> </td> <td> </td> <td> </td> </tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-border-collapse-2.html b/layout/reftests/writing-mode/tables/vertical-border-collapse-2.html new file mode 100644 index 0000000000..9c602ebdbb --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-border-collapse-2.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { + margin: 10px; + border: 8px solid silver; + border-right-color: #666; + border-bottom-color: #333; + border-spacing: 5px; + border-collapse: collapse; + writing-mode: vertical-rl; +} +td { + border: 4px solid black; + height: 50px; + width: 20px; + text-align: center; +} +td.w1 { + height: 80px; +} +td.w2 { + height: 120px; +} +tr:nth-child(even) { + background: #ffc; +} +tr:nth-child(odd) { + background: #cff; +} +tr:nth-child(1) { + background: #fcf; + width: 50px; +} +</style> +</head> +<body> + +<table> +<tr><td colspan=3> </td> <td> </td> </tr> +<tr><td rowspan=3> </td><td class="w1"> </td><td> </td><td> </td> </tr> +<tr> <td> </td> <td> </td><td rowspan=2> </td> </tr> +<tr> <td> </td> <td> </td> </tr> +<tr><td> </td> <td> </td> <td> </td><td class="w2"> </td></tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1-ref.html b/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1-ref.html new file mode 100644 index 0000000000..60afb00d9b --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<title>CSS Reference: vertical-rl Table Row/Rowgroup/Cell Ordering</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> + +<style> + .test { + writing-mode: vertical-rl; + } + + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table class="reference"> + <tr> + <td rowspan=2> + <td class="h"> + <td colspan=3"> + <td class="a"> + <tr> + <td rowspan=3"> + <td class="g"> + <td class="f"> + <td rowspan=2"> + <td class="b"> + <tr> + <td class="c"> + <td rowspan=2 colspan=2> + <td rowspan=2> + <tr> + <td class="d"> + <td class="e"> +</table> diff --git a/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1a.html b/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1a.html new file mode 100644 index 0000000000..6b0929495f --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1a.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<title>CSS Test: vertical-rl Table Row/Rowgroup/Cell Ordering</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<meta name="assert" content="This test checks that vertical-rl tables order rows/rowgroups right to left and cells top-to-bottom (LTR) per 'direction'."> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> + +<style> + .test { + writing-mode: vertical-rl; + } + + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table class="test"> + <thead> + <tr> + <td class="a"> + <td class="b"> + <td colspan=2> + <tfoot> + <tr> + <td colspan=2> + <td class="c"> + <td class="d"> + <tbody> + <tr> + <td rowspan=3> + <td colspan=2> + <td class="e"> + <tr> + <td class="f"> + <td rowspan=2 colspan=2> + <tr> + <td class="g"> + <tbody> + <tr> + <td class="h"> + <td colspan=3> +</table> diff --git a/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1b.html b/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1b.html new file mode 100644 index 0000000000..69f4f52e6c --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-rl-row-progression-1b.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<title>CSS Test: vertical-rl Table Row/Rowgroup/Cell Ordering</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<meta name="assert" content="This test checks that vertical-rl tables order rows/rowgroups right to left and cells bottom-to-top (RTL) per 'direction'."> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> + +<style> + .test { + writing-mode: vertical-rl; + } + + table { + border-spacing: 0; + margin: 1em; + } + td { + width: 1em; + height: 1em; + border: solid gray; + } + + .a { background: navy} + .b { background: blue } + .c { background: aqua } + .d { background: teal } + .e { background: purple } + .f { background: fuchsia } + .g { background: yellow } + .h { background: orange } +</style> + +<table dir=rtl class="test"> + <thead> + <tr> + <td colspan=2> + <td class="b"> + <td class="a"> + <tfoot> + <tr> + <td class="d"> + <td class="c"> + <td colspan=2> + <tbody> + <tr> + <td class="e"> + <td colspan=2> + <td rowspan=3> + <tr> + <td rowspan=2 colspan=2> + <td class="f"> + <tr> + <td class="g"> + <tbody> + <tr> + <td colspan=3> + <td class="h"> +</table> diff --git a/layout/reftests/writing-mode/tables/vertical-table-1-ref.html b/layout/reftests/writing-mode/tables/vertical-table-1-ref.html new file mode 100644 index 0000000000..093acf6b03 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-1-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +#r1c1, #r1c2, #r1c3, #r1c4 { width: 50px; } +#r2c1, #r2c2, #r2c3, #r2c4 { width: 100px; } +#r1c1, #r2c1 { height: 20px; } +#r1c2, #r2c2 { height: 30px; } +#r1c3, #r2c3 { height: 40px; } +#r1c4, #r2c4 { height: 50px; } +#r1c1 { background: #003; } +#r1c2 { background: #007; } +#r1c3 { background: #00b; } +#r1c4 { background: #00f; } +#r2c1 { background: #030; } +#r2c2 { background: #070; } +#r2c3 { background: #0b0; } +#r2c4 { background: #0f0; } +</style> +</head> +<body> + +<table> +<tr> + <td id="r1c1"></td> + <td id="r2c1"></td> +</tr> +<tr> + <td id="r1c2"></td> + <td id="r2c2"></td> +</tr> +<tr> + <td id="r1c3"></td> + <td id="r2c3"></td> +</tr> +<tr> + <td id="r1c4"></td> + <td id="r2c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-1a.html b/layout/reftests/writing-mode/tables/vertical-table-1a.html new file mode 100644 index 0000000000..aea9a2198d --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-1a.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { writing-mode: vertical-lr; } +#r1c1, #r1c2, #r1c3, #r1c4 { width: 50px; } +#r2c1, #r2c2, #r2c3, #r2c4 { width: 100px; } +#r1c1, #r2c1 { height: 20px; } +#r1c2, #r2c2 { height: 30px; } +#r1c3, #r2c3 { height: 40px; } +#r1c4, #r2c4 { height: 50px; } +#r1c1 { background: #003; } +#r1c2 { background: #007; } +#r1c3 { background: #00b; } +#r1c4 { background: #00f; } +#r2c1 { background: #030; } +#r2c2 { background: #070; } +#r2c3 { background: #0b0; } +#r2c4 { background: #0f0; } +</style> +</head> +<body> + +<table> +<tr> + <td id="r1c1"></td> + <td id="r1c2"></td> + <td id="r1c3"></td> + <td id="r1c4"></td> +</tr> +<tr> + <td id="r2c1"></td> + <td id="r2c2"></td> + <td id="r2c3"></td> + <td id="r2c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-1b.html b/layout/reftests/writing-mode/tables/vertical-table-1b.html new file mode 100644 index 0000000000..8acd2ab109 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-1b.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { writing-mode: vertical-rl; } +#r1c1, #r1c2, #r1c3, #r1c4 { width: 50px; } +#r2c1, #r2c2, #r2c3, #r2c4 { width: 100px; } +#r1c1, #r2c1 { height: 20px; } +#r1c2, #r2c2 { height: 30px; } +#r1c3, #r2c3 { height: 40px; } +#r1c4, #r2c4 { height: 50px; } +#r1c1 { background: #003; } +#r1c2 { background: #007; } +#r1c3 { background: #00b; } +#r1c4 { background: #00f; } +#r2c1 { background: #030; } +#r2c2 { background: #070; } +#r2c3 { background: #0b0; } +#r2c4 { background: #0f0; } +</style> +</head> +<body> + +<table> +<tr> + <td id="r2c1"></td> + <td id="r2c2"></td> + <td id="r2c3"></td> + <td id="r2c4"></td> +</tr> +<tr> + <td id="r1c1"></td> + <td id="r1c2"></td> + <td id="r1c3"></td> + <td id="r1c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-2-ref.html b/layout/reftests/writing-mode/tables/vertical-table-2-ref.html new file mode 100644 index 0000000000..2e5b9fb2a1 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-2-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +#r1c1, #r1c2, #r1c3, #r1c4 { width: 50px; } +#r2c1, #r2c2, #r2c3, #r2c4 { width: 100px; } +#r1c1, #r2c1 { height: 20px; } +#r1c2, #r2c2 { height: 30px; } +#r1c3, #r2c3 { height: 40px; } +#r1c4, #r2c4 { height: 50px; } +td { + border-left: 1px solid red; + border-right: 5px solid green; + border-top: 3px solid blue; + border-bottom: 5px dotted silver; +} +</style> +</head> +<body> + +<table> +<tr> + <td id="r1c1"></td> + <td id="r2c1"></td> +</tr> +<tr> + <td id="r1c2"></td> + <td id="r2c2"></td> +</tr> +<tr> + <td id="r1c3"></td> + <td id="r2c3"></td> +</tr> +<tr> + <td id="r1c4"></td> + <td id="r2c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-2a.html b/layout/reftests/writing-mode/tables/vertical-table-2a.html new file mode 100644 index 0000000000..e735076177 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-2a.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { writing-mode: vertical-lr; } +#r1c1, #r1c2, #r1c3, #r1c4 { width: 50px; } +#r2c1, #r2c2, #r2c3, #r2c4 { width: 100px; } +#r1c1, #r2c1 { height: 20px; } +#r1c2, #r2c2 { height: 30px; } +#r1c3, #r2c3 { height: 40px; } +#r1c4, #r2c4 { height: 50px; } +td { + border-left: 1px solid red; + border-right: 5px solid green; + border-top: 3px solid blue; + border-bottom: 5px dotted silver; +} +</style> +</head> +<body> + +<table> +<tr> + <td id="r1c1"></td> + <td id="r1c2"></td> + <td id="r1c3"></td> + <td id="r1c4"></td> +</tr> +<tr> + <td id="r2c1"></td> + <td id="r2c2"></td> + <td id="r2c3"></td> + <td id="r2c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-2b.html b/layout/reftests/writing-mode/tables/vertical-table-2b.html new file mode 100644 index 0000000000..b075388172 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-2b.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { writing-mode: vertical-rl; } +#r1c1, #r1c2, #r1c3, #r1c4 { width: 50px; } +#r2c1, #r2c2, #r2c3, #r2c4 { width: 100px; } +#r1c1, #r2c1 { height: 20px; } +#r1c2, #r2c2 { height: 30px; } +#r1c3, #r2c3 { height: 40px; } +#r1c4, #r2c4 { height: 50px; } +td { + border-left: 1px solid red; + border-right: 5px solid green; + border-top: 3px solid blue; + border-bottom: 5px dotted silver; +} +</style> +</head> +<body> + +<table> +<tr> + <td id="r2c1"></td> + <td id="r2c2"></td> + <td id="r2c3"></td> + <td id="r2c4"></td> +</tr> +<tr> + <td id="r1c1"></td> + <td id="r1c2"></td> + <td id="r1c3"></td> + <td id="r1c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-colspan-1-ref.html b/layout/reftests/writing-mode/tables/vertical-table-colspan-1-ref.html new file mode 100644 index 0000000000..3c902df9db --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-colspan-1-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +td { border: 1px solid black; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px; background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" rowspan=2></td> + <td class="r2 c1"></td> + <td class="r3 c1" rowspan=4></td> +</tr> +<tr> + <td class="r2 c2"></td> +</tr> +<tr> + <td class="r1 c3"></td> + <td class="r2 c3" rowspan=2></td> +</tr> +<tr> + <td class="r1 c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-colspan-1.html b/layout/reftests/writing-mode/tables/vertical-table-colspan-1.html new file mode 100644 index 0000000000..b93851d16c --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-colspan-1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { writing-mode: vertical-lr; } +td { border: 1px solid black; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px ;background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" colspan=2></td> + <td class="r1 c3"></td> + <td class="r1 c4"></td> +</tr> +<tr> + <td class="r2 c1"></td> + <td class="r2 c2"></td> + <td class="r2 c3" colspan=2></td> +</tr> +<tr> + <td class="r3 c1" colspan=4></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-colspan-2-ref.html b/layout/reftests/writing-mode/tables/vertical-table-colspan-2-ref.html new file mode 100644 index 0000000000..47f7ed04d6 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-colspan-2-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +td { border: 1px solid black; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px; background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r3 c1" rowspan=4></td> + <td class="r2 c1"></td> + <td class="r1 c1" rowspan=2></td> +</tr> +<tr> + <td class="r2 c2"></td> +</tr> +<tr> + <td class="r2 c3" rowspan=2></td> + <td class="r1 c3"></td> +</tr> +<tr> + <td class="r1 c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-colspan-2.html b/layout/reftests/writing-mode/tables/vertical-table-colspan-2.html new file mode 100644 index 0000000000..eb840c5d71 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-colspan-2.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { writing-mode: vertical-rl; } +td { border: 1px solid black; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px ;background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" colspan=2></td> + <td class="r1 c3"></td> + <td class="r1 c4"></td> +</tr> +<tr> + <td class="r2 c1"></td> + <td class="r2 c2"></td> + <td class="r2 c3" colspan=2></td> +</tr> +<tr> + <td class="r3 c1" colspan=4></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-rowspan-1-ref.html b/layout/reftests/writing-mode/tables/vertical-table-rowspan-1-ref.html new file mode 100644 index 0000000000..fd7a6738aa --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-rowspan-1-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +td { border: 1px solid black; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px; background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" colspan=2></td> + <td class="r3 c1"></td> +</tr> +<tr> + <td class="r1 c2"></td> + <td class="r2 c2"></td> + <td class="r3 c2"></td> +</tr> +<tr> + <td class="r1 c3" colspan=3></td> +</tr> +<tr> + <td class="r1 c4"></td> + <td class="r2 c4" colspan=2></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-rowspan-1.html b/layout/reftests/writing-mode/tables/vertical-table-rowspan-1.html new file mode 100644 index 0000000000..bc368cce6d --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-rowspan-1.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { writing-mode: vertical-lr; } +td { border: 1px solid black; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px ;background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" rowspan=2></td> + <td class="r1 c2"></td> + <td class="r1 c3" rowspan=3></td> + <td class="r1 c4"></td> +</tr> +<tr> + <td class="r2 c2"></td> + <td class="r2 c4" rowspan=2></td> +</tr> +<tr> + <td class="r3 c1"></td> + <td class="r3 c2"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-rowspan-2-ref.html b/layout/reftests/writing-mode/tables/vertical-table-rowspan-2-ref.html new file mode 100644 index 0000000000..2c1b7d9774 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-rowspan-2-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +td { border: 1px solid black; } +.r1 { width: 50px; } +.r2 { width: 100px; } +.r3 { width: 20px; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" colspan=2 style="background: #080;"></td> + <td class="r3 c1" style="background: #008;"></td> +</tr> +<tr> + <td class="r1 c2" style="background: #800;"></td> + <td class="r2 c2" style="background: #080;"></td> + <td class="r3 c2" style="background: #008;"></td> +</tr> +<tr> + <td class="r1 c3" colspan=3 style="background: #008;"></td> +</tr> +<tr> + <td class="r1 c4" style="background: #800;"></td> + <td class="r2 c4" colspan=2 style="background: #008;"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-rowspan-2.html b/layout/reftests/writing-mode/tables/vertical-table-rowspan-2.html new file mode 100644 index 0000000000..da4cc58929 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-rowspan-2.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +table { writing-mode: vertical-rl; } +td { border: 1px solid black; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px ;background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r3 c1"></td> + <td class="r3 c2"></td> + <td class="r3 c3" rowspan=3></td> + <td class="r3 c4" rowspan=2></td> +</tr> +<tr> + <td class="r2 c1" rowspan=2></td> + <td class="r2 c2"></td> +</tr> +<tr> + <td class="r1 c2"></td> + <td class="r1 c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-specified-width-1-ref.html b/layout/reftests/writing-mode/tables/vertical-table-specified-width-1-ref.html new file mode 100644 index 0000000000..03820b7f6f --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-specified-width-1-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { overflow: hidden; } +table { border-spacing: 0; } +td { padding: 0; } +.r1 { width: 80px; background: #800; } +.r2 { width: 130px; background: #080; } +.r3 { width: 50px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" colspan=2></td> + <td class="r3 c1"></td> +</tr> +<tr> + <td class="r1 c2"></td> + <td class="r2 c2"></td> + <td class="r3 c2"></td> +</tr> +<tr> + <td class="r1 c3" colspan=3></td> +</tr> +<tr> + <td class="r1 c4"></td> + <td class="r2 c4" colspan=2></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-specified-width-1.html b/layout/reftests/writing-mode/tables/vertical-table-specified-width-1.html new file mode 100644 index 0000000000..f8aaaf88a9 --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-specified-width-1.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { overflow: hidden; } +table { + writing-mode: vertical-lr; + border-spacing: 0; + width: 260px; /* natural width would be 170px; this adds 30px to each row */ +} +td { padding: 0; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px; background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" rowspan=2></td> + <td class="r1 c2"></td> + <td class="r1 c3" rowspan=3></td> + <td class="r1 c4"></td> +</tr> +<tr> + <td class="r2 c2"></td> + <td class="r2 c4" rowspan=2></td> +</tr> +<tr> + <td class="r3 c1"></td> + <td class="r3 c2"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-specified-width-2-ref.html b/layout/reftests/writing-mode/tables/vertical-table-specified-width-2-ref.html new file mode 100644 index 0000000000..cbd125d8dd --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-specified-width-2-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { overflow: hidden; } +table { border-spacing: 0; } +td { padding: 0; } +.r1 { width: 80px; } +.r2 { width: 130px; } +.r3 { width: 50px; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r1 c1" colspan=2 style="background: #080;"></td> + <td class="r3 c1" style="background: #008;"></td> +</tr> +<tr> + <td class="r1 c2" style="background: #800;"></td> + <td class="r2 c2" style="background: #080;"></td> + <td class="r3 c2" style="background: #008;"></td> +</tr> +<tr> + <td class="r1 c3" colspan=3 style="background: #008;"></td> +</tr> +<tr> + <td class="r1 c4" style="background: #800;"></td> + <td class="r2 c4" colspan=2 style="background: #008;"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/vertical-table-specified-width-2.html b/layout/reftests/writing-mode/tables/vertical-table-specified-width-2.html new file mode 100644 index 0000000000..6d85079dde --- /dev/null +++ b/layout/reftests/writing-mode/tables/vertical-table-specified-width-2.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +html { overflow: hidden; } +table { + writing-mode: vertical-rl; + border-spacing: 0; + width: 260px; /* natural width would be 170px; this adds 30px to each row */ +} +td { padding: 0; } +.r1 { width: 50px; background: #800; } +.r2 { width: 100px; background: #080; } +.r3 { width: 20px; background: #008; } +.c1 { height: 20px; } +.c2 { height: 30px; } +.c3 { height: 40px; } +.c4 { height: 50px; } +</style> +</head> +<body> + +<table> +<tr> + <td class="r3 c1"></td> + <td class="r3 c2"></td> + <td class="r3 c3" rowspan=3></td> + <td class="r3 c4" rowspan=2></td> +</tr> +<tr> + <td class="r2 c1" rowspan=2></td> + <td class="r2 c2"></td> +</tr> +<tr> + <td class="r1 c2"></td> + <td class="r1 c4"></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/writing-mode/tables/wm-row-progression-002.xht b/layout/reftests/writing-mode/tables/wm-row-progression-002.xht new file mode 100644 index 0000000000..4749c5f451 --- /dev/null +++ b/layout/reftests/writing-mode/tables/wm-row-progression-002.xht @@ -0,0 +1,73 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: vertical-rl - table rows progression</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/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + + <!-- + to be replaced with + <link rel="match" href="../css-multicol-1/multicol-count-002-ref.xht" /> + --> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that rows of a table element with in a 'vertical-rl' writing mode are laid out one after the other, leftwardedly, with the first beginning at the rightmost side of the table box; table rows are ordered from right to left meaning that the 1st row is the rightmost one and then the 2nd row is juxtaposed to its left-hand side, the 3rd row is juxtaposed to the 2nd row on its left-hand side, etc..." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + body + { + color: yellow; + font: 1.25em/1 Ahem; + } + + table + { + background-color: black; + border-spacing: 0em; + border: black solid 1em; + height: 7em; + -ah-writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; + writing-mode: tb-rl; /* IE11 */ + writing-mode: vertical-rl; + } + + td + { + padding-bottom: 0em; + padding-left: 1em; + padding-right: 0em; + padding-top: 0em; + } + + td.left-most-cell { padding-left: 0em; } + ]]></style> + </head> + + <body> + + <table> + +<!-- The right-most "S" --> + <tr><td>A B C DDD</td><td>EE F G H</td><td>JJ K L M</td></tr> + +<!-- The left-most "S" --> + <tr><td>N O Q RRR</td><td>SS T U V</td><td>WW X Y Z</td></tr> + +<!-- The "A" --> + <tr><td>aaa b c ddd</td><td>ee f g hh</td><td>jj kk</td></tr> + +<!-- The "P" --> + <tr><td class="left-most-cell">mmm n o qqq</td><td class="left-most-cell">r s t uu</td><td class="left-most-cell"> vv</td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/wm-row-progression-003.xht b/layout/reftests/writing-mode/tables/wm-row-progression-003.xht new file mode 100644 index 0000000000..dbb7cf4fb5 --- /dev/null +++ b/layout/reftests/writing-mode/tables/wm-row-progression-003.xht @@ -0,0 +1,73 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: vertical-lr - line boxes progression</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/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + + <!-- + to be replaced with + <link rel="match" href="../css-multicol-1/multicol-count-002-ref.xht" /> + --> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that rows of a table element with in a 'vertical-lr' writing mode are laid out one after the other, rightwardedly, with the first beginning at the leftmost side of the table box; table rows are ordered from left to right meaning that the 1st row is the leftmost one and then the 2nd row is juxtaposed to its right-hand side, the 3rd row is juxtaposed to the 2nd row on its right-hand side, etc..." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + body + { + color: yellow; + font: 1.25em/1 Ahem; + } + + table + { + background-color: black; + border-spacing: 0em; + border: black solid 1em; + height: 7em; + -ah-writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; + writing-mode: tb-lr; /* IE11 */ + writing-mode: vertical-lr; + } + + td + { + padding-bottom: 0em; + padding-left: 1em; + padding-right: 0em; + padding-top: 0em; + } + + td.left-most-cell { padding-left: 0em; } + ]]></style> + </head> + + <body> + + <table> + +<!-- The "P" --> + <tr><td class="left-most-cell">AAA B C DDD</td><td class="left-most-cell">EE F G H</td><td class="left-most-cell">JJ </td></tr> + +<!-- The "A" --> + <tr><td>KKK L M NNN</td><td>OO Q R SS</td><td>TT UU</td></tr> + +<!-- The left-most "S" --> + <tr><td>VVV W X Y </td><td>a b c dd</td><td> e f g hh</td></tr> + +<!-- The right-most "S" --> + <tr><td>jjj k m n </td><td>q r s tt</td><td> u v w xx</td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/wm-row-progression-004.xht b/layout/reftests/writing-mode/tables/wm-row-progression-004.xht new file mode 100644 index 0000000000..7178cc1342 --- /dev/null +++ b/layout/reftests/writing-mode/tables/wm-row-progression-004.xht @@ -0,0 +1,73 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: vertical-rl - table rows progression and colspan</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/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + + <!-- + to be replaced with + <link rel="match" href="../css-multicol-1/multicol-count-002-ref.xht" /> + --> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that colspanned cells in a table are handled according to a top-to-bottom inline flow direction." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + body + { + color: yellow; + font: 1.25em/1 Ahem; + } + + table + { + background-color: black; + border-spacing: 0em; + border: black solid 1em; + height: 7em; + -ah-writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; + writing-mode: tb-rl; /* IE11 */ + writing-mode: vertical-rl; + } + + td + { + padding-bottom: 0em; + padding-left: 1em; + padding-right: 0em; + padding-top: 0em; + } + + td.left-most-cell { padding-left: 0em; } + ]]></style> + </head> + + <body> + + <table> + +<!-- The right-most "S" --> + <tr><td>A B C DDD</td><td>EE F G H</td><td>JJ K L M</td></tr> + +<!-- The left-most "S" --> + <tr><td colspan="2">N OO Q R S T UUUU</td><td>WW X Y Z</td></tr> + +<!-- The "A" --> + <tr><td>aaa b c ddd</td><td colspan="2">eeff g h jjjj</td></tr> + +<!-- The "P" --> + <tr><td class="left-most-cell">mmm n o qqq</td><td class="left-most-cell">r s t uu</td><td class="left-most-cell"> vv</td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/wm-row-progression-005.xht b/layout/reftests/writing-mode/tables/wm-row-progression-005.xht new file mode 100644 index 0000000000..0d3abf6539 --- /dev/null +++ b/layout/reftests/writing-mode/tables/wm-row-progression-005.xht @@ -0,0 +1,73 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: vertical-lr - table rows progression and colspan</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/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + + <!-- + to be replaced with + <link rel="match" href="../css-multicol-1/multicol-count-002-ref.xht" /> + --> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that colspanned cells in a table are handled according to a top-to-bottom inline flow direction." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + body + { + color: yellow; + font: 1.25em/1 Ahem; + } + + table + { + background-color: black; + border-spacing: 0em; + border: black solid 1em; + height: 7em; + -ah-writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; + writing-mode: tb-lr; /* IE11 */ + writing-mode: vertical-lr; + } + + td + { + padding-bottom: 0em; + padding-left: 1em; + padding-right: 0em; + padding-top: 0em; + } + + td.left-most-cell { padding-left: 0em; } + ]]></style> + </head> + + <body> + + <table> + +<!-- The "P" --> + <tr><td class="left-most-cell">AAA B C DDD</td><td class="left-most-cell">EE F G H</td><td class="left-most-cell">JJ </td></tr> + +<!-- The "A" --> + <tr><td colspan="2">KKKOO L Q M R NNNSS</td><td>TT UU</td></tr> + +<!-- The left-most "S" --> + <tr><td>VVV W X Y </td><td colspan="2">a b c d e f gggg</td></tr> + +<!-- The right-most "S" --> + <tr><td>jjj k m n </td><td>q r s tt</td><td> u v w xx</td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/wm-row-progression-006.xht b/layout/reftests/writing-mode/tables/wm-row-progression-006.xht new file mode 100644 index 0000000000..32d3b089d8 --- /dev/null +++ b/layout/reftests/writing-mode/tables/wm-row-progression-006.xht @@ -0,0 +1,73 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: vertical-rl - table rows progression and rowspan</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/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + + <!-- + to be replaced with + <link rel="match" href="../css-multicol-1/multicol-count-002-ref.xht" /> + --> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that rowspanned cells in a table are handled according to a right-to-left direction." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + body + { + color: yellow; + font: 1.25em/1 Ahem; + } + + table + { + background-color: black; + border-spacing: 0em; + border: black solid 1em; + height: 7em; + -ah-writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; + writing-mode: tb-rl; /* IE11 */ + writing-mode: vertical-rl; + } + + td + { + padding-bottom: 0em; + padding-left: 1em; + padding-right: 0em; + padding-top: 0em; + } + + td.left-most-cell { padding-left: 0em; } + ]]></style> + </head> + + <body> + + <table> + +<!-- The right-most "S" --> + <tr><td>A B C DDD</td><td>EE F G H</td><td rowspan="2">JJ K L M WW X Y Z</td></tr> + +<!-- The left-most "S" --> + <tr><td>N O Q RRR</td><td>SS T U V</td></tr> + +<!-- The "A" --> + <tr><td>aaa b c ddd</td><td rowspan="2" class="left-most-cell">ee f g hh r s t uu</td><td>jj kk</td></tr> + +<!-- The "P" --> + <tr><td class="left-most-cell">mmm n o qqq</td><td class="left-most-cell"> vv</td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/tables/wm-row-progression-007.xht b/layout/reftests/writing-mode/tables/wm-row-progression-007.xht new file mode 100644 index 0000000000..5280f845db --- /dev/null +++ b/layout/reftests/writing-mode/tables/wm-row-progression-007.xht @@ -0,0 +1,73 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Writing Modes Test: vertical-lr - table rows progression and rowspan</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/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + + <!-- + to be replaced with + <link rel="match" href="../css-multicol-1/multicol-count-002-ref.xht" /> + --> + + <meta content="ahem" name="flags" /> + <meta content="This test checks that rowspanned cells in a table are handled according to a left-to-right direction." name="assert" /> + + <link type="text/css" rel="stylesheet" href="support/ahem.css" /> + + <style type="text/css"><![CDATA[ + body + { + color: yellow; + font: 1.25em/1 Ahem; + } + + table + { + background-color: black; + border-spacing: 0em; + border: black solid 1em; + height: 7em; + -ah-writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; + writing-mode: tb-lr; /* IE11 */ + writing-mode: vertical-lr; + } + + td + { + padding-bottom: 0em; + padding-left: 1em; + padding-right: 0em; + padding-top: 0em; + } + + td.left-most-cell { padding-left: 0em; } + ]]></style> + </head> + + <body> + + <table> + +<!-- The "P" --> + <tr><td class="left-most-cell">AAA B C DDD</td><td class="left-most-cell">EE F G H</td><td class="left-most-cell" rowspan="2">JJ TT UU</td></tr> + +<!-- The "A" --> + <tr><td>KKK L M NNN</td><td>OO Q R SS</td></tr> + +<!-- The left-most "S" --> + <tr><td>VVV W X Y </td><td rowspan="2">a b c dd q r s tt</td><td> e f g hh</td></tr> + +<!-- The right-most "S" --> + <tr><td>jjj k m n </td><td> u v w xx</td></tr> + + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/writing-mode/ua-style-sheet-border-2-ref.html b/layout/reftests/writing-mode/ua-style-sheet-border-2-ref.html new file mode 100644 index 0000000000..8514ad2aa8 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-border-2-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on tr elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; padding: 16px; } +tr { border: none; } +.ltr tr { border-top: thin solid; border-bottom: thin solid; } +.rtl tr { border-top: thin solid; border-bottom: thin solid; } +.v-rl tr { border-left: thin solid; border-right: thin solid; } +</style> +<div class=ltr> + <table rules=rows> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> +<div class=rtl dir=rtl> + <table rules=rows> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> +<div class=v-rl> + <table rules=rows> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-border-2.html b/layout/reftests/writing-mode/ua-style-sheet-border-2.html new file mode 100644 index 0000000000..a63dff861e --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-border-2.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical borders on tr elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; padding: 16px; } +</style> +<div class=ltr> + <table rules=rows> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> +<div class=rtl dir=rtl> + <table rules=rows> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> +<div class=v-rl> + <table rules=rows> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-border-3-ref.html b/layout/reftests/writing-mode/ua-style-sheet-border-3-ref.html new file mode 100644 index 0000000000..1a34cea720 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-border-3-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on td elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; padding: 16px; } +td { border: none; } +.ltr td { border-left: thin solid; border-right: thin solid; } +.rtl td { border-left: thin solid; border-right: thin solid; } +.v-rl td { border-top: thin solid; border-bottom: thin solid; } +</style> +<div class=ltr> + <table rules=cols> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> +<div class=rtl dir=rtl> + <table rules=cols> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> +<div class=v-rl> + <table rules=cols> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-border-3.html b/layout/reftests/writing-mode/ua-style-sheet-border-3.html new file mode 100644 index 0000000000..951d5b7ca7 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-border-3.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical borders on td elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; padding: 16px; } +</style> +<div class=ltr> + <table rules=cols> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> +<div class=rtl dir=rtl> + <table rules=cols> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> +<div class=v-rl> + <table rules=cols> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-border-4-ref.html b/layout/reftests/writing-mode/ua-style-sheet-border-4-ref.html new file mode 100644 index 0000000000..e0e957a1b6 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-border-4-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on colgroup elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; padding: 16px; } +colgroup { border: none; } +.ltr colgroup { border-left: thin solid; border-right: thin solid; } +.rtl colgroup { border-left: thin solid; border-right: thin solid; } +.v-rl colgroup { border-top: thin solid; border-bottom: thin solid; } +</style> +<div class=ltr> + <table rules=groups> + <colgroup span=2><col><col></colgroup> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> +<div class=rtl dir=rtl> + <table rules=groups> + <colgroup span=2><col><col></colgroup> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> +<div class=v-rl> + <table rules=groups> + <colgroup span=2><col><col></colgroup> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-border-4.html b/layout/reftests/writing-mode/ua-style-sheet-border-4.html new file mode 100644 index 0000000000..8ebce6b67d --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-border-4.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical borders on colgroup elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; padding: 16px; } +</style> +<div class=ltr> + <table rules=groups> + <colgroup span=2><col><col></colgroup> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> +<div class=rtl dir=rtl> + <table rules=groups> + <colgroup span=2><col><col></colgroup> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> +<div class=v-rl> + <table rules=groups> + <colgroup span=2><col><col></colgroup> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </table> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-border-5-ref.html b/layout/reftests/writing-mode/ua-style-sheet-border-5-ref.html new file mode 100644 index 0000000000..85ec56e2b1 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-border-5-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on tbody elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; padding: 16px; } +tbody { border: none; } +.ltr tbody { border-top: thin solid; border-bottom: thin solid; } +.rtl tbody { border-top: thin solid; border-bottom: thin solid; } +.v-rl tbody { border-left: thin solid; border-right: thin solid; } +</style> +<div class=ltr> + <table rules=groups> + <tbody> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + </tbody> + <tbody> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </tbody> + </table> +</div> +<div class=rtl dir=rtl> + <table rules=groups> + <tbody> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + </tbody> + <tbody> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </tbody> + </table> +</div> +<div class=v-rl> + <table rules=groups> + <tbody> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + </tbody> + <tbody> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </tbody> + </table> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-border-5.html b/layout/reftests/writing-mode/ua-style-sheet-border-5.html new file mode 100644 index 0000000000..0ef74346cd --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-border-5.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical borders on tbody elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; padding: 16px; } +</style> +<div class=ltr> + <table rules=groups> + <tbody> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + </tbody> + <tbody> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </tbody> + </table> +</div> +<div class=rtl dir=rtl> + <table rules=groups> + <tbody> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + </tbody> + <tbody> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </tbody> + </table> +</div> +<div class=v-rl> + <table rules=groups> + <tbody> + <tr><td>A1</td><td>A2</td><td>A3</td></tr> + </tbody> + <tbody> + <tr><td>B1</td><td>B2</td><td>B3</td></tr> + </tbody> + </table> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-button-1.html b/layout/reftests/writing-mode/ua-style-sheet-button-1.html new file mode 100644 index 0000000000..f1ee2792af --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-button-1.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical properties of button in the UA stylesheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +.a { -moz-appearance: none; } +</style> +<div class=ltr> + <button>one</button><br> + <button class=a>two</button><br> + <button disabled>three</button><br> + <button class=a disabled>four</button><br> + <input type="button" value="five"><br> + <input type="button" value="six" class=a><br> + <input type="button" value="seven" disabled><br> + <input type="button" value="eight" class=a disabled><br> +</div> + +<div class=rtl dir=rtl> + <button>one</button><br> + <button class=a>two</button><br> + <button disabled>three</button><br> + <button class=a disabled>four</button><br> + <input type="button" value="five"><br> + <input type="button" value="six" class=a><br> + <input type="button" value="seven" disabled><br> + <input type="button" value="eight" class=a disabled><br> +</div> + +<div class=v-rl> + <button>one</button><br> + <button class=a>two</button><br> + <button disabled>three</button><br> + <button class=a disabled>four</button><br> + <input type="button" value="five"><br> + <input type="button" value="six" class=a><br> + <input type="button" value="seven" disabled><br> + <input type="button" value="eight" class=a disabled><br> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html b/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html new file mode 100644 index 0000000000..0a8dfd23e9 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical properties of button in the UA stylesheet</title> +<style> +:root { color-scheme: light } + +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +.a { -moz-appearance: none; } + +.ltr button, +.rtl button, +.ltr input[type="button"], +.rtl input[type="button"] { + padding: 1px 8px; +} + +.v-rl button, +.v-rl input[type="button"] { + padding: 8px 1px; +} + +.ltr button, +.rtl button, +.ltr input[type="button"], +.rtl input[type="button"] { + padding: 1px 4px; +} + +.v-rl button, +.v-rl input[type="button"] { + padding: 4px 1px; +} +</style> +<div class=ltr> + <button>one</button><br> + <button class=a>two</button><br> + <button disabled>three</button><br> + <button class=a disabled>four</button><br> + <input type="button" value="five"><br> + <input type="button" value="six" class=a><br> + <input type="button" value="seven" disabled><br> + <input type="button" value="eight" class=a disabled><br> +</div> + +<div class=rtl dir=rtl> + <button>one</button><br> + <button class=a>two</button><br> + <button disabled>three</button><br> + <button class=a disabled>four</button><br> + <input type="button" value="five"><br> + <input type="button" value="six" class=a><br> + <input type="button" value="seven" disabled><br> + <input type="button" value="eight" class=a disabled><br> +</div> + +<div class=v-rl> + <button>one</button><br> + <button class=a>two</button><br> + <button disabled>three</button><br> + <button class=a disabled>four</button><br> + <input type="button" value="five"><br> + <input type="button" value="six" class=a><br> + <input type="button" value="seven" disabled><br> + <input type="button" value="eight" class=a disabled><br> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-checkbox-radio-1-ref.html b/layout/reftests/writing-mode/ua-style-sheet-checkbox-radio-1-ref.html new file mode 100644 index 0000000000..a66d976d0a --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-checkbox-radio-1-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical properties of checkbox and radio button in the UA stylesheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } + +.ltr input[type="radio"] { + margin: 3px 3px 0px 5px; +} +.rtl input[type="radio"] { + margin: 3px 5px 0px 3px; +} +.v-rl input[type="radio"] { + margin: 5px 3px 3px 0px; +} + +.ltr input[type="checkbox"] { + margin: 3px 3px 3px 4px; +} +.rtl input[type="checkbox"] { + margin: 3px 4px 3px 3px; +} +.v-rl input[type="checkbox"] { + margin: 4px 3px 3px 3px; +} + +</style> +<div class=ltr> + <input type=radio checked>radio 1</input><br> + <input type=radio>radio 2</input><br> + <input type=checkbox checked>checkbox 1</input><br> + <input type=checkbox>checkbox 2</input><br> +</div> + +<div class=rtl dir=rtl> + <input type=radio checked>radio 1</input><br> + <input type=radio>radio 2</input><br> + <input type=checkbox checked>checkbox 1</input><br> + <input type=checkbox>checkbox 2</input><br> +</div> + +<div class=v-rl> + <input type=radio checked>radio 1</input><br> + <input type=radio>radio 2</input><br> + <input type=checkbox checked>checkbox 1</input><br> + <input type=checkbox>checkbox 2</input><br> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-checkbox-radio-1.html b/layout/reftests/writing-mode/ua-style-sheet-checkbox-radio-1.html new file mode 100644 index 0000000000..7cf1129e2a --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-checkbox-radio-1.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical properties of checkbox and radio button in the UA stylesheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +</style> +<div class=ltr> + <input type=radio checked>radio 1</input><br> + <input type=radio>radio 2</input><br> + <input type=checkbox checked>checkbox 1</input><br> + <input type=checkbox>checkbox 2</input><br> +</div> + +<div class=rtl dir=rtl> + <input type=radio checked>radio 1</input><br> + <input type=radio>radio 2</input><br> + <input type=checkbox checked>checkbox 1</input><br> + <input type=checkbox>checkbox 2</input><br> +</div> + +<div class=v-rl> + <input type=radio checked>radio 1</input><br> + <input type=radio>radio 2</input><br> + <input type=checkbox checked>checkbox 1</input><br> + <input type=checkbox>checkbox 2</input><br> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-fieldset-1-ref.html b/layout/reftests/writing-mode/ua-style-sheet-fieldset-1-ref.html new file mode 100644 index 0000000000..09aec37df4 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-fieldset-1-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical properties of fieldset in the UA stylesheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } + +fieldset { height: 100px; width: 100px; } + +.ltr .a, .rtl .a { height: 40%; background: #eee; } +.ltr .b, .rtl .b { height: 60%; background: #ddd; } +.v-rl .a { width: 40%; background: #eee; } +.v-rl .b { width: 60%; background: #ddd; } + +.ltr fieldset, .rtl fieldset { margin: 0 2px; padding: 0.35em 0.75em 0.625em; } +.v-rl fieldset { margin: 2px 0; padding: 0.75em 0.35em 0.75em 0.625em; } + +.ltr legend, .rtl legend { padding: 0 2px; } +.v-rl legend { padding: 2px 0; } +</style> +<div class=ltr> + <fieldset> + <legend>Legend</legend> + <div class=a></div> + <div class=b></div> + </fieldset> +</div> + +<div class=rtl dir=rtl> + <fieldset> + <legend>Legend</legend> + <div class=a></div> + <div class=b></div> + </fieldset> +</div> + +<div class=v-rl> + <fieldset> + <legend>Legend</legend> + <div class=a></div> + <div class=b></div> + </fieldset> +</div> + diff --git a/layout/reftests/writing-mode/ua-style-sheet-fieldset-1.html b/layout/reftests/writing-mode/ua-style-sheet-fieldset-1.html new file mode 100644 index 0000000000..3cc77041d7 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-fieldset-1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical properties of fieldset in the UA stylesheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } + +fieldset { height: 100px; width: 100px; } + +.a { block-size: 40%; background: #eee; } +.b { block-size: 60%; background: #ddd; } +</style> +<div class=ltr> + <fieldset> + <legend>Legend</legend> + <div class=a></div> + <div class=b></div> + </fieldset> +</div> + +<div class=rtl dir=rtl> + <fieldset> + <legend>Legend</legend> + <div class=a></div> + <div class=b></div> + </fieldset> +</div> + +<div class=v-rl> + <fieldset> + <legend>Legend</legend> + <div class=a></div> + <div class=b></div> + </fieldset> +</div> + diff --git a/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html b/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html new file mode 100644 index 0000000000..9b0a723ae3 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical properties of input type=color in the UA stylesheet</title> +<style> +:root { color-scheme: light } + +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +.a { appearance: none; } + +input[type=color] { + padding: 4px; +} + +.ltr input[type="color"], +.rtl input[type="color"] { + width: 64px; + height: 32px; +} + +.v-rl input[type="color"] { + height: 64px; + width: 32px; +} +</style> +<div class=ltr> + <input type=color><br> + <input type=color class=a><br> +</div> + +<div class=rtl dir=rtl> + <input type=color><br> + <input type=color class=a><br> +</div> + +<div class=v-rl> + <input type=color><br> + <input type=color class=a><br> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-input-color-1.html b/layout/reftests/writing-mode/ua-style-sheet-input-color-1.html new file mode 100644 index 0000000000..4fef0094f1 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-input-color-1.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical properties of input type=color in the UA stylesheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +.a { -moz-appearance: none; } +</style> +<div class=ltr> + <input type=color><br> + <input type=color class=a><br> +</div> + +<div class=rtl dir=rtl> + <input type=color><br> + <input type=color class=a><br> +</div> + +<div class=v-rl> + <input type=color><br> + <input type=color class=a><br> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-input-number-1-ref.html b/layout/reftests/writing-mode/ua-style-sheet-input-number-1-ref.html new file mode 100644 index 0000000000..b46b244267 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-input-number-1-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical properties of input type=number in the UA stylesheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +div { padding: 10px; } +.a { -moz-appearance:textfield; } +.b { -moz-appearance:none; } +</style> +<div class=ltr> + <input type=number value=123><br><br> + <input type=number value=456 class=a><br><br> + <input type=number value=7890 class=b> +</div> + +<div class=rtl dir=rtl> + <input type=number value=123><br><br> + <input type=number value=456 class=a><br><br> + <input type=number value=7890 class=b> +</div> + +<div class=v-rl> + <input type=number value=123><br><br> + <input type=number value=456 class=a><br><br> + <input type=number value=7890 class=b> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-input-number-1.html b/layout/reftests/writing-mode/ua-style-sheet-input-number-1.html new file mode 100644 index 0000000000..b46b244267 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-input-number-1.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical properties of input type=number in the UA stylesheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +div { padding: 10px; } +.a { -moz-appearance:textfield; } +.b { -moz-appearance:none; } +</style> +<div class=ltr> + <input type=number value=123><br><br> + <input type=number value=456 class=a><br><br> + <input type=number value=7890 class=b> +</div> + +<div class=rtl dir=rtl> + <input type=number value=123><br><br> + <input type=number value=456 class=a><br><br> + <input type=number value=7890 class=b> +</div> + +<div class=v-rl> + <input type=number value=123><br><br> + <input type=number value=456 class=a><br><br> + <input type=number value=7890 class=b> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-1-ref.html b/layout/reftests/writing-mode/ua-style-sheet-margin-1-ref.html new file mode 100644 index 0000000000..cfa58ff519 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-1-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on p elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +.ltr p { margin: 1em 0; } +.rtl p { margin: 1em 0; } +.v-rl p { margin: 0 1em; } +</style> +<div class=ltr> + <p>Paragraph</p> +</div> +<div class=rtl dir=rtl> + <p>Paragraph</p> +</div> +<div class=v-rl> + <p>Paragraph</p> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-1.html b/layout/reftests/writing-mode/ua-style-sheet-margin-1.html new file mode 100644 index 0000000000..c6e0a793b1 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-1.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on p elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +</style> +<div class=ltr> + <p>Paragraph</p> +</div> +<div class=rtl dir=rtl> + <p>Paragraph</p> +</div> +<div class=v-rl> + <p>Paragraph</p> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-10-ref.html b/layout/reftests/writing-mode/ua-style-sheet-margin-10-ref.html new file mode 100644 index 0000000000..94cae4380f --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-10-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on caption elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +table { border: 1px solid purple; } +caption { border: 1px solid orange; display: block; width: 100px; height: 100px; } +caption { margin: 0; } +.ltr caption { margin: 0 auto 0 0; } +.rtl caption { margin: 0 auto 0 0; } +.v-rl caption { margin: 0 0 auto 0; } +</style> +<div class=ltr> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption align=left>Caption</caption> + </table> +</div> +<div class=rtl dir=rtl> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption align=left>Caption</caption> + </table> +</div> +<div class=v-rl> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption align=left>Caption</caption> + </table> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-10.html b/layout/reftests/writing-mode/ua-style-sheet-margin-10.html new file mode 100644 index 0000000000..23ec26ada0 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-10.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on caption elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +table { border: 1px solid purple; } +caption { border: 1px solid orange; display: block; width: 100px; height: 100px; } +</style> +<div class=ltr> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption align=right>Caption</caption> + </table> +</div> +<div class=rtl dir=rtl> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption align=right>Caption</caption> + </table> +</div> +<div class=v-rl> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption align=right>Caption</caption> + </table> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-11-ref.html b/layout/reftests/writing-mode/ua-style-sheet-margin-11-ref.html new file mode 100644 index 0000000000..7f3306163d --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-11-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on ul elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +.ltr ul { margin: 1em 0; padding: 0 0 0 40px; } +.rtl ul { margin: 1em 0; padding: 0 40px 0 0; } +.v-rl ul { margin: 0 1em; padding: 40px 0 0 0; } +</style> +<div class=ltr> + <ul> + <li>Item</li> + </ul> +</div> +<div class=rtl dir=rtl> + <ul> + <li>Item</li> + </ul> +</div> +<div class=v-rl> + <ul> + <li>Item</li> + </ul> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-11.html b/layout/reftests/writing-mode/ua-style-sheet-margin-11.html new file mode 100644 index 0000000000..3b0b460eaa --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-11.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on ul elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +</style> +<div class=ltr> + <ul> + <li>Item</li> + </ul> +</div> +<div class=rtl dir=rtl> + <ul> + <li>Item</li> + </ul> +</div> +<div class=v-rl> + <ul> + <li>Item</li> + </ul> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-12-ref.html b/layout/reftests/writing-mode/ua-style-sheet-margin-12-ref.html new file mode 100644 index 0000000000..6bad60d6ad --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-12-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on ol elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +.ltr ol { margin: 1em 0; padding: 0 0 0 40px; } +.rtl ol { margin: 1em 0; padding: 0 40px 0 0; } +.v-rl ol { margin: 0 1em; padding: 40px 0 0 0; } +</style> +<div class=ltr> + <ol> + <li>Item</li> + </ol> +</div> +<div class=rtl dir=rtl> + <ol> + <li>Item</li> + </ol> +</div> +<div class=v-rl> + <ol> + <li>Item</li> + </ol> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-12.html b/layout/reftests/writing-mode/ua-style-sheet-margin-12.html new file mode 100644 index 0000000000..8d8cd065a5 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-12.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on ol elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +</style> +<div class=ltr> + <ol> + <li>Item</li> + </ol> +</div> +<div class=rtl dir=rtl> + <ol> + <li>Item</li> + </ol> +</div> +<div class=v-rl> + <ol> + <li>Item</li> + </ol> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-13-ref.html b/layout/reftests/writing-mode/ua-style-sheet-margin-13-ref.html new file mode 100644 index 0000000000..f29796da64 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-13-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on nested ul/ol elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +ul { border: 1px solid purple; } +.ltr ul { margin: 1em 0; padding: 0 0 0 40px; } +.rtl ul { margin: 1em 0; padding: 0 40px 0 0; } +.v-rl ul { margin: 0 1em; padding: 40px 0 0 0; } +ol { margin: 0; } +</style> +<div class=ltr> + <ul> + <li> + <ol> + <li>Item</li> + </ol> + </li> + </ul> +</div> +<div class=rtl dir=rtl> + <ul> + <li> + <ol> + <li>Item</li> + </ol> + </li> + </ul> +</div> +<div class=v-rl> + <ul> + <li> + <ol> + <li>Item</li> + </ol> + </li> + </ul> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-13.html b/layout/reftests/writing-mode/ua-style-sheet-margin-13.html new file mode 100644 index 0000000000..77c9c0a498 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-13.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on nested ul/ol elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +ul { border: 1px solid purple; } +</style> +<div class=ltr> + <ul> + <li> + <ol> + <li>Item</li> + </ol> + </li> + </ul> +</div> +<div class=rtl dir=rtl> + <ul> + <li> + <ol> + <li>Item</li> + </ol> + </li> + </ul> +</div> +<div class=v-rl> + <ul> + <li> + <ol> + <li>Item</li> + </ol> + </li> + </ul> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-14-ref.html b/layout/reftests/writing-mode/ua-style-sheet-margin-14-ref.html new file mode 100644 index 0000000000..08fb4d2927 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-14-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on hr elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +hr { width: 100px; height: 100px; } +.ltr hr { margin: 0.5em auto; } +.rtl hr { margin: 0.5em auto; } +.v-rl hr { margin: auto 0.5em; } +</style> +<div class=ltr> + <hr> +</div> +<div class=rtl dir=rtl> + <hr> +</div> +<div class=v-rl> + <hr> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-14.html b/layout/reftests/writing-mode/ua-style-sheet-margin-14.html new file mode 100644 index 0000000000..3376ad9f34 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-14.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on hr elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +hr { width: 100px; height: 100px; } +</style> +<div class=ltr> + <hr> +</div> +<div class=rtl dir=rtl> + <hr> +</div> +<div class=v-rl> + <hr> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-2-ref.html b/layout/reftests/writing-mode/ua-style-sheet-margin-2-ref.html new file mode 100644 index 0000000000..275e8df59f --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-2-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on dl and dd elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +.ltr dl { margin: 1em 0; } +.rtl dl { margin: 1em 0; } +.v-rl dl { margin: 0 1em; } +dd { margin: 0; } +.ltr dd { margin-left: 40px; } +.rtl dd { margin-right: 40px; } +.v-rl dd { margin-top: 40px; } +</style> +<div class=ltr> + <dl><dt>term</dt><dd>definition</dd></dl> +</div> +<div class=rtl dir=rtl> + <dl><dt>term</dt><dd>definition</dd></dl> +</div> +<div class=v-rl> + <dl><dt>term</dt><dd>definition</dd></dl> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-2.html b/layout/reftests/writing-mode/ua-style-sheet-margin-2.html new file mode 100644 index 0000000000..95d88e1228 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-2.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on dl and dd elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +</style> +<div class=ltr> + <dl><dt>term</dt><dd>definition</dd></dl> +</div> +<div class=rtl dir=rtl> + <dl><dt>term</dt><dd>definition</dd></dl> +</div> +<div class=v-rl> + <dl><dt>term</dt><dd>definition</dd></dl> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-3-ref.html b/layout/reftests/writing-mode/ua-style-sheet-margin-3-ref.html new file mode 100644 index 0000000000..cab6208fed --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-3-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on blockquote elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +.ltr blockquote { margin: 1em 40px; } +.rtl blockquote { margin: 1em 40px; } +.v-rl blockquote { margin: 40px 1em; } +</style> +<div class=ltr> + <blockquote>Block quote</blockquote> +</div> +<div class=rtl dir=rtl> + <blockquote>Block quote</blockquote> +</div> +<div class=v-rl> + <blockquote>Block quote</blockquote> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-3.html b/layout/reftests/writing-mode/ua-style-sheet-margin-3.html new file mode 100644 index 0000000000..433e0dbcb5 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-3.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on blockquote elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +</style> +<div class=ltr> + <blockquote>Block quote</blockquote> +</div> +<div class=rtl dir=rtl> + <blockquote>Block quote</blockquote> +</div> +<div class=v-rl> + <blockquote>Block quote</blockquote> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-4-ref.html b/layout/reftests/writing-mode/ua-style-sheet-margin-4-ref.html new file mode 100644 index 0000000000..107cceb3b1 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-4-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on h[123] elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +h1, h2, h3 { font-size: 16px; border: 1px solid purple; } +.ltr h1 { margin: 0.67em 0; } +.rtl h1 { margin: 0.67em 0; } +.v-rl h1 { margin: 0 0.67em; } +.ltr h2 { margin: 0.83em 0; } +.rtl h2 { margin: 0.83em 0; } +.v-rl h2 { margin: 0 0.83em; } +.ltr h3 { margin: 1em 0; } +.rtl h3 { margin: 1em 0; } +.v-rl h3 { margin: 0 1em; } +</style> +<div class=ltr> + <h1>Heading 1</h1> + <h2>Heading 2</h2> + <h3>Heading 3</h3> +</div> +<div class=rtl dir=rtl> + <h1>Heading 1</h1> + <h2>Heading 2</h2> + <h3>Heading 3</h3> +</div> +<div class=v-rl> + <h1>Heading 1</h1> + <h2>Heading 2</h2> + <h3>Heading 3</h3> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-4.html b/layout/reftests/writing-mode/ua-style-sheet-margin-4.html new file mode 100644 index 0000000000..b1e544bef5 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-4.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on h[123] elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +h1, h2, h3 { font-size: 16px; border: 1px solid purple; } +</style> +<div class=ltr> + <h1>Heading 1</h1> + <h2>Heading 2</h2> + <h3>Heading 3</h3> +</div> +<div class=rtl dir=rtl> + <h1>Heading 1</h1> + <h2>Heading 2</h2> + <h3>Heading 3</h3> +</div> +<div class=v-rl> + <h1>Heading 1</h1> + <h2>Heading 2</h2> + <h3>Heading 3</h3> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-5-ref.html b/layout/reftests/writing-mode/ua-style-sheet-margin-5-ref.html new file mode 100644 index 0000000000..ae99fa8fd3 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-5-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on h[456] elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +h4, h5, h6 { font-size: 16px; border: 1px solid purple; } +.ltr h4 { margin: 1.33em 0; } +.rtl h4 { margin: 1.33em 0; } +.v-rl h4 { margin: 0 1.33em; } +.ltr h5 { margin: 1.67em 0; } +.rtl h5 { margin: 1.67em 0; } +.v-rl h5 { margin: 0 1.67em; } +.ltr h6 { margin: 2.33em 0; } +.rtl h6 { margin: 2.33em 0; } +.v-rl h6 { margin: 0 2.33em; } +</style> +<div class=ltr> + <h4>Heading 4</h4> + <h5>Heading 5</h5> + <h6>Heading 6</h6> +</div> +<div class=rtl dir=rtl> + <h4>Heading 4</h4> + <h5>Heading 5</h5> + <h6>Heading 6</h6> +</div> +<div class=v-rl> + <h4>Heading 4</h4> + <h5>Heading 5</h5> + <h6>Heading 6</h6> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-5.html b/layout/reftests/writing-mode/ua-style-sheet-margin-5.html new file mode 100644 index 0000000000..b9f22c7ff1 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-5.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on h[456] elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +h4, h5, h6 { font-size: 16px; border: 1px solid purple; } +</style> +<div class=ltr> + <h4>Heading 4</h4> + <h5>Heading 5</h5> + <h6>Heading 6</h6> +</div> +<div class=rtl dir=rtl> + <h4>Heading 4</h4> + <h5>Heading 5</h5> + <h6>Heading 6</h6> +</div> +<div class=v-rl> + <h4>Heading 4</h4> + <h5>Heading 5</h5> + <h6>Heading 6</h6> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-6-ref.html b/layout/reftests/writing-mode/ua-style-sheet-margin-6-ref.html new file mode 100644 index 0000000000..19fc72db59 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-6-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on listing elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +.ltr listing { margin: 1em 0; } +.rtl listing { margin: 1em 0; } +.v-rl listing { margin: 0 1em; } +</style> +<div class=ltr> + <listing>Listing line 1 +Listing line 2</listing> +</div> +<div class=rtl dir=rtl> + <listing>Listing line 1 +Listing line 2</listing> +</div> +<div class=v-rl> + <listing>Listing line 1 +Listing line 2</listing> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-6.html b/layout/reftests/writing-mode/ua-style-sheet-margin-6.html new file mode 100644 index 0000000000..21f1da2917 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-6.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on listing elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +</style> +<div class=ltr> + <listing>Listing line 1 +Listing line 2</listing> +</div> +<div class=rtl dir=rtl> + <listing>Listing line 1 +Listing line 2</listing> +</div> +<div class=v-rl> + <listing>Listing line 1 +Listing line 2</listing> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-7-ref.html b/layout/reftests/writing-mode/ua-style-sheet-margin-7-ref.html new file mode 100644 index 0000000000..4041028cd0 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-7-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on pre elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +.ltr pre { margin: 1em 0; } +.rtl pre { margin: 1em 0; } +.v-rl pre { margin: 0 1em; } +</style> +<div class=ltr> + <pre>pre line 1 +pre line 2</pre> +</div> +<div class=rtl dir=rtl> + <pre>pre line 1 +pre line 2</pre> +</div> +<div class=v-rl> + <pre>pre line 1 +pre line 2</pre> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-7.html b/layout/reftests/writing-mode/ua-style-sheet-margin-7.html new file mode 100644 index 0000000000..1d9f26e345 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-7.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on pre elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +</style> +<div class=ltr> + <pre>pre line 1 +pre line 2</pre> +</div> +<div class=rtl dir=rtl> + <pre>pre line 1 +pre line 2</pre> +</div> +<div class=v-rl> + <pre>pre line 1 +pre line 2</pre> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-8-ref.html b/layout/reftests/writing-mode/ua-style-sheet-margin-8-ref.html new file mode 100644 index 0000000000..885d99080b --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-8-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on caption elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +table { border: 1px solid purple; } +caption { border: 1px solid orange; } +caption { margin: 0; } +.ltr caption { margin: 0 auto; } +.rtl caption { margin: 0 auto; } +.v-rl caption { margin: auto 0; } +</style> +<div class=ltr> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption>Caption</caption> + </table> +</div> +<div class=rtl dir=rtl> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption>Caption</caption> + </table> +</div> +<div class=v-rl> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption>Caption</caption> + </table> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-8.html b/layout/reftests/writing-mode/ua-style-sheet-margin-8.html new file mode 100644 index 0000000000..e445ea8028 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-8.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on caption elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +table { border: 1px solid purple; } +caption { border: 1px solid orange; } +</style> +<div class=ltr> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption>Caption</caption> + </table> +</div> +<div class=rtl dir=rtl> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption>Caption</caption> + </table> +</div> +<div class=v-rl> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption>Caption</caption> + </table> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-9-ref.html b/layout/reftests/writing-mode/ua-style-sheet-margin-9-ref.html new file mode 100644 index 0000000000..853a4f6367 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-9-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on caption elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +table { border: 1px solid purple; } +caption { border: 1px solid orange; display: block; width: 100px; height: 100px; } +caption { margin: 0; } +.ltr caption { margin: 0 0 0 auto; } +.rtl caption { margin: 0 0 0 auto; } +.v-rl caption { margin: auto 0 0 0; } +</style> +<div class=ltr> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption align=left>Caption</caption> + </table> +</div> +<div class=rtl dir=rtl> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption align=left>Caption</caption> + </table> +</div> +<div class=v-rl> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption align=left>Caption</caption> + </table> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-margin-9.html b/layout/reftests/writing-mode/ua-style-sheet-margin-9.html new file mode 100644 index 0000000000..826f88893c --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-margin-9.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on caption elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +table { border: 1px solid purple; } +caption { border: 1px solid orange; display: block; width: 100px; height: 100px; } +</style> +<div class=ltr> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption align=left>Caption</caption> + </table> +</div> +<div class=rtl dir=rtl> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption align=left>Caption</caption> + </table> +</div> +<div class=v-rl> + <table align=center> + <td>Table that is bigger than its caption</td> + <caption align=left>Caption</caption> + </table> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-size-1-ref.html b/layout/reftests/writing-mode/ua-style-sheet-size-1-ref.html new file mode 100644 index 0000000000..06f6d5700e --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-size-1-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on marquee elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; padding: 16px; } +marquee { background-color: yellow; color: transparent; } +.ltr marquee { width: -moz-available; height: auto; } +.rtl marquee { width: -moz-available; height: auto; } +.v-rl marquee { width: auto; height: -moz-available; } +</style> +<div class=ltr> + <marquee>A</marquee> +</div> +<div class=rtl dir=rtl> + <marquee>A</marquee> +</div> +<!-- disabled until bug 1132308 +<div class=v-rl> + <marquee>A</marquee> +</div> +--> diff --git a/layout/reftests/writing-mode/ua-style-sheet-size-1.html b/layout/reftests/writing-mode/ua-style-sheet-size-1.html new file mode 100644 index 0000000000..7549085010 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-size-1.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical sizes on marquee elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; padding: 16px; } +marquee { background-color: yellow; color: transparent; } +</style> +<div class=ltr> + <marquee>A</marquee> +</div> +<div class=rtl dir=rtl> + <marquee>A</marquee> +</div> +<!-- disabled until bug 1132308 +<div class=v-rl> + <marquee>A</marquee> +</div> +--> diff --git a/layout/reftests/writing-mode/ua-style-sheet-size-2-ref.html b/layout/reftests/writing-mode/ua-style-sheet-size-2-ref.html new file mode 100644 index 0000000000..3c53326ba7 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-size-2-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical margins on marquee elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; padding: 16px; } +marquee { background-color: yellow; color: transparent; } +.ltr marquee { width: -moz-available; height: 200px; } +.rtl marquee { width: -moz-available; height: 200px; } +.v-rl marquee { width: 200px; height: -moz-available; } +</style> +<div class=ltr> + <marquee direction=down>A</marquee> +</div> +<div class=rtl dir=rtl> + <marquee direction=down>A</marquee> +</div> +<!-- disabled until bug 1132308 +<div class=v-rl> + <marquee direction=down>A</marquee> +</div> +--> diff --git a/layout/reftests/writing-mode/ua-style-sheet-size-2.html b/layout/reftests/writing-mode/ua-style-sheet-size-2.html new file mode 100644 index 0000000000..1c0be6f4b5 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-size-2.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical sizes on marquee elements in the UA style sheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; padding: 16px; } +marquee { background-color: yellow; color: transparent; } +</style> +<div class=ltr> + <marquee direction=down>A</marquee> +</div> +<div class=rtl dir=rtl> + <marquee direction=down>A</marquee> +</div> +<!-- disabled until bug 1132308 +<div class=v-rl> + <marquee direction=down>A</marquee> +</div> +--> diff --git a/layout/reftests/writing-mode/ua-style-sheet-textarea-1.html b/layout/reftests/writing-mode/ua-style-sheet-textarea-1.html new file mode 100644 index 0000000000..c55c998d7c --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-textarea-1.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical properties of textarea in the UA stylesheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } +</style> +<div class=ltr> + <textarea>hello</textarea> +</div> + +<div class=rtl dir=rtl> + <textarea>hello</textarea> +</div> + +<div class=v-rl> + <textarea>hello</textarea> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-textarea-1a-ref.html b/layout/reftests/writing-mode/ua-style-sheet-textarea-1a-ref.html new file mode 100644 index 0000000000..5f4c54b248 --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-textarea-1a-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical properties of textarea in the UA stylesheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } + +.ltr textarea, .rtl textarea { + margin: 1px 0; + padding: 2px; +} +.v-rl textarea { + margin: 0 1px; + padding: 2px; +} +</style> +<div class=ltr> + <textarea>hello</textarea> +</div> + +<div class=rtl dir=rtl> + <textarea>hello</textarea> +</div> + +<div class=v-rl> + <textarea>hello</textarea> +</div> diff --git a/layout/reftests/writing-mode/ua-style-sheet-textarea-1c-ref.html b/layout/reftests/writing-mode/ua-style-sheet-textarea-1c-ref.html new file mode 100644 index 0000000000..cbd1fb833f --- /dev/null +++ b/layout/reftests/writing-mode/ua-style-sheet-textarea-1c-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Test for logical properties of textarea in the UA stylesheet</title> +<style> +.v-rl { writing-mode: vertical-rl; } +.ltr, .rtl, .v-rl { border: 1px solid blue; } + +textarea { + padding: 2px; +} +.ltr textarea, .rtl textarea { + margin: 1px 0; +} +.v-rl textarea { + margin: 0 1px; +} +</style> +<div class=ltr> + <textarea>hello</textarea> +</div> + +<div class=rtl dir=rtl> + <textarea>hello</textarea> +</div> + +<div class=v-rl> + <textarea>hello</textarea> +</div> |
