| <!doctype HTML> |
| <!-- |
| This tests a corner case of invalidation of squashed layers. It passes if the element "I should not disappear!" does not disappear. |
| |
| The corner case is: |
| |
| Frame 1: the elements with ids "squash1" and "squash2" squash into "squashtarget" |
| Frame 2 (on end of transform animation): both elements stop squashing, but there is now an intermediate paint layer that paints |
| after squash1 but before squash2. Since multiple layers can squash together only if they are sequential, squash2 stops squashing, |
| and so we need to invalidate the area in the document squash2 *now* paints into (for frame 3). |
| Frame 3: draw squash1 and squash2 into the root frame. |
| |
| --> |
| <style> |
| @keyframes animate{0%{opacity:0}to{opacity:1}} |
| </style> |
| <div style="height: 16px; position: relative; width: 16px; z-index: 0;"> |
| <div style="transform: scale(3); height: 16px; position: relative; width: 16px; z-index: -1; animation: animate .7s infinite"> |
| </div> |
| <div id="target" style="position: absolute; transition: transform ease .01s; transform: scale(0); width: 18px; height: 16px"></div> |
| </div> |
| </div> |
| <div id="squashtarget" style="display: inline-block; height: 16px; position: relative; width: 16px; z-index: 0; margin-top: 20px"> |
| <div style=" transform: scale(3); height: 16px; position: relative; width: 16px; z-index: -1"></div> |
| </div> |
| <div id="squash1" style="display: inline-block; position: relative; width: 16px; z-index: 0; margin-left: 15px"> |
| <div style="transform: scale(3); position: relative; width: 16px; z-index: -1"> |
| </div> |
| </div> |
| <div id="squash2" style="overflow: hidden; position: relative;margin-top: 30px; border"> |
| I should not disappear! |
| </div> |
| <script> |
| onload = function() { |
| target.style.transform = "scale(1)"; |
| } |
| </script> |
