[CSS Grid Layout] Rename grid-{rows|columns} to grid-definition-{rows|columns}
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-columns-rows-get-set-multiple.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script>
5 if (window.testRunner)
6     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 </script>
8 <link href="resources/grid.css" rel="stylesheet">
9 <style>
10 .gridWithFixed {
11     -webkit-grid-definition-columns: 7px 11px;
12     -webkit-grid-definition-rows: 17px 2px;
13 }
14
15 .gridWithPercent {
16     -webkit-grid-definition-columns: 53% 99%;
17     -webkit-grid-definition-rows: 27% 52%;
18 }
19 .gridWithAuto {
20     -webkit-grid-definition-columns: auto auto;
21     -webkit-grid-definition-rows: auto auto;
22 }
23 .gridWithEM {
24     -webkit-grid-definition-columns: 10em 12em;
25     -webkit-grid-definition-rows: 15em 17em;
26     font: 10px Ahem;
27 }
28 .gridWithNoneAndAuto {
29     -webkit-grid-definition-columns: none auto;
30     -webkit-grid-definition-rows: none auto;
31 }
32 .gridNoneWithAndFixed {
33     -webkit-grid-definition-columns: none 15px;
34     -webkit-grid-definition-rows: none 22px;
35 }
36 .gridWithThreeItems {
37     -webkit-grid-definition-columns: 15px auto 10em;
38     -webkit-grid-definition-rows: 12em 18px auto;
39     font: 10px Ahem;
40 }
41 .gridWithPercentAndViewportPercent {
42     -webkit-grid-definition-columns: 50% 15vw;
43     -webkit-grid-definition-rows: 35% 28vh;
44 }
45 .gridWithFitContentAndFitAvailable {
46     -webkit-grid-definition-columns: -webkit-content-available;
47     -webkit-grid-definition-rows: -webkit-fitcontent -webkit-fit-available;
48 }
49 .gridWithMinMaxContent {
50     -webkit-grid-definition-columns: -webkit-min-content -webkit-max-content;
51     -webkit-grid-definition-rows: -webkit-max-content -webkit-min-content;
52 }
53 .gridWithMinMaxAndFixed {
54     -webkit-grid-definition-columns: minmax(45px, 30%) 15px;
55     -webkit-grid-definition-rows: 12em minmax(35%, 10px);
56     font: 10px Ahem;
57 }
58 .gridWithMinMaxAndMinMaxContent {
59     -webkit-grid-definition-columns: minmax(-webkit-min-content, 30%) 15px;
60     -webkit-grid-definition-rows: 12em minmax(35%, -webkit-max-content);
61     font: 10px Ahem;
62 }
63 </style>
64 <script src="../js/resources/js-test-pre.js"></script>
65 </head>
66 <body>
67 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>
68 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>
69 <div class="grid gridWithAuto" id="gridWithAutoElement"></div>
70 <div class="grid gridWithEM" id="gridWithEMElement"></div>
71 <div class="grid gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
72 <div class="grid gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
73 <div class="grid gridWithThreeItems" id="gridWithThreeItems"></div>
74 <div class="grid gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
75 <div class="grid gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
76 <div class="grid gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
77 <div class="grid gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
78 <div class="grid gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
79 <script src="resources/grid-columns-rows-get-set-multiple.js"></script>
80 <script src="../js/resources/js-test-post.js"></script>
81 </body>
82 </html>