[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.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@195284 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html b/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html
new file mode 100644
index 0000000..5fd750b
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<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="../../css3/images/resources/blue-100.png" 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="../../css3/images/resources/blue-100.png" 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="../../css3/images/resources/blue-100.png" 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="../../css3/images/resources/blue-100.png" data-expected-width="100" data-expected-height="100"/>
+ </div>
+</div>
+
+</body>
