Bug 1445064 [wpt PR 9984] - [LayoutNG] Need parent's clearance offset when positioning child., a=testonly
authorMorten Stenshorne <mstensho@chromium.org>
Mon, 09 Apr 2018 16:38:53 +0000
changeset 413491 6e7ec7be3b527f0f93e1fe5e23ee379e44d84d4f
parent 413490 32da77c494a3d4b56c06e575956c0a9a862e3d6e
child 413492 953103674624f8502c5d2ef89c93017042f9fcf7
push id33850
push userapavel@mozilla.com
push dateMon, 16 Apr 2018 09:53:48 +0000
treeherdermozilla-central@6276ec7ebbf3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1445064, 957045, 542769
milestone61.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 1445064 [wpt PR 9984] - [LayoutNG] Need parent's clearance offset when positioning child., a=testonly Automatic update from web-platform-tests[LayoutNG] Need parent's clearance offset when positioning child. If clear is specified on an element whose first piece of content is inside a child (so that the element's BFC offset cannot be determined at the beginning of layout), we need this child to know about the clearance offset on the parent, or it will not be pushed below adjacent floats as it should. Just pushing the parent, but leaving the children unaffected by clearance won't do. We need this in order to be able to lay out in a single pass (and apply clearance when we detect it, rather than doing it on the element with 'clear' and relayout the children if something moved). Since a constraint space's clearance offset is now "inherited" down the tree, as long as we're within the same block formatting context, we now also need to propagate the "is pushed by floats" flag upwards, or we won't detect class C break points correctly. Without this the unit test ClassCBreakPointBeforeBlockMarginCollapsing in NGColumnLayoutAlgorithmTest would regress, because it would incorrectly detect a class C break point before the break-inside:avoid block. We must make sure that class C break points are only detected on the outermost block that got pushed by floats, because it's there that we'll get the gap between the inner edge of the container and the outer edge of the child. Added some tests. One of them fails in legacy (but not in NG). One of the tests, clear-on-child-with-margins.html, passes both with and without this code change, but I started to wonder if we'd suddenly could end up pulling the parent of the box with 'clear' downwards, so thought I better add it, to make sure we don't regress in this regard. The test NoClassCBreakPointBeforeBfc in NGColumnLayoutAlgorithmTest no longer needs its workaround, because the display:flow-root child of #container now sets its position correctly (past the float) right away. Acid2 also looks slightly better now! Cq-Include-Trybots: master.tryserver.chromium.linux:linux_layout_tests_layout_ng Change-Id: I732b19398bd43b9874f6bb8c57ce435d1c510754 Reviewed-on: https://chromium-review.googlesource.com/957045 Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Emil A Eklund <eae@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#542769} wpt-commits: b5b3c1f0c2c224e863e50ad3f78ed5af0d73981e wpt-pr: 9984 wpt-commits: b5b3c1f0c2c224e863e50ad3f78ed5af0d73981e wpt-pr: 9984
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/CSS2/floats-clear/clear-on-child-with-margins.html
testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent-and-child.html
testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent-with-margins-no-clearance.html
testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent-with-margins.html
testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -47232,16 +47232,76 @@
       [
        "/css/CSS2/floats-clear/clear-inline-001-ref.xht",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/CSS2/floats-clear/clear-on-child-with-margins.html": [
+    [
+     "/css/CSS2/floats-clear/clear-on-child-with-margins.html",
+     [
+      [
+       "/css/reference/ref-filled-green-100px-square-only.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/CSS2/floats-clear/clear-on-parent-and-child.html": [
+    [
+     "/css/CSS2/floats-clear/clear-on-parent-and-child.html",
+     [
+      [
+       "/css/reference/ref-filled-green-200px-square.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/CSS2/floats-clear/clear-on-parent-with-margins-no-clearance.html": [
+    [
+     "/css/CSS2/floats-clear/clear-on-parent-with-margins-no-clearance.html",
+     [
+      [
+       "/css/reference/ref-filled-green-100px-square-only.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/CSS2/floats-clear/clear-on-parent-with-margins.html": [
+    [
+     "/css/CSS2/floats-clear/clear-on-parent-with-margins.html",
+     [
+      [
+       "/css/reference/ref-filled-green-200px-square.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/CSS2/floats-clear/clear-on-parent.html": [
+    [
+     "/css/CSS2/floats-clear/clear-on-parent.html",
+     [
+      [
+       "/css/reference/ref-filled-green-200px-square.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/CSS2/floats-clear/clearance-006.xht": [
     [
      "/css/CSS2/floats-clear/clearance-006.xht",
      [
       [
        "/css/CSS2/floats-clear/clearance-006-ref.xht",
        "=="
       ]
@@ -440650,16 +440710,36 @@
   "css/CSS2/floats-clear/clear-inline-001-ref.xht": [
    "6548ff7f35f7f4a56d5f7d18126e00b80c378ac7",
    "support"
   ],
   "css/CSS2/floats-clear/clear-inline-001.xht": [
    "3f902ea05caf3cb71e978749bd47b120d10366e2",
    "reftest"
   ],
+  "css/CSS2/floats-clear/clear-on-child-with-margins.html": [
+   "69b04e20fa82677e4d2736bd6ec9c370147e4061",
+   "reftest"
+  ],
+  "css/CSS2/floats-clear/clear-on-parent-and-child.html": [
+   "bbf7831640ee2aa3e29aa6695682d1e14971948b",
+   "reftest"
+  ],
+  "css/CSS2/floats-clear/clear-on-parent-with-margins-no-clearance.html": [
+   "d4b2bf3b4b6761c9531859e6cedb9d08a928880f",
+   "reftest"
+  ],
+  "css/CSS2/floats-clear/clear-on-parent-with-margins.html": [
+   "dbaee65a956a9b0dfc8b1bbb3ae70bd29bb02c6c",
+   "reftest"
+  ],
+  "css/CSS2/floats-clear/clear-on-parent.html": [
+   "63c9122c39983b4c3a7d10f92399e746411022c3",
+   "reftest"
+  ],
   "css/CSS2/floats-clear/clearance-006-ref.xht": [
    "2305823fd342085286fe1f5e0cdb27d7cd6fe436",
    "support"
   ],
   "css/CSS2/floats-clear/clearance-006.xht": [
    "102e45db8912a0fbb4aa7831bf402ea5e4f2669b",
    "reftest"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-child-with-margins.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>Child of block with clear</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="position:relative; top:-20px;">
+  <div style="float:left; margin-top:20px; width:50px; height:50px; background:green;"></div>
+  <div style="padding-top:1px;">
+    <div style="margin-top:19px; width:100px; background:green;">
+      <div style="clear:left; margin-top:25px; width:100px; height:50px; background:green;"></div>
+    </div>
+  </div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent-and-child.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>Child of block with clear</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="container" style="overflow:hidden; width:200px; height:200px; background:red;">
+  <div style="float:left; width:10px; height:50px;"></div>
+  <div style="float:right; width:10px; height:100px;"></div>
+  <div style="clear:right;">
+    <div style="clear:left; height:200px; background:green;"></div>
+  </div>
+  <div style="height:10000px;"></div>
+</div>
+<script>
+  document.getElementById("container").scrollTop = 100;
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent-with-margins-no-clearance.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Child of block with clear</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="position:relative; z-index:-1; top:-50px; width:100px; background:green;">
+  <div style="float:left; width:100px; height:50px; background:white;"></div>
+  <div style="clear:left; margin-top:25px;">
+    <div style="height:50px; margin-top:150px; background:white;"></div>
+  </div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent-with-margins.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Child of block with clear</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width:200px; height:200px; background:red;">
+  <div style="float:left; width:200px; height:100px; background:green;"></div>
+  <div style="clear:left; margin-top:100px;">
+    <div style="height:100px; margin-top:-1000px; background:green;"></div>
+  </div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Child of block with clear</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width:200px; height:200px; background:red;">
+  <div style="float:left; width:200px; height:100px; background:green;"></div>
+  <div style="clear:left;">
+    <div style="height:100px; background:green;"></div>
+  </div>
+</div>