Bug 1055658 part 3 - Add reftests for ruby annotation relative positioning. r=dbaron

--HG--
extra : source : 6cc51f0bfbb68999a5361339a09a455ac7723bc6
This commit is contained in:
Xidorn Quan 2015-01-12 14:31:55 +11:00
parent 35fba6afe9
commit f2653be159
5 changed files with 121 additions and 0 deletions

View File

@ -28,6 +28,8 @@ fuzzy-if(winWidget,35,1) == dynamic-removal-3.html dynamic-removal-3-ref.html #
== line-height-1.html line-height-1-ref.html
== line-height-2.html line-height-2-ref.html
== line-height-3.html line-height-3-ref.html
fails-if(cocoaWidget) == relative-positioning-1.html relative-positioning-1-ref.html # bug 1120280
== relative-positioning-2.html relative-positioning-2-ref.html
== ruby-span-1.html ruby-span-1-ref.html
== ruby-whitespace-1.html ruby-whitespace-1-ref.html
== ruby-whitespace-2.html ruby-whitespace-2-ref.html

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bug 1055658 - Relative positioning for ruby</title>
<style>
.wrapper {
width: 50px;
text-align: center;
}
.annotation, .annotation > div {
position: absolute;
line-height: 1;
}
</style>
</head>
<body>
<div style="height: 80px; line-height: 80px;">
<div class="wrapper" style="display: inline-block; line-height: normal; position: relative;">
<div class="annotation" style="top: 0;">
<div class="wrapper" style="top: -100%;">a<span style="position: relative; top: -10px;">b</span>c</div>
&nbsp; <!-- to give container a nonzero size for
percent values to resolve against -->
</div>
base
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bug 1055658 - Relative positioning for ruby</title>
<link rel="stylesheet" href="common.css">
<style>
body {
line-height: 80px;
}
rtc, rt {
font-size: 100% !important;
line-height: 1 !important;
}
</style>
</head>
<body>
<ruby style="position: relative;">
<rb>base</rb>
<rtc><rt>a<span style="position: relative; top: -10px;">b</span>c</rt></rtc>
<rtc><div style="width: 50px; height: 0;"></div></rtc>
</ruby>
</body>
</html>

View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bug 1055658 - Relative positioning for ruby</title>
<style>
body {
font-family: monospace;
}
.annotation, .annotation > div {
position: absolute;
line-height: 1;
}
</style>
</head>
<body>
<div style="height: 80px; line-height: 80px;">
before
<div style="display: inline-block; line-height: normal; position: relative; top: 20px;">
<div class="annotation" style="top: 0; width: 100%;">
<div style="top: -100%;">
text1
<span style="position: relative; top: -20px;">text2</span>
<span style="position: relative; right: 10px;">text3</span>
</div>
&nbsp; <!-- to give container a nonzero size for
percent values to resolve against -->
</div>
base1
<span style="position: relative; left: 10px;">base2</span>
<span style="position: relative; bottom: -20px;">base3</span>
</div>
after
</div>
</body>
</html>

View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bug 1055658 - Relative positioning for ruby</title>
<link rel="stylesheet" href="common.css">
<style>
body {
font-family: monospace;
line-height: 80px;
}
rtc, rt {
font-size: 100% !important;
line-height: 1 !important;
}
</style>
</head>
<body>
before
<ruby style="position: relative; top: 20px;">
<rb>base1</rb>
<rtc>text1</rtc>
<rb style="position: relative; left: 10px;">base2</rb>
<rtc style="position: relative; top: -20px;">text2</rtc>
<rbc style="position: relative; bottom: -20px;"><rb>base3</rb></rbc>
<rtc><rt style="position: relative; right: 10px;">text3</rt></rtc>
</ruby>
after
</body>
</html>