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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html

Issue 2323793002: [css-grid] Allow percentage values for column and row gutters (Closed)
Patch Set: Apply review comments Created 4 years, 3 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-gutters-as-percentage.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt » ('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 <style> 5 <style>
6 .gridGap { grid-gap: 20px 15px; } 6 .gridGap { grid-gap: 20px 15px; }
7 .gridPercentGap { grid-gap: 10% 15%; }
7 .gridSimpleGap { grid-gap: 25px; } 8 .gridSimpleGap { grid-gap: 25px; }
9 .gridSimplePercentGap { grid-gap: 10%; }
8 .gridColumnGap { grid-column-gap: 2vw; } 10 .gridColumnGap { grid-column-gap: 2vw; }
9 .gridRowGap { grid-row-gap: 2em; } 11 .gridRowGap { grid-row-gap: 2em; }
10 .gridRowColumnGaps { 12 .gridRowColumnGaps {
11 grid-row-gap: 12px; 13 grid-row-gap: 12px;
12 grid-column-gap: 1rem; 14 grid-column-gap: 1rem;
13 } 15 }
16 .gridRowColumnPercentGaps {
17 grid-row-gap: 10%;
18 grid-column-gap: 15%;
19 }
14 .gridRowColumnInheritGaps { 20 .gridRowColumnInheritGaps {
15 grid-row-gap: inherit; 21 grid-row-gap: inherit;
16 grid-column-gap: inherit; 22 grid-column-gap: inherit;
17 } 23 }
18 .gridRowColumnInitialGaps { 24 .gridRowColumnInitialGaps {
19 grid-row-gap: initial; 25 grid-row-gap: initial;
20 grid-column-gap: initial; 26 grid-column-gap: initial;
21 } 27 }
22 .gridCalcGaps { 28 .gridCalcGaps {
23 grid-row-gap: calc(10px + 3px); 29 grid-row-gap: calc(10px + 3px);
24 grid-column-gap: calc(2px + 1vw); 30 grid-column-gap: calc(2px + 1vw);
25 } 31 }
26 .gridInvalidRowGap { grid-row-gap: 10%; } 32 .gridInvalidRowGap { grid-row-gap: -10px; }
27 .gridInvalidColumnGap { grid-column-gap: -webkit-max-content; } 33 .gridInvalidColumnGap { grid-column-gap: -webkit-max-content; }
28 .gridInvalidMultipleRowColumnGaps { 34 .gridInvalidMultipleRowColumnGaps {
29 grid-row-gap: 10px 1px; 35 grid-row-gap: 10px 1px;
30 grid-column-gap: 0px 0px 0px; 36 grid-column-gap: 0px 0px 0px;
31 } 37 }
32 .gridInvalidLengthRowColumnGaps { 38 .gridInvalidLengthRowColumnGaps {
33 grid-row-gap: 2dpi; 39 grid-row-gap: 2dpi;
34 grid-column-gap: 3rad; 40 grid-column-gap: 3rad;
35 } 41 }
36 .gridInvalidGridGap { grid-gap: 20px 20px 10px; } 42 .gridInvalidGridGap { grid-gap: 20px 20px 10px; }
37 .gridInvalidNoneGap { grid-gap: none; } 43 .gridInvalidNoneGap { grid-gap: none; }
38 .gridInvalidImplicitGridGap { grid-gap: -webkit-fit-content; } 44 .gridInvalidImplicitGridGap { grid-gap: -webkit-fit-content; }
39 45
40 </style> 46 </style>
41 <script src="../../resources/js-test.js"></script> 47 <script src="../../resources/js-test.js"></script>
42 </head> 48 </head>
43 <body> 49 <body>
44 50
45 <div class="grid" id="defaultGrid"></div> 51 <div class="grid" id="defaultGrid"></div>
46 <div class="grid gridGap" id="gridGap"></div> 52 <div class="grid gridGap" id="gridGap"></div>
53 <div class="grid gridPercentGap" id="gridPercentGap"></div>
47 <div class="grid gridSimpleGap" id="gridSimpleGap"></div> 54 <div class="grid gridSimpleGap" id="gridSimpleGap"></div>
55 <div class="grid gridSimplePercentGap" id="gridSimplePercentGap"></div>
48 <div class="grid gridColumnGap" id="gridColumnGap"></div> 56 <div class="grid gridColumnGap" id="gridColumnGap"></div>
49 <div class="grid gridRowGap" id="gridRowGap"></div> 57 <div class="grid gridRowGap" id="gridRowGap"></div>
50 <div class="grid gridCalcGaps" id="gridCalcGaps"></div> 58 <div class="grid gridCalcGaps" id="gridCalcGaps"></div>
51 <div class="grid gridRowColumnGaps" id="gridRowColumnGaps"></div> 59 <div class="grid gridRowColumnGaps" id="gridRowColumnGaps"></div>
60 <div class="grid gridRowColumnPercentGaps" id="gridRowColumnPercentGaps"></div>
52 <div class="grid gridSimpleGap"> 61 <div class="grid gridSimpleGap">
53 <div class="grid gridRowColumnInheritGaps" id="gridRowColumnInheritGaps"></d iv> 62 <div class="grid gridRowColumnInheritGaps" id="gridRowColumnInheritGaps"></d iv>
54 </div> 63 </div>
55 <div class="grid gridSimpleGap"> 64 <div class="grid gridSimpleGap">
56 <div class="grid gridRowColumnInitialGaps" id="gridRowColumnInitialGaps"></d iv> 65 <div class="grid gridRowColumnInitialGaps" id="gridRowColumnInitialGaps"></d iv>
57 </div> 66 </div>
58 <div class="grid gridInvalidRowGap" id="gridInvalidRowGap"></div> 67 <div class="grid gridInvalidRowGap" id="gridInvalidRowGap"></div>
59 <div class="grid gridInvalidColumnGap" id="gridInvalidColumnGap"></div> 68 <div class="grid gridInvalidColumnGap" id="gridInvalidColumnGap"></div>
60 <div class="grid gridInvalidMultipleRowColumnGaps" id="gridInvalidMultipleRowCol umnGaps"></div> 69 <div class="grid gridInvalidMultipleRowColumnGaps" id="gridInvalidMultipleRowCol umnGaps"></div>
61 <div class="grid gridInvalidGridGap" id="gridInvalidGridGap"></div> 70 <div class="grid gridInvalidGridGap" id="gridInvalidGridGap"></div>
62 <div class="grid gridInvalidNoneGap" id="gridInvalidNoneGap"></div> 71 <div class="grid gridInvalidNoneGap" id="gridInvalidNoneGap"></div>
63 <div class="grid gridInvalidImplicitGridGap" id="gridInvalidImplicitGridGap"></d iv> 72 <div class="grid gridInvalidImplicitGridGap" id="gridInvalidImplicitGridGap"></d iv>
64 <div class="grid gridInvalidLengthRowColumnGaps" id="gridInvalidLengthRowColumnG aps"></div> 73 <div class="grid gridInvalidLengthRowColumnGaps" id="gridInvalidLengthRowColumnG aps"></div>
65 74
66 <script src="resources/grid-definitions-parsing-utils.js"></script> 75 <script src="resources/grid-definitions-parsing-utils.js"></script>
67 <script> 76 <script>
68 77
69 description('Test that setting and getting grid-column-gap and grid-row-gap work s as expected'); 78 description('Test that setting and getting grid-column-gap and grid-row-gap work s as expected');
70 79
71 debug("Test getting grid-column-gap and grid-row-gap set through CSS"); 80 debug("Test getting grid-column-gap and grid-row-gap set through CSS");
72 81
73 testGridGapDefinitionsValues("defaultGrid", "0px", "0px"); 82 testGridGapDefinitionsValues("defaultGrid", "0px", "0px");
74 testGridGapDefinitionsValues("gridGap", "20px", "15px"); 83 testGridGapDefinitionsValues("gridGap", "20px", "15px");
84 testGridGapDefinitionsValues("gridPercentGap", "10%", "15%");
75 testGridGapDefinitionsValues("gridSimpleGap", "25px", "25px"); 85 testGridGapDefinitionsValues("gridSimpleGap", "25px", "25px");
86 testGridGapDefinitionsValues("gridSimplePercentGap", "10%", "10%");
76 testGridGapDefinitionsValues("gridColumnGap", "0px", "16px"); 87 testGridGapDefinitionsValues("gridColumnGap", "0px", "16px");
77 testGridGapDefinitionsValues("gridRowGap", "32px", "0px"); 88 testGridGapDefinitionsValues("gridRowGap", "32px", "0px");
78 testGridGapDefinitionsValues("gridCalcGaps", "13px", "10px"); 89 testGridGapDefinitionsValues("gridCalcGaps", "13px", "10px");
79 testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px"); 90 testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px");
80 testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px"); 91 testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px");
92 testGridGapDefinitionsValues("gridRowColumnPercentGaps", "10%", "15%");
81 testGridGapDefinitionsValues("gridRowColumnInheritGaps", "25px", "25px"); 93 testGridGapDefinitionsValues("gridRowColumnInheritGaps", "25px", "25px");
82 testGridGapDefinitionsValues("gridRowColumnInitialGaps", "0px", "0px"); 94 testGridGapDefinitionsValues("gridRowColumnInitialGaps", "0px", "0px");
83 95
84 debug(""); 96 debug("");
85 debug("Test getting wrong values for grid-column-gap and grid-row-gap set throug h CSS"); 97 debug("Test getting wrong values for grid-column-gap and grid-row-gap set throug h CSS");
86 testGridGapDefinitionsValues("gridInvalidRowGap", "0px", "0px"); 98 testGridGapDefinitionsValues("gridInvalidRowGap", "0px", "0px");
87 testGridGapDefinitionsValues("gridInvalidColumnGap", "0px", "0px"); 99 testGridGapDefinitionsValues("gridInvalidColumnGap", "0px", "0px");
88 testGridGapDefinitionsValues("gridInvalidMultipleRowColumnGaps", "0px", "0px"); 100 testGridGapDefinitionsValues("gridInvalidMultipleRowColumnGaps", "0px", "0px");
89 testGridGapDefinitionsValues("gridInvalidGridGap", "0px", "0px"); 101 testGridGapDefinitionsValues("gridInvalidGridGap", "0px", "0px");
90 testGridGapDefinitionsValues("gridInvalidNoneGap", "0px", "0px"); 102 testGridGapDefinitionsValues("gridInvalidNoneGap", "0px", "0px");
91 testGridGapDefinitionsValues("gridInvalidImplicitGridGap", "0px", "0px"); 103 testGridGapDefinitionsValues("gridInvalidImplicitGridGap", "0px", "0px");
92 testGridGapDefinitionsValues("gridInvalidLengthRowColumnGaps", "0px", "0px"); 104 testGridGapDefinitionsValues("gridInvalidLengthRowColumnGaps", "0px", "0px");
93 105
94 </script> 106 </script>
95 </body> 107 </body>
96 </html> 108 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-as-percentage.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698