2010-04-10 01:00:18 +00:00
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
|
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
|
|
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
|
|
<title>Test of dynamic stylesheet loading</title>
|
|
|
|
|
<link rel="stylesheet" href="resources/dynamic-stylesheet-insertion-main.css">
|
2011-04-26 03:16:31 +00:00
|
|
|
<script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
|
2010-04-10 01:00:18 +00:00
|
|
|
<script type="text/javascript" charset="utf-8">
|
|
|
|
|
|
|
|
|
|
const expectedValues = [
|
|
|
|
|
// [animation-name, time, element-id, property, expected-value, tolerance]
|
|
|
|
|
["splashdown", 0.3, "splash", "webkitTransform.5", 100, 0.1],
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
var controller = {};
|
|
|
|
|
|
|
|
|
|
controller.init = function () {
|
|
|
|
|
// put a listener on the initial splash animation
|
|
|
|
|
this.splash = document.getElementById('splash');
|
|
|
|
|
this.splash.addEventListener('webkitAnimationStart', this, false);
|
|
|
|
|
this.splash.addEventListener('webkitAnimationEnd', this, false);
|
|
|
|
|
|
|
|
|
|
runAnimationTest(expectedValues, undefined, undefined, true);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
controller.handleEvent = function (event) {
|
|
|
|
|
if (event.type == 'webkitAnimationStart') {
|
|
|
|
|
// pre-load the stylesheet
|
|
|
|
|
var link = document.createElement('link');
|
|
|
|
|
link.rel = 'stylesheet';
|
|
|
|
|
link.href = 'resources/dynamic-stylesheet-insertion-inserted.css';
|
|
|
|
|
document.head.appendChild(link);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
window.addEventListener('DOMContentLoaded', function () {
|
|
|
|
|
controller.init();
|
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
This test performs an animation and then dynamically loads a new stylesheet (which is empty). It should start
|
|
|
|
|
animating after a 100ms delay and then stop halfway through the animation at which point we see if it is at the
|
|
|
|
|
correct position. The loading of the stylesheet should not prevent the animation from running.
|
|
|
|
|
<div id="splash"></div>
|
|
|
|
|
<div id="result">
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
