<!DOCTYPE><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] --> | |
<html> | |
<head> | |
<style> | |
.box { | |
height: 100px; | |
width: 100px; | |
margin: 10px; | |
background-color: white; | |
-webkit-transition-property: width; | |
} | |
.box { | |
-webkit-transition: 2s; | |
} | |
#box.final { | |
background-color: black; | |
} | |
</style> | |
<script src="resources/transition-test-helpers.js"></script> | |
<script type="text/javascript"> | |
const expectedValues = [ | |
// [time, element-id, property, expected-value, tolerance] | |
[0.5, 'box', 'background-color', [153, 153, 153], 4], | |
]; | |
function setupTest() | |
{ | |
document.getElementById('box').className = 'box final'; | |
} | |
runTransitionTest(expectedValues, setupTest, usePauseAPI); | |
</script> | |
</head> | |
<body> | |
<div id="box" class="box"></div> | |
<div id="result"> | |
</div> | |
</body> | |
</html> |