third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-023.html - Issue 2825133003: [css-grid] Ignore collapsed tracks on content-distribution alignment

Side by Side Diff: third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-023.html

Issue 2825133003: [css-grid] Ignore collapsed tracks on content-distribution alignment (Closed)

Patch Set: Fixed error in the test expectations 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/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-022.html ('k') | third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-content-distribution-with-collapsed-tracks-024.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 <meta charset="utf-8">	2 <meta charset="utf-8">

3 <title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed track s</title>	3 <title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed track s on 4x4 grid</title>

4 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernande z@igalia.com">	4 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernande z@igalia.com">

5 <link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distributio n">	5 <link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distributio n">

6 <link rel="help" href="https://drafts.csswg.org/css-grid/#collapsed-track">	6 <link rel="help" href="https://drafts.csswg.org/css-grid/#collapsed-track">

7 <link rel="match" href="../../reference/ref-filled-green-200px-square.html">	7 <link rel="match" href="../../reference/ref-filled-green-200px-square.html">

8 <meta name="assert" content="Content Distribution alignment ignore collapsed gri d tracks and render correctly with a value of 'stretch'.">	8 <meta name="assert" content="Content Distribution alignment ignore collapsed gri d tracks and render correctly with a value of 'stretch'.">

9 <style>	9 <style>

10 .block {	10 .block {

11 position: absolute;	11 position: absolute;

12 z-index: -1;	12 z-index: -1;

13 background: green;	13 background: green;

14 width: 200px;	14 width: 200px;

15 height: 200px;	15 height: 200px;

16 }	16 }

17 .block > div {	17 .block > div {

18 position: absolute;	18 position: absolute;

19 background: red;	19 background: red;

20 width: 100px;	20 width: 50px;

21 height: 100px;	21 height: 50px;

22 }	22 }

23 .grid {	23 .grid {

24 z-index: 1;	24 z-index: 1;

25 display: grid;	25 display: grid;

26 width: 200px;	26 width: 200px;

27 height: 200px;	27 height: 200px;

28 grid-template-columns: repeat(auto-fit, minmax(25px, auto));	28 grid-template-columns: repeat(auto-fit, minmax(25px, auto));

29 grid-template-rows: repeat(auto-fit, minmax(25px, auto));	29 grid-template-rows: repeat(auto-fit, minmax(25px, auto));

30 align-content: stretch;	30 align-content: stretch;

31 justify-content: stretch;	31 justify-content: stretch;

32 }	32 }

33 .grid > div { background: green; }	33 .grid > div { background: green; }

34 </style>	34 </style>

35 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p >	35 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p >

36 <div class="block">	36 <div class="block">

37 <div style="top: 0px; left: 0px;"></div>	37 <div style="top: 0px; left: 50px;"></div>

	38 <div style="top: 0px; left: 100px;"></div>

	39 <div style="top: 50px; left: 100px;"></div>

38 <div style="top: 100px; left: 100px;"></div>	40 <div style="top: 100px; left: 100px;"></div>

	41 <div style="top: 150px; left: 0px;"></div>

	42 <div style="top: 150px; left: 150px;"></div>

39 </div>	43 </div>

40 <div class="grid">	44 <div class="grid">

41 <div style="grid-row: 1; grid-column: 1;"></div>	45 <div class="item" style="grid-row: 1; grid-column: 2;"></div>

42 <div style="grid-row: 3; grid-column: 6;"></div>	46 <div class="item" style="grid-row: 1; grid-column: 5;"></div>

	47 <div class="item" style="grid-row: 3; grid-column: 5;"></div>

	48 <div class="item" style="grid-row: 4; grid-column: 5;"></div>

	49 <div class="item" style="grid-row: 6; grid-column: 1;"></div>

	50 <div class="item" style="grid-row: 6; grid-column: 7;"></div>

43 </div>	51 </div>

OLD	NEW