| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| @keyframes slide-right { |
| from { |
| transform: translateX(0); |
| } |
| |
| to { |
| transform: translateX(800px); |
| } |
| } |
| |
| body { |
| background-color: rgb(255, 255, 255); |
| } |
| |
| #animated-box { |
| position: absolute; |
| left: 0; |
| top: 0; |
| width: 200px; |
| height: 200px; |
| background: blue; |
| |
| animation: slide-right 15s linear; |
| } |
| |
| #container { |
| position: absolute; |
| left: 0; |
| top: 300px; |
| width: 800px; |
| height: 200px; |
| visibility: hidden; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <div id="animated-box"></div> |
| <div id="container"></div> |
| |
| <script> |
| function CreateSubContainer() { |
| var subContainer = document.createElement('div'); |
| subContainer.className = 'sub-container'; |
| subContainer.style.width = '50%'; |
| subContainer.style.height = '50%'; |
| return subContainer; |
| } |
| // Build a complicated scene in order to force a layout that takes a long |
| // time. |
| var container = document.getElementById('container'); |
| for (var i = 0; i < 1000; ++i) { |
| var subContainer = CreateSubContainer(); |
| for (var j = 0; j < 20; ++j) { |
| var subSubContainer = CreateSubContainer(); |
| subSubContainer.innerHTML = '-'; |
| subContainer.appendChild(subSubContainer); |
| } |
| container.appendChild(subContainer); |
| } |
| |
| window.setTimeout(function() { |
| // Trigger a very long layout... |
| var container = document.getElementById('container'); |
| var animatedBox = document.getElementById('animated-box'); |
| container.style.width = '600px'; |
| animatedBox.style.background = 'green'; |
| |
| window.setTimeout(function() { |
| // Followed by a very quick layout. |
| var container = document.getElementById('container'); |
| var animatedBox = document.getElementById('animated-box'); |
| animatedBox.style.background = 'red'; |
| |
| // This really shouldn't be necessary, but Cobalt seems to want to |
| // re-compute all used sizes on the above tiny style update without |
| // this. |
| container.style.display = 'none'; |
| |
| window.setTimeout(function() { |
| animatedBox.style.background = 'blue'; |
| }, 100); |
| }, 100); |
| }, 3000); |
| </script> |
| </body> |
