Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(999)

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

Issue 2337573003: [css-grid] Fix intrinsic size computation with flexible sized tracks (Closed)
Patch Set: Patch for landing Created 4 years, 3 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 | « no previous file | 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') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 2
3 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet"> 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"> 4 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet">
5 <link href="resources/grid.css" rel="stylesheet"> 5 <link href="resources/grid.css" rel="stylesheet">
6 6
7 <style> 7 <style>
8 .container { 8 .container {
9 width: 100px; 9 width: 100px;
10 height: 100px; 10 height: 100px;
11 } 11 }
12 12
13 .grid { 13 .grid {
14 grid-template-columns: 1fr; 14 grid-template-columns: 1fr;
15 grid-template-rows: 1fr; 15 grid-template-rows: 1fr;
16 } 16 }
17 17
18 div { font: 10px/1 Ahem; } 18 div { font: 10px/1 Ahem; }
19
20 </style> 19 </style>
21 20
22 <script src="../../resources/check-layout.js"></script> 21 <script src="../../resources/check-layout.js"></script>
23 22
24 <body onload="checkLayout('.grid')"> 23 <body onload="checkLayout('.grid')">
25 24
26 <p>This test checks that fr tracks are properly sized whenever grid have intrins ic sizes.</p> 25 <p>This test checks that fr tracks are properly sized whenever grid have intrins ic sizes.</p>
27 26
28 <div class="container"> 27 <div class="container">
29 <div class="grid" data-expected-width="100" data-expected-height="10"> 28 <div class="grid" data-expected-width="100" data-expected-height="10">
30 <div>XXX XXX</div> 29 <div>XXX XXX</div>
31 </div> 30 </div>
32 </div> 31 </div>
33 32
34 <!-- This fails due to https://code.google.com/p/chromium/issues/detail?id=54776 2 -->
35 <div class="container"> 33 <div class="container">
36 <div class="grid min-content" data-expected-width="30" data-expected-height="1 0"> 34 <div class="grid min-content" data-expected-width="30" data-expected-height="2 0">
37 <div>XXX XXX</div> 35 <div>XXX XXX</div>
38 </div> 36 </div>
39 </div> 37 </div>
40 38
41 <div class="container"> 39 <div class="container">
42 <div class="grid max-content" data-expected-width="70" data-expected-height="1 0"> 40 <div class="grid max-content" data-expected-width="70" data-expected-height="1 0">
43 <div>XXX XXX</div> 41 <div>XXX XXX</div>
44 </div> 42 </div>
45 </div> 43 </div>
46 44
47 <div class="container"> 45 <div class="container">
48 <div class="grid fit-content" data-expected-width="70" data-expected-height="1 0"> 46 <div class="grid fit-content" data-expected-width="70" data-expected-height="1 0">
49 <div>XXX XXX</div> 47 <div>XXX XXX</div>
50 </div> 48 </div>
51 </div> 49 </div>
52 50
53 <div class="container"> 51 <div class="container">
54 <div class="grid fill-available" data-expected-width="100" data-expected-heigh t="100"> 52 <div class="grid fill-available" data-expected-width="100" data-expected-heigh t="100">
55 <div>XXX XXX</div> 53 <div>XXX XXX</div>
56 </div> 54 </div>
57 </div> 55 </div>
58 56
57 <div class="min-content">
58 <div class="grid" data-expected-width="40" data-expected-height="50">
59 <div>XXX XXXX XX X XX XXX</div>
60 </div>
61 </div>
62
63 <div class="grid container" data-expected-width="100" data-expected-height="100" >
64 <div style="display: grid; grid-template-columns: 3fr; grid-template-rows: 2 fr;" data-expected-width="100" data-expected-height="100">
65 <div>XXX XXXX XX X XX XXX</div>
66 </div>
67 </div>
68
69 <div class="grid" style="grid; grid: 1fr 2fr / 2fr 1fr; width: 300px; height: 30 0px;" data-expected-width="300" data-expected-height="300">
70 <div class="firstRowFirstColumn" style="display: grid; grid: 1fr 3fr / 3fr 1 fr;" data-expected-width="200" data-expected-height="100">
71 <div style="border: 2px solid magenta;" data-expected-width="150" data-e xpected-height="25">XXXX</div>
72 <div class="secondRowSecondColumn" style="border: 2px solid cyan;" data- expected-width="50" data-expected-height="75">XXXX XX XX</div>
73 </div>
74 <div class="secondRowSecondColumn" style="display: grid; grid: 3fr 4fr / 4fr 3fr;" data-expected-width="100" data-expected-height="200">
75 <div style="border: 2px solid lime;" data-expected-width="56" data-expec ted-height="86">XXX XX X</div>
76 <div class="secondRowSecondColumn" style="border: 2px solid navy;" data- expected-width="44" data-expected-height="114">XXXX XXX XXXX XXX XXXX</div>
77 </div>
78 </div>
79
80
59 </body> 81 </body>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698