third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html - Issue 1488493003: [css-grid] refactoring of layout tests

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html

Issue 1488493003: [css-grid] refactoring of layout tests (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Patch rebased and refactoring of alignment css rules. Created 4 years, 11 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:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/calc-resolution-grid-item.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt » ('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	2

	3 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">

	4 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet">

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

4	6

5 <style>	7 <style>

6 .container {	8 .container {

7 width: 100px;	9 width: 100px;

8 height: 100px;	10 height: 100px;

9 }	11 }

10	12

11 .grid {	13 .grid {

12 grid-template-columns: 1fr;	14 grid-template-columns: 1fr;

13 grid-template-rows: 1fr;	15 grid-template-rows: 1fr;

14 }	16 }

15	17

16 div { font: 10px/1 Ahem; }	18 div { font: 10px/1 Ahem; }

17	19

18 .minContent {

19 width: -webkit-min-content;

20 height: -webkit-min-content;

21 }

22

23 .maxContent {

24 width: -webkit-max-content;

25 height: -webkit-max-content;

26 }

27

28 .fitContent {

29 width: -webkit-fit-content;

30 height: -webkit-fit-content;

31 }

32

33 .fillAvailable {

34 width: -webkit-fill-available;

35 height: -webkit-fill-available;

36 }

37

38 </style>	20 </style>

39	21

40 <script src="../../resources/check-layout.js"></script>	22 <script src="../../resources/check-layout.js"></script>

41	23

42 <body onload="checkLayout('.grid')">	24 <body onload="checkLayout('.grid')">

43	25

44 <p>This test checks that fr tracks are properly sized whenever grid have intrins ic sizes.</p>	26 <p>This test checks that fr tracks are properly sized whenever grid have intrins ic sizes.</p>

45	27

46 <div class="container">	28 <div class="container">

47 <div class="grid" data-expected-width="100" data-expected-height="10">	29 <div class="grid" data-expected-width="100" data-expected-height="10">

48 <div>XXX XXX</div>	30 <div>XXX XXX</div>

49 </div>	31 </div>

50 </div>	32 </div>

51	33

52 <!-- This fails due to https://code.google.com/p/chromium/issues/detail?id=54776 2 -->	34 <!-- This fails due to https://code.google.com/p/chromium/issues/detail?id=54776 2 -->

53 <div class="container">	35 <div class="container">

54 <div class="grid minContent" data-expected-width="30" data-expected-height="10 ">	36 <div class="grid min-content" data-expected-width="30" data-expected-height="1 0">

55 <div>XXX XXX</div>	37 <div>XXX XXX</div>

56 </div>	38 </div>

57 </div>	39 </div>

58	40

59 <div class="container">	41 <div class="container">

60 <div class="grid maxContent" data-expected-width="70" data-expected-height="10 ">	42 <div class="grid max-content" data-expected-width="70" data-expected-height="1 0">

61 <div>XXX XXX</div>	43 <div>XXX XXX</div>

62 </div>	44 </div>

63 </div>	45 </div>

64	46

65 <div class="container">	47 <div class="container">

66 <div class="grid fitContent" data-expected-width="70" data-expected-height="10 ">	48 <div class="grid fit-content" data-expected-width="70" data-expected-height="1 0">

67 <div>XXX XXX</div>	49 <div>XXX XXX</div>

68 </div>	50 </div>

69 </div>	51 </div>

70	52

71 <div class="container">	53 <div class="container">

72 <div class="grid fillAvailable" data-expected-width="100" data-expected-height ="100">	54 <div class="grid fill-available" data-expected-width="100" data-expected-heigh t="100">

73 <div>XXX XXX</div>	55 <div>XXX XXX</div>

74 </div>	56 </div>

75 </div>	57 </div>

76	58

77 </body>	59 </body>

OLD	NEW