Bug 1506895 - Only create an ib-split sequence for truly block-outside children. r=emilio
authorMats Palmgren <mats@mozilla.com>
Tue, 27 Nov 2018 20:33:31 +0100
changeset 507632 639b931122292b83f5ee99b646942c7352bef2fc
parent 507631 8c8ad4d5dbe94b90b340acd449fac1516b563a07
child 507633 5f2c6354443e6d41f9ef41386ff2aaa033180b41
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersemilio
bugs1506895
milestone65.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 1506895 - Only create an ib-split sequence for truly block-outside children. r=emilio This changes the logic from !IsInlineOutside() to IsBlockOutside() so that table-internal display types etc are now excluded (i.e. no longer creates an ib-split).
layout/base/nsCSSFrameConstructor.cpp
testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes-ref.html
testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes.html
testing/web-platform/tests/css/css-ui/text-overflow-ruby-ref.html
testing/web-platform/tests/css/css-ui/text-overflow-ruby.html
--- a/layout/base/nsCSSFrameConstructor.cpp
+++ b/layout/base/nsCSSFrameConstructor.cpp
@@ -6212,37 +6212,37 @@ nsCSSFrameConstructor::AppendFramesToPar
   if (!nextSibling && IsFramePartOfIBSplit(aParentFrame)) {
     // When we get here, our frame list might start with a block.  If it does
     // so, and aParentFrame is an inline, and it and all its previous
     // continuations have no siblings, then put the initial blocks from the
     // frame list into the previous block of the {ib} split.  Note that we
     // didn't want to stop at the block part of the split when figuring out
     // initial parent, because that could screw up float parenting; it's easier
     // to do this little fixup here instead.
-    if (aFrameList.NotEmpty() && !aFrameList.FirstChild()->IsInlineOutside()) {
+    if (aFrameList.NotEmpty() && aFrameList.FirstChild()->IsBlockOutside()) {
       // See whether our trailing inline is empty
       nsIFrame* firstContinuation = aParentFrame->FirstContinuation();
       if (firstContinuation->PrincipalChildList().IsEmpty()) {
         // Our trailing inline is empty.  Collect our starting blocks from
         // aFrameList, get the right parent frame for them, and put them in.
         nsFrameList blockKids =
-          aFrameList.Split([](nsIFrame* f) { return f->IsInlineOutside();} );
+          aFrameList.Split([](nsIFrame* f) { return !f->IsBlockOutside();} );
         NS_ASSERTION(blockKids.NotEmpty(), "No blocks?");
 
         nsContainerFrame* prevBlock = GetIBSplitPrevSibling(firstContinuation);
         prevBlock = static_cast<nsContainerFrame*>(prevBlock->LastContinuation());
         NS_ASSERTION(prevBlock, "Should have previous block here");
 
         MoveChildrenTo(aParentFrame, prevBlock, blockKids);
       }
     }
 
     // We want to put some of the frames into this inline frame.
     nsFrameList inlineKids =
-      aFrameList.Split([](nsIFrame* f) { return !f->IsInlineOutside(); });
+      aFrameList.Split([](nsIFrame* f) { return f->IsBlockOutside(); });
 
     if (!inlineKids.IsEmpty()) {
       AppendFrames(aParentFrame, kPrincipalList, inlineKids);
     }
 
     if (!aFrameList.IsEmpty()) {
       nsFrameItems ibSiblings;
       CreateIBSiblings(aState, aParentFrame,
@@ -11582,17 +11582,17 @@ nsCSSFrameConstructor::ConstructInline(n
   nsFrameItems childItems;
   ConstructFramesFromItemList(aState, aItem.mChildItems, newFrame,
                               /* aParentIsWrapperAnonBox = */ false,
                               childItems);
 
   nsFrameList::FrameLinkEnumerator firstBlockEnumerator(childItems);
   if (!aItem.mIsAllInline) {
     firstBlockEnumerator.Find(
-      [](nsIFrame* aFrame) { return !aFrame->IsInlineOutside(); });
+      [](nsIFrame* aFrame) { return aFrame->IsBlockOutside(); });
   }
 
   if (aItem.mIsAllInline || firstBlockEnumerator.AtEnd()) {
     // This part is easy.  We either already know we have no non-inline kids,
     // or haven't found any when constructing actual frames (the latter can
     // happen only if out-of-flows that we thought had no containing block
     // acquired one when ancestor inline frames and {ib} splits got
     // constructed).  Just put all the kids into the single inline frame and
@@ -11643,29 +11643,29 @@ nsCSSFrameConstructor::CreateIBSiblings(
                                        computedStyle);
 
   nsContainerFrame* lastNewInline =
     static_cast<nsContainerFrame*>(aInitialInline->FirstContinuation());
   do {
     // On entry to this loop aChildItems is not empty and the first frame in it
     // is block-level.
     MOZ_ASSERT(aChildItems.NotEmpty(), "Should have child items");
-    MOZ_ASSERT(!aChildItems.FirstChild()->IsInlineOutside(),
+    MOZ_ASSERT(aChildItems.FirstChild()->IsBlockOutside(),
                "Must have list starting with block");
 
     // The initial run of blocks belongs to an anonymous block that we create
     // right now. The anonymous block will be the parent of these block
     // children of the inline.
     nsBlockFrame* blockFrame = NS_NewBlockFrame(mPresShell, blockSC);
     InitAndRestoreFrame(aState, content, parentFrame, blockFrame, false);
 
     // Find the first non-block child which defines the end of our block kids
     // and the start of our next inline's kids
     nsFrameList blockKids =
-      aChildItems.Split([](nsIFrame* f) { return f->IsInlineOutside(); });
+      aChildItems.Split([](nsIFrame* f) { return !f->IsBlockOutside(); });
 
     if (!StaticPrefs::layout_css_column_span_enabled() ||
         !aInitialInline->HasAnyStateBits(NS_FRAME_HAS_MULTI_COLUMN_ANCESTOR)) {
       MoveChildrenTo(aInitialInline, blockFrame, blockKids);
 
       SetFrameIsIBSplit(lastNewInline, blockFrame);
       aSiblings.AddChild(blockFrame);
     } else {
@@ -11697,17 +11697,17 @@ nsCSSFrameConstructor::CreateIBSiblings(
     InitAndRestoreFrame(aState, content, parentFrame, inlineFrame, false);
     inlineFrame->AddStateBits(NS_FRAME_CAN_HAVE_ABSPOS_CHILDREN);
     if (aIsAbsPosCB) {
       inlineFrame->MarkAsAbsoluteContainingBlock();
     }
 
     if (aChildItems.NotEmpty()) {
       nsFrameList inlineKids =
-        aChildItems.Split([](nsIFrame* f) { return !f->IsInlineOutside(); });
+        aChildItems.Split([](nsIFrame* f) { return f->IsBlockOutside(); });
       MoveChildrenTo(aInitialInline, inlineFrame, inlineKids);
     }
 
     SetFrameIsIBSplit(blockFrame, inlineFrame);
     aSiblings.AddChild(inlineFrame);
     lastNewInline = inlineFrame;
   } while (aChildItems.NotEmpty());
 
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes-ref.html
@@ -0,0 +1,179 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Ruby Reference: ruby content w. layout-internal 'display' values</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0;
+}
+
+input {
+  width: 20px;
+  -webkit-appearance: none;
+  border: 1px solid black;
+  background: white;
+}
+
+.thg { display: table-header-group; }
+.trg { display: table-row-group; }
+.tfg { display: table-footer-group; }
+.tr  { display: table-row; }
+.tc  { display: table-cell; }
+.tcg { display: table-column-group; }
+.tco { display: table-column; }
+.tca { display: table-caption; }
+.t   { display: table; }
+
+.rb  { display: ruby-base; }
+.rt  { display: ruby-text; }
+.rbc { display: ruby-base-container; }
+.rtc { display: ruby-text-container; }
+
+.x { background: red}
+    </style>
+</head>
+<body>
+
+<ruby><rb><span>a<span><input class="thg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="thg"><input class="thg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="thg">b</div><input class="thg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="thg">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="trg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="trg"><input class="trg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="trg">b</div><input class="trg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="trg">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="tfg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="tfg"><input class="tfg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tfg">b</div><input class="tfg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tfg">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="tr"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="tr"><input class="tr"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tr">b</div><input class="tr"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tr">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="tc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="tc"><input class="tc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tc">b</div><input class="tc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tc">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="tcg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="tcg"><input class="tcg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tcg">b</div><input class="tcg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tcg">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="tco"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="tco"><input class="tco"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tco">b</div><input class="tco"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tco">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="tca"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="tca"><input class="tca"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tca">b</div><input class="tca"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tca">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="t"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="t"><input class="t"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="t">b</div><input class="t"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="t">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="rb"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="rb"><input class="rb"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="rb">b</div><input class="rb"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="rb">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="rt"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="rt"><input class="rt"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="rt">b</div><input class="rt"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="rt">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="rbc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="rbc"><input class="rbc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="rbc">b</div><input class="rbc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="rbc">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="rtc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="rtc"><input class="rtc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="rtc">b</div><input class="rtc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="rtc">b</div></span>c</span></rb></ruby>
+
+<br><hr>
+
+<!--  -->
+
+<ruby><rb><span><input class="thg"></span>b</rb></ruby>
+<ruby><rb><span><input class="thg"><input class="thg"></span>b</rb></ruby>
+<ruby><rb><span><div class="thg">b</div><input class="thg"></span>b</rb></ruby>
+<ruby><rb><span><div class="thg">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="trg"></span>b</rb></ruby>
+<ruby><rb><span><input class="trg"><input class="trg"></span>b</rb></ruby>
+<ruby><rb><span><div class="trg">b</div><input class="trg"></span>b</rb></ruby>
+<ruby><rb><span><div class="trg">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="tfg"></span>b</rb></ruby>
+<ruby><rb><span><input class="tfg"><input class="tfg"></span>b</rb></ruby>
+<ruby><rb><span><div class="tfg">b</div><input class="tfg"></span>b</rb></ruby>
+<ruby><rb><span><div class="tfg">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="tr"></span>b</rb></ruby>
+<ruby><rb><span><input class="tr"><input class="tr"></span>b</rb></ruby>
+<ruby><rb><span><div class="tr">b</div><input class="tr"></span>b</rb></ruby>
+<ruby><rb><span><div class="tr">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="tc"></span>b</rb></ruby>
+<ruby><rb><span><input class="tc"><input class="tc"></span>b</rb></ruby>
+<ruby><rb><span><div class="tc">b</div><input class="tc"></span>b</rb></ruby>
+<ruby><rb><span><div class="tc">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="tcg"></span>b</rb></ruby>
+<ruby><rb><span><input class="tcg"><input class="tcg"></span>b</rb></ruby>
+<ruby><rb><span><div class="tcg">b</div><input class="tcg"></span>b</rb></ruby>
+<ruby><rb><span><div class="tcg">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="tco"></span>b</rb></ruby>
+<ruby><rb><span><input class="tco"><input class="tco"></span>b</rb></ruby>
+<ruby><rb><span><div class="tco">b</div><input class="tco"></span>b</rb></ruby>
+<ruby><rb><span><div class="tco">b</div></span>c</rb></ruby>
+
+<!-- bug NNNNNN
+<ruby><rb><span><input class="tca"></span>b</rb></ruby>
+<ruby><rb><span><input class="tca"><input class="tca"></span>b</rb></ruby>
+<ruby><rb><span><div class="tca">b</div><input class="tca"></span>b</rb></ruby>
+<ruby><rb><span><div class="tca">b</div></span>c</rb></ruby>
+-->
+
+<ruby><rb><span><input class="t"></span>b</rb></ruby>
+<ruby><rb><span><input class="t"><input class="t"></span>b</rb></ruby>
+<ruby><rb><span><div class="t">b</div><input class="t"></span>b</rb></ruby>
+<ruby><rb><span><div class="t">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="rb"></span>b</rb></ruby>
+<ruby><rb><span><input class="rb"><input class="rb"></span>b</rb></ruby>
+<ruby><rb><span><div class="rb">b</div><input class="rb"></span>b</rb></ruby>
+<ruby><rb><span><div class="rb">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="rt"></span>b</rb></ruby>
+<ruby><rb><span><input class="rt"><input class="rt"></span>b</rb></ruby>
+<ruby><rb><span><div class="rt">b</div><input class="rt"></span>b</rb></ruby>
+<ruby><rb><span><div class="rt">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="rbc"></span>b</rb></ruby>
+<ruby><rb><span><input class="rbc"><input class="rbc"></span>b</rb></ruby>
+<ruby><rb><span><div class="rbc">b</div><input class="rbc"></span>b</rb></ruby>
+<ruby><rb><span><div class="rbc">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="rtc"></span>b</rb></ruby>
+<ruby><rb><span><input class="rtc"><input class="rtc"></span>b</rb></ruby>
+<ruby><rb><span><div class="rtc">b</div><input class="rtc"></span>b</rb></ruby>
+<ruby><rb><span><div class="rtc">b</div></span>c</rb></ruby>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes.html
@@ -0,0 +1,181 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Ruby Test: ruby content w. layout-internal 'display' values</title>
+  <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="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="match" href="ruby-layout-internal-boxes-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0;
+}
+
+input {
+  width: 20px;
+  -webkit-appearance: none;
+  border: 1px solid black;
+  background: white;
+}
+
+.thg { display: table-header-group; }
+.trg { display: table-row-group; }
+.tfg { display: table-footer-group; }
+.tr  { display: table-row; }
+.tc  { display: table-cell; }
+.tcg { display: table-column-group; }
+.tco { display: table-column; }
+.tca { display: table-caption; }
+.t   { display: table; }
+
+.rb  { display: ruby-base; }
+.rt  { display: ruby-text; }
+.rbc { display: ruby-base-container; }
+.rtc { display: ruby-text-container; }
+
+    </style>
+</head>
+<body>
+
+<ruby><rb><span>a<input class="thg">b</span></rb></ruby>
+<ruby><rb><span>a<input class="thg"><input class="thg">b</span></rb></ruby>
+<ruby><rb><span>a<div class="thg">b</div><input class="thg">b</span></rb></ruby>
+<ruby><rb><span>a<div class="thg">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="trg">b</span></rb></ruby>
+<ruby><rb><span>a<input class="trg"><input class="trg">b</span></rb></ruby>
+<ruby><rb><span>a<div class="trg">b</div><input class="trg">b</span></rb></ruby>
+<ruby><rb><span>a<div class="trg">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="tfg">b</span></rb></ruby>
+<ruby><rb><span>a<input class="tfg"><input class="tfg">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tfg">b</div><input class="tfg">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tfg">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="tr">b</span></rb></ruby>
+<ruby><rb><span>a<input class="tr"><input class="tr">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tr">b</div><input class="tr">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tr">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="tc">b</span></rb></ruby>
+<ruby><rb><span>a<input class="tc"><input class="tc">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tc">b</div><input class="tc">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tc">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="tcg">b</span></rb></ruby>
+<ruby><rb><span>a<input class="tcg"><input class="tcg">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tcg">b</div><input class="tcg">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tcg">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="tco">b</span></rb></ruby>
+<ruby><rb><span>a<input class="tco"><input class="tco">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tco">b</div><input class="tco">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tco">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="tca">b</span></rb></ruby>
+<ruby><rb><span>a<input class="tca"><input class="tca">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tca">b</div><input class="tca">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tca">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="t">b</span></rb></ruby>
+<ruby><rb><span>a<input class="t"><input class="t">b</span></rb></ruby>
+<ruby><rb><span>a<div class="t">b</div><input class="t">b</span></rb></ruby>
+<ruby><rb><span>a<div class="t">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="rb">b</span></rb></ruby>
+<ruby><rb><span>a<input class="rb"><input class="rb">b</span></rb></ruby>
+<ruby><rb><span>a<div class="rb">b</div><input class="rb">b</span></rb></ruby>
+<ruby><rb><span>a<div class="rb">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="rt">b</span></rb></ruby>
+<ruby><rb><span>a<input class="rt"><input class="rt">b</span></rb></ruby>
+<ruby><rb><span>a<div class="rt">b</div><input class="rt">b</span></rb></ruby>
+<ruby><rb><span>a<div class="rt">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="rbc">b</span></rb></ruby>
+<ruby><rb><span>a<input class="rbc"><input class="rbc">b</span></rb></ruby>
+<ruby><rb><span>a<div class="rbc">b</div><input class="rbc">b</span></rb></ruby>
+<ruby><rb><span>a<div class="rbc">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="rtc">b</span></rb></ruby>
+<ruby><rb><span>a<input class="rtc"><input class="rtc">b</span></rb></ruby>
+<ruby><rb><span>a<div class="rtc">b</div><input class="rtc">b</span></rb></ruby>
+<ruby><rb><span>a<div class="rtc">b</div>c</span></rb></ruby>
+
+<br><hr>
+
+<!-- same as above but without the SPAN wrapper -->
+
+<ruby><rb><input class="thg">b</rb></ruby>
+<ruby><rb><input class="thg"><input class="thg">b</rb></ruby>
+<ruby><rb><div class="thg">b</div><input class="thg">b</rb></ruby>
+<ruby><rb><div class="thg">b</div>c</rb></ruby>
+
+<ruby><rb><input class="trg">b</rb></ruby>
+<ruby><rb><input class="trg"><input class="trg">b</rb></ruby>
+<ruby><rb><div class="trg">b</div><input class="trg">b</rb></ruby>
+<ruby><rb><div class="trg">b</div>c</rb></ruby>
+
+<ruby><rb><input class="tfg">b</rb></ruby>
+<ruby><rb><input class="tfg"><input class="tfg">b</rb></ruby>
+<ruby><rb><div class="tfg">b</div><input class="tfg">b</rb></ruby>
+<ruby><rb><div class="tfg">b</div>c</rb></ruby>
+
+<ruby><rb><input class="tr">b</rb></ruby>
+<ruby><rb><input class="tr"><input class="tr">b</rb></ruby>
+<ruby><rb><div class="tr">b</div><input class="tr">b</rb></ruby>
+<ruby><rb><div class="tr">b</div>c</rb></ruby>
+
+<ruby><rb><input class="tc">b</rb></ruby>
+<ruby><rb><input class="tc"><input class="tc">b</rb></ruby>
+<ruby><rb><div class="tc">b</div><input class="tc">b</rb></ruby>
+<ruby><rb><div class="tc">b</div>c</rb></ruby>
+
+<ruby><rb><input class="tcg">b</rb></ruby>
+<ruby><rb><input class="tcg"><input class="tcg">b</rb></ruby>
+<ruby><rb><div class="tcg">b</div><input class="tcg">b</rb></ruby>
+<ruby><rb><div class="tcg">b</div>c</rb></ruby>
+
+<ruby><rb><input class="tco">b</rb></ruby>
+<ruby><rb><input class="tco"><input class="tco">b</rb></ruby>
+<ruby><rb><div class="tco">b</div><input class="tco">b</rb></ruby>
+<ruby><rb><div class="tco">b</div>c</rb></ruby>
+
+<!-- FIXME after https://bugzilla.mozilla.org/show_bug.cgi?id=1510299
+<ruby><rb><input class="tca">b</rb></ruby>
+<ruby><rb><input class="tca"><input class="tca">b</rb></ruby>
+<ruby><rb><div class="tca">b</div><input class="tca">b</rb></ruby>
+<ruby><rb><div class="tca">b</div>c</rb></ruby>
+-->
+
+<ruby><rb><input class="t">b</rb></ruby>
+<ruby><rb><input class="t"><input class="t">b</rb></ruby>
+<ruby><rb><div class="t">b</div><input class="t">b</rb></ruby>
+<ruby><rb><div class="t">b</div>c</rb></ruby>
+
+<ruby><rb><input class="rb">b</rb></ruby>
+<ruby><rb><input class="rb"><input class="rb">b</rb></ruby>
+<ruby><rb><div class="rb">b</div><input class="rb">b</rb></ruby>
+<ruby><rb><div class="rb">b</div>c</rb></ruby>
+
+<ruby><rb><input class="rt">b</rb></ruby>
+<ruby><rb><input class="rt"><input class="rt">b</rb></ruby>
+<ruby><rb><div class="rt">b</div><input class="rt">b</rb></ruby>
+<ruby><rb><div class="rt">b</div>c</rb></ruby>
+
+<ruby><rb><input class="rbc">b</rb></ruby>
+<ruby><rb><input class="rbc"><input class="rbc">b</rb></ruby>
+<ruby><rb><div class="rbc">b</div><input class="rbc">b</rb></ruby>
+<ruby><rb><div class="rbc">b</div>c</rb></ruby>
+
+<ruby><rb><input class="rtc">b</rb></ruby>
+<ruby><rb><input class="rtc"><input class="rtc">b</rb></ruby>
+<ruby><rb><div class="rtc">b</div><input class="rtc">b</rb></ruby>
+<ruby><rb><div class="rtc">b</div>c</rb></ruby>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/text-overflow-ruby-ref.html
@@ -0,0 +1,83 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: text-overflow:ellipsis and ruby</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0;
+}
+
+.clip {
+    overflow: hidden;
+    width: 40px;
+    text-overflow: ellipsis;
+}
+
+input { width: 40px; -webkit-appearance: none; border: 1px solid black; }
+span { white-space: pre; }
+.thg { display: inline-table; }
+.tc { display: inline-table; }
+.t { display: inline-table; }
+
+    </style>
+</head>
+<body>
+
+<div style="float:left; width:300px">
+<div class="clip">
+<span><span><span>aa<input class="thg">bb</span></span></span>
+<br>
+<span><span><span>aa<div class="thg">bbbbbb</div>cc</span></span></span>
+<br>
+<span><span><span>aa<span>bbbbbb</span>cc</span></span></span>
+<br>
+<span><span><span>aa<input class="tc">bb</span></span></span>
+<br>
+<span><span><span>aa<div class="tc">bbbbbb</div>cc</span></span></span>
+<br>
+<span><span><span>aa<input class="t">bb</span></span></span>
+<br>
+<span><span><span>aa<div class="t">bbbbbb</div>cc</span></span></span>
+
+<br>
+<span><span><span><input class="thg">bb</span></span></span>
+<br>
+<span><span><span><div class="thg">bbbbbb</div>cc</span></span></span>
+<br>
+<span><span><span><span>bbbbbb</span>cc</span></span></span>
+<br>
+<span><span><span><input class="tc">bb</span></span></span>
+<br>
+<span><span><span><div class="tc">bbbbbb</div>cc</span></span></span>
+<br>
+<span><span><span><input class="t">bb</span></span></span>
+<br>
+<span><span><span><div class="t">bbbbbb</div>cc</span></span></span>
+</div>
+</div>
+
+<div style="float:left; width:300px">
+<div class="clip">
+<span><span><input class="thg">bb</span></span>
+<br>
+<span><span><div class="thg">bbbbbb</div>cc</span></span>
+<br>
+<span><span>bbbbbbcc</span></span>
+<br>
+<span><span><input class="tc">bb</span></span>
+<br>
+<span><span><div class="tc">bbbbbb</div>cc</span></span>
+<br>
+<span><span><input class="t">bb</span></span>
+<br>
+<span><span><div class="t">bbbbbb</div>cc</span></span>
+</div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/text-overflow-ruby.html
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Basic User Interface Test: text-overflow:ellipsis and ruby</title>
+  <link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow">
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="match" href="text-overflow-ruby-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0;
+}
+
+.clip {
+    overflow: hidden;
+    width: 40px;
+    text-overflow: ellipsis;
+}
+
+input { width: 40px; -webkit-appearance: none; border: 1px solid black; }
+
+.thg { display: table-header-group; }
+.tc { display: table-cell; }
+.t { display: table; }
+
+    </style>
+</head>
+<body>
+
+<div style="float:left; width:300px">
+<div class="clip">
+<ruby><rb><span>aa<input class="thg">bb</span></rb></ruby>
+<br>
+<ruby><rb><span>aa<div class="thg">bbbbbb</div>cc</span></rb></ruby>
+<br>
+<ruby><rb><span>aa<span>bbbbbb</span>cc</span></rb></ruby>
+<br>
+<ruby><rb><span>aa<input class="tc">bb</span></rb></ruby>
+<br>
+<ruby><rb><span>aa<div class="tc">bbbbbb</div>cc</span></rb></ruby>
+<br>
+<ruby><rb><span>aa<input class="t">bb</span></rb></ruby>
+<br>
+<ruby><rb><span>aa<div class="t">bbbbbb</div>cc</span></rb></ruby>
+
+<br>
+<ruby><rb><span><input class="thg">bb</span></rb></ruby>
+<br>
+<ruby><rb><span><div class="thg">bbbbbb</div>cc</span></rb></ruby>
+<br>
+<ruby><rb><span><span>bbbbbb</span>cc</span></rb></ruby>
+<br>
+<ruby><rb><span><input class="tc">bb</span></rb></ruby>
+<br>
+<ruby><rb><span><div class="tc">bbbbbb</div>cc</span></rb></ruby>
+<br>
+<ruby><rb><span><input class="t">bb</span></rb></ruby>
+<br>
+<ruby><rb><span><div class="t">bbbbbb</div>cc</span></rb></ruby>
+</div>
+</div>
+
+<div style="float:left; width:300px">
+<div class="clip">
+<ruby><rb><input class="thg">bb</rb></ruby>
+<br>
+<ruby><rb><div class="thg">bbbbbb</div>cc</rb></ruby>
+<br>
+<ruby><rb>bbbbbbcc</rb></ruby>
+<br>
+<ruby><rb><input class="tc">bb</rb></ruby>
+<br>
+<ruby><rb><div class="tc">bbbbbb</div>cc</rb></ruby>
+<br>
+<ruby><rb><input class="t">bb</rb></ruby>
+<br>
+<ruby><rb><div class="t">bbbbbb</div>cc</rb></ruby>
+</div>
+</div>
+
+</body>
+</html>