[CSS Grid Layout] The 'auto' height must be adapted to the item's margin.
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 29 Mar 2014 05:44:08 +0000 (05:44 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 29 Mar 2014 05:44:08 +0000 (05:44 +0000)
https://bugs.webkit.org/show_bug.cgi?id=130920

Patch by Javier Fernandez <jfernandez@igalia.com> on 2014-03-28
Reviewed by Darin Adler.

Source/WebCore:

Adding the grid-item's marginLogicalHeight to the used breadth when computing
content based grid-track sizes.

Test: fast/css-grid-layout/grid-item-margin-auto-columns-rows.html

* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::logicalContentHeightForChild):

LayoutTests:

* fast/css-grid-layout/grid-item-margin-auto-columns-rows-expected.txt: Added.
* fast/css-grid-layout/grid-item-margin-auto-columns-rows.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderGrid.cpp

index 68e78ab..cf0e5b7 100644 (file)
@@ -1,3 +1,13 @@
+2014-03-28  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Grid Layout] The 'auto' height must be adapted to the item's margin.
+        https://bugs.webkit.org/show_bug.cgi?id=130920
+
+        Reviewed by Darin Adler.
+
+        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-expected.txt: Added.
+        * fast/css-grid-layout/grid-item-margin-auto-columns-rows.html: Added.
+
 2014-03-28  James Craig  <jcraig@apple.com>
 
         Web Inspector: AXI: support for live regions
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-expected.txt b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-expected.txt
new file mode 100644 (file)
index 0000000..426e17c
--- /dev/null
@@ -0,0 +1,17 @@
+This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows.html b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows.html
new file mode 100644 (file)
index 0000000..992db90
--- /dev/null
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<script src="../../resources/check-layout.js"></script>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+    -webkit-grid-template-rows: auto auto;
+    -webkit-grid-template-columns: auto auto;
+    width: 200px;
+}
+
+.gridItem {
+    width: 20px;
+    height: 40px;
+}
+
+.marginTop {
+    margin-top: 20px;
+}
+
+.marginBottom {
+    margin-bottom: 20px;
+}
+</style>
+</head>
+<body onload="checkLayout('.grid')">
+
+<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>
+
+<div style="position: relative">
+    <div class="grid" data-expected-width="200" data-expected-height="120">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem firstRowSecondColumn"></div>
+        <div class="gridItem marginBottom secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid" data-expected-width="200" data-expected-height="100">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem marginBottom firstRowSecondColumn"></div>
+        <div class="gridItem secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid verticalRL" data-expected-width="200" data-expected-height="120">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem firstRowSecondColumn"></div>
+        <div class="gridItem secondRowFirstColumn"></div>
+        <div class="gridItem marginBottom secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid verticalRL" data-expected-width="200" data-expected-height="100">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem firstRowSecondColumn"></div>
+        <div class="gridItem marginBottom secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid verticalLR" data-expected-width="200" data-expected-height="120">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem firstRowSecondColumn"></div>
+        <div class="gridItem secondRowFirstColumn"></div>
+        <div class="gridItem marginBottom secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid verticalLR" data-expected-width="200" data-expected-height="100">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem firstRowSecondColumn"></div>
+        <div class="gridItem marginBottom secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid horizontalBT" data-expected-width="200" data-expected-height="120">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem firstRowSecondColumn"></div>
+        <div class="gridItem marginBottom secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid horizontalBT" data-expected-width="200" data-expected-height="100">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem marginBottom firstRowSecondColumn"></div>
+        <div class="gridItem secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<!-- rtl direction -->
+<div style="position: relative">
+    <div class="grid directionRTL" data-expected-width="200" data-expected-height="120">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem firstRowSecondColumn"></div>
+        <div class="gridItem marginBottom secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid directionRTL" data-expected-width="200" data-expected-height="100">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem marginBottom firstRowSecondColumn"></div>
+        <div class="gridItem secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid verticalRL directionRTL" data-expected-width="200" data-expected-height="120">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem firstRowSecondColumn"></div>
+        <div class="gridItem secondRowFirstColumn"></div>
+        <div class="gridItem marginBottom secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid verticalRL directionRTL" data-expected-width="200" data-expected-height="100">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem firstRowSecondColumn"></div>
+        <div class="gridItem marginBottom secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid verticalLR directionRTL" data-expected-width="200" data-expected-height="120">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem firstRowSecondColumn"></div>
+        <div class="gridItem secondRowFirstColumn"></div>
+        <div class="gridItem marginBottom secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid verticalLR directionRTL" data-expected-width="200" data-expected-height="100">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem firstRowSecondColumn"></div>
+        <div class="gridItem marginBottom secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid horizontalBT directionRTL" data-expected-width="200" data-expected-height="120">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem firstRowSecondColumn"></div>
+        <div class="gridItem marginBottom secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid horizontalBT directionRTL" data-expected-width="200" data-expected-height="100">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem marginBottom firstRowSecondColumn"></div>
+        <div class="gridItem secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+</body>
+</html>
index f11f9c9..e6e7f61 100644 (file)
@@ -1,3 +1,18 @@
+2014-03-28  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Grid Layout] The 'auto' height must be adapted to the item's margin.
+        https://bugs.webkit.org/show_bug.cgi?id=130920
+
+        Reviewed by Darin Adler.
+
+        Adding the grid-item's marginLogicalHeight to the used breadth when computing
+        content based grid-track sizes.
+
+        Test: fast/css-grid-layout/grid-item-margin-auto-columns-rows.html
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::logicalContentHeightForChild):
+
 2014-03-28  James Craig  <jcraig@apple.com>
 
         Web Inspector: AXI: support for live regions
index 3442ade..1b6d0ab 100644 (file)
@@ -494,7 +494,7 @@ LayoutUnit RenderGrid::logicalContentHeightForChild(RenderBox* child, Vector<Gri
     // what we are interested in here. Thus we need to set the override logical height to -1 (no possible resolution).
     child->setOverrideContainingBlockContentLogicalHeight(-1);
     child->layoutIfNeeded();
-    return child->logicalHeight();
+    return child->logicalHeight() + child->marginLogicalHeight();
 }
 
 LayoutUnit RenderGrid::minContentForChild(RenderBox* child, GridTrackSizingDirection direction, Vector<GridTrack>& columnTracks)