Title: [141963] trunk
Revision
141963
Author
[email protected]
Date
2013-02-05 19:01:11 -0800 (Tue, 05 Feb 2013)

Log Message

[CSS Grid Layout] Grid item's logical height is not properly recomputed after -webkit-grid-column / -webkit-grid-row changes
https://bugs.webkit.org/show_bug.cgi?id=108975

Reviewed by Tony Chang.

Source/WebCore:

Test: fast/css-grid-layout/implicit-position-dynamic-change.html

* rendering/RenderBox.cpp:
(WebCore::RenderBox::clearContainingBlockOverrideSize):
(WebCore::RenderBox::clearOverrideContainingBlockContentLogicalHeight):
* rendering/RenderBox.h:
Added clearOverrideContainingBlockContentLogicalHeight and updated clearContainingBlockOverrideSize
to use it.

* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::minContentForChild):
(WebCore::RenderGrid::maxContentForChild):
Added missing clearContainingBlockOverrideSize to ensure we don't use a previous layout's override.

LayoutTests:

* fast/css-grid-layout/implicit-position-dynamic-change-expected.txt: Added.
* fast/css-grid-layout/implicit-position-dynamic-change.html: Added.

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (141962 => 141963)


--- trunk/LayoutTests/ChangeLog	2013-02-06 02:53:55 UTC (rev 141962)
+++ trunk/LayoutTests/ChangeLog	2013-02-06 03:01:11 UTC (rev 141963)
@@ -1,3 +1,13 @@
+2013-02-05  Julien Chaffraix  <[email protected]>
+
+        [CSS Grid Layout] Grid item's logical height is not properly recomputed after -webkit-grid-column / -webkit-grid-row changes
+        https://bugs.webkit.org/show_bug.cgi?id=108975
+
+        Reviewed by Tony Chang.
+
+        * fast/css-grid-layout/implicit-position-dynamic-change-expected.txt: Added.
+        * fast/css-grid-layout/implicit-position-dynamic-change.html: Added.
+
 2013-02-05  Kent Tamura  <[email protected]>
 
         INPUT_MULTIPLE_FIELDS_UI: Read-only inputs should be focusable

Added: trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change-expected.txt (0 => 141963)


--- trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change-expected.txt	2013-02-06 03:01:11 UTC (rev 141963)
@@ -0,0 +1,46 @@
+This test checks that we properly recompute our grid tracks' sizes when a grid item changes its -webkit-grid-row or -webkit-grid-column.
+
+XXXX XXXX XXXX
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+XXXXXX XXXXXX
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS

Added: trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html (0 => 141963)


--- trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html	2013-02-06 03:01:11 UTC (rev 141963)
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="" rel="stylesheet">
+<style>
+.gridFixedContent {
+    -webkit-grid-columns: 50px minmax(-webkit-min-content, 50px) minmax(-webkit-max-content, 50px) minmax(50px, -webkit-min-content);
+    -webkit-grid-rows: 70px minmax(-webkit-max-content, 70px) minmax(50px, -webkit-min-content) minmax(65px, -webkit-max-content);
+}
+
+/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
+.constrainedContainer {
+    width: 10px;
+    height: 10px;
+}
+
+.sizedToGridArea {
+    font: 10px/1 Ahem;
+    /* Make us fit our grid area. */
+    width: 100%;
+    height: 100%;
+}
+</style>
+<script src=""
+<script>
+function testPosition(gridElementID, position, size)
+{
+    gridItem = document.getElementById(gridElementID).firstChild;
+    gridItem.style.webkitGridColumn = position.column;
+    gridItem.style.webkitGridRow = position.row;
+    gridItem.setAttribute("data-expected-width", size.width);
+    gridItem.setAttribute("data-expected-height", size.height);
+    checkLayout("#" + gridElementID);
+}
+
+function updateImplicitGridColumn()
+{
+    var gridItem = document.getElementById("constrainedGrid").firstChild;
+    testPosition("constrainedGrid", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
+    testPosition("constrainedGrid", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '30' });
+    testPosition("constrainedGrid", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
+    testPosition("constrainedGrid", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
+    testPosition("constrainedGrid", { 'column': '1', 'row': '5' }, { 'width': '50', 'height': '30' });
+
+    testPosition("constrainedGrid", { 'column': '2', 'row': '1' }, { 'width': '40', 'height': '70' });
+    testPosition("constrainedGrid", { 'column': '2', 'row': '2' }, { 'width': '40', 'height': '30' });
+    testPosition("constrainedGrid", { 'column': '2', 'row': '3' }, { 'width': '40', 'height': '50' });
+    testPosition("constrainedGrid", { 'column': '2', 'row': '4' }, { 'width': '40', 'height': '65' });
+    testPosition("constrainedGrid", { 'column': '2', 'row': '5' }, { 'width': '40', 'height': '30' });
+
+    testPosition("constrainedGrid", { 'column': '3', 'row': '1' }, { 'width': '140', 'height': '70' });
+    testPosition("constrainedGrid", { 'column': '3', 'row': '2' }, { 'width': '140', 'height': '10' });
+    testPosition("constrainedGrid", { 'column': '3', 'row': '3' }, { 'width': '140', 'height': '50' });
+    testPosition("constrainedGrid", { 'column': '3', 'row': '4' }, { 'width': '140', 'height': '65' });
+    testPosition("constrainedGrid", { 'column': '3', 'row': '5' }, { 'width': '140', 'height': '10' });
+
+    testPosition("constrainedGrid", { 'column': '4', 'row': '1' }, { 'width': '50', 'height': '70' });
+    testPosition("constrainedGrid", { 'column': '4', 'row': '2' }, { 'width': '50', 'height': '30' });
+    testPosition("constrainedGrid", { 'column': '4', 'row': '3' }, { 'width': '50', 'height': '50' });
+    testPosition("constrainedGrid", { 'column': '4', 'row': '4' }, { 'width': '50', 'height': '65' });
+    testPosition("constrainedGrid", { 'column': '4', 'row': '5' }, { 'width': '50', 'height': '30' });
+
+    testPosition("constrainedGrid", { 'column': '10', 'row': '15' }, { 'width': '40', 'height': '30' });
+
+    gridItem = document.getElementById("unconstrainedGrid").firstChild;
+    testPosition("unconstrainedGrid", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
+    testPosition("unconstrainedGrid", { 'column': '2', 'row': '1' }, { 'width': '60', 'height': '70' });
+    testPosition("unconstrainedGrid", { 'column': '3', 'row': '1' }, { 'width': '130', 'height': '70' });
+    testPosition("unconstrainedGrid", { 'column': '4', 'row': '1' }, { 'width': '60', 'height': '70' });
+    testPosition("unconstrainedGrid", { 'column': '5', 'row': '1' }, { 'width': '130', 'height': '70' });
+
+    testPosition("unconstrainedGrid", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '70' });
+    testPosition("unconstrainedGrid", { 'column': '2', 'row': '2' }, { 'width': '60', 'height': '70' });
+    testPosition("unconstrainedGrid", { 'column': '3', 'row': '2' }, { 'width': '130', 'height': '70' });
+    testPosition("unconstrainedGrid", { 'column': '4', 'row': '2' }, { 'width': '60', 'height': '70' });
+    testPosition("unconstrainedGrid", { 'column': '5', 'row': '2' }, { 'width': '130', 'height': '70' });
+
+    testPosition("unconstrainedGrid", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
+    testPosition("unconstrainedGrid", { 'column': '2', 'row': '3' }, { 'width': '60', 'height': '50' });
+    testPosition("unconstrainedGrid", { 'column': '3', 'row': '3' }, { 'width': '130', 'height': '50' });
+    testPosition("unconstrainedGrid", { 'column': '4', 'row': '3' }, { 'width': '60', 'height': '50' });
+    testPosition("unconstrainedGrid", { 'column': '5', 'row': '3' }, { 'width': '130', 'height': '50' });
+
+    testPosition("unconstrainedGrid", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
+    testPosition("unconstrainedGrid", { 'column': '2', 'row': '4' }, { 'width': '60', 'height': '65' });
+    testPosition("unconstrainedGrid", { 'column': '3', 'row': '4' }, { 'width': '130', 'height': '65' });
+    testPosition("unconstrainedGrid", { 'column': '4', 'row': '4' }, { 'width': '60', 'height': '65' });
+    testPosition("unconstrainedGrid", { 'column': '5', 'row': '4' }, { 'width': '130', 'height': '65' });
+
+    testPosition("unconstrainedGrid", { 'column': '10', 'row': '15' }, { 'width': '130', 'height': '10' });
+}
+window.addEventListener("load", updateImplicitGridColumn, false);
+</script>
+<body>
+
+<p>This test checks that we properly recompute our grid tracks' sizes when a grid item changes its -webkit-grid-row or -webkit-grid-column.</p>
+
+<div class="constrainedContainer">
+    <div class="grid gridFixedContent" id="constrainedGrid"><div class="sizedToGridArea">XXXX XXXX XXXX</div></div>
+</div>
+
+<!-- Allow the extra logical space distribution to occur. -->
+<div style="width: 1000px; height: 1000px">
+    <div class="grid gridFixedContent" id="unconstrainedGrid"><div class="sizedToGridArea">XXXXXX XXXXXX</div></div>
+</div>
+
+</body>
+</html>

Modified: trunk/Source/WebCore/ChangeLog (141962 => 141963)


--- trunk/Source/WebCore/ChangeLog	2013-02-06 02:53:55 UTC (rev 141962)
+++ trunk/Source/WebCore/ChangeLog	2013-02-06 03:01:11 UTC (rev 141963)
@@ -1,3 +1,24 @@
+2013-02-05  Julien Chaffraix  <[email protected]>
+
+        [CSS Grid Layout] Grid item's logical height is not properly recomputed after -webkit-grid-column / -webkit-grid-row changes
+        https://bugs.webkit.org/show_bug.cgi?id=108975
+
+        Reviewed by Tony Chang.
+
+        Test: fast/css-grid-layout/implicit-position-dynamic-change.html
+
+        * rendering/RenderBox.cpp:
+        (WebCore::RenderBox::clearContainingBlockOverrideSize):
+        (WebCore::RenderBox::clearOverrideContainingBlockContentLogicalHeight):
+        * rendering/RenderBox.h:
+        Added clearOverrideContainingBlockContentLogicalHeight and updated clearContainingBlockOverrideSize
+        to use it.
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::minContentForChild):
+        (WebCore::RenderGrid::maxContentForChild):
+        Added missing clearContainingBlockOverrideSize to ensure we don't use a previous layout's override.
+
 2013-02-05  Andreas Kling  <[email protected]>
 
         Optimize GlyphPage for case where all glyphs are available in the same font.

Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (141962 => 141963)


--- trunk/Source/WebCore/rendering/RenderBox.cpp	2013-02-06 02:53:55 UTC (rev 141962)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp	2013-02-06 03:01:11 UTC (rev 141963)
@@ -974,6 +974,11 @@
 {
     if (gOverrideContainingBlockLogicalWidthMap)
         gOverrideContainingBlockLogicalWidthMap->remove(this);
+    clearOverrideContainingBlockContentLogicalHeight();
+}
+
+void RenderBox::clearOverrideContainingBlockContentLogicalHeight()
+{
     if (gOverrideContainingBlockLogicalHeightMap)
         gOverrideContainingBlockLogicalHeightMap->remove(this);
 }

Modified: trunk/Source/WebCore/rendering/RenderBox.h (141962 => 141963)


--- trunk/Source/WebCore/rendering/RenderBox.h	2013-02-06 02:53:55 UTC (rev 141962)
+++ trunk/Source/WebCore/rendering/RenderBox.h	2013-02-06 03:01:11 UTC (rev 141963)
@@ -321,6 +321,7 @@
     void setOverrideContainingBlockContentLogicalWidth(LayoutUnit);
     void setOverrideContainingBlockContentLogicalHeight(LayoutUnit);
     void clearContainingBlockOverrideSize();
+    void clearOverrideContainingBlockContentLogicalHeight();
 
     virtual LayoutSize offsetFromContainer(RenderObject*, const LayoutPoint&, bool* offsetDependsOnPoint = 0) const;
     

Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (141962 => 141963)


--- trunk/Source/WebCore/rendering/RenderGrid.cpp	2013-02-06 02:53:55 UTC (rev 141962)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp	2013-02-06 03:01:11 UTC (rev 141963)
@@ -303,6 +303,7 @@
     if (child->needsLayout()) {
         size_t columnTrack = resolveGridPosition(ForColumns, child);
         child->setOverrideContainingBlockContentLogicalWidth(columnTracks[columnTrack].m_usedBreadth);
+        child->clearOverrideContainingBlockContentLogicalHeight();
         child->layout();
     }
     return child->logicalHeight();
@@ -324,6 +325,7 @@
     if (child->needsLayout()) {
         size_t columnTrack = resolveGridPosition(ForColumns, child);
         child->setOverrideContainingBlockContentLogicalWidth(columnTracks[columnTrack].m_usedBreadth);
+        child->clearOverrideContainingBlockContentLogicalHeight();
         child->layout();
     }
     return child->logicalHeight();
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to