Bug 1102175 Part 4 - Add BFC bits to a block if its used writing-mode is different from the parent's. r=jfkthame
authorTing-Yu Lin <tlin@mozilla.com>
Thu, 10 Oct 2019 04:44:38 +0000
changeset 497330 c42855b477b170876a13ae32a60032d06698814c
parent 497329 171c70db54de024df49059cb35bb6be68d5829a7
child 497331 6f876f24a948c758146f87733a9895722b441c6a
push id36682
push userncsoregi@mozilla.com
push dateSat, 12 Oct 2019 09:52:03 +0000
treeherdermozilla-central@06ea2371f897 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjfkthame
bugs1102175
milestone71.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 1102175 Part 4 - Add BFC bits to a block if its used writing-mode is different from the parent's. r=jfkthame Without this patch, the `CHECK_BLOCK_AND_LINE_DIR` soft assertion in nsFloatManager can be triggered with wm-propagation-body-dynamic-change-002.html added in Part 3. Add the test as a crashtest because web-platform reftest doesn't seem to catch our soft assertions. Add reftests to verify that BFC bits are added to the child block if the parent and child has the same block-direction, but different sideways bit; also, add reftests to ensure that "text-orientation: sideways" doesn't add BFC bits. Differential Revision: https://phabricator.services.mozilla.com/D45912
layout/generic/crashtests/1102175-2.html
layout/generic/crashtests/crashtests.list
layout/generic/nsBlockFrame.cpp
testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats-ref.html
testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats.html
testing/web-platform/tests/css/css-writing-modes/srl-alongside-vrl-floats-ref.html
testing/web-platform/tests/css/css-writing-modes/srl-alongside-vrl-floats.html
testing/web-platform/tests/css/css-writing-modes/vlr-text-orientation-sideways-alongside-vlr-floats-ref.html
testing/web-platform/tests/css/css-writing-modes/vlr-text-orientation-sideways-alongside-vlr-floats.html
testing/web-platform/tests/css/css-writing-modes/vrl-text-orientation-sideways-alongside-vrl-floats-ref.html
testing/web-platform/tests/css/css-writing-modes/vrl-text-orientation-sideways-alongside-vrl-floats.html
new file mode 100644
--- /dev/null
+++ b/layout/generic/crashtests/1102175-2.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  <title>CSS-Writing Modes Test: propagation of the writing-mode property from body to root</title>
+  <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel=help href="https://drafts.csswg.org/css-writing-modes-3/#principal-flow">
+  <link rel="match" href="wm-propagation-body-dynamic-change-002-ref.html">
+  <meta name=assert content="The writing mode of the newly inserted body must be propagated to the root.">
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    var newBody = document.createElement("body");
+    newBody.id = "new-body";
+    var oldBody = document.getElementById("old-body");
+
+    /* Insert a new <body> before the old one, which should become the primary <body>. */
+    document.documentElement.insertBefore(newBody, oldBody);
+  }
+  </script>
+
+  <style>
+  #new-body {
+    /* This writing-mode should propagate to the root element. */
+    writing-mode: vertical-rl;
+    margin: 0;
+  }
+
+  #old-body {
+    writing-mode: horizontal-tb;
+    inline-size: 100px;
+  }
+
+  div {
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+  }
+  </style>
+
+  <body id="old-body" onload="runTest();">
+    <div></div>
+    <p>Test passes if you see a blue square in the upper-right corner of the page</p>
+  </body>
+</html>
--- a/layout/generic/crashtests/crashtests.list
+++ b/layout/generic/crashtests/crashtests.list
@@ -588,16 +588,17 @@ pref(font.size.inflation.minTwips,200) l
 load 1032613-1.svg
 load 1032613-2.html
 load 1037903.html
 load 1039454-1.html
 load 1042489.html
 load 1054010-1.html
 load 1058954-1.html
 skip-if(verify&&isDebugBuild&&(gtkWidget||OSX)) load 1059138-1.html
