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

Side by Side Diff: LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.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> 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 .gridWithFixed { 6 .gridWithFixed {
7 grid-definition-columns: 7px 11px; 7 grid-template-columns: 7px 11px;
8 grid-definition-rows: 17px 2px; 8 grid-template-rows: 17px 2px;
9 } 9 }
10 10
11 .gridWithPercent { 11 .gridWithPercent {
12 grid-definition-columns: 53% 99%; 12 grid-template-columns: 53% 99%;
13 grid-definition-rows: 27% 52%; 13 grid-template-rows: 27% 52%;
14 } 14 }
15 .gridWithAuto { 15 .gridWithAuto {
16 grid-definition-columns: auto auto; 16 grid-template-columns: auto auto;
17 grid-definition-rows: auto auto; 17 grid-template-rows: auto auto;
18 } 18 }
19 .gridWithEM { 19 .gridWithEM {
20 grid-definition-columns: 10em 12em; 20 grid-template-columns: 10em 12em;
21 grid-definition-rows: 15em 17em; 21 grid-template-rows: 15em 17em;
22 font: 10px Ahem; 22 font: 10px Ahem;
23 } 23 }
24 .gridWithNoneAndAuto { 24 .gridWithNoneAndAuto {
25 grid-definition-columns: none auto; 25 grid-template-columns: none auto;
26 grid-definition-rows: none auto; 26 grid-template-rows: none auto;
27 } 27 }
28 .gridNoneWithAndFixed { 28 .gridNoneWithAndFixed {
29 grid-definition-columns: none 15px; 29 grid-template-columns: none 15px;
30 grid-definition-rows: none 22px; 30 grid-template-rows: none 22px;
31 } 31 }
32 .gridWithThreeItems { 32 .gridWithThreeItems {
33 grid-definition-columns: 15px auto 10em; 33 grid-template-columns: 15px auto 10em;
34 grid-definition-rows: 12em 18px auto; 34 grid-template-rows: 12em 18px auto;
35 font: 10px Ahem; 35 font: 10px Ahem;
36 } 36 }
37 .gridWithPercentAndViewportPercent { 37 .gridWithPercentAndViewportPercent {
38 grid-definition-columns: 50% 15vw; 38 grid-template-columns: 50% 15vw;
39 grid-definition-rows: 35% 28vh; 39 grid-template-rows: 35% 28vh;
40 } 40 }
41 .gridWithFitContentAndFitAvailable { 41 .gridWithFitContentAndFitAvailable {
42 grid-definition-columns: -webkit-content-available; 42 grid-template-columns: -webkit-content-available;
43 grid-definition-rows: -webkit-fit-content -webkit-fit-available; 43 grid-template-rows: -webkit-fit-content -webkit-fit-available;
44 } 44 }
45 .gridWithMinMaxContent { 45 .gridWithMinMaxContent {
46 grid-definition-columns: min-content max-content; 46 grid-template-columns: min-content max-content;
47 grid-definition-rows: max-content min-content; 47 grid-template-rows: max-content min-content;
48 } 48 }
49 .gridWithMinMaxAndFixed { 49 .gridWithMinMaxAndFixed {
50 grid-definition-columns: minmax(45px, 30%) 15px; 50 grid-template-columns: minmax(45px, 30%) 15px;
51 grid-definition-rows: 12em minmax(35%, 10px); 51 grid-template-rows: 12em minmax(35%, 10px);
52 font: 10px Ahem; 52 font: 10px Ahem;
53 } 53 }
54 .gridWithMinMaxAndMinMaxContent { 54 .gridWithMinMaxAndMinMaxContent {
55 grid-definition-columns: minmax(min-content, 30%) 15px; 55 grid-template-columns: minmax(min-content, 30%) 15px;
56 grid-definition-rows: 12em minmax(35%, max-content); 56 grid-template-rows: 12em minmax(35%, max-content);
57 font: 10px Ahem; 57 font: 10px Ahem;
58 } 58 }
59 .gridWithFractionFraction { 59 .gridWithFractionFraction {
60 grid-definition-columns: 1fr 2fr; 60 grid-template-columns: 1fr 2fr;
61 grid-definition-rows: 3fr 4fr; 61 grid-template-rows: 3fr 4fr;
62 } 62 }
63 .gridWithFractionMinMax { 63 .gridWithFractionMinMax {
64 grid-definition-columns: minmax(min-content, 45px) 2fr; 64 grid-template-columns: minmax(min-content, 45px) 2fr;
65 grid-definition-rows: 3fr minmax(14px, max-content); 65 grid-template-rows: 3fr minmax(14px, max-content);
66 } 66 }
67 .gridWithCalcCalc { 67 .gridWithCalcCalc {
68 grid-definition-columns: calc(200px) calc(10em); 68 grid-template-columns: calc(200px) calc(10em);
69 grid-definition-rows: calc(15em) calc(75px); 69 grid-template-rows: calc(15em) calc(75px);
70 font: 10px Ahem; 70 font: 10px Ahem;
71 } 71 }
72 .gridWithCalcAndFixed { 72 .gridWithCalcAndFixed {
73 grid-definition-columns: calc(50%) 8em; 73 grid-template-columns: calc(50%) 8em;
74 grid-definition-rows: 88px calc(25%); 74 grid-template-rows: 88px calc(25%);
75 font: 10px Ahem; 75 font: 10px Ahem;
76 } 76 }
77 .gridWithCalcAndMinMax { 77 .gridWithCalcAndMinMax {
78 grid-definition-columns: calc(30px + 20%) minmax(min-content, 80px); 78 grid-template-columns: calc(30px + 20%) minmax(min-content, 80px);
79 grid-definition-rows: minmax(25%, max-content) calc(10% - 7px); 79 grid-template-rows: minmax(25%, max-content) calc(10% - 7px);
80 } 80 }
81 .gridWithCalcInsideMinMax { 81 .gridWithCalcInsideMinMax {
82 grid-definition-columns: minmax(calc(23px + 10%), 400px) 12em; 82 grid-template-columns: minmax(calc(23px + 10%), 400px) 12em;
83 grid-definition-rows: calc(150px) minmax(5%, calc(50% - 125px)); 83 grid-template-rows: calc(150px) minmax(5%, calc(50% - 125px));
84 font: 10px Ahem; 84 font: 10px Ahem;
85 } 85 }
86 </style> 86 </style>
87 <script src="../../resources/js-test.js"></script> 87 <script src="../../resources/js-test.js"></script>
88 </head> 88 </head>
89 <body> 89 <body>
90 <div class="gridWithFixed" id="gridWithFixedElement"></div> 90 <div class="gridWithFixed" id="gridWithFixedElement"></div>
91 <div class="gridWithPercent" id="gridWithPercentElement"></div> 91 <div class="gridWithPercent" id="gridWithPercentElement"></div>
92 <div class="gridWithAuto" id="gridWithAutoElement"></div> 92 <div class="gridWithAuto" id="gridWithAutoElement"></div>
93 <div class="gridWithEM" id="gridWithEMElement"></div> 93 <div class="gridWithEM" id="gridWithEMElement"></div>
94 <div class="gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div> 94 <div class="gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
95 <div class="gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div> 95 <div class="gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
96 <div class="gridWithThreeItems" id="gridWithThreeItems"></div> 96 <div class="gridWithThreeItems" id="gridWithThreeItems"></div>
97 <div class="gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPer cent"></div> 97 <div class="gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPer cent"></div>
98 <div class="gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvail able"></div> 98 <div class="gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvail able"></div>
99 <div class="gridWithMinMaxContent" id="gridWithMinMaxContent"></div> 99 <div class="gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
100 <div class="gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div> 100 <div class="gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
101 <div class="gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"> </div> 101 <div class="gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"> </div>
102 <div class="gridWithFractionFraction" id="gridWithFractionFraction"></div> 102 <div class="gridWithFractionFraction" id="gridWithFractionFraction"></div>
103 <div class="gridWithFractionMinMax" id="gridWithFractionMinMax"></div> 103 <div class="gridWithFractionMinMax" id="gridWithFractionMinMax"></div>
104 <div class="gridWithCalcCalc" id="gridWithCalcCalc"></div> 104 <div class="gridWithCalcCalc" id="gridWithCalcCalc"></div>
105 <div class="gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div> 105 <div class="gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div>
106 <div class="gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div> 106 <div class="gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div>
107 <div class="gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div> 107 <div class="gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
108 <script src="resources/grid-definitions-parsing-utils.js"></script> 108 <script src="resources/grid-definitions-parsing-utils.js"></script>
109 <script src="resources/non-grid-columns-rows-get-set-multiple.js"></script> 109 <script src="resources/non-grid-columns-rows-get-set-multiple.js"></script>
110 </body> 110 </body>
111 </html> 111 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698