Bug 1557825 part 2 - Add tests and update devtools for 'display:block ruby'. r=xidorn
authorMats Palmgren <mats@mozilla.com>
Wed, 14 Aug 2019 14:38:33 +0000
changeset 487952 282af999790d429705b33cb936c5e99e36e26b38
parent 487951 299d7552c09b833be20e196eb46c483a4cbe286b
child 487953 8753daffc06b12ba5b2b95cae35cd38298e0be03
push id36433
push userbtara@mozilla.com
push dateWed, 14 Aug 2019 21:57:52 +0000
treeherdermozilla-central@7d9a2196d313 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersxidorn
bugs1557825
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1557825 part 2 - Add tests and update devtools for 'display:block ruby'. r=xidorn Differential Revision: https://phabricator.services.mozilla.com/D40213
devtools/shared/css/generated/properties-db.js
layout/inspector/tests/test_bug877690.html
layout/reftests/css-grid/grid-item-blockifying-001.html
layout/style/test/test_position_float_display.html
testing/web-platform/tests/css/css-ruby/block-ruby-001-ref.html
testing/web-platform/tests/css/css-ruby/block-ruby-001.html
testing/web-platform/tests/css/css-ruby/block-ruby-002-ref.html
testing/web-platform/tests/css/css-ruby/block-ruby-002.html
testing/web-platform/tests/css/css-ruby/block-ruby-003-ref.html
testing/web-platform/tests/css/css-ruby/block-ruby-003.html
testing/web-platform/tests/css/css-ruby/block-ruby-004-ref.html
testing/web-platform/tests/css/css-ruby/block-ruby-004.html
testing/web-platform/tests/css/css-ruby/block-ruby-005-ref.html
testing/web-platform/tests/css/css-ruby/block-ruby-005.html
testing/web-platform/tests/css/css-ruby/root-block-ruby.xhtml
testing/web-platform/tests/css/css-ruby/root-ruby-ref.xhtml
testing/web-platform/tests/css/css-ruby/root-ruby.xhtml
--- a/devtools/shared/css/generated/properties-db.js
+++ b/devtools/shared/css/generated/properties-db.js
@@ -5883,16 +5883,17 @@ exports.CSS_PROPERTIES = {
     "subproperties": [
       "display"
     ],
     "supports": [],
     "values": [
       "-webkit-box",
       "-webkit-inline-box",
       "block",
+      "block ruby",
       "contents",
       "flex",
       "flow-root",
       "grid",
       "inherit",
       "initial",
       "inline",
       "inline flow-root list-item",
--- a/layout/inspector/tests/test_bug877690.html
+++ b/layout/inspector/tests/test_bug877690.html
@@ -87,17 +87,17 @@ function do_test() {
   // test proprety
   var prop = "display";
   var values = InspectorUtils.getCSSValuesForProperty(prop);
   var expected = [ "initial", "inherit", "unset", "revert", "none", "inline", "block", "inline-block", "list-item",
       "table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row",
       "table-column-group", "table-column", "table-cell", "table-caption",
       "flex", "inline-flex", "-webkit-box", "-webkit-inline-box",
       "grid", "inline-grid", "inline list-item", "inline flow-root list-item",
-      "ruby", "ruby-base", "ruby-base-container", "ruby-text", "ruby-text-container",
+      "ruby", "ruby-base", "ruby-base-container", "ruby-text", "ruby-text-container", "block ruby",
       "contents", "flow-root" ];
   ok(testValues(values, expected), "property display's values.");
 
   // test property
   var prop = "float";
   var values = InspectorUtils.getCSSValuesForProperty(prop);
   var expected = [ "initial", "inherit", "unset", "revert", "none", "left", "right", "inline-start", "inline-end" ];
   ok(testValues(values, expected), "property float's values.");
--- a/layout/reftests/css-grid/grid-item-blockifying-001.html
+++ b/layout/reftests/css-grid/grid-item-blockifying-001.html
@@ -340,17 +340,17 @@ var expected = [
   "flex flex",
   "contents",
   "flex block",
   "grid grid",
   "grid grid",
   "contents",
   "grid block",
   "list-item block",
-  "block block",
+  "block ruby block ruby",
   "block block",
   "block block",
   "block block",
   "block block",
   "contents",
   "contents",
   "contents",
   "contents",
@@ -358,17 +358,17 @@ var expected = [
 ];
 var expected2 = [ /* results for display:contents children */
   "block block",
   "block block",
   "block block",
   "table table",
   "flex flex",
   "grid grid",
-  "block block",
+  "block ruby block ruby",
   "block block",
   "block block",
   "block block",
   "block block",
 ];
 
 function is(elem, got, expected) {
   if (got != expected) {
--- a/layout/style/test/test_position_float_display.html
+++ b/layout/style/test/test_position_float_display.html
@@ -38,17 +38,18 @@ var mapping = {
   "table-column": "block",
   "table-column-group": "block",
   "table-header-group": "block",
   "table-footer-group": "block",
   "table-row": "block",
   "table-cell": "block",
   "table-caption": "block",
   "inline-block": "block",
-  "ruby": "block",
+  "block ruby": "block ruby",
+  "ruby": "block ruby",
   "ruby-base": "block",
   "ruby-base-container": "block",
   "ruby-text": "block",
   "ruby-text-container": "block",
   "flex": "flex",
   "grid": "grid",
   "none": "none",
   "table": "table",
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-001-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>CSS Ruby Reference: basic 'block ruby' layout.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+.b { background: lightblue; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+.columns {
+  columns: 3 auto;
+  column-rule: 1px;
+  background: lightgrey;
+  height: 2em;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+}
+.w { white-space: nowrap; width:2.5em; }
+</style>
+A<div class=b><ruby>べ<rt>る</rt></ruby></div>B
+A<div class="mbp b"><ruby>べ<rt>る</rt></ruby></div>B
+<div class=columns>A<div class="mbp b"><ruby>べ<rt>る</rt> べ<rt>る</rt>  べ<rt>る</rt> べ<rt>る</rt> べ<rt>る</rt></ruby></div>B</div>
+<div style="width:2.5em; border:1px solid; text-align: center">
+    <p><div class="w b"><ruby><rb>一<rb>二<rb>三<rb>四<rb>五<rb>六<rb>七<rb>八</ruby></div></p>
+    <p><div class="w b"><ruby><rbc>一</rbc><rbc>二</rbc><rbc>三</rbc><rbc>四</rbc><rbc>五</rbc><rbc>六</rbc><rbc>七</rbc><rbc>八</rbc></ruby></div></p>
+</div>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>CSS Ruby Test: basic 'block ruby' layout.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout">
+<link rel="match" href="block-ruby-001-ref.html">
+<style>
+ruby { display: block ruby; background: lightblue; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+.columns {
+  columns: 3 auto;
+  column-rule: 1px;
+  background: lightgrey;
+  height: 2em;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+}
+</style>
+A<ruby>べ<rt>る</rt></ruby>B
+A<ruby class=mbp>べ<rt>る</rt></ruby>B
+<div class=columns>A<ruby class=mbp>べ<rt>る</rt> べ<rt>る</rt>  べ<rt>る</rt> べ<rt>る</rt> べ<rt>る</rt></ruby>B</div>
+<div style="width:2.5em; border:1px solid; text-align: center">
+    <p><ruby><rb>一<rb>二<rb>三<rb>四<rb>五<rb>六<rb>七<rb>八</ruby></p>
+    <p><ruby><rbc>一</rbc><rbc>二</rbc><rbc>三</rbc><rbc>四</rbc><rbc>五</rbc><rbc>六</rbc><rbc>七</rbc><rbc>八</rbc></ruby></p>
+</div>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-002-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>Reference: blockification/inlinification of 'display:ruby/block ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+div,span { background: lightblue; }
+ruby { display: ruby; }
+rbb { display: ruby; background: lightblue; }
+grid { display: grid; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+}
+rtc {
+  display: ruby-text-container;
+  unicode-bidi: isolate;
+}
+</style>
+<grid>A<div><ruby>べ<rt>る</rt></ruby></div>B</grid>
+<grid>A<div class=mbp><ruby>べ<rt>る</rt></ruby></div>B</grid>
+<grid>A
+    <div><ruby>べ<rt>る</rt></ruby></div>
+    <div><ruby><rbc>一</rbc><rbc>二</rbc><rbc>三</rbc><rbc>四</rbc><rbc>五</rbc><rbc>六</rbc><rbc>七</rbc><rbc>八</rbc></ruby></div>
+B
+</grid>
+<span><ruby>べ<rt><rbb>る</rbb></rt></ruby></span>
+<span><ruby>べ<rbc><rbb>る</rbb></rbc></ruby></span>
+<span><ruby>べ<rtc><rbb>る</rbb></rtc></ruby></span>
+<span><ruby>べ<rbb>る</rbb></ruby></span>
+
+<pre>block ruby, block ruby, block ruby, block ruby, ruby, ruby, ruby, ruby, ruby, ruby, ruby, ruby, </pre>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-002.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>CSS Ruby Test: blockification/inlinification of 'display:ruby/block ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify">
+<link rel="match" href="block-ruby-002-ref.html">
+<style>
+ruby { display: ruby; background: lightblue; }
+rbb { display: block ruby; background: lightblue; }
+grid { display: grid; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+}
+rtc {
+  display: ruby-text-container;
+  unicode-bidi: isolate;
+}
+</style>
+<grid>A<ruby>べ<rt>る</rt></ruby>B</grid>
+<grid>A<ruby class=mbp>べ<rt>る</rt></ruby>B</grid>
+<grid>A
+    <ruby>べ<rt>る</rt></ruby>
+    <ruby><rbc>一</rbc><rbc>二</rbc><rbc>三</rbc><rbc>四</rbc><rbc>五</rbc><rbc>六</rbc><rbc>七</rbc><rbc>八</rbc></ruby>
+B
+</grid>
+<ruby>べ<rt><rbb>る</rbb></rt></ruby>
+<ruby>べ<rbc><rbb>る</rbb></rbc></ruby>
+<ruby>べ<rtc><rbb>る</rbb></rtc></ruby>
+<ruby>べ<rbb>る</rbb></ruby>
+
+<pre></pre>
+<script>
+let ruby = Array.prototype.slice.call(document.querySelectorAll('ruby,rbb'));
+let result = ruby.map(e => window.getComputedStyle(e).display + ', ').reduce((s, t) => s + t, "");
+document.querySelector('pre').appendChild(document.createTextNode(result));
+</script>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-003-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>Reference: Text node insertion in 'display:ruby/block ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+ruby { display: ruby; background: lightblue; }
+rbb { display: block ruby; background: lightblue; }
+grid { display: grid; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+}
+rtc {
+  display: ruby-text-container;
+  unicode-bidi: isolate;
+}
+</style>
+
+<ruby class=mbp>X<rt>る</rt></ruby>
+<grid>A<ruby class=mbp>X<rt>る</rt></ruby>B</grid>
+<grid>A<ruby class=mbp>X<rt>る</rt></ruby>B</grid>
+<grid>A<ruby>X<rt>る</rt></ruby><ruby>X<rbc></rbc></ruby>B</grid>
+<grid>A<ruby>X</ruby><ruby>X<rbc><rt>る</rt></rbc></ruby>B</grid>
+<ruby>X<rt><rbb>Xる</rbb></rt></ruby>
+<ruby>X<rbc><rbb>Xる</rbb></rbc></ruby>
+<ruby>X<rtc><rbb>Xる</rbb></rtc></ruby>
+<rbb class=mbp>X</rbb>
+<rbb class=mbp>X<rt>る</rt></rbb>
+<rbb class=mbp>X<rb>X</rb></rbb>
+
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-003.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>CSS Ruby Test: Text node insertion in 'display:ruby/block ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify">
+<link rel="match" href="block-ruby-003-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+ruby { display: ruby; background: lightblue; }
+rbb { display: block ruby; background: lightblue; }
+grid { display: grid; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+}
+rtc {
+  display: ruby-text-container;
+  unicode-bidi: isolate;
+}
+</style>
+
+<ruby class=mbp><rt>る</rt></ruby>
+<grid>A<ruby class=mbp><rt>る</rt></ruby>B</grid>
+<grid>A<ruby class=mbp><rt>る</rt></ruby>B</grid>
+<grid>A<ruby><rt>る</rt></ruby><ruby><rbc></rbc></ruby>B</grid>
+<grid>A<ruby></ruby><ruby><rbc><rt>る</rt></rbc></ruby>B</grid>
+<ruby><rt><rbb>る</rbb></rt></ruby>
+<ruby><rbc><rbb>る</rbb></rbc></ruby>
+<ruby><rtc><rbb>る</rbb></rtc></ruby>
+<rbb class=mbp></rbb>
+<rbb class=mbp><rt>る</rt></rbb>
+<rbb class=mbp><rb>X</rb></rbb>
+
+<script>
+document.body.getClientRects();
+let s = "X";
+let ruby = Array.prototype.slice.call(document.querySelectorAll('ruby,rbb'));
+ruby.forEach(function(e){ e.insertBefore(document.createTextNode(s),e.firstChild); e.offsetHeight;});
+</script>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-004-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>Reference: RT append in 'display:ruby/block ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+ruby { display: ruby; background: lightblue; }
+rbb { display: block ruby; background: lightblue; }
+grid { display: grid; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+  font-size: 200%;
+}
+rtc {
+  display: ruby-text-container;
+  unicode-bidi: isolate;
+  ruby-position: under;
+}
+</style>
+
+<rt>る</rt>
+<ruby class=mbp>X<rt>る</rt></ruby>
+<grid>A<ruby class=mbp><rt>る</rt></ruby>B</grid>
+<grid>A<ruby class=mbp>X<rt>る</rt></ruby>B</grid>
+<grid>A<ruby>X<rt>る</rt></ruby><ruby><rbc></rbc><rt>る</rt></ruby>B</grid>
+<grid>A<ruby><rt>る</rt></ruby><ruby><rbc>X</rbc><rt>る</rt></ruby>B</grid>
+<ruby><rt><rbb>X<rt>る</rt></rbb></rt><rt>る</rt></ruby>
+<ruby><rbc><rbb>X<rt>る</rt></rbb></rbc><rt>る</rt></ruby>
+<ruby><rtc><rbb>X<rt>る</rt></rbb></rtc><rt>る</rt></ruby>
+<rbb class=mbp><rt>る</rt></rbb>
+<rbb class=mbp>X<rt>る</rt></rbb>
+<rbb class=mbp><rb>X</rb><rt>る</rt></rbb>
+
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-004.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>CSS Ruby Test: RT append in 'display:ruby/block ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify">
+<link rel="match" href="block-ruby-004-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+ruby { display: ruby; background: lightblue; }
+rbb { display: block ruby; background: lightblue; }
+rbbr { display: block ruby; background: lightblue; }
+grid { display: grid; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+  font-size: 200%;
+}
+rtc {
+  display: ruby-text-container;
+  unicode-bidi: isolate;
+  ruby-position: under;
+}
+</style>
+
+
+<rt>る</rt>
+<ruby class=mbp>X</ruby>
+<grid>A<ruby class=mbp></ruby>B</grid>
+<grid>A<ruby class=mbp>X</ruby>B</grid>
+<grid>A<ruby>X</ruby><ruby><rbc></rbc></ruby>B</grid>
+<grid>A<ruby></ruby><ruby><rbc>X</rbc></ruby>B</grid>
+<ruby><rt><rbb>X</rbb></rt></ruby>
+<ruby><rbc><rbb>X</rbb></rbc></ruby>
+<ruby><rtc><rbb>X</rbb></rtc></ruby>
+<rbb class=mbp></rbb>
+<rbb class=mbp>X</rbb>
+<rbb class=mbp><rb>X</rb></rbb>
+
+<script>
+document.body.getClientRects();
+let rt = document.querySelector('rt');
+let ruby = Array.prototype.slice.call(document.querySelectorAll('ruby,rbb'));
+ruby.forEach(function(e){ let n = rt.cloneNode(true); e.appendChild(n); e.offsetHeight;});
+</script>
+
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-005-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>Reference: DIV append in 'display:ruby/block ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+rbb, ruby { background:lightblue; text-overflow:ellipses; }
+ruby { display: ruby; }
+rbb { display: block ruby; }
+grid { display: grid; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+  font-size: 200%;
+}
+rtc {
+  display: ruby-text-container;
+  unicode-bidi: isolate;
+  ruby-position: under;
+}
+x { display:block; width:3em; overflow:hidden; background:lightblue; }
+</style>
+
+<div>zzzzzzzzzzzz</div>
+<ruby class=mbp>X<div>zzzzzzzzzzzz</div></ruby>
+<grid>A<x class=mbp><rbb><div>zzzzzzzzzzzz</div></rbb></x>B</grid>
+<grid>A<x class=mbp><rbb>X<div>zzzzzzzzzzzz</div></rbb></x>B</grid>
+<grid>A<x><rbb>X<div>zzzzzzzzzzzz</div></rbb></x><x><rbb><rbc></rbc><div>zzzzzzzzzzzz</div></rbb></x>B</grid>
+<grid>A<x><rbb><div>zzzzzzzzzzzz</div></rbb></x><x><rbb><rbc>X</rbc><div>zzzzzzzzzzzz</div></rbb></x>B</grid>
+<ruby><rt><ruby>X<div>zzzzzzzzzzzz</div></ruby></rt><div>zzzzzzzzzzzz</div></ruby>
+<ruby><rbc><ruby>X<div>zzzzzzzzzzzz</div></ruby></rbc><div>zzzzzzzzzzzz</div></ruby>
+<ruby><rtc><ruby>X<div>zzzzzzzzzzzz</div></ruby></rtc><div>zzzzzzzzzzzz</div></ruby>
+<x class=mbp><rbb><div>zzzzzzzzzzzz</div></rbb></x>
+<x class=mbp><rbb>X<div>zzzzzzzzzzzz</div></rbb></x>
+<x class=mbp><rbb><rt>X</rt><div>zzzzzzzzzzzz</div></rbb></x>
+<x class=mbp><rbb><rb>X</rb><div>zzzzzzzzzzzz</div></rbb></x>
+
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-005.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>CSS Ruby Test: DIV append in 'display:ruby/block ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify">
+<link rel="match" href="block-ruby-005-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+rbb, ruby { background:lightblue; text-overflow:ellipses; overflow:hidden; width:3em; }
+ruby { display: ruby; }
+rbb { display: block ruby; }
+grid { display: grid; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+  font-size: 200%;
+}
+rtc {
+  display: ruby-text-container;
+  unicode-bidi: isolate;
+  ruby-position: under;
+}
+</style>
+
+<div>zzzzzzzzzzzz</div>
+<ruby class=mbp>X</ruby>
+<grid>A<ruby class=mbp></ruby>B</grid>
+<grid>A<ruby class=mbp>X</ruby>B</grid>
+<grid>A<ruby>X</ruby><ruby><rbc></rbc></ruby>B</grid>
+<grid>A<ruby></ruby><ruby><rbc>X</rbc></ruby>B</grid>
+<ruby><rt><rbb>X</rbb></rt></ruby>
+<ruby><rbc><rbb>X</rbb></rbc></ruby>
+<ruby><rtc><rbb>X</rbb></rtc></ruby>
+<rbb class=mbp></rbb>
+<rbb class=mbp>X</rbb>
+<rbb class=mbp><rt>X</rt></rbb>
+<rbb class=mbp><rb>X</rb></rbb>
+
+<script>
+document.body.getClientRects();
+let div = document.querySelector('div');
+let ruby = Array.prototype.slice.call(document.querySelectorAll('ruby,rbb'));
+ruby.forEach(function(e){ let n = div.cloneNode(true); e.appendChild(n); e.offsetHeight;});
+</script>
+
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/root-block-ruby.xhtml
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
+<meta charset="utf-8"/>
+<title>CSS Ruby Test: :root element with 'display:block ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"/>
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"/>
+<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify"/>
+<link rel="match" href="root-ruby-ref.xhtml"/>
+<style>
+:root { display: block ruby; }
+rbc {
+  display: ruby-base-container;
+}
+rtc {
+  display: ruby-text-container;
+}
+</style>
+べ
+<rtc>
+  <rt>る</rt>
+</rtc>
+<rbc>
+  <rb>A</rb>
+  <rb>B</rb>
+</rbc>
+
+<pre></pre>
+<script>
+let ruby = Array.prototype.slice.call(document.querySelectorAll(':root'));
+let result = ruby.map(e => window.getComputedStyle(e).display + ', ').reduce((s, t) => s + t, "");
+document.querySelector('pre').appendChild(document.createTextNode(result));
+</script>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/root-ruby-ref.xhtml
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
+<meta charset="utf-8"/>
+<title>Reference: :root element with 'display:ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"/>
+<style>
+rbc {
+  display: ruby-base-container;
+}
+rtc {
+  display: ruby-text-container;
+}
+</style>
+<ruby>べ
+<rtc>
+  <rt>る</rt>
+</rtc>
+<rbc>
+  <rb>A</rb>
+  <rb>B</rb>
+</rbc>
+
+<pre>block ruby, </pre>
+</ruby></html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/root-ruby.xhtml
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
+<meta charset="utf-8"/>
+<title>CSS Ruby Test: :root element with 'display:ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"/>
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"/>
+<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify"/>
+<link rel="match" href="root-ruby-ref.xhtml"/>
+<style>
+:root { display: ruby; }
+rbc {
+  display: ruby-base-container;
+}
+rtc {
+  display: ruby-text-container;
+}
+</style>
+べ
+<rtc>
+  <rt>る</rt>
+</rtc>
+<rbc>
+  <rb>A</rb>
+  <rb>B</rb>
+</rbc>
+
+<pre></pre>
+<script>
+let ruby = Array.prototype.slice.call(document.querySelectorAll(':root'));
+let result = ruby.map(e => window.getComputedStyle(e).display + ', ').reduce((s, t) => s + t, "");
+document.querySelector('pre').appendChild(document.createTextNode(result));
+</script>
+</html>