Bug 1456906 [wpt PR 10641] - Subtract scrollbar in PerpendicularContainingBlockLogicalHeight, a=testonly
authorManuel Rego Casasnovas <rego@igalia.com>
Tue, 01 May 2018 15:50:43 +0000
changeset 472691 0ef4a6df0c2a407b54623b50e47659dad9e0bcab
parent 472690 208dff5c6fbee73cb6ddc2b4a777952d753316c5
child 472692 bf52f76323b60055b1f6b2441a46c55b3ad17c0d
push id1728
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:12:27 +0000
treeherdermozilla-release@c296fde26f5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1456906, 10641, 836827, 1028012, 553790
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 1456906 [wpt PR 10641] - Subtract scrollbar in PerpendicularContainingBlockLogicalHeight, a=testonly Automatic update from web-platform-testsSubtract scrollbar in PerpendicularContainingBlockLogicalHeight This is an issue that happens in Flexbox and Grid Layout and any other layout method that uses OverrideLogicalHeight. In LayoutBox::PerpendicularContainingBlockLogicalHeight() we were returning the OverrideContentLogicalHeight() plus the scrollbar height. That caused issue with orthogonal flows between flex/grid items and their children. The issue is fixed just following the suggestion in the TODO and using OverrideContentLogicalHeight() (which doesn't include the scrollbar height). BUG=836827 TEST=external/wpt/css/css-flexbox/percentage-size-subitems-001.html TEST=external/wpt/css/css-grid/grid-items/percentage-size-subitems-001.html Change-Id: I0c7586449067aab78430defc831b2774136e2f0b Reviewed-on: https://chromium-review.googlesource.com/1028012 Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Cr-Commit-Position: refs/heads/master@{#553790} -- Silence the CSS-COLLIDING-REF-NAME lint for flexbox/grid collision css/build-css-testsuites.sh succeeds, so this is probably a false positive. -- wpt-commits: f08964871577e07b23d222fb04fe1935764fd0ae, 7630b394cb427850220c0f338cd5e771e965f992 wpt-pr: 10641
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-flexbox/percentage-size-subitems-001.html
testing/web-platform/tests/css/css-flexbox/reference/percentage-size-subitems-001-ref.html
testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-001-ref.html
testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-001.html
testing/web-platform/tests/lint.whitelist
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -113378,16 +113378,28 @@
       [
        "/css/css-flexbox/percentage-heights-004-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-flexbox/percentage-size-subitems-001.html": [
+    [
+     "/css/css-flexbox/percentage-size-subitems-001.html",
+     [
+      [
+       "/css/css-flexbox/reference/percentage-size-subitems-001-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-flexbox/percentage-widths-001.html": [
     [
      "/css/css-flexbox/percentage-widths-001.html",
      [
       [
        "/css/css-flexbox/percentage-widths-001-ref.html",
        "=="
       ]
@@ -117538,16 +117550,28 @@
       [
        "/css/css-grid/reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-grid/grid-items/percentage-size-subitems-001.html": [
+    [
+     "/css/css-grid/grid-items/percentage-size-subitems-001.html",
+     [
+      [
+       "/css/css-grid/grid-items/percentage-size-subitems-001-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-grid/grid-model/display-grid.html": [
     [
      "/css/css-grid/grid-model/display-grid.html",
      [
       [
        "/css/css-grid/reference/display-grid-ref.html",
        "=="
       ]
@@ -240995,16 +241019,21 @@
      {}
     ]
    ],
    "css/css-flexbox/reference/negative-margins-001-ref.html": [
     [
      {}
     ]
    ],
+   "css/css-flexbox/reference/percentage-size-subitems-001-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/css-flexbox/reference/ttwf-reftest-flex-align-content-center-ref.html": [
     [
      {}
     ]
    ],
    "css/css-flexbox/reference/ttwf-reftest-flex-align-content-end-ref.html": [
     [
      {}
@@ -249915,16 +249944,21 @@
      {}
     ]
    ],
    "css/css-grid/grid-items/grid-items-sizing-alignment-001-ref.html": [
     [
      {}
     ]
    ],
+   "css/css-grid/grid-items/percentage-size-subitems-001-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/css-grid/grid-items/ref-filled-green-100px-square-image.html": [
     [
      {}
     ]
    ],
    "css/css-grid/grid-items/support/100x100-green.png": [
     [
      {}
@@ -396681,17 +396715,17 @@
    "f8af4287f3b0f6925a2a6c5c75b3788e24de1680",
    "support"
   ],
   "./config.default.json": [
    "54422ca469a8d54fa4b8252803bb0e2c91459858",
    "support"
   ],
   "./lint.whitelist": [
-   "e30e384e935a7d4a6dc56553532cf78e24810025",
+   "64e7ead5a7fa09f59be4dac4ccb5a1e7bf3cb4fc",
    "support"
   ],
   "./serve.py": [
    "0efa39b1f26f86d73f2fce4f9e46003d62057b41",
    "support"
   ],
   "./server-side.md": [
    "c51b17fbac2a2e3121dc74f7badbd2873ce92f61",
@@ -497952,16 +497986,20 @@
   "css/css-flexbox/percentage-heights-004-ref.html": [
    "19ed01c4b89e39f9ab6c72085e9a29ed30b2f0c2",
    "support"
   ],
   "css/css-flexbox/percentage-heights-004.html": [
    "210a01e299109975376cef799599967709758481",
    "reftest"
   ],
+  "css/css-flexbox/percentage-size-subitems-001.html": [
+   "61dd606542937054a7e405dbafe860e9dcb24775",
+   "reftest"
+  ],
   "css/css-flexbox/percentage-widths-001-ref.html": [
    "a139951dbeb1676b7add9a43d154595dc2e9859b",
    "support"
   ],
   "css/css-flexbox/percentage-widths-001.html": [
    "22e1681cfb553f1c1e5242f02319f22d75a12de4",
    "reftest"
   ],
@@ -498076,16 +498114,20 @@
   "css/css-flexbox/reference/layout-algorithm_algo-cross-line-002-ref.html": [
    "24884d8c1d0377ec52f66a2915336f1d0642bddc",
    "support"
   ],
   "css/css-flexbox/reference/negative-margins-001-ref.html": [
    "6373725b24ea14339e917284610a8e6f911570a6",
    "support"
   ],
+  "css/css-flexbox/reference/percentage-size-subitems-001-ref.html": [
+   "eb39f554808c8ddff41ef6720df23a95010bf038",
+   "support"
+  ],
   "css/css-flexbox/reference/ttwf-reftest-flex-align-content-center-ref.html": [
    "497c4dcc25d582efbfd927caf10a561433a615a6",
    "support"
   ],
   "css/css-flexbox/reference/ttwf-reftest-flex-align-content-end-ref.html": [
    "77847b17ed6379e8ea0cccf20246c797aea00e19",
    "support"
   ],
@@ -507792,16 +507834,24 @@
   "css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-005.html": [
    "80b0c671f40806cbce618ec7c6e65ef685b3b90f",
    "reftest"
   ],
   "css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-006.html": [
    "ca7e5d89d56f33291e83647bef188205bf01ef84",
    "reftest"
   ],
+  "css/css-grid/grid-items/percentage-size-subitems-001-ref.html": [
+   "5d6652ce5649d15ecdeac623fea3541f5271be2a",
+   "support"
+  ],
+  "css/css-grid/grid-items/percentage-size-subitems-001.html": [
+   "0321c064b4d450f243c8c99032e5d006ee47d1b4",
+   "reftest"
+  ],
   "css/css-grid/grid-items/ref-filled-green-100px-square-image.html": [
    "bf155407f749404c00c2cb31e4b6999044a781e2",
    "support"
   ],
   "css/css-grid/grid-items/support/100x100-green.png": [
    "237282657ba1c809361506de0f7a7185cc7457c4",
    "support"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/percentage-size-subitems-001.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Flexbox Test: Percentage size on child of a flex item with margin, border, padding and scrollbar</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-items">
+<link rel="match" href="reference/percentage-size-subitems-001-ref.html">
+<meta name="assert" content="Checks that flex items children resolve properly their percentage sizes, even when the flex item has margin, border, padding and scrollbar.">
+<style>
+.flex {
+  display: inline-flex;
+  border: solid 5px black;
+  width: 150px;
+  height: 100px;
+  margin: 10px;
+  vertical-align: top;
+}
+
+.item {
+  flex: 1;
+  overflow: scroll;
+  border: solid magenta;
+  border-width: 12px 9px 6px 3px;
+  margin: 1px 2px 3px 4px;
+  padding: 5px 15px 10px 20px;
+  background: cyan;
+}
+
+.subitem {
+  width: 100%;
+  height: 100%;
+  background: yellow;
+}
+
+.horizontalTB { writing-mode: horizontal-tb; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL {  writing-mode: vertical-rl; }
+</style>
+
+<p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p>
+
+<div class="flex">
+  <div class="item horizontalTB">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="flex">
+  <div class="item horizontalTB">
+    <div class="subitem verticalLR"></div>
+  </div>
+</div>
+
+<div class="flex">
+  <div class="item horizontalTB">
+    <div class="subitem verticalRL"></div>
+  </div>
+</div>
+
+<div class="flex">
+  <div class="item verticalLR">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="flex">
+  <div class="item verticalLR">
+    <div class="subitem horizontalTB"></div>
+  </div>
+</div>
+
+<div class="flex">
+  <div class="item verticalLR">
+    <div class="subitem verticalRL"></div>
+  </div>
+</div>
+
+<div class="flex">
+  <div class="item verticalRL">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="flex">
+  <div class="item verticalRL">
+    <div class="subitem horizontalTB"></div>
+  </div>
+</div>
+
+<div class="flex">
+  <div class="item verticalRL">
+    <div class="subitem verticalLR"></div>
+  </div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/reference/percentage-size-subitems-001-ref.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Refttest Reference: Percentage size on child of a flex item with margin, border, padding and scrollbar</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+.flex {
+  display: inline-block;
+  border: solid 5px black;
+  width: 150px;
+  height: 100px;
+  margin: 10px;
+  vertical-align: top;
+}
+
+.item {
+  overflow: scroll;
+  border: solid magenta;
+  border-width: 12px 9px 6px 3px;
+  margin: 1px 2px 3px 4px;
+  padding: 5px 15px 10px 20px;
+  background: cyan;
+  width: calc(100% - 6px);
+  height: calc(100% - 4px);
+  box-sizing: border-box;
+}
+
+.subitem {
+  width: 100%;
+  height: 100%;
+  background: yellow;
+}
+
+.horizontalTB { writing-mode: horizontal-tb; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL {  writing-mode: vertical-rl; }
+</style>
+
+<p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p>
+
+<div class="flex">
+  <div class="item horizontalTB">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="flex">
+  <div class="item horizontalTB">
+    <div class="subitem verticalLR"></div>
+  </div>
+</div>
+
+<div class="flex">
+  <div class="item horizontalTB">
+    <div class="subitem verticalRL"></div>
+  </div>
+</div>
+
+<div class="flex">
+  <div class="item verticalLR">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="flex">
+  <div class="item verticalLR">
+    <div class="subitem horizontalTB"></div>
+  </div>
+</div>
+
+<div class="flex">
+  <div class="item verticalLR">
+    <div class="subitem verticalRL"></div>
+  </div>
+</div>
+
+<div class="flex">
+  <div class="item verticalRL">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="flex">
+  <div class="item verticalRL">
+    <div class="subitem horizontalTB"></div>
+  </div>
+</div>
+
+<div class="flex">
+  <div class="item verticalRL">
+    <div class="subitem verticalLR"></div>
+  </div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-001-ref.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Refttest Reference: Percentage size on child of a grid item with margin, border, padding and scrollbar</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+.grid {
+  display: inline-block;
+  border: solid 5px black;
+  width: 150px;
+  height: 100px;
+  margin: 10px;
+  vertical-align: top;
+}
+
+.item {
+  overflow: scroll;
+  border: solid magenta;
+  border-width: 12px 9px 6px 3px;
+  margin: 1px 2px 3px 4px;
+  padding: 5px 15px 10px 20px;
+  background: cyan;
+  width: calc(100% - 6px);
+  height: calc(100% - 4px);
+  box-sizing: border-box;
+}
+
+.subitem {
+  width: 100%;
+  height: 100%;
+  background: yellow;
+  font: 20px/1 Ahem;
+}
+
+.horizontalTB { writing-mode: horizontal-tb; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL {  writing-mode: vertical-rl; }
+</style>
+
+<p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <div class="subitem verticalLR"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <div class="subitem verticalRL"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <div class="subitem horizontalTB"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <div class="subitem verticalRL"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <div class="subitem horizontalTB"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <div class="subitem verticalLR"></div>
+  </div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-001.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Percentage size on child of a grid item with margin, border, padding and scrollbar</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<link rel="match" href="percentage-size-subitems-001-ref.html">
+<meta name="assert" content="Checks that grid items children resolve properly their percentage sizes, even when the grid item has margin, border, padding and scrollbar.">
+<style>
+.grid {
+  display: inline-grid;
+  border: solid 5px black;
+  grid: 100px / 150px;
+  margin: 10px;
+  vertical-align: top;
+}
+
+.item {
+  overflow: scroll;
+  border: solid magenta;
+  border-width: 12px 9px 6px 3px;
+  margin: 1px 2px 3px 4px;
+  padding: 5px 15px 10px 20px;
+  background: cyan;
+}
+
+.subitem {
+  width: 100%;
+  height: 100%;
+  background: yellow;
+}
+
+.horizontalTB { writing-mode: horizontal-tb; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL {  writing-mode: vertical-rl; }
+</style>
+
+<p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <div class="subitem verticalLR"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <div class="subitem verticalRL"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <div class="subitem horizontalTB"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <div class="subitem verticalRL"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <div class="subitem horizontalTB"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <div class="subitem verticalLR"></div>
+  </div>
+</div>
--- a/testing/web-platform/tests/lint.whitelist
+++ b/testing/web-platform/tests/lint.whitelist
@@ -775,16 +775,18 @@ CSS-COLLIDING-REF-NAME: css/CSS2/selecto
 CSS-COLLIDING-REF-NAME: css/CSS2/text/text-transform-uppercase-001-ref.xht
 CSS-COLLIDING-REF-NAME: css/css-text/text-transform/reference/text-transform-uppercase-001-ref.xht
 CSS-COLLIDING-REF-NAME: css/CSS2/visufx/overflow-applies-to-001-ref.xht
 CSS-COLLIDING-REF-NAME: css/CSS2/ui/overflow-applies-to-001-ref.xht
 CSS-COLLIDING-REF-NAME: css/CSS2/visuren/inline-formatting-context-001-ref.xht
 CSS-COLLIDING-REF-NAME: css/CSS2/linebox/inline-formatting-context-001-ref.xht
 CSS-COLLIDING-REF-NAME: css/css-transforms/individual-transform/individual-transform-1-ref.html
 CSS-COLLIDING-REF-NAME: css/vendor-imports/mozilla/mozilla-central-reftests/transforms/individual-transform-1-ref.html
+CSS-COLLIDING-REF-NAME: css/css-flexbox/reference/percentage-size-subitems-001-ref.html
+CSS-COLLIDING-REF-NAME: css/css-grid/grid-items/percentage-size-subitems-001-ref.html
 CSS-COLLIDING-SUPPORT-NAME: css/css-backgrounds/support/red.png
 CSS-COLLIDING-SUPPORT-NAME: css/compositing/mix-blend-mode/support/red.png
 CSS-COLLIDING-SUPPORT-NAME: css/compositing/background-blending/support/red.png
 CSS-COLLIDING-SUPPORT-NAME: css/CSS2/normal-flow/support/replaced-min-max-3.png
 CSS-COLLIDING-SUPPORT-NAME: css/vendor-imports/mozilla/mozilla-central-reftests/ui3/support/replaced-min-max-3.png
 CSS-COLLIDING-SUPPORT-NAME: css/css-backgrounds/background-size/support/50x50-green.png
 CSS-COLLIDING-SUPPORT-NAME: css/css-backgrounds/support/50x50-green.png
 CSS-COLLIDING-SUPPORT-NAME: css/css-grid/grid-items/support/50x50-green.png