| <!DOCTYPE html> |
| <style> |
| .animate { |
| transform: scale(2); |
| transition: transform 0.1s; |
| } |
| |
| #box { |
| position: absolute; |
| z-index: 1; |
| top: 200px; |
| left: 200px; |
| width: 50px; |
| height: 50px; |
| |
| background-color: blue; |
| } |
| </style> |
| |
| <p id="description"> |
| This test verifies the hit test regions are updated correctly when composited |
| layer are created and destroyed without triggering layout update during fast |
| path animation. |
| </p> |
| |
| <div id="box"></div> |
| |
| <div id='console' style='display:none;'></div> |
| |
| <script src="../../../resources/js-test.js"></script> |
| <script src="resources/compositor-touch-hit-rects.js"></script> |
| <script> |
| jsTestIsAsync = true; |
| |
| window.onload = () => { |
| const box = document.getElementById("box"); |
| box.addEventListener('touchstart', () => {}, false); |
| |
| // Box is not composited so its touch rect is on document. |
| internals.forceCompositingUpdate(document); |
| logRects(box, true); |
| |
| // Animating scale causes the element to get composited layer and the touch |
| // rect will get attached to this new layer. |
| box.classList.add('animate'); |
| internals.forceCompositingUpdate(document); |
| logRects(box, true); |
| |
| box.addEventListener('transitionend', () => { |
| // Wait one frame for compositing state to get clear. Use setTimeout to |
| // prevent setting rAF callback for the current frame. |
| setTimeout(() => { |
| window.requestAnimationFrame(() => { |
| // Ending animation destroys the composited layer without causing any |
| // layout. The touch rect should be attached to the document. |
| logRects(box, true); |
| |
| document.getElementById('console').style.display = 'block'; |
| finishJSTest(); |
| }); |
| }, 0); |
| }); |
| }; |
| </script> |