+load 1102175-2.html
 load 1134531.html
 load 1134667.html
 load 1137723-1.html
 load 1137723-2.html
 load 1140268-1.html
 load 1145768.html
 load 1145931.html
 load 1146103.html
--- a/layout/generic/nsBlockFrame.cpp
+++ b/layout/generic/nsBlockFrame.cpp
@@ -7099,29 +7099,33 @@ void nsBlockFrame::Init(nsIContent* aCon
   nsContainerFrame::Init(aContent, aParent, aPrevInFlow);
 
   if (!aPrevInFlow ||
       aPrevInFlow->GetStateBits() & NS_BLOCK_NEEDS_BIDI_RESOLUTION) {
     AddStateBits(NS_BLOCK_NEEDS_BIDI_RESOLUTION);
   }
 
   // A display:flow-root box establishes a block formatting context.
-  // If a box has a different block flow direction than its containing block:
+  //
+  // If a box has a different writing-mode value than its containing block:
   // ...
   //   If the box is a block container, then it establishes a new block
   //   formatting context.
-  // (http://dev.w3.org/csswg/css-writing-modes/#block-flow)
+  // (https://drafts.csswg.org/css-writing-modes/#block-flow)
   //
   // If the box has contain: paint or contain:layout (or contain:strict),
   // then it should also establish a formatting context.
   //
   // Per spec, a column-span always establishes a new block formatting context.
   if (StyleDisplay()->mDisplay == mozilla::StyleDisplay::FlowRoot ||
-      (GetParent() && StyleVisibility()->mWritingMode !=
-                          GetParent()->StyleVisibility()->mWritingMode) ||
+      (GetParent() &&
+       (GetWritingMode().GetBlockDir() !=
+            GetParent()->GetWritingMode().GetBlockDir() ||
+        GetWritingMode().IsVerticalSideways() !=
+            GetParent()->GetWritingMode().IsVerticalSideways())) ||
       StyleDisplay()->IsContainPaint() || StyleDisplay()->IsContainLayout() ||
       (StaticPrefs::layout_css_column_span_enabled() && IsColumnSpan())) {
     AddStateBits(NS_BLOCK_FORMATTING_CONTEXT_STATE_BITS);
   }
 
   if ((GetStateBits() &
        (NS_FRAME_FONT_INFLATION_CONTAINER | NS_BLOCK_FLOAT_MGR)) ==
       (NS_FRAME_FONT_INFLATION_CONTAINER | NS_BLOCK_FLOAT_MGR)) {
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <title>CSS Writing Modes Test Reference: positioning of a sideways-lr block alongside vertical-lr floats</title>
+
+  <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+  <meta content="image" name="flags">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+
+  div {
+    block-size: 100px;
+  }
+
+  div#first-olive-float {
+    background-color: olive;
+    float: left;
+    inline-size: 50%;
+  }
+
+  div#second-blue-float-with-clear {
+    background-color: blue;
+    clear: left;
+    float: left;
+    inline-size: 25%;
+  }
+
+  div#orange-bfc {
+    background-color: orange;
+    inline-size: 75%;
+    display: flow-root; /* Establishes a block formatting context */
+  }
+  </style>
+
+  <body>
+    <p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled"></p>
+    <!--
+         The image says:
+         Test passes if the orange rectangle
+         is below the blue rectangle.
+    -->
+
+    <div id="first-olive-float">&nbsp;</div>
+    <div id="second-blue-float-with-clear">&nbsp;</div>
+    <div id="orange-bfc">&nbsp;</div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <title>CSS Writing Modes Test: positioning of a sideways-lr block alongside vertical-lr floats</title>
+
+  <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow" title="3.2. Block Flow Direction: the writing-mode property">
+  <link rel="match" href="slr-alongside-vlr-floats-ref.html">
+
+  <!-- This test is adapted from Gérard Talbot's "ortho-htb-alongside-vrl-floats-014.xht" -->
+
+  <meta content="image" name="flags">
+  <meta content="This test verifies that the orange block box, which creates a new block formatting context, should flow next to the earliest float that offers sufficient space in the inline-direction." name="assert">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+
+  div {
+    block-size: 100px;
+  }
+
+  div#first-olive-float {
+    background-color: olive;
+    float: left;
+    inline-size: 50%;
+  }
+
+  div#second-blue-float-with-clear {
+    background-color: blue;
+    clear: left;
+    float: left;
+    inline-size: 25%;
+  }
+
+  div#orange-bfc {
+    background-color: orange;
+    inline-size: 75%;
+    writing-mode: sideways-lr; /* Same block direction as <html> */
+  }
+  </style>
+
+  <body>
+    <p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled"></p>
+    <!--
+         The image says:
+         Test passes if the orange rectangle
+         is below the blue rectangle.
+    -->
+
+    <div id="first-olive-float">&nbsp;</div>
+    <div id="second-blue-float-with-clear">&nbsp;</div>
+    <div id="orange-bfc">&nbsp;</div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/srl-alongside-vrl-floats-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <title>CSS Writing Modes Test Reference: positioning of a sideways-rl block alongside vertical-rl floats</title>
+
+  <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+  <meta content="image" name="flags">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+
+  div {
+    block-size: 100px;
+  }
+
+  div#first-olive-float {
+    background-color: olive;
+    float: left;
+    inline-size: 50%;
+  }
+
+  div#second-blue-float-with-clear {
+    background-color: blue;
+    clear: left;
+    float: left;
+    inline-size: 25%;
+  }
+
+  div#orange-bfc {
+    background-color: orange;
+    inline-size: 75%;
+    display: flow-root; /* Establishes a block formatting context */
+  }
+  </style>
+
+  <body>
+    <p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled"></p>
+    <!--
+         The image says:
+         Test passes if the orange rectangle
+         is below the blue rectangle.
+    -->
+
+    <div id="first-olive-float">&nbsp;</div>
+    <div id="second-blue-float-with-clear">&nbsp;</div>
+    <div id="orange-bfc">&nbsp;</div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/srl-alongside-vrl-floats.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <title>CSS Writing Modes Test: positioning of a sideways-rl block alongside vertical-rl floats</title>
+
+  <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow" title="3.2. Block Flow Direction: the writing-mode property">
+  <link rel="match" href="srl-alongside-vrl-floats-ref.html">
+
+  <!-- This test is adapted from Gérard Talbot's "ortho-htb-alongside-vrl-floats-014.xht" -->
+
+  <meta content="image" name="flags">
+  <meta content="This test verifies that the orange block box, which creates a new block formatting context, should flow next to the earliest float that offers sufficient space in the inline-direction." name="assert">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+
+  div {
+    block-size: 100px;
+  }
+
+  div#first-olive-float {
+    background-color: olive;
+    float: left;
+    inline-size: 50%;
+  }
+
+  div#second-blue-float-with-clear {
+    background-color: blue;
+    clear: left;
+    float: left;
+    inline-size: 25%;
+  }
+
+  div#orange-bfc {
+    background-color: orange;
+    inline-size: 75%;
+    writing-mode: sideways-rl; /* Same block direction as <html> */
+  }
+  </style>
+
+  <body>
+    <p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled"></p>
+    <!--
+         The image says:
+         Test passes if the orange rectangle
+         is below the blue rectangle.
+    -->
+
+    <div id="first-olive-float">&nbsp;</div>
+    <div id="second-blue-float-with-clear">&nbsp;</div>
+    <div id="orange-bfc">&nbsp;</div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vlr-text-orientation-sideways-alongside-vlr-floats-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <title>CSS Writing Modes Test Reference: positioning of a text-orientation:sideways block alongside vertical-lr floats</title>
+
+  <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+
+  div {
+    block-size: 100px;
+  }
+
+  div#first-olive-float {
+    background-color: olive;
+    float: left;
+    inline-size: 50%;
+  }
+
+  div#second-blue-float-with-clear {
+    background-color: blue;
+    clear: left;
+    float: left;
+    inline-size: 25%;
+  }
+
+  div#orange-bfc {
+    background-color: orange;
+    inline-size: 75%;
+    writing-mode: vertical-lr;
+  }
+  </style>
+
+  <body>
+    <div id="first-olive-float">&nbsp;</div>
+    <div id="second-blue-float-with-clear">&nbsp;</div>
+    <div id="orange-bfc">&nbsp;</div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vlr-text-orientation-sideways-alongside-vlr-floats.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <title>CSS Writing Modes Test: positioning of a text-orientation:sideways block alongside vertical-lr floats</title>
+
+  <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow" title="3.2. Block Flow Direction: the writing-mode property">
+  <link rel="match" href="vlr-text-orientation-sideways-alongside-vlr-floats-ref.html">
+
+  <!-- This test is adapted from Gérard Talbot's "ortho-htb-alongside-vrl-floats-014.xht" -->
+
+  <meta content="This test verifies that the orange block box, which should not create a new block formatting context, should flow next to the first float." name="assert">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+
+  div {
+    block-size: 100px;
+  }
+
+  div#first-olive-float {
+    background-color: olive;
+    float: left;
+    inline-size: 50%;
+  }
+
+  div#second-blue-float-with-clear {
+    background-color: blue;
+    clear: left;
+    float: left;
+    inline-size: 25%;
+  }
+
+  div#orange-bfc {
+    background-color: orange;
+    inline-size: 75%;
+    writing-mode: vertical-lr;
+    text-orientation: sideways; /* Should not create block formatting context */
+  }
+  </style>
+
+  <body>
+    <div id="first-olive-float">&nbsp;</div>
+    <div id="second-blue-float-with-clear">&nbsp;</div>
+    <div id="orange-bfc">&nbsp;</div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vrl-text-orientation-sideways-alongside-vrl-floats-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <title>CSS Writing Modes Test Reference: positioning of a text-orientation:sideways block alongside vertical-rl floats</title>
+
+  <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+
+  div {
+    block-size: 100px;
+  }
+
+  div#first-olive-float {
+    background-color: olive;
+    float: left;
+    inline-size: 50%;
+  }
+
+  div#second-blue-float-with-clear {
+    background-color: blue;
+    clear: left;
+    float: left;
+    inline-size: 25%;
+  }
+
+  div#orange-bfc {
+    background-color: orange;
+    inline-size: 75%;
+    writing-mode: vertical-rl;
+  }
+  </style>
+
+  <body>
+    <div id="first-olive-float">&nbsp;</div>
+    <div id="second-blue-float-with-clear">&nbsp;</div>
+    <div id="orange-bfc">&nbsp;</div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/vrl-text-orientation-sideways-alongside-vrl-floats.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <title>CSS Writing Modes Test: positioning of a text-orientation:sideways block alongside vertical-rl floats</title>
+
+  <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow" title="3.2. Block Flow Direction: the writing-mode property">
+  <link rel="match" href="vrl-text-orientation-sideways-alongside-vrl-floats-ref.html">
+
+  <!-- This test is adapted from Gérard Talbot's "ortho-htb-alongside-vrl-floats-014.xht" -->
+
+  <meta content="This test verifies that the orange block box, which should not create a new block formatting context, should flow next to the first float." name="assert">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+
+  div {
+    block-size: 100px;
+  }
+
+  div#first-olive-float {
+    background-color: olive;
+    float: left;
+    inline-size: 50%;
+  }
+
+  div#second-blue-float-with-clear {
+    background-color: blue;
+    clear: left;
+    float: left;
+    inline-size: 25%;
+  }
+
+  div#orange-bfc {
+    background-color: orange;
+    inline-size: 75%;
+    writing-mode: vertical-rl;
+    text-orientation: sideways; /* Should not create block formatting context */
+  }
+  </style>
+
+  <body>
+    <div id="first-olive-float">&nbsp;</div>
+    <div id="second-blue-float-with-clear">&nbsp;</div>
+    <div id="orange-bfc">&nbsp;</div>
+  </body>
+</html>