Bug 1055667 part 7 - Reftests for box properties on ruby boxes. r=dbaron

--HG--
extra : source : 4f6b9fe27d00b364047c0834608eb4c643bc2167
This commit is contained in:
Xidorn Quan 2015-01-15 20:02:11 +11:00
parent b6f10f748e
commit eb634353fa
9 changed files with 178 additions and 0 deletions

View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bug 1055667 - Box properties on ruby boxes</title>
</head>
<body style="line-height: 5;">
<div>
|<span style="background: aqua; padding: 10px; border: 12px solid red; outline: 5px solid yellow; margin: 10px;"
><span>base1</span>
<!-- width: 256px = 300px - 2 * (padding: 2px + border: 4px + margin: 16px) -->
<span style="background: green; padding: 2px; border: 4px solid blue; outline: 8px solid pink; margin: 16px;"><div style="display: inline-block; text-align: center; width: 256px; line-height: normal;">base2</div></span>
<span>base3</span
></span>|
</div>
</body>
</html>

View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bug 1055667 - Box properties on ruby boxes</title>
<link rel="stylesheet" href="common.css">
</head>
<body style="line-height: 5;">
<div>
|<ruby style="background: aqua; padding: 10px; border: 12px solid red; outline: 5px solid yellow; margin: 10px;">
<rb>base1</rb>
<rb style="background: green; padding: 2px; border: 4px solid blue; outline: 8px solid pink; margin: 16px;">base2</rb>
<rb>base3</rb>
<rtc style="font-size: 0;">
<rt></rt>
<rt><div style="width: 300px; height: 0px;"></div></rt>
</rtc>
</ruby>|
</div>
</body>
</html>

View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bug 1055667 - Box properties on ruby boxes</title>
<link rel="stylesheet" href="common.css">
<script type="text/javascript" src="utils.js"></script>
</head>
<body style="line-height: 5">
<ruby>
<rb>base1</rb>
<rb><div></div></rb>
<rb>base3</rb>
<rtc>
<rt></rt>
<rt><div id="rtblock" style="width: 256px; text-align:center; background: silver; padding: 2px; border: 4px solid gray; outline: 8px solid black; margin: -6px 16px;"><span id="inline">text1</span></div></rt>
<!-- width: 256px = 300px - 2 * (padding: 2px + border: 4px + margin: 16px) -->
</rtc>
</ruby>
<script type="text/javascript">
// normal height of an one-line inline-block is the line-height,
// we need to adjust it to the height of the inline box to simulate
// the ruby text box.
makeHeightMatchInlineBox(document.getElementById('rtblock'),
document.getElementById('inline'));
</script>
</body>
</html>

View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bug 1055667 - Box properties on ruby boxes</title>
<link rel="stylesheet" href="common.css">
<script type="text/javascript" src="utils.js"></script>
</head>
<body style="line-height: 5">
<ruby>
<rb>base1</rb>
<rb><div style="width: 300px;"></div></rb>
<rb>base3</rb>
<rtc>
<rt></rt>
<rt style="background: silver; padding: 2px; border: 4px solid gray; outline: 8px solid black; margin: 16px;"><div id="rtblock"><span id="inline">text1</span></div></rt>
</rtc>
</ruby>
<script type="text/javascript">
// alter the height to make it easier to match the reference page
makeHeightMatchInlineBox(document.getElementById('rtblock'),
document.getElementById('inline'));
</script>
</body>
</html>

View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bug 1055667 - Box properties on ruby boxes</title>
<link rel="stylesheet" href="common.css">
</head>
<body style="line-height: 5">
<ruby>
<rbc>
<rb style="background: aqua; outline: 8px solid teal; margin: 16px;">base1</rb>
</rbc><rbc></rbc>
<rtc>
<rt style="outline: 8px solid purple;"><div style="background: fuchsia;">text1</div></rt>
</rtc>
</ruby>
</body>
</html>

View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bug 1055667 - Box properties on ruby boxes</title>
<link rel="stylesheet" href="common.css">
</head>
<body style="line-height: 5">
<ruby>
<rbc style="background: aqua; padding: 2px; border: 4px solid red; outline: 8px solid teal; margin: 16px;">
<rb>base1</rb>
</rbc><rbc></rbc>
<rtc style="background: fuchsia; padding: 2px; border: 4px solid red; outline: 8px solid purple; margin: 16px;">
<rt>text1</rt>
</rtc>
</ruby>
</body>
</html>

View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bug 1055667 - Box properties on ruby boxes</title>
<link rel="stylesheet" href="common.css">
<style>
.inside {
display: inline-block;
width: 50px; height: 10px;
background: black;
}
</style>
</head>
<body>
<div style="width: 80px">
<span style="background: silver; padding: 0 20px; border: 10px solid gray; border-width: 0 10px;"
><div class="inside"></div
><div class="inside" style="padding: 0 15px;"></div
><div class="inside"></div
></span>
</div>
</body>
</html>

View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bug 1055667 - Box properties on ruby boxes</title>
<link rel="stylesheet" href="common.css">
<style>
.inside {
width: 50px; height: 10px;
background: black;
}
</style>
</head>
<body>
<div style="width: 80px">
<ruby style="background: silver; padding: 0 20px; border: 10px solid gray; border-width: 0 10px;"
><rb><div class="inside"></div></rb
><rb><div class="inside" style="padding: 0 15px;"></div></rb
><rb><div class="inside"></div></rb
></ruby>
</div>
</body>
</html>

View File

@ -8,6 +8,10 @@ fails == autohiding-3.html autohiding-3-ref.html # bug 1107701
== box-generation-3.html box-generation-3-ref.html
== box-generation-4.html box-generation-4-ref.html
== box-generation-5.html box-generation-5-ref.html
== box-properties-1.html box-properties-1-ref.html
== box-properties-2.html box-properties-2-ref.html
== box-properties-3.html box-properties-3-ref.html
== box-properties-4.html box-properties-4-ref.html
== dynamic-insertion-1.html dynamic-insertion-1-ref.html
== dynamic-insertion-2.html dynamic-insertion-2-ref.html
== dynamic-insertion-3.html dynamic-insertion-3-ref.html