42 lines
1.2 KiB
HTML
42 lines
1.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<style>
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--custom-color: blue;
|
||
|
|
}
|
||
|
|
|
||
|
|
.target {
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
background: linear-gradient(var(--custom-color), green);
|
||
|
|
transition-duration: 1s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.target.transition {
|
||
|
|
margin-left: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<body>
|
||
|
|
<script src="../resources/testharness.js"></script>
|
||
|
|
<script src="../resources/testharnessreport.js"></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
promise_test(async test => {
|
||
|
|
const target = document.body.appendChild(document.createElement("div"));
|
||
|
|
target.classList.add("target");
|
||
|
|
|
||
|
|
await new Promise(requestAnimationFrame);
|
||
|
|
target.classList.add("transition");
|
||
|
|
|
||
|
|
const animations = target.getAnimations();
|
||
|
|
assert_equals(animations.length, 1, "There is only one animation applied to the target.");
|
||
|
|
assert_true(animations[0] instanceof CSSTransition, "The single animation applied to the target is a CSS transition.");
|
||
|
|
assert_equals(animations[0].transitionProperty, "margin-left", "The single CSS transition applied to the target is for the margin-left property.");
|
||
|
|
}, `An element with a background-image set to a CSS gradient with a stop color set by a custom property does not yield a background-image transition when another CSS property changes.`);
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|