OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <link href='resources/grid.css' rel='stylesheet'> | 2 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> |
| 3 <link href="resources/grid.css" rel="stylesheet"> |
3 <style> | 4 <style> |
4 .grid, .inline-grid { | 5 .grid, .inline-grid { |
5 width: -webkit-fit-content; | |
6 width: -moz-fit-content; | |
7 width: -ie-fit-content; | |
8 width: fit-content; | |
9 overflow: scroll; | 6 overflow: scroll; |
10 } | 7 } |
11 .gridItem { | 8 .gridItem { |
12 width: 100px; | 9 width: 100px; |
13 height: 100px; | 10 height: 100px; |
14 background: green; | 11 background: green; |
15 } | 12 } |
16 </style> | 13 </style> |
17 <script src='../../resources/check-layout.js'></script> | 14 <script src='../../resources/check-layout.js'></script> |
18 | 15 |
19 <body onload="checkLayout('.grid'); checkLayout('.inline-grid');"> | 16 <body onload="checkLayout('.grid'); checkLayout('.inline-grid');"> |
20 | 17 |
21 Test that scrollbar width is added to the width of the grid container. | 18 Test that scrollbar width is added to the width of the grid container. |
22 <div class='grid' data-expected-width='115'> | 19 <div class='grid fit-content' data-expected-width='115'> |
23 <span class='gridItem'></span> | 20 <span class='gridItem'></span> |
24 </div> | 21 </div> |
25 <div class='grid' style='left: 150px; overflow-y: hidden' data-expected-width='1
00'> | 22 <div class='grid fit-content' style='left: 150px; overflow-y: hidden' data-expec
ted-width='100'> |
26 <span class='gridItem'></span> | 23 <span class='gridItem'></span> |
27 </div> | 24 </div> |
28 <div class='inline-grid' style='left: 300px' data-expected-width='115'> | 25 <div class='inline-grid fit-content' style='left: 300px' data-expected-width='11
5'> |
29 <span class='gridItem'></span> | 26 <span class='gridItem'></span> |
30 </div> | 27 </div> |
31 <div class='inline-grid' style='left: 450px; overflow-y: hidden' data-expected-w
idth='100'> | 28 <div class='inline-grid fit-content' style='left: 450px; overflow-y: hidden' dat
a-expected-width='100'> |
32 <span class='gridItem'></span> | 29 <span class='gridItem'></span> |
33 </div> | 30 </div> |
34 </body> | 31 </body> |
OLD | NEW |