|
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 -moz-transition-property: top width; |
|
22 -moz-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); }, false); |
|
50 </script> |
|
51 </body> |
|
52 </html> |