| <!DOCTYPE html> |
| <!-- |
| | This test checks that callbacks specified via "requestAnimationFrame()" are |
| | called before a layout is applied. |
| | This test will setup a single animation frame that appends an extra square, |
| | blue div to the body of the document when executed. |
| | https://www.w3.org/TR/animation-timing/#processingmodel |
| --> |
| <html> |
| <head> |
| <style> |
| .initial-block { |
| width: 50px; |
| height: 50px; |
| background-color: rgb(150, 255, 150); |
| } |
| .new-block { |
| width: 50px; |
| height: 50px; |
| background-color: rgb(150, 150, 255); |
| } |
| </style> |
| <script> |
| window.requestAnimationFrame(function(timestamp) { |
| var new_block = document.createElement('div'); |
| new_block.className = 'new-block'; |
| document.getElementsByTagName('body')[0].appendChild(new_block); |
| }); |
| </script> |
| </head> |
| <body> |
| <div class="initial-block"></div> |
| </body> |
| </html> |
