[LayoutNG] Add support for negative margins and new formatting contexts

This does two things: 1. Allows a new formatting context to be sized and positioned outside its layout opportunity when negative margins are present. This occurs when a layout opportunity inline dimensions matches the initial child available space (ignoring floats). Additionally when a new formatting context "jumps out" of its layout opportunity it ignores any floats which might impede it. 2. Performs layout inside an opportunity, and then checks if the result can fit within the same opportunity. Previously we were trying to position in an arbitrary layout opportunity, which fails the new-fc-relayout.html test. Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_layout_ng Change-Id: I6b44b6273be5c0f633e39a8875cc54ea0bc54480 Bug: 635619 Reviewed-on: https://chromium-review.googlesource.com/1150849 Commit-Queue: Ian Kilpatrick <[email protected]> Reviewed-by: Morten Stenshorne <[email protected]> Cr-Commit-Position: refs/heads/master@{#579064}
web-platform-tests · Jul 30, 2018 · fe2c977 · fe2c977
1 parent 3b627be
commit fe2c977
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/css/CSS2/floats/new-fc-relayout.html b/css/CSS2/floats/new-fc-relayout.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>New formatting context relayout</title>
+<link rel="author" title="Ian Kilpatrick" href="[email protected]">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2452">
+<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="width: 100px; line-height: 0;">
+  <div style="float: right; width: 50px; height: 50px; background: green;"></div>
+  <div style="float: right; width: 75px; height: 50px; background: green;"></div>
+  <div style="overflow: hidden;">
+    <div style="display: inline-block; width: 25px; height: 75px; background: green;"></div>
+    <div style="display: inline-block; width: 25px; height: 25px; background: green;"></div>
+  </div>
+  <div style="position: relative; width: 25px; height: 50px; background: green; top: -100px; left: 25px;"></div>
+</div>
diff --git a/css/CSS2/floats/zero-width-floats-positioning.html b/css/CSS2/floats/zero-width-floats-positioning.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>Zero width floats, and positioning with negative margins</title>
+<link rel="author" title="Ian Kilpatrick" href="[email protected]">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#float-width" title="10.3.5 Floating, non-replaced elements">
+<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="margin-left: 50px; width: 125px;">
+  <div style="float: left; width: 0px; height: 50px;"></div>
+  <div style="float: right; clear: left; width: 25px; height: 50px;"></div>
+  <div style="overflow: hidden; margin-left: -50px; height: 100px; background: green;"></div>
+</div>