[css-grid] Properly align items next to collapsed tracks with gutters
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 29 Sep 2018 12:11:17 +0000 (12:11 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 29 Sep 2018 12:11:17 +0000 (12:11 +0000)
https://bugs.webkit.org/show_bug.cgi?id=190089

Patch by Oriol Brufau <obrufau@igalia.com> on 2018-09-29
Reviewed by Manuel Rego Casasnovas.

LayoutTests/imported/w3c:

Import grid-gutters-013.html and reference from WPT.

Test: imported/w3c/web-platform-tests/css/css-grid/alignment/grid-gutters-013.html

* web-platform-tests/css/css-grid/alignment/grid-gutters-013-expected.xht: Added.
* web-platform-tests/css/css-grid/alignment/grid-gutters-013.html: Added.

Source/WebCore:

gridAreaPositionForInFlowChild could return a wrong end position for
grid items adjacent to a collapsed track, because it didn't take into
account that gutters collapse in that case. Therefore, "center" or
"end" alignments displayed the item at the wrong position.

Test: imported/w3c/web-platform-tests/css/css-grid/alignment/grid-gutters-013.html

* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::gridAreaPositionForInFlowChild const):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@236643 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/imported/w3c/ChangeLog
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-gutters-013-expected.xht [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-gutters-013.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderGrid.cpp

index 46d4973..9f5abfe 100644 (file)
@@ -1,3 +1,17 @@
+2018-09-29  Oriol Brufau  <obrufau@igalia.com>
+
+        [css-grid] Properly align items next to collapsed tracks with gutters
+        https://bugs.webkit.org/show_bug.cgi?id=190089
+
+        Reviewed by Manuel Rego Casasnovas.
+
+        Import grid-gutters-013.html and reference from WPT.
+
+        Test: imported/w3c/web-platform-tests/css/css-grid/alignment/grid-gutters-013.html
+
+        * web-platform-tests/css/css-grid/alignment/grid-gutters-013-expected.xht: Added.
+        * web-platform-tests/css/css-grid/alignment/grid-gutters-013.html: Added.
+
 2018-09-28  Chris Dumez  <cdumez@apple.com>
 
         The return value of an OnBeforeUnloadEventHandler should always be coerced into a DOMString
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-gutters-013-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-gutters-013-expected.xht
new file mode 100644 (file)
index 0000000..05a1379
--- /dev/null
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: green;
+  height: 100px;
+  width: 100px;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+  <div></div>
+ </body>
+</html>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-gutters-013.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-gutters-013.html
new file mode 100644 (file)
index 0000000..e728147
--- /dev/null
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Gutters adjacent to collapsed tracks also collapse</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#repeat-notation">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<meta name="assert" content="This test checks that gutters adjacent to collapsed tracks don't reduce the space available for aligning adjacent grid items." />
+<style>
+    #grid {
+        display: grid;
+        margin-top: -50px;
+        margin-left: -50px;
+        width: 500px;
+        height: 500px;
+        grid-gap: 100px;
+        grid-template-rows: repeat(auto-fit, 200px);
+        grid-template-columns: repeat(auto-fit, 200px);
+        align-items: center;
+        justify-items: center;
+        background: linear-gradient(red, red) no-repeat 50px 50px / 100px 100px;
+    }
+
+    #grid > div {
+        background-color: green;
+        width: 50%;
+        height: 50%;
+    }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="grid">
+    <div></div>
+</div>
index 578ab05..1bc7c88 100644 (file)
@@ -1,3 +1,20 @@
+2018-09-29  Oriol Brufau  <obrufau@igalia.com>
+
+        [css-grid] Properly align items next to collapsed tracks with gutters
+        https://bugs.webkit.org/show_bug.cgi?id=190089
+
+        Reviewed by Manuel Rego Casasnovas.
+
+        gridAreaPositionForInFlowChild could return a wrong end position for
+        grid items adjacent to a collapsed track, because it didn't take into
+        account that gutters collapse in that case. Therefore, "center" or
+        "end" alignments displayed the item at the wrong position.
+
+        Test: imported/w3c/web-platform-tests/css/css-grid/alignment/grid-gutters-013.html
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::gridAreaPositionForInFlowChild const):
+
 2018-09-29  Alicia Boya García  <aboya@igalia.com>
 
         [GStreamer][MSE] Use GObject for GST_TRACE_OBJECT
index 99e0d61..e0ca1c2 100644 (file)
@@ -1514,9 +1514,13 @@ void RenderGrid::gridAreaPositionForInFlowChild(const RenderBox& child, GridTrac
     // The 'positions' vector includes distribution offset (because of content
     // alignment) and gutters so we need to subtract them to get the actual
     // end position for a given track (this does not have to be done for the
-    // last track as there are no more positions's elements after it).
-    if (span.endLine() < positions.size() - 1)
+    // last track as there are no more positions's elements after it, nor for
+    // collapsed tracks).
+    if (span.endLine() < positions.size() - 1
+        && !(m_grid.hasAutoRepeatEmptyTracks(direction)
+        && m_grid.isEmptyAutoRepeatTrack(direction, span.endLine()))) {
         end -= gridGap(direction) + gridItemOffset(direction);
+    }
 }
 
 void RenderGrid::gridAreaPositionForChild(const RenderBox& child, GridTrackSizingDirection direction, LayoutUnit& start, LayoutUnit& end) const