Bug 1574060 - Implement layout for 'display: flow-root list-item'. r=emilio
authorMats Palmgren <mats@mozilla.com>
Fri, 16 Aug 2019 06:30:24 +0000
changeset 488440 e3f6e2f3e216b5504640481a25b2277e9882c474
parent 488438 0c769cff316532f09812f8315e97787e7cc67131
child 488441 c9ece2f3ad559ed5a861b8b7c829bb6277c12fe7
push id36444
push userccoroiu@mozilla.com
push dateFri, 16 Aug 2019 16:24:18 +0000
treeherdermozilla-central@8a9e9189cd98 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersemilio
bugs1574060
milestone70.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 1574060 - Implement layout for 'display: flow-root list-item'. r=emilio Differential Revision: https://phabricator.services.mozilla.com/D42087
devtools/shared/css/generated/properties-db.js
layout/base/nsCSSFrameConstructor.cpp
layout/inspector/tests/test_bug877690.html
servo/components/style/values/specified/box.rs
testing/web-platform/tests/css/css-display/display-flow-root-list-item-001-ref.html
testing/web-platform/tests/css/css-display/display-flow-root-list-item-001.html
--- a/devtools/shared/css/generated/properties-db.js
+++ b/devtools/shared/css/generated/properties-db.js
@@ -5887,16 +5887,17 @@ exports.CSS_PROPERTIES = {
     "values": [
       "-webkit-box",
       "-webkit-inline-box",
       "block",
       "block ruby",
       "contents",
       "flex",
       "flow-root",
+      "flow-root list-item",
       "grid",
       "inherit",
       "initial",
       "inline",
       "inline flow-root list-item",
       "inline list-item",
       "inline-block",
       "inline-flex",
--- a/layout/base/nsCSSFrameConstructor.cpp
+++ b/layout/base/nsCSSFrameConstructor.cpp
@@ -4660,17 +4660,17 @@ nsIFrame* nsCSSFrameConstructor::Constru
   // We want a block formatting context root in paginated contexts for
   // every block that would be scrollable in a non-paginated context.
   // We mark our blocks with a bit here if this condition is true, so
   // we can check it later in nsFrame::ApplyPaginatedOverflowClipping.
   bool clipPaginatedOverflow =
       (aItem.mFCData->mBits & FCDATA_FORCED_NON_SCROLLABLE_BLOCK) != 0;
   nsFrameState flags = nsFrameState(0);
   if ((aDisplay->IsAbsolutelyPositionedStyle() || aDisplay->IsFloatingStyle() ||
-       StyleDisplay::InlineBlock == aDisplay->mDisplay ||
+       aDisplay->DisplayInside() == StyleDisplayInside::FlowRoot ||
        clipPaginatedOverflow) &&
       !nsSVGUtils::IsInSVGTextSubtree(aParentFrame)) {
     flags = NS_BLOCK_FORMATTING_CONTEXT_STATE_BITS;
     if (clipPaginatedOverflow) {
       flags |= NS_BLOCK_CLIP_PAGINATED_OVERFLOW;
     }
   }
 
--- a/layout/inspector/tests/test_bug877690.html
+++ b/layout/inspector/tests/test_bug877690.html
@@ -86,17 +86,17 @@ function do_test() {
 
   // test proprety
   var prop = "display";
   var values = InspectorUtils.getCSSValuesForProperty(prop);
   var expected = [ "initial", "inherit", "unset", "revert", "none", "inline", "block", "inline-block", "list-item",
       "table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row",
       "table-column-group", "table-column", "table-cell", "table-caption",
       "flex", "inline-flex", "-webkit-box", "-webkit-inline-box",
-      "grid", "inline-grid", "inline list-item", "inline flow-root list-item",
+      "grid", "inline-grid", "inline list-item", "inline flow-root list-item", "flow-root list-item",
       "ruby", "ruby-base", "ruby-base-container", "ruby-text", "ruby-text-container", "block ruby",
       "contents", "flow-root" ];
   ok(testValues(values, expected), "property display's values.");
 
   // test property
   var prop = "float";
   var values = InspectorUtils.getCSSValuesForProperty(prop);
   var expected = [ "initial", "inherit", "unset", "revert", "none", "left", "right", "inline-start", "inline-end" ];
--- a/servo/components/style/values/specified/box.rs
+++ b/servo/components/style/values/specified/box.rs
@@ -622,16 +622,17 @@ impl Parse for Display {
 
 impl SpecifiedValueInfo for Display {
     fn collect_completion_keywords(f: KeywordsCollectFn) {
         f(&[
             "block",
             "contents",
             "flex",
             "flow-root",
+            "flow-root list-item",
             "grid",
             "inline",
             "inline-block",
             "inline-flex",
             "inline-grid",
             "inline-table",
             "inline list-item",
             "inline flow-root list-item",
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-display/display-flow-root-list-item-001-ref.html
@@ -0,0 +1,53 @@
+<!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: display:flow-root list-item</title>
+  <link rel="author" title="Mats Palmgren" href="">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+body { padding-left: 100px; }
+
+.float {
+  float: left;
+  width: 20px;
+  height: 40px;
+  background: pink;
+}
+
+.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
+
+  </style>
+</head>
+<body>
+
+<div style="border:1px solid">
+  <div style="margin: 40px 0">
+    <div style="display:list-item">x</div>
+  </div>
+</div>
+
+<div style="border:1px solid">
+  <div style="display:list-item" class="float"></div>
+  <div class="clearfix"></div>
+</div>
+
+<div style="border:1px solid">
+  <div class="float"></div>
+  <div style="display:list-item; border:1px solid; margin-left:20px">x</div>
+</div>
+
+<span>
+  <span style="display:list-item; background:grey; margin:20px 0 0 21px"><div style="padding:20px">x</div></span>
+</span>
+
+<div style="display:list-item; border:3px solid; height:10px;"></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-display/display-flow-root-list-item-001.html
@@ -0,0 +1,59 @@
+<!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 Display Test: display:flow-root list-item</title>
+  <link rel="author" title="Mats Palmgren" href="">
+  <link rel="help" href="https://drafts.csswg.org/css-display-3/#list-items">
+  <link rel="match" href="display-flow-root-list-item-001-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+body { padding-left: 100px; }
+
+.float {
+  float: left;
+  width: 20px;
+  height: 40px;
+  background: pink;
+}
+
+.li { display: flow-root list-item; }
+  </style>
+</head>
+<body>
+
+<div style="border:1px solid">
+  <!-- this tests that the flow-root margins don't collapse with its children. -->
+  <span class="li" style="margin: 20px 0">
+    <div style="margin: 20px 0">x</div>
+  </span>
+</div>
+
+<div style="border:1px solid">
+  <!-- this tests that the flow-root grows to fit child floats -->
+  <span class="li"><div class="float"></div></span>
+</div>
+
+<div style="border:1px solid; margin-bottom:20px">
+  <!-- this tests that a float does not intrude into flow-root box -->
+  <div class="float"></div>
+  <span class="li" style="border:1px solid">x</span>
+</div>
+
+<span>
+  <!-- this tests that a flow-root box is constructed also in the "ibsplit" case -->
+  <span class="li" style="background:grey;"><div style="margin:20px">x</div></span>
+</span>
+
+<span class="li" style="border:3px solid; height:10px;">
+  <!-- this tests that a flow-root fills the available width, and that 'height' applies -->
+</span>
+
+</body>
+</html>