[CSS Grid Layout] Wrong computed style for named grid lines in implicit tracks

https://bugs.webkit.org/show_bug.cgi?id=144449

Reviewed by Sergio Villar Senin.

Source/WebCore:

If there're implicit tracks then trackPositions is bigger than
trackSizes, so we need to use the proper index to append the trailing
<ident>s in valueForGridTrackList().

Test: fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::valueForGridTrackList):

LayoutTests:

* fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks-expected.txt: Added.
* fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html: Added.

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

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 280792a..9305f41 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,13 @@
+2015-05-04  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [CSS Grid Layout] Wrong computed style for named grid lines in implicit tracks
+        https://bugs.webkit.org/show_bug.cgi?id=144449
+
+        Reviewed by Sergio Villar Senin.
+
+        * fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks-expected.txt: Added.
+        * fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html: Added.
+
 2015-05-02  Simon Fraser  <simon.fraser@apple.com>
 
         Assertion failure (!needsLayout()) loading inkedmag.com

diff --git a/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks-expected.txt b/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks-expected.txt
new file mode 100644 (file)
index 0000000..f54240a
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks-expected.txt
@@ -0,0 +1,56 @@
+Test that computed style for grid-template-columns and grid-template-rows works as expected with named grid lines and implicit tracks
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS window.getComputedStyle(gridOneColumnSingle, '').getPropertyValue('-webkit-grid-template-columns') is "(a) 200px (b)"
+PASS window.getComputedStyle(gridOneColumnSingle, '').getPropertyValue('-webkit-grid-template-rows') is "(x) 50px (y) 50px 50px 50px"
+PASS window.getComputedStyle(gridTwoColumnsSingle, '').getPropertyValue('-webkit-grid-template-columns') is "(a) 200px (b) 150px"
+PASS window.getComputedStyle(gridTwoColumnsSingle, '').getPropertyValue('-webkit-grid-template-rows') is "(x) 50px (y) 50px"
+PASS window.getComputedStyle(gridThreeColumnsSingle, '').getPropertyValue('-webkit-grid-template-columns') is "(a) 200px (b) 150px 100px"
+PASS window.getComputedStyle(gridThreeColumnsSingle, '').getPropertyValue('-webkit-grid-template-rows') is "(x) 50px (y) 50px"
+PASS window.getComputedStyle(gridFourColumnsSingle, '').getPropertyValue('-webkit-grid-template-columns') is "(a) 200px (b) 150px 100px 50px"
+PASS window.getComputedStyle(gridFourColumnsSingle, '').getPropertyValue('-webkit-grid-template-rows') is "(x) 50px (y)"
+PASS window.getComputedStyle(gridOneColumnMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "(a b c) 200px (d e)"
+PASS window.getComputedStyle(gridOneColumnMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "(x y z) 50px (v w) 50px 50px 50px"
+PASS window.getComputedStyle(gridTwoColumnsMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "(a b c) 200px (d e) 150px"
+PASS window.getComputedStyle(gridTwoColumnsMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "(x y z) 50px (v w) 50px"
+PASS window.getComputedStyle(gridThreeColumnsMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "(a b c) 200px (d e) 150px 100px"
+PASS window.getComputedStyle(gridThreeColumnsMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "(x y z) 50px (v w) 50px"
+PASS window.getComputedStyle(gridFourColumnsMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "(a b c) 200px (d e) 150px 100px 50px"
+PASS window.getComputedStyle(gridFourColumnsMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "(x y z) 50px (v w)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+XXXX
+XXX
+XX
+X
+XXXX
+XXX
+XX
+X
+XXXX
+XXX
+XX
+X
+XXXX
+XXX
+XX
+X
+XXXX
+XXX
+XX
+X
+XXXX
+XXX
+XX
+X
+XXXX
+XXX
+XX
+X
+XXXX
+XXX
+XX
+X

diff --git a/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html b/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html
new file mode 100644 (file)
index 0000000..ee84d56
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html
@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+    font: 50px/1 Ahem;
+}
+
+.singleNamedGridLines {
+    -webkit-grid-template-columns: (a) auto (b);
+    -webkit-grid-template-rows: (x) auto (y);
+}
+
+.multipleNamedGridLines {
+    -webkit-grid-template-columns: (a b c) auto (d e);
+    -webkit-grid-template-rows: (x y z) auto (v w);
+}
+</style>
+<script src="../../resources/js-test.js"></script>
+
+<div class="grid singleNamedGridLines" id="gridOneColumnSingle">
+    <div>XXXX</div>
+    <div>XXX</div>
+    <div>XX</div>
+    <div>X</div>
+</div>
+
+<div class="grid singleNamedGridLines" id="gridTwoColumnsSingle">
+    <div class="firstRowAutoColumn">XXXX</div>
+    <div class="firstRowAutoColumn">XXX</div>
+    <div>XX</div>
+    <div>X</div>
+</div>
+
+<div class="grid singleNamedGridLines" id="gridThreeColumnsSingle">
+    <div class="firstRowAutoColumn">XXXX</div>
+    <div class="firstRowAutoColumn">XXX</div>
+    <div class="firstRowAutoColumn">XX</div>
+    <div>X</div>
+</div>
+
+<div class="grid singleNamedGridLines" id="gridFourColumnsSingle">
+    <div class="firstRowAutoColumn">XXXX</div>
+    <div class="firstRowAutoColumn">XXX</div>
+    <div class="firstRowAutoColumn">XX</div>
+    <div class="firstRowAutoColumn">X</div>
+</div>
+
+<div class="grid multipleNamedGridLines" id="gridOneColumnMultiple">
+    <div>XXXX</div>
+    <div>XXX</div>
+    <div>XX</div>
+    <div>X</div>
+</div>
+
+<div class="grid multipleNamedGridLines" id="gridTwoColumnsMultiple">
+    <div class="firstRowAutoColumn">XXXX</div>
+    <div class="firstRowAutoColumn">XXX</div>
+    <div>XX</div>
+    <div>X</div>
+</div>
+
+<div class="grid multipleNamedGridLines" id="gridThreeColumnsMultiple">
+    <div class="firstRowAutoColumn">XXXX</div>
+    <div class="firstRowAutoColumn">XXX</div>
+    <div class="firstRowAutoColumn">XX</div>
+    <div>X</div>
+</div>
+
+<div class="grid multipleNamedGridLines" id="gridFourColumnsMultiple">
+    <div class="firstRowAutoColumn">XXXX</div>
+    <div class="firstRowAutoColumn">XXX</div>
+    <div class="firstRowAutoColumn">XX</div>
+    <div class="firstRowAutoColumn">X</div>
+</div>
+
+<script src="resources/grid-definitions-parsing-utils.js"></script>
+<script>
+    description('Test that computed style for grid-template-columns and grid-template-rows works as expected with named grid lines and implicit tracks');
+
+    testGridTemplatesValues(document.getElementById("gridOneColumnSingle"), "(a) 200px (b)", "(x) 50px (y) 50px 50px 50px");
+    testGridTemplatesValues(document.getElementById("gridTwoColumnsSingle"), "(a) 200px (b) 150px", "(x) 50px (y) 50px");
+    testGridTemplatesValues(document.getElementById("gridThreeColumnsSingle"), "(a) 200px (b) 150px 100px", "(x) 50px (y) 50px");
+    testGridTemplatesValues(document.getElementById("gridFourColumnsSingle"), "(a) 200px (b) 150px 100px 50px", "(x) 50px (y)");
+
+    testGridTemplatesValues(document.getElementById("gridOneColumnMultiple"), "(a b c) 200px (d e)", "(x y z) 50px (v w) 50px 50px 50px");
+    testGridTemplatesValues(document.getElementById("gridTwoColumnsMultiple"), "(a b c) 200px (d e) 150px", "(x y z) 50px (v w) 50px");
+    testGridTemplatesValues(document.getElementById("gridThreeColumnsMultiple"), "(a b c) 200px (d e) 150px 100px", "(x y z) 50px (v w) 50px");
+    testGridTemplatesValues(document.getElementById("gridFourColumnsMultiple"), "(a b c) 200px (d e) 150px 100px 50px", "(x y z) 50px (v w)");
+</script>

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index b6f997b..8b0fd00 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,19 @@
+2015-05-04  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [CSS Grid Layout] Wrong computed style for named grid lines in implicit tracks
+        https://bugs.webkit.org/show_bug.cgi?id=144449
+
+        Reviewed by Sergio Villar Senin.
+
+        If there're implicit tracks then trackPositions is bigger than
+        trackSizes, so we need to use the proper index to append the trailing
+        <ident>s in valueForGridTrackList().
+
+        Test: fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::valueForGridTrackList):
+
 2015-05-03  Gyuyoung Kim  <gyuyoung.kim@webkit.org>
 
         Purge PassRefPtr in WebCore/html

diff --git a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
index 2f705a6..2f8b1aa 100644 (file)
--- a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
+++ b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
@@ -1053,6 +1053,7 @@ static Ref<CSSValue> valueForGridTrackList(GridTrackSizingDirection direction, R
     }
 
     auto list = CSSValueList::createSpaceSeparated();
+    unsigned insertionIndex;
     if (isRenderGrid) {
         const Vector<LayoutUnit>& trackPositions = direction == ForColumns ? downcast<RenderGrid>(*renderer).columnPositions() : downcast<RenderGrid>(*renderer).rowPositions();
         // There are at least #tracks + 1 grid lines (trackPositions). Apart from that, the grid container can generate implicit grid tracks,
@@ -1063,15 +1064,17 @@ static Ref<CSSValue> valueForGridTrackList(GridTrackSizingDirection direction, R
             addValuesForNamedGridLinesAtIndex(orderedNamedGridLines, i, list.get());
             list.get().append(zoomAdjustedPixelValue(trackPositions[i + 1] - trackPositions[i], style));
         }
+        insertionIndex = trackPositions.size() - 1;
     } else {
         for (unsigned i = 0; i < trackSizes.size(); ++i) {
             addValuesForNamedGridLinesAtIndex(orderedNamedGridLines, i, list.get());
             list.get().append(specifiedValueForGridTrackSize(trackSizes[i], style));
         }
+        insertionIndex = trackSizes.size();
     }
 
     // Those are the trailing <ident>* allowed in the syntax.
-    addValuesForNamedGridLinesAtIndex(orderedNamedGridLines, trackSizes.size(), list.get());
+    addValuesForNamedGridLinesAtIndex(orderedNamedGridLines, insertionIndex, list.get());
     return WTF::move(list);
 }