third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-change-alignment-from-stretch.html - Issue 2869353002: [css-grid] Use "Ahem" instead of "ahem" on grid layout tests

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-change-alignment-from-stretch.html

Issue 2869353002: [css-grid] Use "Ahem" instead of "ahem" on grid layout tests (Closed)

Patch Set: Created 3 years, 7 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-justify-stretch-with-orthogonal-flows.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-two-dimensional.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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