[CSS Grid Layout] Rename grid-{rows|columns} to grid-definition-{rows|columns}
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / implicit-rows-auto-resolution.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 .gridAutoContent {
10     -webkit-grid-definition-columns: 50px;
11     /* -webkit-grid-definition-rows is left unset so that the grid item's row is implicit. */
12 }
13
14 .firstRowFirstColumn {
15     font: 10px/1 Ahem;
16     /* Make us fit our grid area. */
17     width: 100%;
18     height: 100%;
19 }
20 </style>
21 <script src="../../resources/check-layout.js"></script>
22 <body onload="checkLayout('.gridAutoContent');">
23
24 <p>Test that resolving auto tracks on grid items works properly.</p>
25
26 <div class="constrainedContainer">
27     <div class="grid gridAutoContent">
28         <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
29     </div>
30 </div>
31
32 <!-- Allow the extra logical space distribution to occur. -->
33 <div style="width: 40px; height: 10px">
34     <div class="grid gridAutoContent">
35         <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
36     </div>
37 </div>
38
39 <div style="width: 100px; height: 10px;">
40     <div class="grid gridAutoContent">
41         <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
42     </div>
43 </div>
44
45 </body>
46 </html>