blob: 5e29a832d6ef966a933ac0602546c219e773183c [file] [log] [blame]
<!DOCTYPE html>
<style>
body {
margin: 0;
}
.container {
height: 250px;
width: 250px;
margin-top: 50px;
display: block;
}
.container > div {
height: 200px;
width: 200px;
overflow: scroll;
}
.container > div > div {
height: 1000px;
width: 1000px;
background: linear-gradient(to bottom, red, white);
}
.container > iframe {
height: 222px;
width: 222px;
display: block;
border: none;
}
</style>
<section id='div' style="display:none;">
<div class="to-show container">
</div>
<div class="to-hide container">
<div>
<div>This should not be visible.</div>
</div>
</div>
</section>
<section id="iframe" style="display:none;">
<div class="to-show container">
</div>
<div class="to-hide container">
<iframe src="data:text/html;charset=utf-8,<div style='height:1000px; width:1000px; background: linear-gradient(to bottom, red, white);'>">
This should not be visible.
</iframe>
</div>
</section>
<p>Two squares should be visible and fully covered by green overlays.</p>
<div id="console"></div>
<script src="../resources/js-test.js"></script>
<script src="../resources/run-after-layout-and-paint.js"></script>
<script src="resources/non-fast-scrollable-region-testing.js"></script>
<script>
window.jsTestIsAsync = true;
description('This test ensures that changing visibility of a non-fast ' +
'scrollable area correctly updates list of non-fast scrollable ' +
'areas (See http://crbug.com/434982). Two types of non-fast ' +
'scrollable regions are covered: div, and iframe.');
onload = next;
var testCases = [
// type, bounding box of element to show, bounding box of element to hide
['div', '[0, 50, 200, 200]', '[0, 350, 200, 200]'],
['iframe', '[0, 50, 222, 222]', '[0, 350, 222, 222]']];
var index = 0;
function next(){
if (index < testCases.length) {
var type = testCases[index][0];
debug('running tests for non-fast scrollable ' + type);
runTest.apply(this, testCases[index]);
} else {
// Next 3 statements have no functional impact just visual
showSectionIf(function(){return true;});
runAfterLayoutAndPaint(function(){
drawNonFastScrollableRegionOverlays();
finishJSTest();
});
}
index++;
}
// Execute tests for given non-fast scrollable type.
function runTest(type, elemToShowExpected, elemToHideExpected) {
// Hide all sections that are not relevant to this test to ensure
// |internals.nonFastScrollableRects| returns only the relevant non-
// fast scrollable regions.
showSectionIf(function(section){return section.id == type;});
runAfterLayoutAndPaint(function() {
shouldBeEqualToString('document.getElementById("' + type + '").style.display', 'block');
var elemToShow = document.querySelector('section#' + type + '> .to-show'),
elemToHide = document.querySelector('section#' + type + '> .to-hide');
nonFastScrollableRects = internals.nonFastScrollableRects(document);
shouldBe('nonFastScrollableRects.length', '1');
shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', elemToHideExpected);
// Hide container before making it non-fast scrollable to ensure any
// layout occurs while it is invisible.
elemToShow.style.visibility = 'hidden';
appendScrollable(elemToShow, type, function() {
// Change visibility (hidden -> visible), which should not cause any layout,
// and verify that non-fast scrollable areas are correctly updated.
elemToShow.style.visibility = 'visible';
shouldBe('internals.needsLayoutCount()', '0');
runAfterLayoutAndPaint(function() {
nonFastScrollableRects = internals.nonFastScrollableRects(document);
shouldBe('nonFastScrollableRects.length', '2');
shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', elemToShowExpected);
shouldBeEqualToString('rectToString(nonFastScrollableRects[1])', elemToHideExpected);
// Change visibility (visible -> hidden)
elemToHide.style.visibility = 'hidden';
shouldBe('internals.needsLayoutCount()', '0');
runAfterLayoutAndPaint(function() {
nonFastScrollableRects = internals.nonFastScrollableRects(document);
shouldBe('nonFastScrollableRects.length', '1');
shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', elemToShowExpected);
next();
});
});
});
});
}
// Appends to container an scrollable element of the given type.
// Note that because this layout test runs with --run-web-tests flag
// the appended scrollable is always non-fast even on HDPI platforms.
function appendScrollable(container, type, nextStep) {
var inner;
switch (type) {
case 'div':
inner = '<div><div>This should be covered by a green overlay.</div></div>';
break;
case 'iframe':
window.nextStep = nextStep;
inner = '<iframe id="iframe" onload="runAfterLayoutAndPaint(window.nextStep)" src="data:text/html;charset=utf-8,<div style=\'height:1000px; width:1000px; background: linear-gradient(to bottom, red, white);\'>This should be covered by a green overlay.</div>"></iframe>';
break;
}
container.innerHTML = inner;
if (type == 'div')
runAfterLayoutAndPaint(nextStep);
}
// Shows sections that pass condition but hides others
function showSectionIf(condition) {
var sections = document.querySelectorAll('section');
for (var i = 0; i < sections.length; i++)
sections[i].style.display = condition(sections[i]) ? 'block' : 'none';
}
</script>