| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> |
| 3 <link href="resources/grid.css" rel="stylesheet"> |
| 4 <link href="resources/grid-alignment.css" rel="stylesheet"> |
| 5 <script src="../../resources/testharness.js"></script> |
| 6 <script src="../../resources/testharnessreport.js"></script> |
| 7 <style> |
| 8 .grid { |
| 9 position: relative; |
| 10 grid-template-columns: 100px; |
| 11 grid-template-rows: 200px; |
| 12 font: 10px/1 ahem; |
| 13 } |
| 14 </style> |
| 15 <p>Test to verify that grid item's stretched size is reset when changing to a di
fferent alignment value.</p> |
| 16 <div class="grid fit-content"> |
| 17 <div id="item">XXXXX</div> |
| 18 </div> |
| 19 <script> |
| 20 "use strict"; |
| 21 var child = document.getElementById("item"); |
| 22 const values = ['self-start', 'self-end', 'start', 'end', 'center', 'right', 'le
ft', 'baseline']; |
| 23 values.forEach(function(value) { |
| 24 child.style.alignSelf = 'stretch'; |
| 25 child.style.justifySelf = 'stretch'; |
| 26 test(function() { |
| 27 assert_equals(child.offsetWidth, 100, "The width is not what it should:"); |
| 28 assert_equals(child.offsetHeight, 200, "The height is not what it should:"); |
| 29 }, "Checking stretched size before changing to " + value + "."); |
| 30 |
| 31 child.style.alignSelf = value; |
| 32 child.style.justifySelf = value; |
| 33 test(function() { |
| 34 assert_equals(child.offsetWidth, 50, "The width is not what it should:"); |
| 35 assert_equals(child.offsetHeight, 10, "The height is not what it should:"); |
| 36 }, "Checking size after changing to " + value + "."); |
| 37 }); |
| 38 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2832783003:
[css-grid] Clearing the override height before layout (Closed)
