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 --HG-- extra : moz-landing-system : lando
2019-10-10 04:44:38 +00:00 · 2019-10-10 04:44:38 +00:00 · e0e39eaf7e
--- a/layout/generic/crashtests/1102175-2.html
+++ 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
@ -593,6 +593,7 @@ 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
--- a/layout/generic/nsBlockFrame.cpp
+++ b/layout/generic/nsBlockFrame.cpp
@ -7104,19 +7104,23 @@ void nsBlockFrame::Init(nsIContent* aContent, nsContainerFrame* aParent,
  }

  // 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);
--- a/testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats-ref.html
+++ 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>
--- a/testing/web-platform/tests/css/css-writing-modes/slr-alongside-vlr-floats.html
+++ 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>
--- a/testing/web-platform/tests/css/css-writing-modes/srl-alongside-vrl-floats-ref.html
+++ 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>
--- a/testing/web-platform/tests/css/css-writing-modes/srl-alongside-vrl-floats.html
+++ 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>
--- a/testing/web-platform/tests/css/css-writing-modes/vlr-text-orientation-sideways-alongside-vlr-floats-ref.html
+++ 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>
--- a/testing/web-platform/tests/css/css-writing-modes/vlr-text-orientation-sideways-alongside-vlr-floats.html
+++ 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>
--- a/testing/web-platform/tests/css/css-writing-modes/vrl-text-orientation-sideways-alongside-vrl-floats-ref.html
+++ 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>
--- a/testing/web-platform/tests/css/css-writing-modes/vrl-text-orientation-sideways-alongside-vrl-floats.html
+++ 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>