diff options
| author | jfernandez <jfernandez@igalia.com> | 2016-01-15 03:35:06 -0800 |
|---|---|---|
| committer | Commit bot <commit-bot@chromium.org> | 2016-01-15 11:36:09 +0000 |
| commit | 8aefe83fedd61222c505b6a9db4734fc3b7d52ae (patch) | |
| tree | 480a014f52043ba9b145b988c975edc31ca2daac /third_party/WebKit/LayoutTests/fast/css-grid-layout | |
| parent | d45b6e9cb6f38e4132a171ed018674d4fd24f93d (diff) | |
| download | chromium_src-8aefe83fedd61222c505b6a9db4734fc3b7d52ae.zip chromium_src-8aefe83fedd61222c505b6a9db4734fc3b7d52ae.tar.gz chromium_src-8aefe83fedd61222c505b6a9db4734fc3b7d52ae.tar.bz2 | |
[css-grid] Replaced elements can be stretched if they are grid items
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.
BUG=575182
Review URL: https://codereview.chromium.org/1565823003
Cr-Commit-Position: refs/heads/master@{#369728}
Diffstat (limited to 'third_party/WebKit/LayoutTests/fast/css-grid-layout')
2 files changed, 69 insertions, 0 deletions
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items-expected.txt b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items-expected.txt new file mode 100644 index 0000000..1faef8a --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items-expected.txt @@ -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 diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html new file mode 100644 index 0000000..274de17 --- /dev/null +++ b/third_party/WebKit/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 { + grid-template-columns: 500px; + 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> |