144 lines
4.3 KiB
HTML
144 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<title>Test !important declarations vs. animation effects</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-cascade/#cascade-origin">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script>
|
|
CSS.registerProperty({
|
|
name: "--length-1",
|
|
syntax: "<length>",
|
|
initialValue: "0px",
|
|
inherits: false
|
|
});
|
|
CSS.registerProperty({
|
|
name: "--length-2",
|
|
syntax: "<length>",
|
|
initialValue: "0px",
|
|
inherits: false
|
|
});
|
|
</script>
|
|
<style>
|
|
@keyframes bgcolor_animation {
|
|
from { background-color: rgb(10, 10, 10); }
|
|
to { background-color: rgb(20, 20, 20); }
|
|
}
|
|
@keyframes color_and_bg_animation {
|
|
from { background-color: rgb(10, 10, 10); color: rgb(10, 10, 10); }
|
|
to { background-color: rgb(20, 20, 20); color: rgb(20, 20, 20); }
|
|
}
|
|
a, div, ::before{
|
|
animation-duration: 1000s;
|
|
animation-delay: -500s;
|
|
animation-timing-function: steps(2, end);
|
|
}
|
|
#target1 {
|
|
animation-name: bgcolor_animation;
|
|
}
|
|
#target2 {
|
|
background-color: rgb(0, 128, 0) !important;
|
|
animation-name: bgcolor_animation;
|
|
}
|
|
#target3 {
|
|
color: rgb(0, 128, 0) !important;
|
|
animation-name: color_and_bg_animation;
|
|
}
|
|
#target4::before {
|
|
color: rgb(0, 128, 0) !important;
|
|
animation-name: color_and_bg_animation;
|
|
content: " ";
|
|
}
|
|
#target5 {
|
|
animation-name: color_and_bg_animation;
|
|
}
|
|
#target5:visited {
|
|
color: rgb(0, 128, 0) !important;
|
|
}
|
|
#target6 {
|
|
background-color: white;
|
|
color: white !important;
|
|
}
|
|
#target7 {
|
|
--length-1: 10px;
|
|
--length-2: 10px !important;
|
|
}
|
|
</style>
|
|
<div id="target1"></div>
|
|
<div id="target2"></div>
|
|
<div id="target3"></div>
|
|
<div id="target4"></div>
|
|
<a href="" id="target5"></a>
|
|
<span id="target6"></span>
|
|
<span id="target7"></span>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(target1).backgroundColor, 'rgb(15, 15, 15)');
|
|
}, 'Interpolated value is observable');
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(target2).backgroundColor, 'rgb(0, 128, 0)');
|
|
}, 'Important rules override animations');
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(target3).color, 'rgb(0, 128, 0)');
|
|
assert_equals(getComputedStyle(target3).backgroundColor, 'rgb(15, 15, 15)');
|
|
}, 'Non-overriden interpolations are observable');
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(target4, '::before').color, 'rgb(0, 128, 0)');
|
|
assert_equals(getComputedStyle(target4, '::before').backgroundColor, 'rgb(15, 15, 15)');
|
|
}, 'Important rules override animations (::before)');
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(target5).color, 'rgb(15, 15, 15)');
|
|
assert_equals(getComputedStyle(target5).backgroundColor, 'rgb(15, 15, 15)');
|
|
}, 'Important rules do not override animations on :visited as seen from JS');
|
|
|
|
test(() => {
|
|
getComputedStyle(target6).backgroundColor;
|
|
|
|
let animation = target6.animate([
|
|
{ backgroundColor: 'rgb(10, 10, 10)' },
|
|
{ backgroundColor: 'rgb(20, 20, 20)' },
|
|
], {
|
|
duration: 1000000,
|
|
delay: -500000,
|
|
easing: 'steps(2, end)'
|
|
});
|
|
|
|
assert_equals(getComputedStyle(target6).backgroundColor, 'rgb(15, 15, 15)');
|
|
assert_equals(getComputedStyle(target6).color, 'rgb(255, 255, 255)');
|
|
|
|
animation.effect.setKeyframes([
|
|
{ color: 'rgb(10, 10, 10)' },
|
|
{ color: 'rgb(20, 20, 20)' },
|
|
]);
|
|
|
|
assert_equals(getComputedStyle(target6).backgroundColor, 'rgb(255, 255, 255)');
|
|
assert_equals(getComputedStyle(target6).color, 'rgb(255, 255, 255)');
|
|
}, 'Standard property animations appearing via setKeyframes do not override important declarations');
|
|
|
|
test(() => {
|
|
getComputedStyle(target7).getPropertyValue('--length-1');
|
|
|
|
let animation = target7.animate([
|
|
{ '--length-1': '100px' },
|
|
{ '--length-1': '200px' },
|
|
], {
|
|
duration: 1000000,
|
|
delay: -500000,
|
|
easing: 'steps(2, end)'
|
|
});
|
|
|
|
assert_equals(getComputedStyle(target7).getPropertyValue('--length-1'), '150px');
|
|
assert_equals(getComputedStyle(target7).getPropertyValue('--length-2'), '10px');
|
|
|
|
animation.effect.setKeyframes([
|
|
{ '--length-2': '100px' },
|
|
{ '--length-2': '200px' },
|
|
]);
|
|
|
|
assert_equals(getComputedStyle(target7).getPropertyValue('--length-1'), '10px');
|
|
assert_equals(getComputedStyle(target7).getPropertyValue('--length-2'), '10px');
|
|
}, 'Custom property animations appearing via setKeyframes do not override important declarations');
|
|
|
|
</script>
|