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