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

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

Issue 16959008: [CSS Grid Layout] Rename grid-{rows|columns} to grid-definition-{rows|columns} (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: rebased Created 7 years, 5 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 <script> 4 <script>
5 if (window.testRunner) 5 if (window.testRunner)
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 </script> 7 </script>
8 <link href="resources/grid.css" rel="stylesheet"> 8 <link href="resources/grid.css" rel="stylesheet">
9 <style> 9 <style>
10 .gridWithFixed { 10 .gridWithFixed {
11 grid-columns: 7px 11px; 11 grid-definition-columns: 7px 11px;
12 grid-rows: 17px 2px; 12 grid-definition-rows: 17px 2px;
13 } 13 }
14 14
15 .gridWithPercent { 15 .gridWithPercent {
16 grid-columns: 53% 99%; 16 grid-definition-columns: 53% 99%;
17 grid-rows: 27% 52%; 17 grid-definition-rows: 27% 52%;
18 } 18 }
19 .gridWithAuto { 19 .gridWithAuto {
20 grid-columns: auto auto; 20 grid-definition-columns: auto auto;
21 grid-rows: auto auto; 21 grid-definition-rows: auto auto;
22 } 22 }
23 .gridWithEM { 23 .gridWithEM {
24 grid-columns: 10em 12em; 24 grid-definition-columns: 10em 12em;
25 grid-rows: 15em 17em; 25 grid-definition-rows: 15em 17em;
26 font: 10px Ahem; 26 font: 10px Ahem;
27 } 27 }
28 .gridWithNoneAndAuto { 28 .gridWithNoneAndAuto {
29 grid-columns: none auto; 29 grid-definition-columns: none auto;
30 grid-rows: none auto; 30 grid-definition-rows: none auto;
31 } 31 }
32 .gridNoneWithAndFixed { 32 .gridNoneWithAndFixed {
33 grid-columns: none 15px; 33 grid-definition-columns: none 15px;
34 grid-rows: none 22px; 34 grid-definition-rows: none 22px;
35 } 35 }
36 .gridWithThreeItems { 36 .gridWithThreeItems {
37 grid-columns: 15px auto 10em; 37 grid-definition-columns: 15px auto 10em;
38 grid-rows: 12em 18px auto; 38 grid-definition-rows: 12em 18px auto;
39 font: 10px Ahem; 39 font: 10px Ahem;
40 } 40 }
41 .gridWithPercentAndViewportPercent { 41 .gridWithPercentAndViewportPercent {
42 grid-columns: 50% 15vw; 42 grid-definition-columns: 50% 15vw;
43 grid-rows: 35% 28vh; 43 grid-definition-rows: 35% 28vh;
44 } 44 }
45 .gridWithFitContentAndFitAvailable { 45 .gridWithFitContentAndFitAvailable {
46 grid-columns: -webkit-content-available; 46 grid-definition-columns: -webkit-content-available;
47 grid-rows: -webkit-fitcontent -webkit-fit-available; 47 grid-definition-rows: -webkit-fitcontent -webkit-fit-available;
48 } 48 }
49 .gridWithMinMaxContent { 49 .gridWithMinMaxContent {
50 grid-columns: min-content max-content; 50 grid-definition-columns: min-content max-content;
51 grid-rows: max-content min-content; 51 grid-definition-rows: max-content min-content;
52 } 52 }
53 .gridWithMinMaxAndFixed { 53 .gridWithMinMaxAndFixed {
54 grid-columns: minmax(45px, 30%) 15px; 54 grid-definition-columns: minmax(45px, 30%) 15px;
55 grid-rows: 12em minmax(35%, 10px); 55 grid-definition-rows: 12em minmax(35%, 10px);
56 font: 10px Ahem; 56 font: 10px Ahem;
57 } 57 }
58 .gridWithMinMaxAndMinMaxContent { 58 .gridWithMinMaxAndMinMaxContent {
59 grid-columns: minmax(min-content, 30%) 15px; 59 grid-definition-columns: minmax(min-content, 30%) 15px;
60 grid-rows: 12em minmax(35%, max-content); 60 grid-definition-rows: 12em minmax(35%, max-content);
61 font: 10px Ahem; 61 font: 10px Ahem;
62 } 62 }
63 .gridWithFractionFraction { 63 .gridWithFractionFraction {
64 grid-columns: 1fr 2fr; 64 grid-definition-columns: 1fr 2fr;
65 grid-rows: 3fr 4fr; 65 grid-definition-rows: 3fr 4fr;
66 } 66 }
67 .gridWithFractionMinMax { 67 .gridWithFractionMinMax {
68 grid-columns: minmax(min-content, 45px) 2fr; 68 grid-definition-columns: minmax(min-content, 45px) 2fr;
69 grid-rows: 3fr minmax(14px, max-content); 69 grid-definition-rows: 3fr minmax(14px, max-content);
70 } 70 }
71 </style> 71 </style>
72 <script src="../js/resources/js-test-pre.js"></script> 72 <script src="../js/resources/js-test-pre.js"></script>
73 </head> 73 </head>
74 <body> 74 <body>
75 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> 75 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>
76 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> 76 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>
77 <div class="grid gridWithAuto" id="gridWithAutoElement"></div> 77 <div class="grid gridWithAuto" id="gridWithAutoElement"></div>
78 <div class="grid gridWithEM" id="gridWithEMElement"></div> 78 <div class="grid gridWithEM" id="gridWithEMElement"></div>
79 <div class="grid gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div> 79 <div class="grid gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
80 <div class="grid gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div> 80 <div class="grid gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
81 <div class="grid gridWithThreeItems" id="gridWithThreeItems"></div> 81 <div class="grid gridWithThreeItems" id="gridWithThreeItems"></div>
82 <div class="grid gridWithPercentAndViewportPercent" id="gridWithPercentAndViewpo rtPercent"></div> 82 <div class="grid gridWithPercentAndViewportPercent" id="gridWithPercentAndViewpo rtPercent"></div>
83 <div class="grid gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFit Available"></div> 83 <div class="grid gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFit Available"></div>
84 <div class="grid gridWithMinMaxContent" id="gridWithMinMaxContent"></div> 84 <div class="grid gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
85 <div class="grid gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div> 85 <div class="grid gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
86 <div class="grid gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxCont ent"></div> 86 <div class="grid gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxCont ent"></div>
87 <div class="grid gridWithFractionFraction" id="gridWithFractionFraction"></div> 87 <div class="grid gridWithFractionFraction" id="gridWithFractionFraction"></div>
88 <div class="grid gridWithFractionMinMax" id="gridWithFractionMinMax"></div> 88 <div class="grid gridWithFractionMinMax" id="gridWithFractionMinMax"></div>
89 <script src="resources/grid-columns-rows-get-set-multiple.js"></script> 89 <script src="resources/grid-columns-rows-get-set-multiple.js"></script>
90 <script src="../js/resources/js-test-post.js"></script> 90 <script src="../js/resources/js-test-post.js"></script>
91 </body> 91 </body>
92 </html> 92 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698