OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <link href="resources/grid.css" rel="stylesheet"> | |
4 <style> | |
5 .grid { | |
6 position:absolute; | |
7 overflow:scroll; | |
8 } | |
9 .gridItem { | |
10 width: 100px; | |
11 height: 100px; | |
12 background:green; | |
13 } | |
14 </style> | |
15 <body> | |
16 Test that scrollbar width is added to the width of the grid container. | |
17 <div class='grid' style='top: 100px'> | |
18 <span class='gridItem'></span> | |
19 </div> | |
20 <div class='grid' style='top: 100px; left: 150px; overflow-y: hidden' data-no-ve rtical-scrollbar> | |
21 <span class='gridItem'></span> | |
22 </div> | |
23 | |
24 <script src="../../resources/check-layout.js"></script> | |
25 <script> | |
26 var dummy = document.createElement('h1'); | |
27 dummy.style.overflow = 'scroll'; | |
28 document.body.appendChild(dummy); | |
29 var scrollbarWidth = dummy.offsetWidth - dummy.clientWidth; | |
30 document.body.removeChild(dummy); | |
31 | |
32 Array.prototype.forEach.call(document.querySelectorAll('div'), function(node) { | |
33 var width = 100; | |
34 if (!node.hasAttribute('data-no-vertical-scrollbar')) | |
35 width += scrollbarWidth; | |
36 node.setAttribute('data-expected-width', width); | |
37 }); | |
Julien - ping for review
2014/09/09 14:39:40
The scrollbar width is 16px so no need for this lo
Sunil Ratnu
2014/09/09 17:28:30
Done.
| |
38 checkLayout('body'); | |
39 </script> | |
40 </body> | |
41 </html> | |
OLD | NEW |