| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script> |
| description('Test that compositing updates do not happen in an iframe with no compoting layers.'); |
| window.jsTestIsAsync = true; |
| |
| let updateCount; |
| let iframeWindow; |
| let iframeDocument; |
| let targetElement; |
| |
| function zeroUpdateCount() |
| { |
| if (iframeWindow.internals) { |
| iframeWindow.internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks(); |
| iframeWindow.internals.startTrackingCompositingUpdates(); |
| } |
| } |
| |
| function updateLayoutAndCompositingCount() |
| { |
| if (iframeWindow.internals) { |
| iframeWindow.internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks(); |
| updateCount = iframeWindow.internals.compositingUpdateCount(); |
| } |
| } |
| |
| function testForCompositingUpdate(callback) |
| { |
| zeroUpdateCount(); |
| callback(); |
| updateLayoutAndCompositingCount(); |
| } |
| |
| function runTests() |
| { |
| iframeWindow = document.getElementById('iframe').contentWindow; |
| |
| updateLayoutAndCompositingCount(); |
| |
| if (iframeWindow.internals) { |
| iframeWindow.internals.startTrackingCompositingUpdates(); |
| updateCount = iframeWindow.internals.compositingUpdateCount(); |
| } |
| |
| iframeDocument = iframeWindow.document; |
| targetElement = iframeDocument.getElementById('middle'); |
| |
| doNextTest(); |
| } |
| |
| let tests = [ |
| { |
| 'description' : 'Initial', |
| 'mutation' : async () => { |
| return; |
| }, |
| }, |
| { |
| 'description' : 'Layout', |
| 'mutation' : async () => { |
| targetElement.style.overflow = 'hidden'; |
| return; |
| } |
| }, |
| { |
| 'description' : 'Change stacking order', |
| 'mutation' : async () => { |
| targetElement.style.zIndex = 1; |
| return Promise.resolve(); |
| } |
| }, |
| { |
| 'description' : 'Negative z-order child', |
| 'mutation' : async () => { |
| targetElement.style.zIndex = -1; |
| let targetBounds = targetElement.getBoundingClientRect(); |
| let x = targetBounds.x + targetBounds.width / 2; |
| let y = targetBounds.y + targetBounds.height / 2; |
| iframeDocument.elementFromPoint(x, y); // Force a z-order list update. |
| return Promise.resolve(); |
| } |
| }, |
| { |
| 'description' : 'Change visibility', |
| 'mutation' : async () => { |
| targetElement.style.visibility = 'hidden'; |
| return Promise.resolve(); |
| } |
| }, |
| { |
| 'description' : 'Change content', |
| 'mutation' : async () => { |
| iframeDocument.getElementById('child').textContent = 'child'; |
| return Promise.resolve(); |
| } |
| }, |
| { |
| 'description' : 'Change clip path', |
| 'mutation' : async () => { |
| targetElement.style.webkitClipPath = 'inset(0 20% 0 50px)'; |
| return Promise.resolve(); |
| } |
| }, |
| { |
| 'description' : 'Change transform', |
| 'mutation' : async () => { |
| targetElement.style.transform = 'translate(10px, 20px)'; |
| return Promise.resolve(); |
| } |
| }, |
| { |
| 'description' : 'Image change', |
| 'mutation' : async () => { |
| let image = iframeDocument.getElementById('image'); |
| return new Promise((resolve, reject)=> { |
| image.onload = ()=> resolve(); |
| image.src = "data:image/gif;base64,R0lGODlhAQABAPAAAP8REf///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="; |
| }); |
| } |
| }, |
| // Must be last |
| { |
| 'description' : 'Remove layer', |
| 'mutation' : async () => { |
| targetElement.remove(); |
| return Promise.resolve(); |
| } |
| }, |
| ]; |
| |
| function resetStyle(element) |
| { |
| element.removeAttribute('style'); |
| } |
| |
| let nextTestIndex = 0; |
| async function doNextTest() |
| { |
| if (nextTestIndex == tests.length) { |
| finishJSTest(); |
| return; |
| } |
| |
| let test = tests[nextTestIndex]; |
| debug(test.description); |
| |
| zeroUpdateCount(); |
| await test.mutation(); |
| updateLayoutAndCompositingCount(); |
| |
| shouldBe('updateCount', '0'); |
| resetStyle(targetElement); |
| |
| setTimeout(() => { |
| ++nextTestIndex; |
| doNextTest(); |
| }, 0); |
| } |
| |
| window.addEventListener('load', () => { |
| window.setTimeout(runTests, 0); |
| }, false); |
| </script> |
| |
| </head> |
| <body> |
| <iframe id="iframe" src="resources/non-composited.html"></iframe> |
| |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
