| <!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> |