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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html

Issue 1309513008: [css-grid] Implement grid gutters (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Rebased patch for landing Created 5 years, 2 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 <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: 100px 200px; 13 grid-template-columns: 100px 200px;
13 grid-template-rows: 200px 200px; 14 grid-template-rows: 200px 200px;
14 padding: 10px 15px 20px 30px; 15 padding: 10px 15px 20px 30px;
15 border-width: 5px 10px 15px 20px; 16 border-width: 5px 10px 15px 20px;
16 border-style: dotted; 17 border-style: dotted;
17 border-color: blue; 18 border-color: blue;
18 width: -webkit-fit-content; 19 width: -webkit-fit-content;
19 position: relative; 20 position: relative;
20 } 21 }
21 22
22 .cell { 23 .cell {
23 width: 20px; 24 width: 20px;
24 height: 40px; 25 height: 40px;
25 margin: 4px 8px 12px 16px; 26 margin: 4px 8px 12px 16px;
26 } 27 }
27 28
28 .itemsCenter {
29 align-items: center;
30 justify-items: center;
31 }
32
33 .itemsEnd {
34 align-items: end;
35 justify-items: end;
36 }
37
38 .itemsLeft {
39 align-items: left;
40 justify-items: left;
41 }
42
43 .itemsRight {
44 align-items: right;
45 justify-items: right;
46 }
47
48 .itemsSelfStart {
49 align-items: self-start;
50 justify-items: self-start;
51 }
52
53 .itemsSelfEnd {
54 align-items: self-end;
55 justify-items: self-end;
56 }
57
58 .stretch { 29 .stretch {
59 align-self: stretch; 30 align-self: stretch;
60 justify-self: stretch; 31 justify-self: stretch;
61 } 32 }
62 33
63 </style> 34 </style>
64 </head> 35 </head>
65 <body onload="checkLayout('.grid')"> 36 <body onload="checkLayout('.grid')">
66 37
67 <p>This test checks that the 'margin', 'border' and 'padding' properties are app lied together correctly for 'align' and 'justify' properties on vertical-LR grid s.</p> 38 <p>This test checks that the 'margin', 'border' and 'padding' properties are app lied together correctly for 'align' and 'justify' properties on vertical-LR grid s.</p>
(...skipping 192 matching lines...) Expand 10 before | Expand all | Expand 10 after
260 <div class="grid verticalLR directionRTL itemsSelfEnd" data-expected-width=" 475" data-expected-height="350"> 231 <div class="grid verticalLR directionRTL itemsSelfEnd" data-expected-width=" 475" data-expected-height="350">
261 <div class="directionRTL cell firstRowFirstColumn" data-offset-x="20 2" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div > 232 <div class="directionRTL cell firstRowFirstColumn" data-offset-x="20 2" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div >
262 <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30 " data-offset-y="10" data-expected-width="200" data-expected-height="200"></di v> 233 <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30 " data-offset-y="10" data-expected-width="200" data-expected-height="200"></di v>
263 <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="23 0" data-offset-y="210" data-expected-width="200" data-expected-height="100"></di v> 234 <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="23 0" data-offset-y="210" data-expected-width="200" data-expected-height="100"></di v>
264 <div class="directionRTL cell secondRowSecondColumn" data-offset-x="40 2" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 235 <div class="directionRTL cell secondRowSecondColumn" data-offset-x="40 2" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
265 </div> 236 </div>
266 </div> 237 </div>
267 238
268 </body> 239 </body>
269 </html> 240 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698