third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-intrinsic-aspect-ratio.html - Issue 2726103003: [css-grid] Implement transferred size part of Implied Minimum Size

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-intrinsic-aspect-ratio.html

Issue 2726103003: [css-grid] Implement transferred size part of Implied Minimum Size (Closed)

Patch Set: Swap order in condition 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:

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 <style>	3 <style>

4 .container {	4 .container {

5 border: 5px solid orange;	5 border: 5px solid orange;

6 display: grid;	6 display: grid;

7 }	7 }

8 </style>	8 </style>

9 <script src="../../resources/testharness.js"></script>	9 <script src="../../resources/testharness.js"></script>

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

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

12	12

13 <body onload="checkLayout('.container')">	13 <body onload="checkLayout('.container')">

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

15	15

16 <p>This test shows how min-width\|height:auto is computed for items with intrinis c aspect ratios</p>	16 <p>This test shows how min-width\|height:auto is computed for items with intrinis c aspect ratios</p>

17	17

18 <p>Check that width respects the intrinsic aspect ratio when specifying the heig ht</p>	18 <p>Check that width respects the intrinsic aspect ratio when specifying the heig ht</p>

19 <div class="container min-content" data-expected-width="60" data-expected-height ="35">	19 <div class="container min-content" data-expected-width="60" data-expected-height ="35">

20 <img src="resources/blue-100x50.png" style="height: 25px;" data-expected-wid th="50" data-expected-height="25"/>	20 <img src="resources/blue-100x50.png" style="height: 25px;" data-expected-wid th="50" data-expected-height="25"/>

21 </div>	21 </div>

22	22

23 <div class="container min-content" data-expected-width="150" data-expected-heigh t="80">	23 <div class="container min-content" data-expected-width="110" data-expected-heigh t="80">

24 <img src="resources/blue-100x50.png" style="min-height: 70px;" data-expected -width="140" data-expected-height="70"/>	24 <img src="resources/blue-100x50.png" style="min-height: 70px;" data-expected -width="140" data-expected-height="70"/>

25 </div>	25 </div>

26	26

27 <div class="container min-content" data-expected-width="90" data-expected-height ="50">	27 <div class="container min-content" data-expected-width="90" data-expected-height ="50">

28 <img src="resources/blue-100x50.png" style="max-height: 40px;" data-expected -width="80" data-expected-height="40"/>	28 <img src="resources/blue-100x50.png" style="max-height: 40px;" data-expected -width="80" data-expected-height="40"/>

29 </div>	29 </div>

30	30

31 <div class="container min-content" data-expected-width="70" data-expected-height ="40">	31 <div class="container min-content" data-expected-width="70" data-expected-height ="40">

32 <img src="resources/blue-100x50.png" style="height: 25px; min-height: 30px;" data-expected-width="60" data-expected-height="30"/>	32 <img src="resources/blue-100x50.png" style="height: 25px; min-height: 30px;" data-expected-width="60" data-expected-height="30"/>

33 </div>	33 </div>

(...skipping 34 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
68	68

69 <div class="container min-content" data-expected-width="130" data-expected-heigh t="35">	69 <div class="container min-content" data-expected-width="130" data-expected-heigh t="35">

70 <img src="resources/blue-100x50.png" style="width: 120px; max-height: 25px;" data-expected-width="120" data-expected-height="25"/>	70 <img src="resources/blue-100x50.png" style="width: 120px; max-height: 25px;" data-expected-width="120" data-expected-height="25"/>

71 </div>	71 </div>

72	72

73 <div class="container min-content" data-expected-width="35" data-expected-height ="110">	73 <div class="container min-content" data-expected-width="35" data-expected-height ="110">

74 <img src="resources/blue-100x50.png" style="width: 25px; min-height: 100px;" data-expected-width="25" data-expected-height="100"/>	74 <img src="resources/blue-100x50.png" style="width: 25px; min-height: 100px;" data-expected-width="25" data-expected-height="100"/>

75 </div>	75 </div>

76	76

77 </body>	77 </body>

OLD	NEW