[css-grid] margin-left:auto and margin-top:auto discards the margin on opposite side
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 3 Dec 2015 17:57:13 +0000 (17:57 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 3 Dec 2015 17:57:13 +0000 (17:57 +0000)
https://bugs.webkit.org/show_bug.cgi?id=151802

Reviewed by Sergio Villar Senin.

Source/WebCore:

When resolving auto margins so that they use the available space, in the
corresponding axis, we must consider that there might be other specified
margins. Such margins must account to determine the actual available space.

Test: fast/css-grid-layout/grid-item-auto-margins-must-respect-specified-margins.html

* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::updateAutoMarginsInRowAxisIfNeeded):
(WebCore::RenderGrid::updateAutoMarginsInColumnAxisIfNeeded):

LayoutTests:

Tests to verify the specified margins account for determining the available space for
auto-margins alignment.

* fast/css-grid-layout/grid-item-auto-margins-must-respect-specified-margins-expected.txt: Added.
* fast/css-grid-layout/grid-item-auto-margins-must-respect-specified-margins.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-item-auto-margins-must-respect-specified-margins-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-auto-margins-must-respect-specified-margins.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderGrid.cpp

index 58c18d3..38a03c6 100644 (file)
@@ -1,3 +1,16 @@
+2015-12-03  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-grid] margin-left:auto and margin-top:auto discards the margin on opposite side
+        https://bugs.webkit.org/show_bug.cgi?id=151802
+
+        Reviewed by Sergio Villar Senin.
+
+        Tests to verify the specified margins account for determining the available space for
+        auto-margins alignment.
+
+        * fast/css-grid-layout/grid-item-auto-margins-must-respect-specified-margins-expected.txt: Added.
+        * fast/css-grid-layout/grid-item-auto-margins-must-respect-specified-margins.html: Added.
+
 2015-12-03  Ryan Haddad  <ryanhaddad@apple.com>
 
         Rebaselining svg/custom/bug78807.svg since actual results now match Mac expectations
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-must-respect-specified-margins-expected.txt b/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-must-respect-specified-margins-expected.txt
new file mode 100644 (file)
index 0000000..ed5c710
--- /dev/null
@@ -0,0 +1,23 @@
+This test checks auto-margins alignment respects the specified margins.
+
+margin: 5px 7px 11px 13px | margin-left: auto
+
+PASS
+margin: 5px 7px 11px 13px | margin-right: auto
+
+PASS
+margin: 5px 7px 11px 13px | margin-left: auto and margin-right: auto
+
+PASS
+margin: 5px 7px 11px 13px | margin-top: auto
+
+PASS
+margin: 5px 7px 11px 13px | margin-bottom: auto
+
+PASS
+margin: 5px 7px 11px 13px | margin-bottom: auto and margin-top: auto
+
+PASS
+margin: 5px 7px 11px 13px | margin: auto
+
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-must-respect-specified-margins.html b/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-must-respect-specified-margins.html
new file mode 100644 (file)
index 0000000..ac0fb93
--- /dev/null
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+body {
+    margin: 0;
+}
+
+.grid {
+    -webkit-grid-template-columns: 100px;
+    -webkit-grid-template-rows: 100px;
+    width: -webkit-fit-content;
+    position: relative;
+}
+
+.item {
+    width: 20px;
+    height: 40px;
+    margin: 5px 7px 11px 13px;
+    background-color: lime;
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.autoMarginTop { margin-top: auto; }
+.autoMarginRight { margin-right: auto; }
+.autoMarginBottom { margin-bottom: auto; }
+.autoMarginLeft { margin-left: auto; }
+.autoMargin { margin: auto; }
+</style>
+<body onload="checkLayout('.grid')">
+<div id=log></div>
+
+<p>This test checks auto-margins alignment respects the specified margins.</p>
+
+<p>margin: 5px 7px 11px 13px | <b>margin-left: auto</b> </p>
+<div class="grid">
+    <div class="item autoMarginLeft" data-offset-x="73" data-offset-y="5"></div>
+</div>
+
+<p>margin: 5px 7px 11px 13px | <b>margin-right: auto</b> </p>
+<div class="grid">
+    <div class="item autoMarginRight" data-offset-x="13" data-offset-y="5"></div>
+</div>
+
+<p>margin: 5px 7px 11px 13px | <b>margin-left: auto</b> and <b>margin-right: auto</b></p>
+<div class="grid">
+    <div class="item autoMarginLeft autoMarginRight" data-offset-x="40" data-offset-y="5"></div>
+</div>
+
+<p>margin: 5px 7px 11px 13px | <b>margin-top: auto</b> </p>
+<div class="grid">
+    <div class="item autoMarginTop" data-offset-x="13" data-offset-y="49"></div>
+</div>
+
+<p>margin: 5px 7px 11px 13px | <b>margin-bottom: auto</b> </p>
+<div class="grid">
+    <div class="item autoMarginBottom" data-offset-x="13" data-offset-y="5"></div>
+</div>
+
+<p>margin: 5px 7px 11px 13px | <b>margin-bottom: auto</b> and <b>margin-top: auto</b></p>
+<div class="grid">
+    <div class="item autoMarginTop autoMarginBottom" data-offset-x="13" data-offset-y="30"></div>
+</div>
+
+<p>margin: 5px 7px 11px 13px | <b>margin: auto</b></p>
+<div class="grid">
+    <div class="item autoMargin" data-offset-x="40" data-offset-y="30"></div>
+</div>
+</body>
index 8c0d753..443502a 100644 (file)
@@ -1,3 +1,20 @@
+2015-12-03  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-grid] margin-left:auto and margin-top:auto discards the margin on opposite side
+        https://bugs.webkit.org/show_bug.cgi?id=151802
+
+        Reviewed by Sergio Villar Senin.
+
+        When resolving auto margins so that they use the available space, in the
+        corresponding axis, we must consider that there might be other specified
+        margins. Such margins must account to determine the actual available space.
+
+        Test: fast/css-grid-layout/grid-item-auto-margins-must-respect-specified-margins.html
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::updateAutoMarginsInRowAxisIfNeeded):
+        (WebCore::RenderGrid::updateAutoMarginsInColumnAxisIfNeeded):
+
 2015-12-02  Antti Koivisto  <antti@apple.com>
 
         Move ResourceLoadScheduler to WebKit1
index 458c923..5ab9c99 100644 (file)
@@ -1688,7 +1688,7 @@ void RenderGrid::updateAutoMarginsInRowAxisIfNeeded(RenderBox& child)
 {
     ASSERT(!child.isOutOfFlowPositioned());
 
-    LayoutUnit availableAlignmentSpace = child.overrideContainingBlockContentLogicalWidth().value() - child.logicalWidth();
+    LayoutUnit availableAlignmentSpace = child.overrideContainingBlockContentLogicalWidth().value() - child.logicalWidth() - child.marginLogicalWidth();
     if (availableAlignmentSpace <= 0)
         return;
 
@@ -1710,7 +1710,7 @@ void RenderGrid::updateAutoMarginsInColumnAxisIfNeeded(RenderBox& child)
 {
     ASSERT(!child.isOutOfFlowPositioned());
 
-    LayoutUnit availableAlignmentSpace = child.overrideContainingBlockContentLogicalHeight().value() - child.logicalHeight();
+    LayoutUnit availableAlignmentSpace = child.overrideContainingBlockContentLogicalHeight().value() - child.logicalHeight() - child.marginLogicalHeight();
     if (availableAlignmentSpace <= 0)
         return;