third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html - Issue 2722613003: [css-grid] "normal" alignment is "start" for replaced elements

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html

Issue 2722613003: [css-grid] "normal" alignment is "start" for replaced elements (Closed)

Patch Set: New version Created 3 years, 9 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/external/csswg-test/css-grid-1/grid-items/support/50x50-green.png ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items-expected.txt » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css » ('J')
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="resources/grid.css" rel="stylesheet">	2 <link href="resources/grid.css" rel="stylesheet">

3 <link href="resources/grid-alignment.css" rel="stylesheet">	3 <link href="resources/grid-alignment.css" rel="stylesheet">

4 <script src="../../resources/check-layout.js"></script>	4 <script src="../../resources/testharness.js"></script>

	5 <script src="../../resources/testharnessreport.js"></script>

	6 <script src="../../resources/check-layout-th.js"></script>

5 <style>	7 <style>

6 .grid {	8 .grid {

7 grid-template-columns: 500px;	9 grid-template-columns: 500px;

8 grid-template-rows: 500px;	10 grid-template-rows: 500px;

9 }	11 }

10 .fixedSizes {	12 .fixedSizes {

11 width: 150px;	13 width: 150px;

12 height: 150px;	14 height: 150px;

13 }	15 }

14 .autoMargins {	16 .autoMargins {

15 margin: auto;	17 margin: auto;

16 }	18 }

17 </style>	19 </style>

18	20

19 <body onload="checkLayout('.grid')">	21 <body onload="checkLayout('.grid')">

	22 <div id="log"></div>

20	23

21 <p>This test checks that the alignment properties align-self and justify-self ap ply the 'stretch' value correctly on replaced elements.</p>	24 <p>This test checks that the alignment properties align-self and justify-self ap ply the 'stretch' value correctly on replaced elements.</p>

22	25

23 <div style="position: relative">	26 <div style="position: relative">

24 <p>The blue image's original size is 100px x 100px, but it should be stretch ed to fill the 500px x 500px grid area it's placed into</p>	27 <p>The blue image's original size is 100px x 100px, default alignment is res olved as 'start' for replaced elements so it prevents stretching to be applied.< /p>

25 <div class="grid">	28 <div class="grid">

	29 <img src="../../images/resources/blue-100.png" data-expected-width="100" data-expected-height="100"/>

	30 </div>

	31 </div>

	32

	33 <div style="position: relative">

	34 <p>The blue image's original size is 100px x 100px, 'normal' is resolved as 'start' for replaced elements so it prevents stretching to be applied.</p>

	35 <div class="grid itemsNormal">

	36 <img src="../../images/resources/blue-100.png" data-expected-width="100" data-expected-height="100"/>

	37 </div>

	38 </div>

	39

	40 <div style="position: relative">

	41 <p>The blue image's original size is 100px x 100px, but it should be stretch ed to fill the 500px x 500px grid area it's placed into.</p>

	42 <div class="grid itemsStretch">

26 <img src="../../images/resources/blue-100.png" data-expected-width="500" data-expected-height="500"/>	43 <img src="../../images/resources/blue-100.png" data-expected-width="500" data-expected-height="500"/>

27 </div>	44 </div>

28 </div>	45 </div>

29	46

30 <div style="position: relative">	47 <div style="position: relative">

31 <p>The blue image's original size is 100px x 100px, non-stretch values preve nt stretching to be applied.</p>	48 <p>The blue image's original size is 100px x 100px, non-stretch values preve nt stretching to be applied.</p>

32 <div class="grid itemsCenter">	49 <div class="grid itemsCenter">

33 <img src="../../images/resources/blue-100.png" data-expected-width="100" data-expected-height="100"/>	50 <img src="../../images/resources/blue-100.png" data-expected-width="100" data-expected-height="100"/>

34 </div>	51 </div>

35 </div>	52 </div>

36	53

37 <div style="position: relative">	54 <div style="position: relative">

38 <p>The blue image's original size is 100px x 100px, non-auto sizes prevent s tretching to be applied.</p>	55 <p>The blue image's original size is 100px x 100px, non-auto sizes prevent s tretching to be applied.</p>

39 <div class="grid">	56 <div class="grid">

40 <img class="fixedSizes" src="../../images/resources/blue-100.png" data-e xpected-width="150" data-expected-height="150"/>	57 <img class="fixedSizes" src="../../images/resources/blue-100.png" data-e xpected-width="150" data-expected-height="150"/>

41 </div>	58 </div>

42 </div>	59 </div>

43	60

44 <div style="position: relative">	61 <div style="position: relative">

45 <p>The blue image's original size is 100px x 100px, auto-margins prevent str etching to be applied.</p>	62 <p>The blue image's original size is 100px x 100px, auto-margins prevent str etching to be applied.</p>

46 <div class="grid">	63 <div class="grid">

47 <img class="autoMargins" src="../../images/resources/blue-100.png" data- expected-width="100" data-expected-height="100"/>	64 <img class="autoMargins" src="../../images/resources/blue-100.png" data- expected-width="100" data-expected-height="100"/>

48 </div>	65 </div>

49 </div>	66 </div>

50	67

51 </body>	68 </body>

OLD	NEW