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

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-item-order-auto-flow-resolution.html

Issue 401473003: [CSS Grid Layout] Rename gridAutoFlow[Row|Column] to gridAutoFlow[Row|Column]Sparse (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Keep separation between sparse and dense in the tests Created 6 years, 5 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
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <link href="resources/grid.css" rel="stylesheet"> 3 <link href="resources/grid.css" rel="stylesheet">
4 <style> 4 <style>
5 .grid { 5 .grid {
6 grid-template-columns: 50px 100px; 6 grid-template-columns: 50px 100px;
7 grid-template-rows: 50px 100px; 7 grid-template-rows: 50px 100px;
8 } 8 }
9 9
10 .negativeOrder { 10 .negativeOrder {
11 order: -1; 11 order: -1;
12 } 12 }
13 13
14 .positiveOrder { 14 .positiveOrder {
15 order: 10; 15 order: 10;
16 } 16 }
17 </style> 17 </style>
18 </head> 18 </head>
19 <script src="../../resources/check-layout.js"></script> 19 <script src="../../resources/check-layout.js"></script>
20 <body onload="checkLayout('.grid')"> 20 <body onload="checkLayout('.grid')">
21 <p>This test checks that the auto-placement algorithm takes 'order' into acc ount when placing grid items.</p> 21 <p>This test checks that the auto-placement algorithm takes 'order' into acc ount when placing grid items.</p>
22 22
23 <!-- Step 1, grid item with a major-axis position that is not 'auto'. --> 23 <!-- Step 1, grid item with a major-axis position that is not 'auto'. -->
24 <div style="position: relative"> 24 <div style="position: relative">
25 <div class="grid gridAutoFlowRow"> 25 <div class="grid gridAutoFlowRowDense">
26 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="50" d ata-offset-y="0" data-expected-width="100" data-expected-height="50"></div> 26 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="50" d ata-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
27 <div class="sizedToGridArea firstRowAutoColumn negativeOrder" data-o ffset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50" ></div> 27 <div class="sizedToGridArea firstRowAutoColumn negativeOrder" data-o ffset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50" ></div>
28 </div> 28 </div>
29 </div> 29 </div>
30 30
31 <div style="position: relative"> 31 <div style="position: relative">
32 <div class="grid gridAutoFlowRow"> 32 <div class="grid gridAutoFlowRowDense">
33 <div class="sizedToGridArea firstRowAutoColumn positiveOrder" data-o ffset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="5 0"></div> 33 <div class="sizedToGridArea firstRowAutoColumn positiveOrder" data-o ffset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="5 0"></div>
34 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" da ta-offset-y="0" data-expected-width="50" data-expected-height="50"></div> 34 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" da ta-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
35 </div> 35 </div>
36 </div> 36 </div>
37 37
38 <!-- Step 4.1, grid items with a minor-axis position that is not 'auto'. --> 38 <!-- Step 4.1, grid items with a minor-axis position that is not 'auto'. -->
39 <div style="position: relative"> 39 <div style="position: relative">
40 <div class="grid gridAutoFlowColumn"> 40 <div class="grid gridAutoFlowColumnDense">
41 <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div> 41 <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
42 <div class="sizedToGridArea secondRowAutoColumn negativeOrder" data- offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="1 00"></div> 42 <div class="sizedToGridArea secondRowAutoColumn negativeOrder" data- offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="1 00"></div>
43 </div> 43 </div>
44 </div> 44 </div>
45 45
46 <div style="position: relative"> 46 <div style="position: relative">
47 <div class="grid gridAutoFlowColumn"> 47 <div class="grid gridAutoFlowColumnDense">
48 <div class="sizedToGridArea secondRowAutoColumn positiveOrder" data- offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height= "100"></div> 48 <div class="sizedToGridArea secondRowAutoColumn positiveOrder" data- offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height= "100"></div>
49 <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" d ata-offset-y="50" data-expected-width="50" data-expected-height="100"></div> 49 <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" d ata-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
50 </div> 50 </div>
51 </div> 51 </div>
52 52
53 <!-- Step 4.2, both minor and major-axis position are 'auto'. --> 53 <!-- Step 4.2, both minor and major-axis position are 'auto'. -->
54 <div style="position: relative"> 54 <div style="position: relative">
55 <div class="grid gridAutoFlowColumn"> 55 <div class="grid gridAutoFlowColumnDense">
56 <div class="sizedToGridArea" data-offset-x="0" data-offset-y="50" da ta-expected-width="50" data-expected-height="100"></div> 56 <div class="sizedToGridArea" data-offset-x="0" data-offset-y="50" da ta-expected-width="50" data-expected-height="100"></div>
57 <div class="sizedToGridArea negativeOrder" data-offset-x="0" data-of fset-y="0" data-expected-width="50" data-expected-height="50"></div> 57 <div class="sizedToGridArea negativeOrder" data-offset-x="0" data-of fset-y="0" data-expected-width="50" data-expected-height="50"></div>
58 </div> 58 </div>
59 </div> 59 </div>
60 60
61 <div style="position: relative"> 61 <div style="position: relative">
62 <div class="grid gridAutoFlowColumn"> 62 <div class="grid gridAutoFlowColumnDense">
63 <div class="sizedToGridArea positiveOrder" data-offset-x="0" data-of fset-y="50" data-expected-width="50" data-expected-height="100"></div> 63 <div class="sizedToGridArea positiveOrder" data-offset-x="0" data-of fset-y="50" data-expected-width="50" data-expected-height="100"></div>
64 <div class="sizedToGridArea" data-offset-x="0" data-offset-y="0" dat a-expected-width="50" data-expected-height="50"></div> 64 <div class="sizedToGridArea" data-offset-x="0" data-offset-y="0" dat a-expected-width="50" data-expected-height="50"></div>
65 </div> 65 </div>
66 </div> 66 </div>
67 67
68 </body> 68 </body>
69 </html> 69 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698