Bug 1526746 [wpt PR 15284] - [css-grid] Overflow should be computed with the actual logical bottom, a=testonly
authorJavier Fernandez <jfernandez@igalia.com>
Tue, 19 Feb 2019 14:38:56 +0000
changeset 519236 d979f778d2f893690b3d7ec501d0b8c36c346342
parent 519235 0dec93e4ebd2ba049322e204eae1b330ff174a58
child 519237 6e9a763bcb5f3f6ef94ceed37805602216ad24f9
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1526746, 15284, 928885, 1459620, 630735
milestone67.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 1526746 [wpt PR 15284] - [css-grid] Overflow should be computed with the actual logical bottom, a=testonly Automatic update from web-platform-tests [css-grid] Overflow should be computed with the actual logical bottom In order to compute the 'auto' height of the grid container, we set temporarily a value based on the tracks' size. We can see this value as a kind of 'intrinsic height'. Then, we call to the UpdateLogicalHeight function to finally compute the grid container's actual logical height. In order to compute the overflow area in the grid container we should use the result of the ClientLogicalBottom function. However, we were retrieving this value just after setting the tracks-based temporary height, and before computing the actual logical height. The consequence of this wrong logic is that empty grid areas may affect the result of the ClientLogicalBottom and, as it's described in the bug, conclude that there is a content overflow in the grid container, even if such container has no grid items at all. Since the grid itself is not a box, it can't contribute to the grid container's content size; instead, its grid items should. This change ensures that we always use the actual grid container's logical bottom to properly compute the overflow area. Bug: 928885 Change-Id: I05f86fbce06a83c0dbc0d5389bf0416763f8588a Reviewed-on: https://chromium-review.googlesource.com/c/1459620 Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Manuel Rego <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#630735} -- wpt-commits: aa6f52fc7b99559377c760a550e842438efa91a1 wpt-pr: 15284
testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-001.html
testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-002.html
testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-003.html
testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-004.html
testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-005.html
testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-006.html
testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-007.html
testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-008.html
testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-horizontal-scrollbar.html
testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-scrollbars.html
testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-vertical-scrollbar.html
testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box.html">
+<meta name="assert" content="This test verifies that the scrollbars are not shown on an empty grid even if there are grid areas which exceed the grid container size, since the grid itself is not a box that can cause overflow.">
+<link href="support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 200px / 200px;
+       width: 100px;
+       height: 100px;
+    }
+</style>
+<p>The test passes if you see a grey square below without any scrollbar.</p>
+<div class="grid"></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-002.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box.html">
+<meta name="assert" content="This test verifies that the scrollbars are not shown on a grid with an item placed inside the boundaries of the grid container, even if there are grid areas which exceed the grid container size.">
+<link href="support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 200px / 200px;
+       width: 100px;
+       height: 100px;
+    }
+    .item {
+       width: 100px;
+       height: 100px;
+    }
+</style>
+<p>The test passes if you see a grey square below without any scrollbar.</p>
+<div class="grid"><div class="item"></div></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-003.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box.html">
+<meta name="assert" content="This test verifies that the scrollbars are not shown on a grid with an item placed inside the boundaries of the grid container, even if there are grid areas which exceed the grid container size.">
+<link href="support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px 100px / 100px 100px;
+       width: 100px;
+       height: 100px;
+    }
+    .item {
+       grid-column: 1;
+       grid-row: 1;
+       width: 100px;
+       height: 100px;
+    }
+</style>
+<p>The test passes if you see a grey square below without any scrollbar.</p>
+<div class="grid"><div class="item"></div></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-004.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-horizontal-scrollbar.html">
+<meta name="assert" content="This test verifies that the horizontal scrollbar is shown on a grid with an item placed below the bottom of the grid container.">
+<link href="support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px 100px / 100px 100px;
+       width: 100px;
+       height: 100px;
+    }
+    .item {
+       grid-column: 1;
+       grid-row: 2;
+       width: 50px;
+       height: 50px;
+    }
+</style>
+<p>The test passes if you see a grey square below and only the horizontal scrollbar is visible.</p>
+<div class="grid"><div class="item"></div></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-005.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-vertical-scrollbar.html">
+<meta name="assert" content="This test verifies that the vertical scrollbar is shown on a grid with an item placed behind the right edge of the grid container.">
+<link href="support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px 100px / 100px 100px;
+       width: 100px;
+       height: 100px;
+    }
+    .item {
+       grid-column: 2;
+       grid-row: 1;
+       width: 50px;
+       height: 50px;
+    }
+</style>
+<p>The test passes if you see a grey square below and only the vertical scrollbar is visible.</p>
+<div class="grid"><div class="item"></div></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-006.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html">
+<meta name="assert" content="This test verifies that the scrollbars are shown on a grid with an item placed outside the boundaries of the grid container.">
+<link href="support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px 100px / 100px 100px;
+       width: 100px;
+       height: 100px;
+    }
+    .item {
+       grid-column: 2;
+       grid-row: 2;
+       width: 50px;
+       height: 50px;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="grid"><div class="item"></div></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-007.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box.html">
+<meta name="assert" content="This test verifies that the scrollbars are not shown on a grid with an item with 0px width even when it's placed in a grid area outside the boundaries of the grid container.">
+<link href="support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px 100px / 100px 100px;
+       width: 100px;
+       height: 100px;
+    }
+    .item {
+       grid-column: 2;
+       grid-row: 2;
+       width: 0px;
+       height: 50px;
+    }
+</style>
+<p>The test passes if you see a grey square below without any scrollbar.</p>
+<div class="grid"><div class="item"></div></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-008.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box.html">
+<meta name="assert" content="This test verifies that the scrollbars are not shown on a grid with an item with 0px height even when it's placed in a grid area outside the boundaries of the grid container.">
+<link href="support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px 100px / 100px 100px;
+       width: 100px;
+       height: 100px;
+    }
+    .item {
+       grid-column: 2;
+       grid-row: 2;
+       width: 50px;
+       height: 0px;
+    }
+</style>
+<p>The test passes if you see a grey square below without any scrollbar.</p>
+<div class="grid"><div class="item"></div></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-horizontal-scrollbar.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<style>
+    .box {
+       width: 100px;
+       height: 100px;
+       background-color: grey;
+    }
+    .item {
+       width: 150px;
+       height: 50px;
+    }
+</style>
+<p>The test passes if you see a grey square below and only the horizontal scrollbar is visible.</p>
+<div class="box"><div class="item"></div></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-scrollbars.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<style>
+    .box {
+       width: 100px;
+       height: 100px;
+       background-color: grey;
+    }
+    .item {
+       width: 150px;
+       height: 150px;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="box"><div class="item"></div></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-vertical-scrollbar.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<style>
+    .box {
+       width: 100px;
+       height: 100px;
+       background-color: grey;
+    }
+    .item {
+       width: 50px;
+       height: 150px;
+    }
+</style>
+<p>The test passes if you see a grey square below and only the vertical scrollbar is visible.</p>
+<div class="box"><div class="item"></div></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<style>
+    .box {
+       width: 100px;
+       height: 100px;
+       background-color: grey;
+    }
+</style>
+<p>The test passes if you see a grey square below without any scrollbar.</p>
+<div class="box"></div>