blob: 31d3f2a286c7ff5f2f12c3f1bd6153c811372b0d [file] [log] [blame]
<html>
<head>
<style>
a {
font-size: 300%;
-webkit-transition: all 1s linear;
background-color: #00F;
border: 8px solid #F00;
color: #0F0;
outline: 8px solid #0F0;
-webkit-column-rule-color: #0F0;
-webkit-text-stroke-color: #0F0;
-webkit-text-fill-color: #0F0;
}
.changed {
background-color: #0F0;
border: 8px solid #00F;
color: #F00;
outline: 8px solid #F00;
-webkit-column-rule-color: #F00;
-webkit-text-stroke-color: #F00;
-webkit-text-fill-color: #00F;
}
</style>
<script src="resources/transition-test-helpers.js"></script>
<script>
const expectedValues = [
// [time, element-id, property, expected-value, tolerance, post-completion callback, should-be-transitioning]
[0.5, 'link', 'color', [127, 127, 0], 10, null, shouldBeTransitioning],
[0.5, 'link', 'background-color', [0, 127, 127], 10, null, shouldBeTransitioning],
[0.5, 'link', 'border-left-color', [127, 0, 127], 10, null, shouldBeTransitioning],
[0.5, 'link', 'border-right-color', [127, 0, 127], 10, null, shouldBeTransitioning],
[0.5, 'link', 'border-top-color', [127, 0, 127], 10, null, shouldBeTransitioning],
[0.5, 'link', 'border-bottom-color', [127, 0, 127], 10, null, shouldBeTransitioning],
[0.5, 'link', 'outline-color', [127, 127, 0], 10, null, shouldBeTransitioning],
[0.5, 'link', '-webkit-column-rule-color', [127, 127, 0], 10, null, shouldBeTransitioning],
[0.5, 'link', '-webkit-text-stroke-color', [127, 127, 0], 10, null, shouldBeTransitioning],
[0.5, 'link', '-webkit-text-fill-color', [0, 127, 127], 10, null, shouldBeTransitioning],
];
function setupTest()
{
document.getElementById('link').className = 'changed';
}
runTransitionTest(expectedValues, setupTest, usePauseAPI);
</script>
</head>
<body>
All the colors of the link below should be animating:
<div>
<br>
<a id="link" href="">
link
</a>
<br>
<br>
</div>
<div id="result">
</div>
</body>
</html>