Bug 1457947 [wpt PR 10713] - [css-grid] Subtract scrollbar in ComputeReplacedLogicalHeightUsing(), a=testonly draft
authorManuel Rego Casasnovas <rego@igalia.com>
Thu, 03 May 2018 22:20:02 +0000
changeset 791485 fb8185481d7a1322c6aaadd16f69af29e0855dff
parent 791484 af07381c0e14e8845f5a515dd6879d099dd44b83
child 791486 d4349e97e7798f3dddb3d4d40feb8eaf01bac9d9
push id108825
push userbmo:james@hoppipolla.co.uk
push dateFri, 04 May 2018 14:12:31 +0000
reviewerstestonly
bugs1457947, 10713, 837141, 1035003, 554834
milestone61.0a1
Bug 1457947 [wpt PR 10713] - [css-grid] Subtract scrollbar in ComputeReplacedLogicalHeightUsing(), a=testonly Automatic update from web-platform-tests[css-grid] Subtract scrollbar in ComputeReplacedLogicalHeightUsing() In LayoutBox::ComputeReplacedLogicalHeightUsing() we were using the OverrideContentLogicalHeight() plus scrollbar height, that was wrong and we should subtract the scrollbar too. This caused issues to resolve the percentage heights on grid item replaced children, if the grid item has a scrollbar. To fix the issue we just need to follow the suggestion in the TODO and use OverrideContentLogicalHeight() directly. This was the last place using OverrideContentAndScrollbarLogicalHeight() so we can get rid of it. The patch removes that method together with OverrideContentAndScrollbarLogicalWidth() that was no longer used. BUG=837141 TEST=external/wpt/css/css-grid/grid-items/percentage-size-replaced-subitems-001.html Change-Id: I28cf6e65c21e6314808c4430515f06c07d4a739e Reviewed-on: https://chromium-review.googlesource.com/1035003 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#554834} -- wpt-commits: 538eedafb15733c6113b44998170a6bbdae7518b wpt-pr: 10713
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001-ref.html
testing/web-platform/tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -117634,16 +117634,28 @@
       [
        "/css/css-grid/reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-grid/grid-items/percentage-size-replaced-subitems-001.html": [
+    [
+     "/css/css-grid/grid-items/percentage-size-replaced-subitems-001.html",
+     [
+      [
+       "/css/css-grid/grid-items/percentage-size-replaced-subitems-001-ref.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",
        "=="
       ]
@@ -250275,16 +250287,21 @@
      {}
     ]
    ],
    "css/css-grid/grid-items/grid-items-sizing-alignment-001-ref.html": [
     [
      {}
     ]
    ],
+   "css/css-grid/grid-items/percentage-size-replaced-subitems-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": [
     [
      {}
@@ -508407,16 +508424,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-replaced-subitems-001-ref.html": [
+   "443082a15b4c90d0717a1ae3da015ff723e3f7d4",
+   "support"
+  ],
+  "css/css-grid/grid-items/percentage-size-replaced-subitems-001.html": [
+   "700a4464e7bda63aed59ed56e7ed4e1077b2571d",
+   "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"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001-ref.html
@@ -0,0 +1,92 @@
+<!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;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.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">
+    <img src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <img class="verticalLR" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <img class="verticalRL" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <img src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <img class="horizontalTB" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <img class="verticalRL" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <img src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <img class="horizontalTB" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <img class="verticalRL" src="support/100x100-green.png" />
+  </div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Percentage size on replaced 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-replaced-subitems-001-ref.html">
+<meta name="assert" content="Checks that grid items replaced 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;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.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">
+    <img src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <img class="verticalLR" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <img class="verticalRL" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <img src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <img class="horizontalTB" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <img class="verticalRL" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <img src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <img class="horizontalTB" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <img class="verticalRL" src="support/100x100-green.png" />
+  </div>
+</div>