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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.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/grid-content-alignment-and-self-alignment.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span.html » ('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 <html> 2 <html>
3 <head> 3 <head>
4 <link href="resources/grid.css" rel="stylesheet"> 4 <link href="resources/grid.css" rel="stylesheet">
5 <link href="resources/grid-alignment.css" rel="stylesheet">
5 <script src="../../resources/check-layout.js"></script> 6 <script src="../../resources/check-layout.js"></script>
6 <style> 7 <style>
7 body { 8 body {
8 margin: 0; 9 margin: 0;
9 } 10 }
10 11
11 .grid { 12 .grid {
12 grid-template-columns: 50px 50px; 13 grid-template-columns: 50px 50px;
13 grid-template-rows: 100px 100px; 14 grid-template-rows: 100px 100px;
14 } 15 }
15 16
16 .overflowWidth { 17 .overflowWidth {
17 width: 60px; 18 width: 60px;
18 height: 300px; 19 height: 300px;
19 } 20 }
20 21
21 .overflowHeight { 22 .overflowHeight {
22 width: 200px; 23 width: 200px;
23 height: 150px; 24 height: 150px;
24 } 25 }
25
26 .center {
27 align-content: center;
28 justify-content: center;
29 }
30
31 .centerSafe {
32 align-content: center safe;
33 justify-content: center safe;
34 }
35
36 .centerUnsafe {
37 align-content: center unsafe;
38 justify-content: center unsafe;
39 }
40
41 .end {
42 align-content: end;
43 justify-content: end;
44 }
45
46 .endSafe {
47 align-content: end safe;
48 justify-content: end safe;
49 }
50
51 .endUnsafe {
52 align-content: end unsafe;
53 justify-content: end unsafe;
54 }
55
56 </style> 26 </style>
57 </head> 27 </head>
58 <body onload="checkLayout('.grid')"> 28 <body onload="checkLayout('.grid')">
59 29
60 <p>This test checks that the 'overflow' keyword is applied correctly for Content Alignment properties.</p> 30 <p>This test checks that the 'overflow' keyword is applied correctly for Content Alignment properties.</p>
61 31
62 <div style="position: relative"> 32 <div style="position: relative">
63 <div class="grid overflowWidth center" data-expected-width="60" data-expecte d-height="300"> 33 <div class="grid overflowWidth contentCenter" data-expected-width="60" data- expected-height="300">
64 <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> 34 <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
65 <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150 " data-expected-width="50" data-expected-height="100"></div> 35 <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150 " data-expected-width="50" data-expected-height="100"></div>
66 <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> 36 <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
67 <div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150 " data-expected-width="50" data-expected-height="100"></div> 37 <div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150 " data-expected-width="50" data-expected-height="100"></div>
68 </div> 38 </div>
69 </div> 39 </div>
70 40
71 <div style="position: relative"> 41 <div style="position: relative">
72 <div class="grid overflowHeight centerUnsafe" data-expected-width="200" data -expected-height="150"> 42 <div class="grid overflowHeight contentCenterUnsafe" data-expected-width="20 0" data-expected-height="150">
73 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div> 43 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
74 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div> 44 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
75 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="-25 " data-expected-width="50" data-expected-height="100"></div> 45 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="-25 " data-expected-width="50" data-expected-height="100"></div>
76 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75 " data-expected-width="50" data-expected-height="100"></div> 46 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75 " data-expected-width="50" data-expected-height="100"></div>
77 </div> 47 </div>
78 </div> 48 </div>
79 49
80 <div style="position: relative"> 50 <div style="position: relative">
81 <div class="grid overflowWidth centerSafe" data-expected-width="60" data-exp ected-height="300"> 51 <div class="grid overflowWidth contentCenterSafe" data-expected-width="60" d ata-expected-height="300">
82 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="50" da ta-expected-width="50" data-expected-height="100"></div> 52 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="50" da ta-expected-width="50" data-expected-height="100"></div>
83 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> 53 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
84 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> 54 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
85 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="150 " data-expected-width="50" data-expected-height="100"></div> 55 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="150 " data-expected-width="50" data-expected-height="100"></div>
86 </div> 56 </div>
87 </div> 57 </div>
88 58
89 <div style="position: relative"> 59 <div style="position: relative">
90 <div class="grid overflowHeight centerSafe" data-expected-width="200" data-e xpected-height="150"> 60 <div class="grid overflowHeight contentCenterSafe" data-expected-width="200" data-expected-height="150">
91 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" da ta-expected-width="50" data-expected-height="100"></div> 61 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" da ta-expected-width="50" data-expected-height="100"></div>
92 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> 62 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
93 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> 63 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
94 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="10 0" data-expected-width="50" data-expected-height="100"></div> 64 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="10 0" data-expected-width="50" data-expected-height="100"></div>
95 </div> 65 </div>
96 </div> 66 </div>
97 67
98 <div style="position: relative"> 68 <div style="position: relative">
99 <div class="grid overflowWidth end" data-expected-width="60" data-expected-h eight="300"> 69 <div class="grid overflowWidth contentEnd" data-expected-width="60" data-exp ected-height="300">
100 <div class="firstRowFirstColumn" data-offset-x="-40" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> 70 <div class="firstRowFirstColumn" data-offset-x="-40" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
101 <div class="secondRowFirstColumn" data-offset-x="-40" data-offset-y="200 " data-expected-width="50" data-expected-height="100"></div> 71 <div class="secondRowFirstColumn" data-offset-x="-40" data-offset-y="200 " data-expected-width="50" data-expected-height="100"></div>
102 <div class="firstRowSecondColumn" data-offset-x="10" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> 72 <div class="firstRowSecondColumn" data-offset-x="10" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
103 <div class="secondRowSecondColumn" data-offset-x="10" data-offset-y="200 " data-expected-width="50" data-expected-height="100"></div> 73 <div class="secondRowSecondColumn" data-offset-x="10" data-offset-y="200 " data-expected-width="50" data-expected-height="100"></div>
104 </div> 74 </div>
105 </div> 75 </div>
106 76
107 <div style="position: relative"> 77 <div style="position: relative">
108 <div class="grid overflowHeight endUnsafe" data-expected-width="200" data-ex pected-height="150"> 78 <div class="grid overflowHeight contentEndUnsafe" data-expected-width="200" data-expected-height="150">
109 <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div> 79 <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div>
110 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> 80 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
111 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="-50 " data-expected-width="50" data-expected-height="100"></div> 81 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="-50 " data-expected-width="50" data-expected-height="100"></div>
112 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="50 " data-expected-width="50" data-expected-height="100"></div> 82 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="50 " data-expected-width="50" data-expected-height="100"></div>
113 </div> 83 </div>
114 </div> 84 </div>
115 85
116 <div style="position: relative"> 86 <div style="position: relative">
117 <div class="grid overflowWidth endSafe" data-expected-width="60" data-expect ed-height="300"> 87 <div class="grid overflowWidth contentEndSafe" data-expected-width="60" data -expected-height="300">
118 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" d ata-expected-width="50" data-expected-height="100"></div> 88 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" d ata-expected-width="50" data-expected-height="100"></div>
119 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> 89 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
120 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> 90 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
121 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="200 " data-expected-width="50" data-expected-height="100"></div> 91 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="200 " data-expected-width="50" data-expected-height="100"></div>
122 </div> 92 </div>
123 </div> 93 </div>
124 94
125 <div style="position: relative"> 95 <div style="position: relative">
126 <div class="grid overflowHeight endSafe" data-expected-width="200" data-expe cted-height="150"> 96 <div class="grid overflowHeight contentEndSafe" data-expected-width="200" da ta-expected-height="150">
127 <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" d ata-expected-width="50" data-expected-height="100"></div> 97 <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" d ata-expected-width="50" data-expected-height="100"></div>
128 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100 " data-expected-width="50" data-expected-height="100"></div> 98 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100 " data-expected-width="50" data-expected-height="100"></div>
129 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> 99 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
130 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="10 0" data-expected-width="50" data-expected-height="100"></div> 100 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="10 0" data-expected-width="50" data-expected-height="100"></div>
131 </div> 101 </div>
132 </div> 102 </div>
133 103
134 </body> 104 </body>
135 </html> 105 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698