[CSS Grid Layout] Rename grid-{rows|columns} to grid-definition-{rows|columns}
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / calc-resolution-grid-item.html
1 <!DOCTYPE html>
2 <html>
3 <script>
4 if (window.testRunner)
5     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
6 </script>
7 <link href="resources/grid.css" rel="stylesheet">
8 <style>
9 .grid {
10     -webkit-grid-definition-columns: 100px 300px;
11     -webkit-grid-definition-rows: 50px 150px;
12     height: 200px;
13     width: 400px;
14 }
15
16 .calcWidth {
17     width: -webkit-calc(80% + 20%);
18     height: 15px;
19 }
20
21 .calcHeight {
22     width: 15px;
23     height: -webkit-calc(80% + 20px);
24 }
25
26 .calcHeightAndWidth {
27     width: -webkit-calc(80% + 20px);
28     height: -webkit-calc(70% + 30%);
29 }
30 </style>
31 <script src="../../resources/check-layout.js"></script>
32 <body onload="checkLayout('.grid')">
33
34 <p>Test that resolving calc lengths on grid items works properly on a fixed grid with different writing modes.</p>
35
36 <div class="grid">
37     <div class="firstRowFirstColumn calcWidth" data-expected-width="100" data-expected-height="15"></div>
38     <div class="firstRowSecondColumn calcHeight" data-expected-width="15" data-expected-height="60"></div>
39     <div class="secondRowFirstColumn calcHeightAndWidth" data-expected-width="100" data-expected-height="150"></div>
40     <div class="secondRowSecondColumn calcHeightAndWidth" data-expected-width="260" data-expected-height="150"></div>
41 </div>
42
43 <div class="grid verticalRL">
44     <div class="firstRowFirstColumn calcWidth" data-expected-width="50" data-expected-height="15"></div>
45     <div class="firstRowSecondColumn calcHeight" data-expected-width="15" data-expected-height="260"></div>
46     <div class="secondRowFirstColumn calcHeightAndWidth" data-expected-width="140" data-expected-height="100"></div>
47     <div class="secondRowSecondColumn calcHeightAndWidth" data-expected-width="140" data-expected-height="300"></div>
48 </div>
49
50 <div class="grid">
51     <div class="firstRowFirstColumn calcWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
52     <div class="firstRowSecondColumn calcHeight verticalRL" data-expected-width="15" data-expected-height="60"></div>
53     <div class="secondRowFirstColumn calcHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
54     <div class="secondRowSecondColumn calcHeightAndWidth verticalRL" data-expected-width="260" data-expected-height="150"></div>
55 </div>
56
57 <div class="grid">
58     <div class="firstRowFirstColumn calcWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
59     <div class="firstRowSecondColumn calcHeight" data-expected-width="15" data-expected-height="60"></div>
60     <div class="secondRowFirstColumn calcHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
61     <div class="secondRowSecondColumn calcHeightAndWidth" data-expected-width="260" data-expected-height="150"></div>
62 </div>
63 </body>
64 </html>