Move parseFontFaceDescriptor to CSSPropertyParser.cpp
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / css-grid-layout / percent-grid-item-in-percent-grid-track-in-percent-grid.html
blob184dba34f2b7e410d9627f5dc56ad2a007636149
1 <!DOCTYPE html>
2 <html>
3 <link href="resources/grid.css" rel="stylesheet">
4 <style>
5 .container {
6 position: relative;
7 width: 500px;
8 height: 600px;
11 .grid {
12 grid-template-columns: 40% 60%;
13 grid-template-rows: 30% 70%;
14 width: 80%;
15 height: 50%;
18 .firstRowFirstColumn {
19 width: 100%;
20 height: 15px;
23 .firstRowSecondColumn {
24 width: 15px;
25 height: 100%;
28 .secondRowFirstColumn {
29 width: 50%;
30 height: 50%;
33 .secondRowSecondColumn {
34 width: -webkit-calc(100%);
35 height: -webkit-calc(100%);
37 </style>
38 <script src="../../resources/check-layout.js"></script>
39 <body onload="checkLayout('.grid')">
41 <p>Test that percentage sized grid items inside percentage sized grid tracks inside a percentage size grid get properly sized.</p>
43 <div class="container">
44 <div class="grid" data-expected-width="400" data-expected-height="300">
45 <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
46 <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
47 <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
48 <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
49 </div>
50 </div>
52 <div class="container">
53 <div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="400" data-expected-height="300">
54 <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
55 <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
56 <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
57 <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
58 </div>
59 </div>
61 <div class="container">
62 <div class="grid" style="-webkit-writing-mode: vertical-rl;" data-expected-width="400" data-expected-height="300">
63 <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
64 <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
65 <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
66 <div class="secondRowSecondColumn" data-expected-width="280" data-expected-height="180"></div>
67 </div>
68 </div>
70 <div class="container">
71 <div class="grid" style="-webkit-writing-mode: vertical-lr;" data-expected-width="400" data-expected-height="300">
72 <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
73 <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
74 <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
75 <div class="secondRowSecondColumn" data-expected-width="280" data-expected-height="180"></div>
76 </div>
77 </div>
79 </body>
80 </html>