| <!DOCTYPE html> |
| <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet"> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <link href="resources/grid-alignment.css" rel="stylesheet"> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| .grid { |
| position: relative; |
| grid-template-columns: 100px; |
| grid-template-rows: 200px; |
| font: 10px/1 Ahem; |
| } |
| </style> |
| <p>Test to verify that grid item's stretched size is reset when changing to a different alignment value.</p> |
| <div class="grid fit-content"> |
| <div id="item">XXXXX</div> |
| </div> |
| <script> |
| "use strict"; |
| var child = document.getElementById("item"); |
| const values = ['self-start', 'self-end', 'start', 'end', 'center', 'baseline']; |
| values.forEach(function(value) { |
| child.style.alignSelf = 'stretch'; |
| child.style.justifySelf = 'stretch'; |
| test(function() { |
| assert_equals(child.offsetWidth, 100, "The width is not what it should:"); |
| assert_equals(child.offsetHeight, 200, "The height is not what it should:"); |
| }, "Checking stretched size before changing to " + value + "."); |
| |
| child.style.alignSelf = value; |
| child.style.justifySelf = value; |
| test(function() { |
| assert_equals(child.offsetWidth, 50, "The width is not what it should:"); |
| assert_equals(child.offsetHeight, 10, "The height is not what it should:"); |
| }, "Checking size after changing to " + value + "."); |
| }); |
| </script> |
