813372-1.html (1290B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait" xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <!-- There is, at present, no official xsd for (X)HTML5. A pity. Usefulness would depend on the parser and extensions made by the site. --> 5 <title>testcase</title> 6 <style type="text/css"> 7 * { margin: 0; padding: 0; } 8 .hide { top: 80% !important; width: 75% !important; height: 50% !important; } 9 10 #details 11 { 12 position: absolute; 13 top: 0; 14 left: 0; 15 width: 0%; 16 border: 10mm dotted red; 17 border-radius: 100em; 18 background-color: lime; 19 height: 0%; 20 overflow: scroll; 21 transition-property: top width; 22 transition-duration: 0.75s; 23 opacity: 0.9; 24 } 25 26 </style> 27 </head> 28 <body> 29 30 31 <section id="details" class="hide"> 32 I'm a test of hiding animation 33 <button onclick="this.parentNode.classList.add('hide')">Click me to hide</button> 34 </section> 35 36 <script> 37 var kNumIterations = 5; 38 var currentIteration = 0; 39 var inrval; 40 41 function doe() { 42 if (++currentIteration >= kNumIterations) { 43 clearInterval(inrval); 44 document.documentElement.removeAttribute('class'); 45 } else { 46 document.getElementById('details').classList.toggle('hide'); 47 } 48 } 49 document.addEventListener("MozReftestInvalidate", function(){ inrval = setInterval(doe, 1000); }); 50 </script> 51 </body> 52 </html>