2010-12-07 22:03:11 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
2011-04-26 03:25:14 +00:00
|
|
|
<style>
|
2010-12-07 22:03:11 +00:00
|
|
|
#container {
|
|
|
|
width: 400px;
|
|
|
|
height: 100px;
|
|
|
|
margin: 10px;
|
|
|
|
-webkit-transition-property: text-shadow;
|
|
|
|
-webkit-transition-duration: 1s;
|
|
|
|
-webkit-transition-timing-function: linear;
|
|
|
|
}
|
|
|
|
|
|
|
|
#container {
|
|
|
|
text-shadow: yellow 0px 10px 10px,
|
|
|
|
yellow 0px 20px 10px,
|
|
|
|
yellow 0px 30px 10px,
|
|
|
|
yellow 0px 40px 10px,
|
|
|
|
yellow 0px 50px 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#container.final {
|
|
|
|
text-shadow: green 0px 10px 2px,
|
|
|
|
green 0px 20px 2px,
|
|
|
|
green 0px 30px 2px,
|
|
|
|
green 0px 40px 2px,
|
|
|
|
green 0px 50px 2px;
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
2011-04-26 03:25:14 +00:00
|
|
|
<script>
|
2010-12-07 22:03:11 +00:00
|
|
|
|
2012-06-16 03:42:58 +00:00
|
|
|
if (window.testRunner) {
|
|
|
|
testRunner.dumpAsText();
|
|
|
|
testRunner.waitUntilDone();
|
2010-12-07 22:03:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function setupTest()
|
|
|
|
{
|
|
|
|
document.getElementById('container').className = 'final';
|
|
|
|
window.setTimeout(checkShadow, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
function checkShadow()
|
|
|
|
{
|
|
|
|
var container = document.getElementById('container');
|
|
|
|
var shadow = window.getComputedStyle(container).getPropertyCSSValue('text-shadow');
|
|
|
|
|
|
|
|
var result = document.getElementById('result');
|
|
|
|
if (shadow.length == 5)
|
|
|
|
result.innerHTML = 'PASS: saw 5 shadows during the transition';
|
|
|
|
else
|
|
|
|
result.innerHTML = 'FAIL: saw ' + shadow.length + ' shadows during the transition';
|
|
|
|
|
2012-06-16 03:42:58 +00:00
|
|
|
if (window.testRunner)
|
|
|
|
testRunner.notifyDone();
|
2010-12-07 22:03:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
window.addEventListener('load', setupTest, false);
|
|
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="container">
|
|
|
|
Shadowed text
|
|
|
|
</div>
|
|
|
|
<div id="result"></div>
|
|
|
|
</body>
|
|
|
|
</html>
|