Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-24 21:31:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1083848 - Reftests for borders and backgrounds when inline element is split across lines in vertical writing-mode. r=dbaron

Browse Source
This commit is contained in:
Jonathan Kew 2014-11-24 23:16:06 +00:00
parent 292ae32743
commit aade725c53
9 changed files with 252 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
layout/reftests/writing-mode/1083848-1-inline-border-ref.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
.test {
margin:10px;
border:1px solid blue;
font-family: monospace;
font-size: 16px;
word-break:break-all;
text-transform:full-width;
width:7.8em;
height:7.8em;
}
.h { writing-mode:horizontal-tb; }
.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>

46
layout/reftests/writing-mode/1083848-1-inline-border.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
.test {
margin:10px;
border:1px solid blue;
font-family: monospace;
font-size: 16px;
word-break:break-all;
text-transform:full-width;
width:7.8em;
height:7.8em;
}
.h { writing-mode:horizontal-tb; }
.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>

36
layout/reftests/writing-mode/1083848-2-inline-background-ref.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
.test {
margin:10px;
border:1px solid blue;
font-family: monospace;
font-size: 16px;
word-break:break-all;
text-transform:full-width;
width:7.8em;
height:7.8em;
}
.h { writing-mode:horizontal-tb; }
.v-lr { writing-mode:vertical-lr; }
.v-rl { writing-mode:vertical-rl; }
.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>

36
layout/reftests/writing-mode/1083848-2-inline-background.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
.test {
margin:10px;
border:1px solid blue;
font-family: monospace;
font-size: 16px;
word-break:break-all;
text-transform:full-width;
width:7.8em;
height:7.8em;
}
.h { writing-mode:horizontal-tb; }
.v-lr { writing-mode:vertical-lr; }
.v-rl { writing-mode:vertical-rl; }
.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>

44
layout/reftests/writing-mode/1083848-3-inline-background-repeat-ref.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.test {
margin: 10px;
border: 1px solid gray;
font: 16px/24px monospace;
word-break: break-all;
width: 10em;
height: 6em;
/* 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;
}
.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>

37
layout/reftests/writing-mode/1083848-3-inline-background-repeat.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.test {
margin: 10px;
border: 1px solid gray;
font: 16px/24px monospace;
word-break: break-all;
width: 10em;
height: 6em;
/* 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;
}
.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>

BIN
layout/reftests/writing-mode/4colors.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
layout/reftests/writing-mode/blue-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 B

3
layout/reftests/writing-mode/reftest.list
View File

@ -3,6 +3,9 @@
# is turned on
== 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
== 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