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
--- 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>