| <!DOCTYPE html> |
| <script src="../../resources/check-layout.js"></script> |
| <body> |
| |
| <div style="overflow: scroll; height: 200px; width: 400px; background-color: salmon"> |
| <div style="overflow: scroll; height: 100%; background-color: purple"> |
| <div style="overflow: scroll; height: 100%; background-color: purple"> |
| <div style="border: 0; height: 100%; width: 100%; background-color: orange"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div style="overflow: scroll; height: 200px; width: 400px; background-color: salmon"> |
| <div style="overflow: scroll; height: 100%; background-color: purple"> |
| <div style="overflow: scroll; height: 100%; background-color: purple;line-height: 0"> |
| <iframe style="border: 0; height: 100%; width: 100%; background-color: orange"></iframe> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| var dummy = document.createElement('div'); |
| dummy.style.overflow = "scroll"; |
| document.body.appendChild(dummy); |
| var scrollbarWidth = dummy.offsetWidth - dummy.clientWidth; |
| document.body.removeChild(dummy); |
| |
| function setExpected(node, width, height) |
| { |
| node.setAttribute('data-expected-width', width); |
| node.setAttribute('data-expected-height', height); |
| } |
| |
| var containers = document.querySelectorAll('body > div'); |
| for (var i = 0; i < containers.length; i++) { |
| var width = containers[i].offsetWidth; |
| var height = containers[i].offsetHeight; |
| |
| width -= scrollbarWidth; |
| height -= scrollbarWidth; |
| var first = containers[i].querySelector('div'); |
| setExpected(first, width, height); |
| |
| width -= scrollbarWidth; |
| height -= scrollbarWidth; |
| var second = first.querySelector('div'); |
| setExpected(second, width, height); |
| |
| width -= scrollbarWidth; |
| height -= scrollbarWidth; |
| var third = second.querySelector('*'); |
| setExpected(third, width, height); |
| } |
| |
| checkLayout('body > div') |
| </script> |
| |
| </body> |
