[css-grid] Percentage columns shouldn't include border and padding
authorrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 9 Sep 2015 11:23:07 +0000 (11:23 +0000)
committerrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 9 Sep 2015 11:23:07 +0000 (11:23 +0000)
https://bugs.webkit.org/show_bug.cgi?id=148978

Reviewed by Sergio Villar Senin.

Source/WebCore:

Subtract border and padding when we're calculating the breadth of the
columns in LayoutGrid::computeUsedBreadthOfSpecifiedLength().

Added test to check the behavior for both columns and rows.

Test: fast/css-grid-layout/grid-percent-track-margin-border-padding.html

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

LayoutTests:

* fast/css-grid-layout/grid-percent-track-margin-border-padding-expected.txt: Added.
* fast/css-grid-layout/grid-percent-track-margin-border-padding.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-percent-track-margin-border-padding-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-percent-track-margin-border-padding.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderGrid.cpp

index 30d5d7e..ec2778c 100644 (file)
@@ -1,3 +1,13 @@
+2015-09-09  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [css-grid] Percentage columns shouldn't include border and padding
+        https://bugs.webkit.org/show_bug.cgi?id=148978
+
+        Reviewed by Sergio Villar Senin.
+
+        * fast/css-grid-layout/grid-percent-track-margin-border-padding-expected.txt: Added.
+        * fast/css-grid-layout/grid-percent-track-margin-border-padding.html: Added.
+
 2015-09-09  Chris Dumez  <cdumez@apple.com>
 
         HTMLTableElement.tHead / tFoot / caption should be nullable
diff --git a/LayoutTests/fast/css-grid-layout/grid-percent-track-margin-border-padding-expected.txt b/LayoutTests/fast/css-grid-layout/grid-percent-track-margin-border-padding-expected.txt
new file mode 100644 (file)
index 0000000..4a5744e
--- /dev/null
@@ -0,0 +1,10 @@
+This test checks that percentage tracks ignore grid container's margin, border and padding in order to calculate their breadths.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-percent-track-margin-border-padding.html b/LayoutTests/fast/css-grid-layout/grid-percent-track-margin-border-padding.html
new file mode 100644 (file)
index 0000000..42832c1
--- /dev/null
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+    width: 100px;
+    height: 100px;
+    -webkit-grid-template-columns: 20% 50% 30%;
+    -webkit-grid-template-rows: 40% 60%;
+}
+
+.margin {
+    margin: 10px;
+}
+
+.border {
+    border: 5px solid black;
+}
+
+.padding {
+    padding: 20px;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+</head>
+<body onload="checkLayout('.grid');">
+    <p>This test checks that percentage tracks ignore grid container's margin, border and padding in order to calculate their breadths.</p>
+
+    <div class="grid">
+        <div data-expected-width="20" data-expected-height="40"></div>
+        <div data-expected-width="50" data-expected-height="40"></div>
+        <div data-expected-width="30" data-expected-height="40"></div>
+        <div data-expected-width="20" data-expected-height="60"></div>
+        <div data-expected-width="50" data-expected-height="60"></div>
+        <div data-expected-width="30" data-expected-height="60"></div>
+    </div>
+
+    <div class="grid margin">
+        <div data-expected-width="20" data-expected-height="40"></div>
+        <div data-expected-width="50" data-expected-height="40"></div>
+        <div data-expected-width="30" data-expected-height="40"></div>
+        <div data-expected-width="20" data-expected-height="60"></div>
+        <div data-expected-width="50" data-expected-height="60"></div>
+        <div data-expected-width="30" data-expected-height="60"></div>
+    </div>
+
+    <div class="grid border">
+        <div data-expected-width="20" data-expected-height="40"></div>
+        <div data-expected-width="50" data-expected-height="40"></div>
+        <div data-expected-width="30" data-expected-height="40"></div>
+        <div data-expected-width="20" data-expected-height="60"></div>
+        <div data-expected-width="50" data-expected-height="60"></div>
+        <div data-expected-width="30" data-expected-height="60"></div>
+    </div>
+
+    <div class="grid padding">
+        <div data-expected-width="20" data-expected-height="40"></div>
+        <div data-expected-width="50" data-expected-height="40"></div>
+        <div data-expected-width="30" data-expected-height="40"></div>
+        <div data-expected-width="20" data-expected-height="60"></div>
+        <div data-expected-width="50" data-expected-height="60"></div>
+        <div data-expected-width="30" data-expected-height="60"></div>
+    </div>
+
+    <div class="grid margin border">
+        <div data-expected-width="20" data-expected-height="40"></div>
+        <div data-expected-width="50" data-expected-height="40"></div>
+        <div data-expected-width="30" data-expected-height="40"></div>
+        <div data-expected-width="20" data-expected-height="60"></div>
+        <div data-expected-width="50" data-expected-height="60"></div>
+        <div data-expected-width="30" data-expected-height="60"></div>
+    </div>
+
+    <div class="grid margin padding">
+        <div data-expected-width="20" data-expected-height="40"></div>
+        <div data-expected-width="50" data-expected-height="40"></div>
+        <div data-expected-width="30" data-expected-height="40"></div>
+        <div data-expected-width="20" data-expected-height="60"></div>
+        <div data-expected-width="50" data-expected-height="60"></div>
+        <div data-expected-width="30" data-expected-height="60"></div>
+    </div>
+
+    <div class="grid border padding">
+        <div data-expected-width="20" data-expected-height="40"></div>
+        <div data-expected-width="50" data-expected-height="40"></div>
+        <div data-expected-width="30" data-expected-height="40"></div>
+        <div data-expected-width="20" data-expected-height="60"></div>
+        <div data-expected-width="50" data-expected-height="60"></div>
+        <div data-expected-width="30" data-expected-height="60"></div>
+    </div>
+
+    <div class="grid margin border padding">
+        <div data-expected-width="20" data-expected-height="40"></div>
+        <div data-expected-width="50" data-expected-height="40"></div>
+        <div data-expected-width="30" data-expected-height="40"></div>
+        <div data-expected-width="20" data-expected-height="60"></div>
+        <div data-expected-width="50" data-expected-height="60"></div>
+        <div data-expected-width="30" data-expected-height="60"></div>
+    </div>
+</body>
+</html>
index e5b0efe..b76ea44 100644 (file)
@@ -1,3 +1,20 @@
+2015-09-09  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [css-grid] Percentage columns shouldn't include border and padding
+        https://bugs.webkit.org/show_bug.cgi?id=148978
+
+        Reviewed by Sergio Villar Senin.
+
+        Subtract border and padding when we're calculating the breadth of the
+        columns in LayoutGrid::computeUsedBreadthOfSpecifiedLength().
+
+        Added test to check the behavior for both columns and rows.
+
+        Test: fast/css-grid-layout/grid-percent-track-margin-border-padding.html
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::computeUsedBreadthOfSpecifiedLength):
+
 2015-09-09  Chris Dumez  <cdumez@apple.com>
 
         HTMLTableElement.tHead / tFoot / caption should be nullable
index 7983c7f..ebad131 100644 (file)
@@ -451,7 +451,7 @@ LayoutUnit RenderGrid::computeUsedBreadthOfSpecifiedLength(GridTrackSizingDirect
 {
     ASSERT(trackLength.isSpecified());
     if (direction == ForColumns)
-        return valueForLength(trackLength, logicalWidth());
+        return valueForLength(trackLength, logicalWidth() - borderAndPaddingLogicalWidth());
     return valueForLength(trackLength, computeContentLogicalHeight(MainOrPreferredSize, style().logicalHeight(), Nullopt).valueOr(0));
 }