diff options
Diffstat (limited to 'layout/reftests/css-ruby')
41 files changed, 902 insertions, 0 deletions
diff --git a/layout/reftests/css-ruby/box-properties-1-ref.html b/layout/reftests/css-ruby/box-properties-1-ref.html new file mode 100644 index 0000000000..a8e340653d --- /dev/null +++ b/layout/reftests/css-ruby/box-properties-1-ref.html @@ -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> diff --git a/layout/reftests/css-ruby/box-properties-1.html b/layout/reftests/css-ruby/box-properties-1.html new file mode 100644 index 0000000000..1b463eb5b8 --- /dev/null +++ b/layout/reftests/css-ruby/box-properties-1.html @@ -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> diff --git a/layout/reftests/css-ruby/box-properties-2-ref.html b/layout/reftests/css-ruby/box-properties-2-ref.html new file mode 100644 index 0000000000..5abfa2e84c --- /dev/null +++ b/layout/reftests/css-ruby/box-properties-2-ref.html @@ -0,0 +1,29 @@ +<!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: 10"> + <ruby> + <rb>base1</rb> + <rb><div></div></rb> + <rb>base3</rb> + <rtc> + <rt></rt> + <rt style="margin: 22px 0;"><div id="rtblock" style="width: 256px; text-align:center; background: silver; padding: 2px; border: 4px solid gray; outline: 8px solid black; margin: 16px;"><span id="inline">text1</span></div></rt> + <!-- margin: 22px = margin: 16px + padding: 2px + border: 4px --> + <!-- 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. + makeBSizeMatchInlineBox(document.getElementById('rtblock'), + document.getElementById('inline')); + </script> +</body> +</html> diff --git a/layout/reftests/css-ruby/box-properties-2.html b/layout/reftests/css-ruby/box-properties-2.html new file mode 100644 index 0000000000..ca12016937 --- /dev/null +++ b/layout/reftests/css-ruby/box-properties-2.html @@ -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: 10"> + <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 + makeBSizeMatchInlineBox(document.getElementById('rtblock'), + document.getElementById('inline')); + </script> +</body> +</html> diff --git a/layout/reftests/css-ruby/box-properties-3-ref.html b/layout/reftests/css-ruby/box-properties-3-ref.html new file mode 100644 index 0000000000..465e547584 --- /dev/null +++ b/layout/reftests/css-ruby/box-properties-3-ref.html @@ -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;"><span style="background: fuchsia">text1</span></rt> + </rtc> + </ruby> +</body> +</html> diff --git a/layout/reftests/css-ruby/box-properties-3.html b/layout/reftests/css-ruby/box-properties-3.html new file mode 100644 index 0000000000..6b014c2681 --- /dev/null +++ b/layout/reftests/css-ruby/box-properties-3.html @@ -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> diff --git a/layout/reftests/css-ruby/box-properties-4-ref.html b/layout/reftests/css-ruby/box-properties-4-ref.html new file mode 100644 index 0000000000..db6788daa2 --- /dev/null +++ b/layout/reftests/css-ruby/box-properties-4-ref.html @@ -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> diff --git a/layout/reftests/css-ruby/box-properties-4.html b/layout/reftests/css-ruby/box-properties-4.html new file mode 100644 index 0000000000..6e953bc3a1 --- /dev/null +++ b/layout/reftests/css-ruby/box-properties-4.html @@ -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> diff --git a/layout/reftests/css-ruby/bug1181890-notref.html b/layout/reftests/css-ruby/bug1181890-notref.html new file mode 100644 index 0000000000..0e97415a88 --- /dev/null +++ b/layout/reftests/css-ruby/bug1181890-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<p style="ruby-align: start"> + <ruby><rb>A</rb><rt>aaaaaaaaaaaa</rt></ruby> + <ruby><rb>BBBBB</rb><rt>b</rt></ruby> +</p> +<p style="ruby-align: start"> + <ruby><rb>A</rb><rt>aaaaaaaaaaaa</rt></ruby> + <ruby><rb>BBBBB</rb><rt>b</rt></ruby> +</p> diff --git a/layout/reftests/css-ruby/bug1181890-ref.html b/layout/reftests/css-ruby/bug1181890-ref.html new file mode 100644 index 0000000000..41a46d13e3 --- /dev/null +++ b/layout/reftests/css-ruby/bug1181890-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<p style="ruby-align: center"> + <ruby><rb>A</rb><rt>aaaaaaaaaaaa</rt></ruby> + <ruby><rb>BBBBB</rb><rt>b</rt></ruby> +</p> +<p style="ruby-align: space-between"> + <ruby><rb>A</rb><rt>aaaaaaaaaaaa</rt></ruby> + <ruby><rb>BBBBB</rb><rt>b</rt></ruby> +</p> diff --git a/layout/reftests/css-ruby/bug1181890.html b/layout/reftests/css-ruby/bug1181890.html new file mode 100644 index 0000000000..3369a7482d --- /dev/null +++ b/layout/reftests/css-ruby/bug1181890.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<p style="ruby-align: center"> + <ruby><rb>A</rb><rt>aaaaaaaaaaaa</rt></ruby> + <ruby><rb>BBBBB</rb><rt>b</rt></ruby> +</p> +<p style="ruby-align: space-between"> + <ruby><rb>A</rb><rt>aaaaaaaaaaaa</rt></ruby> + <ruby><rb>BBBBB</rb><rt>b</rt></ruby> +</p> +‎ diff --git a/layout/reftests/css-ruby/common.css b/layout/reftests/css-ruby/common.css new file mode 100644 index 0000000000..45bdd379cb --- /dev/null +++ b/layout/reftests/css-ruby/common.css @@ -0,0 +1,22 @@ +@font-face { + font-family: Ahem; + src: url(../fonts/Ahem.ttf); +} +rbc { + display: ruby-base-container; + unicode-bidi: isolate; +} +[pseudo] { + font-size: inherit; + line-height: inherit; +} +[pseudo] > rt { + font-size: 50%; +} +[pseudo] > rt[pseudo] { + font-size: inherit; +} + +.large { + font-size: 200%; +} diff --git a/layout/reftests/css-ruby/inflated-ruby-1-ref.html b/layout/reftests/css-ruby/inflated-ruby-1-ref.html new file mode 100644 index 0000000000..7ae6e58258 --- /dev/null +++ b/layout/reftests/css-ruby/inflated-ruby-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<style> +div { font-family: monospace; font-size: 34px; width: 450px; } +rt { font-size: 50%; } +</style> +<div><ruby><rb>base<rt>rubytext</ruby></div> diff --git a/layout/reftests/css-ruby/inflated-ruby-1.html b/layout/reftests/css-ruby/inflated-ruby-1.html new file mode 100644 index 0000000000..f9c6f19474 --- /dev/null +++ b/layout/reftests/css-ruby/inflated-ruby-1.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<style> +div { font-family: monospace; font-size: 12px; width: 450px; } +rt { font-size: 50%; } +</style> +<!-- +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. +--> +<div><ruby><rb>base<rt>rubytext</ruby></div> diff --git a/layout/reftests/css-ruby/line-height-1-ref.html b/layout/reftests/css-ruby/line-height-1-ref.html new file mode 100644 index 0000000000..821765f5c3 --- /dev/null +++ b/layout/reftests/css-ruby/line-height-1-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Bug 1069519 - Ruby line height calculation</title> + <link rel="stylesheet" href="common.css"> + <script type="text/javascript" src="utils.js"></script> +</head> +<body style="line-height: 1"> + <div id="base"> + <span id="inline">base</span> + <span id="text" style="font-size: 50%; color: transparent">text</span> + </div> + <script> + // Simulate the behavior of ruby layout. + var base = document.getElementById('base'); + makeBSizeMatchInlineBox(base, document.getElementById('inline')); + base.style.paddingTop = getBSize(document.getElementById('text')); + </script> +</body> +</html> diff --git a/layout/reftests/css-ruby/line-height-1.html b/layout/reftests/css-ruby/line-height-1.html new file mode 100644 index 0000000000..fc7463e381 --- /dev/null +++ b/layout/reftests/css-ruby/line-height-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Bug 1069519 - Ruby line height calculation</title> + <link rel="stylesheet" href="common.css"> +</head> +<body style="line-height: 1"> + <ruby> + <rb>base</rb> + <rtc><rt style="color: transparent">text</rt></rtc> + </ruby> +</body> +</html> diff --git a/layout/reftests/css-ruby/line-height-2-ref.html b/layout/reftests/css-ruby/line-height-2-ref.html new file mode 100644 index 0000000000..3d506e4e9b --- /dev/null +++ b/layout/reftests/css-ruby/line-height-2-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Bug 1069519 - Ruby line height calculation</title> + <link rel="stylesheet" href="common.css"> + <script type="text/javascript" src="utils.js"></script> +</head> +<body style="line-height: 1"> + <div id="base"> + <span id="inline">base</span> + <span id="text" style="font-size: 50%; color: transparent">text</span> + </div> + next line + <script> + // Simulate the behavior of ruby layout. + var base = document.getElementById('base'); + makeBSizeMatchInlineBox(base, document.getElementById('inline')); + base.style.paddingBottom = getBSize(document.getElementById('text')); + </script> +</body> +</html> diff --git a/layout/reftests/css-ruby/line-height-2.html b/layout/reftests/css-ruby/line-height-2.html new file mode 100644 index 0000000000..d84f31da4e --- /dev/null +++ b/layout/reftests/css-ruby/line-height-2.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Bug 1069519 - Ruby line height calculation</title> + <link rel="stylesheet" href="common.css"> +</head> +<body style="line-height: 1"> + <ruby> + <rb>base</rb> + <rtc style="ruby-position: under;"><rt style="color: transparent">text</rt></rtc> + </ruby><br> + next line +</body> +</html> diff --git a/layout/reftests/css-ruby/line-height-3-ref.html b/layout/reftests/css-ruby/line-height-3-ref.html new file mode 100644 index 0000000000..8a186c5f25 --- /dev/null +++ b/layout/reftests/css-ruby/line-height-3-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Bug 1069519 - Ruby line height calculation</title> + <link rel="stylesheet" href="common.css"> + <script type="text/javascript" src="utils.js"></script> +</head> +<body style="line-height: 1"> + <div id="base"> + <span id="inline">base</span> + <span id="text1" style="font-size: 80%; color: transparent">text</span> + <span id="text2" style="font-size: 50%; color: transparent">text</span> + </div> + next line + <script> + // Simulate the behavior of ruby layout. + var base = document.getElementById('base'); + makeBSizeMatchInlineBox(base, document.getElementById('inline')); + base.style.paddingTop = getBSize(document.getElementById('text1')); + base.style.paddingBottom = getBSize(document.getElementById('text2')); + </script> +</body> +</html> diff --git a/layout/reftests/css-ruby/line-height-3.html b/layout/reftests/css-ruby/line-height-3.html new file mode 100644 index 0000000000..ea2bf632af --- /dev/null +++ b/layout/reftests/css-ruby/line-height-3.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Bug 1069519 - Ruby line height calculation</title> + <link rel="stylesheet" href="common.css"> +</head> +<body style="line-height: 1"> + <ruby> + <rb>base</rb> + <rtc style="ruby-position: over; font-size: 80%;"><rt style="color: transparent">text</rt></rtc> + <rtc style="ruby-position: under; font-size: 50%;"><rt style="color: transparent">text</rt></rtc> + </ruby><br> + next line +</body> +</html> diff --git a/layout/reftests/css-ruby/line-height-4-ref.html b/layout/reftests/css-ruby/line-height-4-ref.html new file mode 100644 index 0000000000..4ef96858e1 --- /dev/null +++ b/layout/reftests/css-ruby/line-height-4-ref.html @@ -0,0 +1,15 @@ +<title>Bug 1134206 - Ruby line spacing adjustment on quirks mode</title> +<script type="text/javascript" src="utils.js"></script> +<div id="base"> + <span id="inline">base</span> + <span id="text1" style="font-size: 80%; color: transparent">text</span> + <span id="text2" style="font-size: 50%; color: transparent">text</span> +</div> +next line +<script> + // Simulate the behavior of ruby layout. + var base = document.getElementById('base'); + makeBSizeMatchInlineBox(base, document.getElementById('inline')); + base.style.paddingTop = getBSize(document.getElementById('text1')); + base.style.paddingBottom = getBSize(document.getElementById('text2')); +</script> diff --git a/layout/reftests/css-ruby/line-height-4.html b/layout/reftests/css-ruby/line-height-4.html new file mode 100644 index 0000000000..978aa5c70b --- /dev/null +++ b/layout/reftests/css-ruby/line-height-4.html @@ -0,0 +1,7 @@ +<title>Bug 1134206 - Ruby line spacing adjustment on quirks mode</title> +<ruby> + <rb>base</rb> + <rtc style="ruby-position: over; font-size: 80%;"><rt style="color: transparent">text</rt></rtc> + <rtc style="ruby-position: under; font-size: 50%;"><rt style="color: transparent">text</rt></rtc> +</ruby><br> +next line diff --git a/layout/reftests/css-ruby/min-font-size-1-ref.html b/layout/reftests/css-ruby/min-font-size-1-ref.html new file mode 100644 index 0000000000..93b4bba2cd --- /dev/null +++ b/layout/reftests/css-ruby/min-font-size-1-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> + <meta charset="UTF-8"> + <title>Bug 1165538 - Minimum font size on ruby text</title> +</head> +<body style="font-size: 16px"> + <ruby> + <rb>超電磁砲</rb> + <rt>レールガン</rt> + </ruby> +</body> +</html> diff --git a/layout/reftests/css-ruby/min-font-size-1.html b/layout/reftests/css-ruby/min-font-size-1.html new file mode 100644 index 0000000000..150e032216 --- /dev/null +++ b/layout/reftests/css-ruby/min-font-size-1.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> + <meta charset="UTF-8"> + <title>Bug 1165538 - Minimum font size on ruby text</title> +</head> +<body style="font-size: 1px"> + <ruby> + <rb>超電磁砲</rb> + <rt>レールガン</rt> + </ruby> +</body> +</html> diff --git a/layout/reftests/css-ruby/nested-ruby-1.html b/layout/reftests/css-ruby/nested-ruby-1.html new file mode 100644 index 0000000000..b3e76768e8 --- /dev/null +++ b/layout/reftests/css-ruby/nested-ruby-1.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Bug 1120313 - Nested ruby inside ruby annotation</title> + <link rel="stylesheet" href="common.css"> +</head> +<body> + <ruby> + <rb>base1</rb> + <rt> + <ruby> + <rb>base2</rb> + <rt>text</rt> + </ruby> + </rt> + </ruby> +</body> +</html> diff --git a/layout/reftests/css-ruby/reftest.list b/layout/reftests/css-ruby/reftest.list new file mode 100644 index 0000000000..e432c79426 --- /dev/null +++ b/layout/reftests/css-ruby/reftest.list @@ -0,0 +1,33 @@ +# Box properties support on ruby boxes are not specified. +== 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 + +# These tests browser features. +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) == inflated-ruby-1.html inflated-ruby-1-ref.html +test-pref(font.minimum-size.ja,16) == min-font-size-1.html min-font-size-1-ref.html + +# These tests rely on height of inline elements which is unspecified. +== 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 +== line-height-4.html line-height-4-ref.html +== relative-positioning-1.html relative-positioning-1-ref.html +== relative-positioning-2.html relative-positioning-2-ref.html +== ruby-position-horizontal.html ruby-position-horizontal-ref.html +== ruby-position-vertical-lr.html ruby-position-vertical-lr-ref.html +== ruby-position-vertical-rl.html ruby-position-vertical-rl-ref.html + +# Nested ruby should not crash. +load nested-ruby-1.html + +# Inter-character ruby is not enabled, and its spec is not considered stable enough. +pref(layout.css.ruby.intercharacter.enabled,true) fuzzy-if(Android,0-198,0-70) == ruby-intercharacter-1.htm ruby-intercharacter-1-ref.htm +pref(layout.css.ruby.intercharacter.enabled,false) != ruby-intercharacter-1.htm ruby-intercharacter-1-ref.htm +pref(layout.css.ruby.intercharacter.enabled,true) == ruby-intercharacter-2.htm ruby-intercharacter-2-ref.htm +pref(layout.css.ruby.intercharacter.enabled,false) != ruby-intercharacter-2.htm ruby-intercharacter-2-ref.htm + +# Testing a specific bug for RTL handling. +== bug1181890.html bug1181890-ref.html +!= bug1181890.html bug1181890-notref.html diff --git a/layout/reftests/css-ruby/relative-positioning-1-ref.html b/layout/reftests/css-ruby/relative-positioning-1-ref.html new file mode 100644 index 0000000000..1819ba920e --- /dev/null +++ b/layout/reftests/css-ruby/relative-positioning-1-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Bug 1055658 - Relative positioning for ruby</title> + <script type="text/javascript" src="utils.js"></script> +</head> +<body> + <div style="height: 80px; line-height: 80px; width: 50px; text-align: center"> + <span id="inline" style="position: relative"> + <div id="annotation" style="position: absolute; width: 50px; top: -100%"> + a<span style="position: relative; top: -10px;">b</span>c + </div> + base + </span> + </div> + <script type="text/javascript"> + makeBSizeMatchInlineBox(document.getElementById('annotation'), + document.getElementById('inline')); + </script> +</body> +</html> diff --git a/layout/reftests/css-ruby/relative-positioning-1.html b/layout/reftests/css-ruby/relative-positioning-1.html new file mode 100644 index 0000000000..66dcf62c7c --- /dev/null +++ b/layout/reftests/css-ruby/relative-positioning-1.html @@ -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> diff --git a/layout/reftests/css-ruby/relative-positioning-2-ref.html b/layout/reftests/css-ruby/relative-positioning-2-ref.html new file mode 100644 index 0000000000..a5fc13090e --- /dev/null +++ b/layout/reftests/css-ruby/relative-positioning-2-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Bug 1055658 - Relative positioning for ruby</title> + <script type="text/javascript" src="utils.js"></script> +</head> +<body style="font-family: monospace"> + <div style="height: 80px; line-height: 80px;"> + before + <div style="position: relative; top: 20px; display: inline-block"> + <span id="inline" style="position: relative"> + <div id="annotation" style="position: absolute; top: -100%;"> + text1 + <span style="position: relative; top: -20px;">text2</span> + <span style="position: relative; right: 10px;">text3</span> + </div> + base1 + <span style="position: relative; left: 10px;">base2</span> + <span style="position: relative; bottom: -20px;">base3</span> + </span> + </div> + after + </div> + <script type="text/javascript"> + makeBSizeMatchInlineBox(document.getElementById('annotation'), + document.getElementById('inline')); + </script> +</body> +</html> diff --git a/layout/reftests/css-ruby/relative-positioning-2.html b/layout/reftests/css-ruby/relative-positioning-2.html new file mode 100644 index 0000000000..0e91b7b379 --- /dev/null +++ b/layout/reftests/css-ruby/relative-positioning-2.html @@ -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> diff --git a/layout/reftests/css-ruby/ruby-intercharacter-1-ref.htm b/layout/reftests/css-ruby/ruby-intercharacter-1-ref.htm new file mode 100644 index 0000000000..6327ad90f7 --- /dev/null +++ b/layout/reftests/css-ruby/ruby-intercharacter-1-ref.htm @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- +Reftest 1 for Bug 1395777 (reference file) +--> +<html lang="zh-TW"> +<head> +<meta charset="UTF-8"> +<style> +body { + font-size: 30px; + line-height: 1; +} +.rbc { + height: 30px; + display: inline-block; + vertical-align: top; +} +.rtc { + height: 30px; + display: inline-block; + writing-mode: vertical-rl; + text-orientation: upright; + vertical-align: top; + text-align: center; + font-size: 30%; +} +</style> +</head> +<body> + <div> + <span class="rbc">BASE</span><span class="rtc">RT</span> + </div> +</body> +</html> diff --git a/layout/reftests/css-ruby/ruby-intercharacter-1.htm b/layout/reftests/css-ruby/ruby-intercharacter-1.htm new file mode 100644 index 0000000000..bb681a286b --- /dev/null +++ b/layout/reftests/css-ruby/ruby-intercharacter-1.htm @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- +Reftest 1 for Bug 1395777 (test file) +--> +<html lang="zh-TW"> +<head> +<meta charset="UTF-8"> +<style> +body { + font-size: 30px; + line-height: 1; +} +rtc { + writing-mode: vertical-rl; + text-orientation: upright; +} +</style> +</head> +<body> + <ruby> + <rbc>BASE</rbc><rtc>RT</rtc> + </ruby> +</body> +</html> diff --git a/layout/reftests/css-ruby/ruby-intercharacter-2-ref.htm b/layout/reftests/css-ruby/ruby-intercharacter-2-ref.htm new file mode 100644 index 0000000000..90d47ae1d5 --- /dev/null +++ b/layout/reftests/css-ruby/ruby-intercharacter-2-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- +Reftest 2 for Bug 1395777 (reference file) +--> +<html lang="zh-TW"> +<head> +<meta charset="UTF-8"> +<style> +html { + font-size: xx-large; +} +ruby { + width: 1.4em; +} +rtc { + display: inline-block; + writing-mode: vertical-rl; + text-orientation: upright; + vertical-align: text-top; +} +</style> +</head> +<body> + <ruby> + <rbc>BASE</rbc><rtc>LONGRT</rtc> + </ruby> +</body> +</html> diff --git a/layout/reftests/css-ruby/ruby-intercharacter-2.htm b/layout/reftests/css-ruby/ruby-intercharacter-2.htm new file mode 100644 index 0000000000..2819784f16 --- /dev/null +++ b/layout/reftests/css-ruby/ruby-intercharacter-2.htm @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- +Reftest 2 for Bug 1395777 (test file) +--> +<html lang="zh-TW"> +<head> +<meta charset="UTF-8"> +<style> +html { + font-size: xx-large; +} +rtc { + writing-mode: vertical-rl; + text-orientation: upright; +} +</style> +</head> +<body> + <ruby> + <rbc>BASE</rbc><rtc>LONGRT</rtc> + </ruby> +</body> +</html> diff --git a/layout/reftests/css-ruby/ruby-position-horizontal-ref.html b/layout/reftests/css-ruby/ruby-position-horizontal-ref.html new file mode 100644 index 0000000000..9cb0ceaf4f --- /dev/null +++ b/layout/reftests/css-ruby/ruby-position-horizontal-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Bug 1055665 - Test for ruby-position</title> + <link rel="stylesheet" href="common.css"> + <script type="text/javascript" src="utils.js"></script> + <style> + body { + font-family: monospace; + } + .annotation, .annotation > div { + position: absolute; + } + </style> +</head> +<body> + <div style="height: 8em; line-height: 8em;"> + <div style="display: inline-block;"> + <div class="annotation"> + <div style="top: -100%;"><span>over##</span></div> + <div style="top: 100%;"><span>under#</span></div> + <div style="top: -200%;"><span>over2#</span></div> + <div style="top: 200%;"><span>under2</span></div> + <!-- to give container the proper block-axis size --> + <span> </span> + </div> + <span>base##</span> + </div> + </div> + <script type="text/javascript"> + makeBSizeOfParentMatch(document.getElementsByTagName('span')); + </script> +</body> +</html> diff --git a/layout/reftests/css-ruby/ruby-position-horizontal.html b/layout/reftests/css-ruby/ruby-position-horizontal.html new file mode 100644 index 0000000000..e6d9e8393b --- /dev/null +++ b/layout/reftests/css-ruby/ruby-position-horizontal.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Bug 1055665 - Test for ruby-position</title> + <link rel="stylesheet" href="common.css"> + <style> + body { + font-family: monospace; + /* use a large line-height here to avoid additional leadings */ + line-height: 8em; + } + rtc, rt { + font-size: 100% !important; + line-height: normal !important; + } + </style> +</head> +<body> + <ruby> + <rb>base##</rb> + <rtc style="ruby-position: over"><rt>over##</rt></rtc> + <rtc style="ruby-position: under"><rt>under#</rt></rtc> + <rtc style="ruby-position: over"><rt>over2#</rt></rtc> + <rtc style="ruby-position: under"><rt>under2</rt></rtc> + </ruby> +</body> +</html> diff --git a/layout/reftests/css-ruby/ruby-position-vertical-lr-ref.html b/layout/reftests/css-ruby/ruby-position-vertical-lr-ref.html new file mode 100644 index 0000000000..2c432e4240 --- /dev/null +++ b/layout/reftests/css-ruby/ruby-position-vertical-lr-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Bug 1055665 - Test for ruby-position</title> + <link rel="stylesheet" href="common.css"> + <script type="text/javascript" src="utils.js"></script> + <style> + html { + writing-mode: vertical-lr; + } + body { + font-family: monospace; + } + .annotation, .annotation > div { + position: absolute; + } + </style> +</head> +<body> + <div style="width: 8em; line-height: 8em;"> + <div style="display: inline-block;"> + <div class="annotation"> + <div style="right: 100%;"><span>left##</span></div> + <div style="right: -100%;"><span>right#</span></div> + <div style="right: 200%;"><span>left2#</span></div> + <div style="right: -200%;"><span>right2</span></div> + <!-- to give container the proper block-axis size --> + <span> </span> + </div> + <span>base##</span> + </div> + </div> + <script type="text/javascript"> + makeBSizeOfParentMatch(document.getElementsByTagName('span')); + </script> +</body> +</html> diff --git a/layout/reftests/css-ruby/ruby-position-vertical-lr.html b/layout/reftests/css-ruby/ruby-position-vertical-lr.html new file mode 100644 index 0000000000..6dee8f7ccb --- /dev/null +++ b/layout/reftests/css-ruby/ruby-position-vertical-lr.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Bug 1055665 - Test for ruby-position</title> + <link rel="stylesheet" href="common.css"> + <style> + html { + writing-mode: vertical-lr; + } + body { + font-family: monospace; + /* use a large line-height here to avoid additional leadings */ + line-height: 8em; + } + rtc, rt { + font-size: 100% !important; + line-height: normal !important; + } + </style> +</head> +<body> + <ruby> + <rb>base##</rb> + <rtc style="ruby-position: under"><rt>left##</rt></rtc> + <rtc style="ruby-position: over"><rt>right#</rt></rtc> + <rtc style="ruby-position: under"><rt>left2#</rt></rtc> + <rtc style="ruby-position: over"><rt>right2</rt></rtc> + </ruby> +</body> +</html> diff --git a/layout/reftests/css-ruby/ruby-position-vertical-rl-ref.html b/layout/reftests/css-ruby/ruby-position-vertical-rl-ref.html new file mode 100644 index 0000000000..edeeeb5f4b --- /dev/null +++ b/layout/reftests/css-ruby/ruby-position-vertical-rl-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Bug 1055665 - Test for ruby-position</title> + <link rel="stylesheet" href="common.css"> + <script type="text/javascript" src="utils.js"></script> + <style> + html { + writing-mode: vertical-rl; + } + body { + font-family: monospace; + } + .annotation, .annotation > div { + position: absolute; + } + </style> +</head> +<body> + <div style="width: 8em; line-height: 8em;"> + <div style="display: inline-block;"> + <div class="annotation"> + <div style="right: 100%;"><span>left##</span></div> + <div style="right: -100%;"><span>right#</span></div> + <div style="right: 200%;"><span>left2#</span></div> + <div style="right: -200%;"><span>right2</span></div> + <!-- to give container the proper block-axis size --> + <span> </span> + </div> + <span>base##</span> + </div> + </div> + <script type="text/javascript"> + makeBSizeOfParentMatch(document.getElementsByTagName('span')); + </script> +</body> +</html> diff --git a/layout/reftests/css-ruby/ruby-position-vertical-rl.html b/layout/reftests/css-ruby/ruby-position-vertical-rl.html new file mode 100644 index 0000000000..1d93781764 --- /dev/null +++ b/layout/reftests/css-ruby/ruby-position-vertical-rl.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Bug 1055665 - Test for ruby-position</title> + <link rel="stylesheet" href="common.css"> + <style> + html { + writing-mode: vertical-rl; + } + body { + font-family: monospace; + /* use a large line-height here to avoid additional leadings */ + line-height: 8em; + } + rtc, rt { + font-size: 100% !important; + line-height: normal !important; + } + </style> +</head> +<body> + <ruby> + <rb>base##</rb> + <rtc style="ruby-position: under"><rt>left##</rt></rtc> + <rtc style="ruby-position: over"><rt>right#</rt></rtc> + <rtc style="ruby-position: under"><rt>left2#</rt></rtc> + <rtc style="ruby-position: over"><rt>right2</rt></rtc> + </ruby> +</body> +</html> diff --git a/layout/reftests/css-ruby/utils.js b/layout/reftests/css-ruby/utils.js new file mode 100644 index 0000000000..1fee84cc2d --- /dev/null +++ b/layout/reftests/css-ruby/utils.js @@ -0,0 +1,33 @@ +function getBlockAxisName(elem) { + var wm = getComputedStyle(elem).writingMode; + return (!wm || wm == 'horizontal-tb') ? 'height' : 'width'; +} + +function getBSize(elem) { + return elem.getBoundingClientRect()[getBlockAxisName(elem)] + 'px'; +} + +function setBSize(elem, bsize) { + elem.style[getBlockAxisName(elem)] = bsize; + elem.style.lineHeight = bsize; +} + +// Ruby annotations are placed based on block-axis size of inline boxes +// instead of line box. Block-axis size of an inline box is the max +// height of the font, while that of line box is line height. Hence we +// sometimes need to explicitly set the block-axis size of an inline +// box to a block to simulate the exact behavior, which is what the +// following two functions do. + +function makeBSizeMatchInlineBox(block, inline) { + setBSize(block, getBSize(inline)); +} + +function makeBSizeOfParentMatch(elems) { + // The size change is divided into two phases to avoid + // triggering reflow for every element. + for (var elem of elems) + elem.dataset.bsize = getBSize(elem); + for (var elem of elems) + setBSize(elem.parentNode, elem.dataset.bsize); +} |