58 lines
1.8 KiB
HTML
58 lines
1.8 KiB
HTML
<!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> |