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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-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
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-justify-content.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.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: 0px; 9 margin: 0px;
9 } 10 }
10 11
11 .grid { 12 .grid {
12 grid-auto-columns: 20px; 13 grid-auto-columns: 20px;
13 grid-auto-rows: 40px; 14 grid-auto-rows: 40px;
14 position: relative; 15 position: relative;
15 width: 400px; 16 width: 400px;
16 height: 300px; 17 height: 300px;
17 } 18 }
18 19
19 .stretchedGrid { 20 .stretchedGrid {
20 grid-auto-columns: auto; 21 grid-auto-columns: auto;
21 } 22 }
22 23
23 .justifyContentSpaceBetween {
24 justify-content: space-between;
25 }
26
27 .justifyContentSpaceAround {
28 justify-content: space-around;
29 }
30
31 .justifyContentSpaceEvenly {
32 justify-content: space-evenly;
33 }
34
35 .justifyContentStretch {
36 justify-content: stretch;
37 }
38
39 .firstRowThirdColumn {
40 background-color: magenta;
41 grid-column: 3;
42 grid-row: 1;
43 }
44
45 .secondRowThirdColumn {
46 background-color: navy;
47 grid-column: 3;
48 grid-row: 2;
49 }
50
51 .firstRowFourthColumn {
52 background-color: green;
53 grid-column: 4;
54 grid-row: 1;
55 }
56
57 .secondRowFourthColumn {
58 background-color: pink;
59 grid-column: 4;
60 grid-row: 2;
61 }
62 </style> 24 </style>
63 </head> 25 </head>
64 <body onload="checkLayout('.grid')"> 26 <body onload="checkLayout('.grid')">
65 27
66 <p>This test checks that the justify-content property is applied correctly when using content-distribution values.</p> 28 <p>This test checks that the justify-content property is applied correctly when using content-distribution values.</p>
67 29
68 <div style="position: relative"> 30 <div style="position: relative">
69 <p>direction: LTR | justify-content: 'space-between'</p> 31 <p>direction: LTR | justify-content: 'space-between'</p>
70 <div class="grid justifyContentSpaceBetween verticalLR" data-expected-width= "400" data-expected-height="300"> 32 <div class="grid justifyContentSpaceBetween verticalLR" data-expected-width= "400" data-expected-height="300">
71 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="40" data-expected-height="20"></div> 33 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="40" data-expected-height="20"></div>
(...skipping 276 matching lines...) Expand 10 before | Expand all | Expand 10 after
348 <div class="firstRowThirdColumn" data-offset-x="0" data-offset-y="75" da ta-expected-width="40" data-expected-height="75"></div> 310 <div class="firstRowThirdColumn" data-offset-x="0" data-offset-y="75" da ta-expected-width="40" data-expected-height="75"></div>
349 <div class="firstRowFourthColumn" data-offset-x="0" data-offset-y="0" da ta-expected-width="40" data-expected-height="75"></div> 311 <div class="firstRowFourthColumn" data-offset-x="0" data-offset-y="0" da ta-expected-width="40" data-expected-height="75"></div>
350 <div class="secondRowFirstColumn" data-offset-x="40" data-offset-y="225" data-expected-width="40" data-expected-height="75"></div> 312 <div class="secondRowFirstColumn" data-offset-x="40" data-offset-y="225" data-expected-width="40" data-expected-height="75"></div>
351 <div class="secondRowSecondColumn" data-offset-x="40" data-offset-y="150 " data-expected-width="40" data-expected-height="75"></div> 313 <div class="secondRowSecondColumn" data-offset-x="40" data-offset-y="150 " data-expected-width="40" data-expected-height="75"></div>
352 <div class="secondRowThirdColumn" data-offset-x="40" data-offset-y="75" data-expected-width="40" data-expected-height="75"></div> 314 <div class="secondRowThirdColumn" data-offset-x="40" data-offset-y="75" data-expected-width="40" data-expected-height="75"></div>
353 <div class="secondRowFourthColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="75"></div> 315 <div class="secondRowFourthColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="75"></div>
354 </div> 316 </div>
355 </div> 317 </div>
356 </body> 318 </body>
357 </html> 319 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-justify-content.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698