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

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html

Issue 22353013: [CSS Grid Layout] Unknown grid area should compute to 'auto' (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 7 years, 4 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 | Annotate | Revision Log
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-definition-rows: "firstRow" 10px 20px; 6 grid-definition-rows: 10px 20px;
7 grid-definition-columns: "firstColumn" 30px 40px; 7 grid-definition-columns: 30px 40px;
8 grid-auto-flow: row; 8 grid-auto-flow: row;
9 } 9 }
10 10
11 .bothSpanRow { 11 .bothNamedGridLineRow {
12 grid-row: nonExistentArea / nonExistentArea;
12 grid-column: 1; 13 grid-column: 1;
13 grid-row: span 5 "firstRow" / span 1;
14 } 14 }
15 15
16 .bothSpanColumn { 16 .bothNamedGridLineColumn {
17 grid-column: span / span 3;
18 grid-row: 1; 17 grid-row: 1;
18 grid-column: nonExistentArea / span 3;
19 } 19 }
20 20
21 .spanAutoRow { 21 .namedGridLineSpanRow {
22 grid-row: nonExistentArea / span 5 "firstRow";
22 grid-column: 1; 23 grid-column: 1;
23 grid-row: span 5 "firstRow" / auto;
24 } 24 }
25 25
26 .spanAutoColumn { 26 .namedGridLineSpanColumn {
27 grid-column: span / auto;
28 grid-row: 1; 27 grid-row: 1;
28 grid-column: nonExistentArea / span;
29 } 29 }
30 </style> 30 </style>
31 <script src="../../resources/check-layout.js"></script> 31 <script src="../../resources/check-layout.js"></script>
32 <body onload="checkLayout('.grid')"> 32 <body onload="checkLayout('.grid')">
33 33
34 <p>This test checks that we resolve 2 opposite 'span' / 'auto' positions by appl ying the auto-placement algorithm.</p> 34 <p>This test checks that unknown named area are treated as 'auto' by applying th e auto-placement algorithm when mandated.</p>
35 35
36 <div style="position: relative"> 36 <div style="position: relative">
37 <div class="grid"> 37 <div class="grid">
38 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data- offset-y="0" data-expected-width="30" data-expected-height="10"></div> 38 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data- offset-y="0" data-expected-width="30" data-expected-height="10"></div>
39 <div class="sizedToGridArea bothSpanRow" data-offset-x="0" data-offset-y ="10" data-expected-width="30" data-expected-height="20"></div> 39 <div class="sizedToGridArea bothNamedGridLineRow" data-offset-x="0" data -offset-y="10" data-expected-width="30" data-expected-height="20"></div>
40 </div> 40 </div>
41 </div> 41 </div>
42 42
43 <div style="position: relative"> 43 <div style="position: relative">
44 <div class="grid"> 44 <div class="grid">
45 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data- offset-y="0" data-expected-width="30" data-expected-height="10"></div> 45 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data- offset-y="0" data-expected-width="30" data-expected-height="10"></div>
46 <div class="sizedToGridArea bothSpanColumn" data-offset-x="30" data-offs et-y="0" data-expected-width="40" data-expected-height="10"></div> 46 <div class="sizedToGridArea bothNamedGridLineColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="10"></div>
47 </div> 47 </div>
48 </div> 48 </div>
49 49
50 <div style="position: relative"> 50 <div style="position: relative">
51 <div class="grid"> 51 <div class="grid">
52 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data- offset-y="0" data-expected-width="30" data-expected-height="10"></div> 52 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data- offset-y="0" data-expected-width="30" data-expected-height="10"></div>
53 <div class="sizedToGridArea spanAutoRow" data-offset-x="0" data-offset-y ="10" data-expected-width="30" data-expected-height="20"></div> 53 <div class="sizedToGridArea namedGridLineSpanRow" data-offset-x="0" data -offset-y="10" data-expected-width="30" data-expected-height="20"></div>
54 </div> 54 </div>
55 </div> 55 </div>
56 56
57 <div style="position: relative"> 57 <div style="position: relative">
58 <div class="grid"> 58 <div class="grid">
59 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data- offset-y="0" data-expected-width="30" data-expected-height="10"></div> 59 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data- offset-y="0" data-expected-width="30" data-expected-height="10"></div>
60 <div class="sizedToGridArea spanAutoColumn" data-offset-x="30" data-offs et-y="0" data-expected-width="40" data-expected-height="10"></div> 60 <div class="sizedToGridArea namedGridLineSpanColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="10"></div>
61 </div> 61 </div>
62 </div> 62 </div>
63 63
64 </body> 64 </body>
65 </html> 65 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698