Title: [190665] trunk
- Revision
- 190665
- Author
- [email protected]
- Date
- 2015-10-07 06:14:11 -0700 (Wed, 07 Oct 2015)
Log Message
[CSS Grid Layout] Modify grid item height doesn't work
https://bugs.webkit.org/show_bug.cgi?id=149840
Reviewed by Sergio Villar Senin.
Source/WebCore:
When computing the logical height of content-sized grid tracks we
need to clear grid item's override height if it needs to be laid
out again.
Currently we are doing so only in the case of percentage heights
or when the grid track's width has changed; these situations would
obviously mark grid items as needing layout.
However, there are other situations, like the one defined in this
bug, which would imply a new layout of the grid items; hence we
need to clear its override value if we want the layout logic to be
computed correctly.
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::logicalContentHeightForChild):
LayoutTests:
Added new tests cases to verify content-sized grid tracks are resized
appropriately whenever grid item's height is changed.
* fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change-expected.txt: Added new test cases.
* fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html: Added new test cases.
Modified Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (190664 => 190665)
--- trunk/LayoutTests/ChangeLog 2015-10-07 12:52:33 UTC (rev 190664)
+++ trunk/LayoutTests/ChangeLog 2015-10-07 13:14:11 UTC (rev 190665)
@@ -1,3 +1,16 @@
+2015-10-07 Javier Fernandez <[email protected]>
+
+ [CSS Grid Layout] Modify grid item height doesn't work
+ https://bugs.webkit.org/show_bug.cgi?id=149840
+
+ Reviewed by Sergio Villar Senin.
+
+ Added new tests cases to verify content-sized grid tracks are resized
+ appropriately whenever grid item's height is changed.
+
+ * fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change-expected.txt: Added new test cases.
+ * fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html: Added new test cases.
+
2015-10-05 Sergio Villar Senin <[email protected]>
[css-grid] Implement grid gutters
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change-expected.txt (190664 => 190665)
--- trunk/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change-expected.txt 2015-10-07 12:52:33 UTC (rev 190664)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change-expected.txt 2015-10-07 13:14:11 UTC (rev 190665)
@@ -3,3 +3,6 @@
PASS
PASS
PASS
+PASS
+PASS
+PASS
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html (190664 => 190665)
--- trunk/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html 2015-10-07 12:52:33 UTC (rev 190664)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html 2015-10-07 13:14:11 UTC (rev 190665)
@@ -3,28 +3,31 @@
<script src=""
<style>
.grid {
- -webkit-grid-template: 200px 200px / 200px 200px;
width: -webkit-fit-content;
position: relative;
}
+.content {
+ width: 200px;
+ height: 200px;
+}
#fromFixedWidth { width: 150px; }
#fromFixedHeight { height: 100px; }
#fromMarginAuto { margin: auto; }
</style>
<p>The grids below had initially 'stretched' items, but we have changed 'height', 'width' and 'margin' to values which don't allow stretch. This test verifies that the layout algorithm properly detects such changes and clear the override height and width accordingly.</p>
-<div class="grid">
+<div class="grid" style="-webkit-grid-template: 200px 200px / 200px 200px;">
<div id="toFixedHeight" class="firstRowFirstColumn" data-expected-width="200" data-expected-height="100"></div>
<div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
<div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"></div>
<div id="fromFixedHeight" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
</div>
-<div class="grid">
+<div class="grid" style="-webkit-grid-template: 200px 200px / 200px 200px;">
<div id="toFixedWidth" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="200"></div>
<div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
<div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"></div>
<div id="fromFixedWidth" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
</div>
-<div class="grid">
+<div class="grid" style="-webkit-grid-template: 200px 200px / 200px 200px;">
<div id="toMarginAuto" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="100">
<div style="width: 150px; height: 100px"></div>
</div>
@@ -34,6 +37,28 @@
<div style="width: 150px; height: 100px"></div>
</div>
</div>
+<div class="grid">
+ <div id="contentSized-toFixedHeight" class="firstRowFirstColumn" data-expected-width="200" data-expected-height="100"></div>
+ <div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div id="contentSized-fromFixedHeight" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
+</div>
+<div class="grid">
+ <div id="contentSized-toFixedWidth" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="200"></div>
+ <div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div id="contentSized-fromFixedWidth" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
+</div>
+<div class="grid">
+ <div id="contentSized-toMarginAuto" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="100">
+ <div style="width: 150px; height: 100px"></div>
+ </div>
+ <div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div id="contentSized-fromMarginAuto" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200">
+ <div style="width: 150px; height: 100px"></div>
+ </div>
+</div>
<script>
document.body.offsetLeft;
document.getElementById("fromFixedHeight").style.height = "auto";
@@ -42,5 +67,11 @@
document.getElementById("toFixedWidth").style.width = "150px";
document.getElementById("fromMarginAuto").style.margin = "0";
document.getElementById("toMarginAuto").style.margin = "auto";
+document.getElementById("contentSized-fromFixedHeight").style.height = "auto";
+document.getElementById("contentSized-toFixedHeight").style.height = "100px";
+document.getElementById("contentSized-fromFixedWidth").style.width = "auto";
+document.getElementById("contentSized-toFixedWidth").style.width = "150px";
+document.getElementById("contentSized-fromMarginAuto").style.margin = "0";
+document.getElementById("contentSized-toMarginAuto").style.margin = "auto";
checkLayout(".grid");
</script>
Modified: trunk/Source/WebCore/ChangeLog (190664 => 190665)
--- trunk/Source/WebCore/ChangeLog 2015-10-07 12:52:33 UTC (rev 190664)
+++ trunk/Source/WebCore/ChangeLog 2015-10-07 13:14:11 UTC (rev 190665)
@@ -1,3 +1,26 @@
+2015-10-07 Javier Fernandez <[email protected]>
+
+ [CSS Grid Layout] Modify grid item height doesn't work
+ https://bugs.webkit.org/show_bug.cgi?id=149840
+
+ Reviewed by Sergio Villar Senin.
+
+ When computing the logical height of content-sized grid tracks we
+ need to clear grid item's override height if it needs to be laid
+ out again.
+
+ Currently we are doing so only in the case of percentage heights
+ or when the grid track's width has changed; these situations would
+ obviously mark grid items as needing layout.
+
+ However, there are other situations, like the one defined in this
+ bug, which would imply a new layout of the grid items; hence we
+ need to clear its override value if we want the layout logic to be
+ computed correctly.
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::logicalContentHeightForChild):
+
2015-10-07 Xabier Rodriguez Calvar <[email protected]> and Youenn Fablet <[email protected]>
Automate WebCore JS builtins generation and build system
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (190664 => 190665)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-10-07 12:52:33 UTC (rev 190664)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-10-07 13:14:11 UTC (rev 190665)
@@ -590,11 +590,12 @@
{
Optional<LayoutUnit> oldOverrideContainingBlockContentLogicalWidth = child.hasOverrideContainingBlockLogicalWidth() ? child.overrideContainingBlockContentLogicalWidth() : LayoutUnit();
LayoutUnit overrideContainingBlockContentLogicalWidth = gridAreaBreadthForChild(child, ForColumns, columnTracks);
- if (child.hasRelativeLogicalHeight() || !oldOverrideContainingBlockContentLogicalWidth || oldOverrideContainingBlockContentLogicalWidth.value() != overrideContainingBlockContentLogicalWidth) {
+ if (child.hasRelativeLogicalHeight() || !oldOverrideContainingBlockContentLogicalWidth || oldOverrideContainingBlockContentLogicalWidth.value() != overrideContainingBlockContentLogicalWidth)
child.setNeedsLayout(MarkOnlyThis);
- // We need to clear the stretched height to properly compute logical height during layout.
+
+ // We need to clear the stretched height to properly compute logical height during layout.
+ if (child.needsLayout())
child.clearOverrideLogicalContentHeight();
- }
child.setOverrideContainingBlockContentLogicalWidth(overrideContainingBlockContentLogicalWidth);
// If |child| has a relative logical height, we shouldn't let it override its intrinsic height, which is
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
