Index: LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-change.html |
diff --git a/LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-change.html b/LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-change.html |
deleted file mode 100644 |
index 089dfbee8be367b7ff69ee5b8f8525ce53410b63..0000000000000000000000000000000000000000 |
--- a/LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-change.html |
+++ /dev/null |
@@ -1,224 +0,0 @@ |
-<!DOCTYPE html> |
-<html> |
-<head> |
- <style> |
- #predecessor { |
- width: 70px; |
- height: 70px; |
- left: 25px; |
- top: 25px; |
- z-index: 2; |
- background-color: red; |
- position: absolute; |
- display: none; |
- } |
- |
- #container { |
- width: 500px; |
- height: 500px; |
- position: absolute; |
- } |
- |
- #content { |
- width: 1px; |
- height: 1px; |
- background-color: yellow; |
- position: relative; |
- } |
- |
- #contentPredecessor { |
- z-index: 3; |
- width: 50px; |
- height: 50px; |
- background-color: blue; |
- position: relative; |
- display: none; |
- } |
- |
- #contentSuccessor { |
- width: 1000px; |
- height: 1000px; |
- background-color: green; |
- position: relative; |
- display: none; |
- } |
- </style> |
- |
- <script> |
- var debug = false; |
- |
- if (window.testRunner) |
- testRunner.dumpAsText(); |
- |
- if (window.internals) { |
- window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true); |
- window.internals.settings.setCompositorDrivenAcceleratedScrollingEnabled(false); |
- } |
- |
- function writeResult(iteration, expectedResult) |
- { |
- document.body.offsetTop; |
- |
- if (!window.internals) |
- return; |
- |
- if (debug) |
- writeDebug(iteration); |
- |
- var result = document.getElementById('result'); |
- result.innerText += "iteration " + iteration + ": "; |
- |
- var container = document.getElementById('container'); |
- var containerOptedIn = window.internals.needsCompositedScrolling(container); |
- if (containerOptedIn === expectedResult) |
- result.innerText += "PASS, "; |
- else |
- result.innerText += "FAIL, "; |
- |
- if (containerOptedIn) |
- result.innerText += "container is composited.\n"; |
- else |
- result.innerText += "container is not composited.\n"; |
- } |
- |
- function writeDebug(iteration) |
- { |
- var result = document.getElementById('result'); |
- var content = document.getElementById('content'); |
- var container = document.getElementById('container'); |
- var contentPredecessor = document.getElementById('contentPredecessor'); |
- var contentSuccessor = document.getElementById('contentSuccessor'); |
- |
- var elements = [container, contentPredecessor, content, contentSuccessor]; |
- |
- for (var i = 0; i < elements.length; i++) { |
- var element = elements[i]; |
- var computedStyle = getComputedStyle(element); |
- |
- result.innerText += "iteration " + iteration + ":\n"; |
- result.innerText += "\telement: " + element.id + "\n"; |
- result.innerText += "\theight: " + computedStyle.height + "\n"; |
- result.innerText += "\twidth: " + computedStyle.width + "\n"; |
- result.innerText += "\toverflowX: " + computedStyle.overflowX + "\n"; |
- result.innerText += "\toverflowY: " + computedStyle.overflowY + "\n"; |
- result.innerText += "\tdisplay: " + computedStyle.display + "\n"; |
- result.innerText += "\tzIndex: " + computedStyle.zIndex + "\n"; |
- } |
- } |
- |
- function doSuccessorTest(test, testIndex) |
- { |
- container = document.getElementById('container'); |
- contentSuccessor = document.getElementById('contentSuccessor'); |
- |
- content.style.width = test['width']; |
- content.style.height = test['height']; |
- container.style.overflowX = test['overflowX']; |
- container.style.overflowY = test['overflowY']; |
- contentSuccessor.style.display = test['display']; |
- |
- var descendantCausesOverflow = test['width'] === '1000px' || test['height'] === '1000px' || test['display'] === 'block'; |
- var containerScrolls = test['overflowX'] === 'scroll' || test['overflowY'] === 'scroll'; |
- |
- var shouldOptIn = descendantCausesOverflow && containerScrolls; |
- |
- writeResult(testIndex, shouldOptIn); |
- } |
- |
- function doPredecessorTest(test, testIndex) |
- { |
- container = document.getElementById('container'); |
- contentPredecessor = document.getElementById('contentPredecessor'); |
- |
- contentPredecessor.style.display = test['display']; |
- container.style.zIndex = test['zIndex']; |
- |
- var containerIsAStackingContext = test['zIndex'] === '1'; |
- var predecessorIsInvisible = test['display'] === 'none'; |
- |
- // If the contentPredecessor is visible and the container is not a stacking |
- // context, then a non-descendant appears between our descendants; we |
- // fail the contiguity check and we should not opt in. If we are a |
- // stacking context or the predecessor is gone, we can opt in. |
- var shouldOptIn = containerIsAStackingContext || predecessorIsInvisible; |
- |
- writeResult(testIndex, shouldOptIn); |
- } |
- |
- function runTests() |
- { |
- var successorTests = [ |
- { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'none' }, |
- { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'block' }, |
- { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'none' }, |
- { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'block' }, |
- { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'none' }, |
- { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'block' }, |
- { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'none' }, |
- { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'block' }, |
- { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'none' }, |
- { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'block' }, |
- { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'none' }, |
- { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'block' }, |
- { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'none' }, |
- { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'block' }, |
- { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'none' }, |
- { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'block' }, |
- { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'none' }, |
- { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'block' }, |
- { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'none' }, |
- { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'block' }, |
- { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'none' }, |
- { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'block' }, |
- { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'none' }, |
- { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'block' }, |
- { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'none' }, |
- { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'block' }, |
- { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'none' }, |
- { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'block' }, |
- { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'none' }, |
- { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'block' }, |
- { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'none' }, |
- { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'block' } |
- ]; |
- |
- var predecessorTests = [ |
- { 'display': 'block', 'zIndex': '1' }, |
- { 'display': 'block', 'zIndex': 'auto' }, |
- { 'display': 'none', 'zIndex': '1' }, |
- { 'display': 'none', 'zIndex': 'auto' }, |
- ]; |
- |
- var testIndex = 0; |
- writeResult(testIndex++, false); |
- |
- for (var i = 0; i < successorTests.length; i++) |
- doSuccessorTest(successorTests[i], testIndex++); |
- |
- content.style.height = '1000px'; |
- content.style.width = '1000px'; |
- container.style.overflowX = 'scroll'; |
- container.style.overflowY = 'scroll'; |
- contentSuccessor.style.display = 'none'; |
- predecessor.style.display = 'block'; |
- |
- writeResult(testIndex++, true); |
- |
- for (var i = 0; i < predecessorTests.length; i++) |
- doPredecessorTest(predecessorTests[i], testIndex++); |
- } |
- |
- window.addEventListener('load', runTests, false); |
- </script> |
-</head> |
- |
-<body> |
- <div id="predecessor"></div> |
- <div id="container"> |
- <div id="contentPredecessor"></div> |
- <div id="content"></div> |
- <div id="contentSuccessor"></div> |
- </div> |
- <pre id="result"></pre> |
-</body> |
-</html> |