Chromium Code Reviews Chromium Code Reviews
Issue 1145183003:
[CSS Grid Layout] Clear stretched height when conditions don't allow it. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-margin-change.html |
| diff --git a/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-margin-change.html b/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-margin-change.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..35459f1cfa788288308a3b2ffad1fc902b43699f |
| --- /dev/null |
| +++ b/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-margin-change.html |
| @@ -0,0 +1,37 @@ |
| +<!DOCTYPE HTML> |
| +<link href="resources/grid.css" rel="stylesheet"> |
| +<script src="../../resources/check-layout.js"></script> |
| +<style> |
| +.grid { |
| + grid-template: 200px 200px / 200px 200px; |
| + width: -webkit-fit-content; |
| + position: relative; |
| +} |
| +#fromFixedHeight { height: 100px; } |
| +#fromMarginAuto { margin: auto; } |
| +</style> |
| +<p>The grids bellow had initially 'stretched' items, but we have changed 'height' 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 accordingly.</p> |
|
Julien - ping for review
2015/06/03 21:33:12
s/bellow/below/.
jfernandez
2015/06/05 00:05:30
Done.
|
| +<div class="grid"> |
| + <div id="toFixedHeight" class="firstRowFirstColumn" data-expected-height="100"></div> |
| + <div class="firstRowSecondColumn" data-expected-height="200"></div> |
| + <div class="secondRowFirstColumn" data-expected-height="200"></div> |
| + <div id="fromFixedHeight" class="secondRowSecondColumn" data-expected-height="200"></div> |
| +</div> |
| +<div class="grid"> |
| + <div id="toMarginAuto" class="firstRowFirstColumn" data-expected-height="100"> |
| + <div style="height: 100px"></div> |
| + </div> |
| + <div class="firstRowSecondColumn" data-expected-height="200"></div> |
| + <div class="secondRowFirstColumn" data-expected-height="200"></div> |
| + <div id="fromMarginAuto" class="secondRowSecondColumn" data-expected-height="200"> |
| + <div style="height: 100px"></div> |
| + </div> |
| +</div> |
| +<script> |
| +document.body.offsetLeft; |
| +document.getElementById("fromFixedHeight").style.height = "auto"; |
| +document.getElementById("toFixedHeight").style.height = "100px"; |
| +document.getElementById("fromMarginAuto").style.margin = "0"; |
| +document.getElementById("toMarginAuto").style.margin = "auto"; |
| +checkLayout(".grid"); |
| +</script> |
