2012-12-04 00:39:22 -08:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html class="reftest-wait" xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
<head>
|
|
|
|
|
<!-- There is, at present, no official xsd for (X)HTML5. A pity. Usefulness would depend on the parser and extensions made by the site. -->
|
|
|
|
|
<title>testcase</title>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
* { margin: 0; padding: 0; }
|
|
|
|
|
.hide { top: 80% !important; width: 75% !important; height: 50% !important; }
|
|
|
|
|
|
|
|
|
|
#details
|
|
|
|
|
{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 0%;
|
|
|
|
|
border: 10mm dotted red;
|
|
|
|
|
border-radius: 100em;
|
|
|
|
|
background-color: lime;
|
|
|
|
|
height: 0%;
|
|
|
|
|
overflow: scroll;
|
|
|
|
|
-moz-transition-property: top width;
|
|
|
|
|
-moz-transition-duration: 0.75s;
|
|
|
|
|
opacity: 0.9;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section id="details" class="hide">
|
|
|
|
|
I'm a test of hiding animation
|
|
|
|
|
<button onclick="this.parentNode.classList.add('hide')">Click me to hide</button>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
var kNumIterations = 5;
|
|
|
|
|
var currentIteration = 0;
|
2013-05-17 09:36:25 -07:00
|
|
|
var inrval;
|
2012-12-04 00:39:22 -08:00
|
|
|
|
|
|
|
|
function doe() {
|
|
|
|
|
if (++currentIteration >= kNumIterations) {
|
|
|
|
|
clearInterval(inrval);
|
|
|
|
|
document.documentElement.removeAttribute('class');
|
2013-05-17 09:36:25 -07:00
|
|
|
} else {
|
|
|
|
|
document.getElementById('details').classList.toggle('hide');
|
2012-12-04 00:39:22 -08:00
|
|
|
}
|
|
|
|
|
}
|
2013-05-17 09:36:25 -07:00
|
|
|
document.addEventListener("MozReftestInvalidate", function(){ inrval = setInterval(doe, 1000); }, false);
|
2012-12-04 00:39:22 -08:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
