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

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html

Issue 146773002: [CSS Grid Layout] Rename grid-definition-{columns|rows} to match the new syntax (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Fixed renaming issues with some tests. Created 6 years, 10 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 PUBLIC "-//IETF//DTD HTML//EN"> 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
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 .grid { 6 .grid {
7 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */ 7 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */
8 width: 800px; 8 width: 800px;
9 height: 600px; 9 height: 600px;
10 } 10 }
11 .gridItem { 11 .gridItem {
12 grid-column: 1; 12 grid-column: 1;
13 grid-row: 1; 13 grid-row: 1;
14 width: 7px; 14 width: 7px;
15 height: 11px; 15 height: 11px;
16 } 16 }
17 .gridItem2 { 17 .gridItem2 {
18 grid-column: 1; 18 grid-column: 1;
19 grid-row: 1; 19 grid-row: 1;
20 width: 17px; 20 width: 17px;
21 height: 3px; 21 height: 3px;
22 } 22 }
23 .gridWithNone { 23 .gridWithNone {
24 grid-definition-columns: none; 24 grid-template-columns: none;
25 grid-definition-rows: none; 25 grid-template-rows: none;
26 } 26 }
27 .gridWithFixed { 27 .gridWithFixed {
28 grid-definition-columns: 10px; 28 grid-template-columns: 10px;
29 grid-definition-rows: 15px; 29 grid-template-rows: 15px;
30 } 30 }
31 .gridWithPercent { 31 .gridWithPercent {
32 grid-definition-columns: 50%; 32 grid-template-columns: 50%;
33 grid-definition-rows: 25%; 33 grid-template-rows: 25%;
34 } 34 }
35 .gridWithAuto { 35 .gridWithAuto {
36 grid-definition-columns: auto; 36 grid-template-columns: auto;
37 grid-definition-rows: auto; 37 grid-template-rows: auto;
38 } 38 }
39 .gridWithEM { 39 .gridWithEM {
40 grid-definition-columns: 10em; 40 grid-template-columns: 10em;
41 grid-definition-rows: 15em; 41 grid-template-rows: 15em;
42 font: 10px Ahem; 42 font: 10px Ahem;
43 } 43 }
44 .gridWithViewPortPercentage { 44 .gridWithViewPortPercentage {
45 grid-definition-columns: 8vw; 45 grid-template-columns: 8vw;
46 grid-definition-rows: 10vh; 46 grid-template-rows: 10vh;
47 } 47 }
48 .gridWithFitContent { 48 .gridWithFitContent {
49 grid-definition-columns: -webkit-fit-content; 49 grid-template-columns: -webkit-fit-content;
50 grid-definition-rows: -webkit-fit-content; 50 grid-template-rows: -webkit-fit-content;
51 } 51 }
52 .gridWithFitAvailable { 52 .gridWithFitAvailable {
53 grid-definition-columns: -webkit-fit-available; 53 grid-template-columns: -webkit-fit-available;
54 grid-definition-rows: -webkit-fit-available; 54 grid-template-rows: -webkit-fit-available;
55 } 55 }
56 .gridWithMinMax { 56 .gridWithMinMax {
57 grid-definition-columns: minmax(10%, 15px); 57 grid-template-columns: minmax(10%, 15px);
58 grid-definition-rows: minmax(20px, 50%); 58 grid-template-rows: minmax(20px, 50%);
59 } 59 }
60 .gridWithMinContent { 60 .gridWithMinContent {
61 grid-definition-columns: min-content; 61 grid-template-columns: min-content;
62 grid-definition-rows: min-content; 62 grid-template-rows: min-content;
63 } 63 }
64 .gridWithMaxContent { 64 .gridWithMaxContent {
65 grid-definition-columns: max-content; 65 grid-template-columns: max-content;
66 grid-definition-rows: max-content; 66 grid-template-rows: max-content;
67 } 67 }
68 .gridWithFraction { 68 .gridWithFraction {
69 grid-definition-columns: 1fr; 69 grid-template-columns: 1fr;
70 grid-definition-rows: 2fr; 70 grid-template-rows: 2fr;
71 } 71 }
72 .gridWithCalc { 72 .gridWithCalc {
73 grid-definition-columns: calc(150px); 73 grid-template-columns: calc(150px);
74 grid-definition-rows: calc(75px); 74 grid-template-rows: calc(75px);
75 } 75 }
76 .gridWithCalcComplex { 76 .gridWithCalcComplex {
77 grid-definition-columns: calc(50% + 150px); 77 grid-template-columns: calc(50% + 150px);
78 grid-definition-rows: calc(65% + 75px); 78 grid-template-rows: calc(65% + 75px);
79 } 79 }
80 .gridWithCalcInsideMinMax { 80 .gridWithCalcInsideMinMax {
81 grid-definition-columns: minmax(10%, calc(15px)); 81 grid-template-columns: minmax(10%, calc(15px));
82 grid-definition-rows: minmax(calc(20px), 50%); 82 grid-template-rows: minmax(calc(20px), 50%);
83 } 83 }
84 .gridWithCalcComplexInsideMinMax { 84 .gridWithCalcComplexInsideMinMax {
85 grid-definition-columns: minmax(10%, calc(50% + 15px)); 85 grid-template-columns: minmax(10%, calc(50% + 15px));
86 grid-definition-rows: minmax(calc(20px + 10%), 50%); 86 grid-template-rows: minmax(calc(20px + 10%), 50%);
87 } 87 }
88 </style> 88 </style>
89 <script src="../../resources/js-test.js"></script> 89 <script src="../../resources/js-test.js"></script>
90 </head> 90 </head>
91 <body> 91 <body>
92 <div class="grid gridWithNone" id="gridWithNoneElement"></div> 92 <div class="grid gridWithNone" id="gridWithNoneElement"></div>
93 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> 93 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>
94 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> 94 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>
95 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"> </div> 95 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"> </div>
96 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWi thChildren"> 96 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWi thChildren">
(...skipping 21 matching lines...) Expand all
118 </div> 118 </div>
119 <div class="grid gridWithFraction" id="gridWithFractionElement"></div> 119 <div class="grid gridWithFraction" id="gridWithFractionElement"></div>
120 <div class="grid gridWithCalc" id="gridWithCalcElement"></div> 120 <div class="grid gridWithCalc" id="gridWithCalcElement"></div>
121 <div class="grid gridWithCalcComplex" id="gridWithCalcComplexElement"></div> 121 <div class="grid gridWithCalcComplex" id="gridWithCalcComplexElement"></div>
122 <div class="grid gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMaxElement"> </div> 122 <div class="grid gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMaxElement"> </div>
123 <div class="grid gridWithCalcComplexInsideMinMax" id="gridWithCalcComplexInsideM inMaxElement"></div> 123 <div class="grid gridWithCalcComplexInsideMinMax" id="gridWithCalcComplexInsideM inMaxElement"></div>
124 <script src="resources/grid-definitions-parsing-utils.js"></script> 124 <script src="resources/grid-definitions-parsing-utils.js"></script>
125 <script src="resources/grid-columns-rows-get-set.js"></script> 125 <script src="resources/grid-columns-rows-get-set.js"></script>
126 </body> 126 </body>
127 </html> 127 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698