- Revision
- 195284
- Author
- [email protected]
- Date
- 2016-01-19 03:36:11 -0800 (Tue, 19 Jan 2016)
Log Message
[css-grid][css-align] justify-self stretch is not applied for img elements
https://bugs.webkit.org/show_bug.cgi?id=153206
Reviewed by Darin Adler.
Source/WebCore:
When computing the logical height, we check first if there is an override
height value set as a consequence of the stretching logic, so we use it
directly for any kind of element. However, in the case of the width
computation, we don't use such override value because it's the default
behavior of block-level boxes.
However, we consider some special cases which have to be treated as
replaced elements. Theses cases are evaluated first, so we don't let the
regular width computation logic to be executed, which is what we want
to implement the stretch behavior.
In order to let replaced elements, such images, to be stretched as a
consequence of the CSS alignment properties, we need to exclude grid
items from the cases to be treated as replaced elements during the width
computation.
Test: fast/css-grid-layout/grid-align-stretching-replaced-items.html
* rendering/RenderBox.cpp:
(WebCore::RenderBox::computeLogicalWidthInRegion):
(WebCore::RenderBox::hasStretchedLogicalWidth):
(WebCore::RenderBox::sizesLogicalWidthToFitContent):
* rendering/RenderBox.h:
LayoutTests:
Test to verify Replaced Elements, like images, are stretched in the inline
axis, when fulfilling the Box Alignment restrictions on this regard.
* fast/css-grid-layout/grid-align-stretching-replaced-items-expected.txt: Added.
* fast/css-grid-layout/grid-align-stretching-replaced-items.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (195283 => 195284)
--- trunk/LayoutTests/ChangeLog 2016-01-19 11:23:52 UTC (rev 195283)
+++ trunk/LayoutTests/ChangeLog 2016-01-19 11:36:11 UTC (rev 195284)
@@ -1,3 +1,16 @@
+2016-01-19 Javier Fernandez <[email protected]>
+
+ [css-grid][css-align] justify-self stretch is not applied for img elements
+ https://bugs.webkit.org/show_bug.cgi?id=153206
+
+ Reviewed by Darin Adler.
+
+ Test to verify Replaced Elements, like images, are stretched in the inline
+ axis, when fulfilling the Box Alignment restrictions on this regard.
+
+ * fast/css-grid-layout/grid-align-stretching-replaced-items-expected.txt: Added.
+ * fast/css-grid-layout/grid-align-stretching-replaced-items.html: Added.
+
2016-01-19 Ryosuke Niwa <[email protected]>
Text::splitText doesn't update Range end points anchored on parent nodes
Added: trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items-expected.txt (0 => 195284)
--- trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items-expected.txt 2016-01-19 11:36:11 UTC (rev 195284)
@@ -0,0 +1,18 @@
+This test checks that the alignment properties align-self and justify-self apply the 'stretch' value correctly on replaced elements.
+
+The blue image's original size is 100px x 100px, but it should be stretched to fill the 500px x 500px grid area it's placed into
+
+
+PASS
+The blue image's original size is 100px x 100px, non-stretch values prevent stretching to be applied.
+
+
+PASS
+The blue image's original size is 100px x 100px, non-auto sizes prevent stretching to be applied.
+
+
+PASS
+The blue image's original size is 100px x 100px, auto-margins prevent stretching to be applied.
+
+
+PASS
Added: trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html (0 => 195284)
--- trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html 2016-01-19 11:36:11 UTC (rev 195284)
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<link href="" rel="stylesheet">
+<link href="" rel="stylesheet">
+<script src=""
+<style>
+.grid {
+ -webkit-grid-template-columns: 500px;
+ -webkit-grid-template-rows: 500px;
+}
+.fixedSizes {
+ width: 150px;
+ height: 150px;
+}
+.autoMargins {
+ margin: auto;
+}
+</style>
+
+<body _onload_="checkLayout('.grid')">
+
+<p>This test checks that the alignment properties align-self and justify-self apply the 'stretch' value correctly on replaced elements.</p>
+
+<div style="position: relative">
+ <p>The blue image's original size is 100px x 100px, but it should be stretched to fill the 500px x 500px grid area it's placed into</p>
+ <div class="grid">
+ <img src="" data-expected-width="500" data-expected-height="500"/>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>The blue image's original size is 100px x 100px, non-stretch values prevent stretching to be applied.</p>
+ <div class="grid itemsCenter">
+ <img src="" data-expected-width="100" data-expected-height="100"/>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>The blue image's original size is 100px x 100px, non-auto sizes prevent stretching to be applied.</p>
+ <div class="grid">
+ <img class="fixedSizes" src="" data-expected-width="150" data-expected-height="150"/>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>The blue image's original size is 100px x 100px, auto-margins prevent stretching to be applied.</p>
+ <div class="grid">
+ <img class="autoMargins" src="" data-expected-width="100" data-expected-height="100"/>
+ </div>
+</div>
+
+</body>
Modified: trunk/Source/WebCore/ChangeLog (195283 => 195284)
--- trunk/Source/WebCore/ChangeLog 2016-01-19 11:23:52 UTC (rev 195283)
+++ trunk/Source/WebCore/ChangeLog 2016-01-19 11:36:11 UTC (rev 195284)
@@ -1,3 +1,34 @@
+2016-01-19 Javier Fernandez <[email protected]>
+
+ [css-grid][css-align] justify-self stretch is not applied for img elements
+ https://bugs.webkit.org/show_bug.cgi?id=153206
+
+ Reviewed by Darin Adler.
+
+ When computing the logical height, we check first if there is an override
+ height value set as a consequence of the stretching logic, so we use it
+ directly for any kind of element. However, in the case of the width
+ computation, we don't use such override value because it's the default
+ behavior of block-level boxes.
+
+ However, we consider some special cases which have to be treated as
+ replaced elements. Theses cases are evaluated first, so we don't let the
+ regular width computation logic to be executed, which is what we want
+ to implement the stretch behavior.
+
+ In order to let replaced elements, such images, to be stretched as a
+ consequence of the CSS alignment properties, we need to exclude grid
+ items from the cases to be treated as replaced elements during the width
+ computation.
+
+ Test: fast/css-grid-layout/grid-align-stretching-replaced-items.html
+
+ * rendering/RenderBox.cpp:
+ (WebCore::RenderBox::computeLogicalWidthInRegion):
+ (WebCore::RenderBox::hasStretchedLogicalWidth):
+ (WebCore::RenderBox::sizesLogicalWidthToFitContent):
+ * rendering/RenderBox.h:
+
2016-01-19 Ryosuke Niwa <[email protected]>
Text::splitText doesn't update Range end points anchored on parent nodes
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (195283 => 195284)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2016-01-19 11:23:52 UTC (rev 195283)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2016-01-19 11:36:11 UTC (rev 195284)
@@ -2369,7 +2369,12 @@
// https://bugs.webkit.org/show_bug.cgi?id=46418
bool inVerticalBox = parent()->isDeprecatedFlexibleBox() && (parent()->style().boxOrient() == VERTICAL);
bool stretching = (parent()->style().boxAlign() == BSTRETCH);
+ // FIXME: Stretching is the only reason why we don't want the box to be treated as a replaced element, so we could perhaps
+ // refactor all this logic, not only for flex and grid since alignment is intended to be applied to any block.
bool treatAsReplaced = shouldComputeSizeAsReplaced() && (!inVerticalBox || !stretching);
+#if ENABLE(CSS_GRID_LAYOUT)
+ treatAsReplaced = treatAsReplaced && (!isGridItem() || !hasStretchedLogicalWidth());
+#endif
const RenderStyle& styleToUse = style();
Length logicalWidthLength = treatAsReplaced ? Length(computeReplacedLogicalWidth(), Fixed) : styleToUse.logicalWidth();
@@ -2517,6 +2522,23 @@
return false;
}
+// FIXME: Can/Should we move this inside specific layout classes (flex. grid)? Can we refactor columnFlexItemHasStretchAlignment logic?
+bool RenderBox::hasStretchedLogicalWidth() const
+{
+ auto& style = this->style();
+ if (!style.logicalWidth().isAuto() || style.marginStart().isAuto() || style.marginEnd().isAuto())
+ return false;
+ RenderBlock* containingBlock = this->containingBlock();
+ if (!containingBlock) {
+ // We are evaluating align-self/justify-self, which default to 'normal' for the root element.
+ // The 'normal' value behaves like 'start' except for Flexbox Items, which obviously should have a container.
+ return false;
+ }
+ if (containingBlock->isHorizontalWritingMode() != isHorizontalWritingMode())
+ return RenderStyle::resolveAlignment(containingBlock->style(), style, ItemPositionStretch) == ItemPositionStretch;
+ return RenderStyle::resolveJustification(containingBlock->style(), style, ItemPositionStretch) == ItemPositionStretch;
+}
+
bool RenderBox::sizesLogicalWidthToFitContent(SizeType widthType) const
{
// Anonymous inline blocks always fill the width of their containing block.
@@ -2529,10 +2551,8 @@
return true;
#if ENABLE(CSS_GRID_LAYOUT)
- if (parent()->isRenderGrid()) {
- bool allowedToStretchChildAlongRowAxis = style().logicalWidth().isAuto() && !style().marginStartUsing(&parent()->style()).isAuto() && !style().marginEndUsing(&parent()->style()).isAuto();
- return !allowedToStretchChildAlongRowAxis || RenderStyle::resolveJustification(parent()->style(), style(), ItemPositionStretch) != ItemPositionStretch;
- }
+ if (isGridItem())
+ return !hasStretchedLogicalWidth();
#endif
// This code may look a bit strange. Basically width:intrinsic should clamp the size when testing both
Modified: trunk/Source/WebCore/rendering/RenderBox.h (195283 => 195284)
--- trunk/Source/WebCore/rendering/RenderBox.h 2016-01-19 11:23:52 UTC (rev 195283)
+++ trunk/Source/WebCore/rendering/RenderBox.h 2016-01-19 11:36:11 UTC (rev 195284)
@@ -423,6 +423,8 @@
// of a containing block). HTML4 buttons, <select>s, <input>s, legends, and floating/compact elements do this.
bool sizesLogicalWidthToFitContent(SizeType) const;
+ bool hasStretchedLogicalWidth() const;
+
LayoutUnit shrinkLogicalWidthToAvoidFloats(LayoutUnit childMarginStart, LayoutUnit childMarginEnd, const RenderBlock* cb, RenderRegion*) const;
LayoutUnit computeLogicalWidthInRegionUsing(SizeType, Length logicalWidth, LayoutUnit availableLogicalWidth, const RenderBlock* containingBlock, RenderRegion*) const;
