transition-important.html | Explore in Territory

<!DOCTYPE html>
<title>CSS Transitions Test: !important property</title>
<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#cascade-sort">
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<style>
#target {
    width: 200px;
    height: 200px;
    background-color: green;
    transition: background-color 100s;
}
.red {
    background-color: red !important;
}
</style>
<div id="target"></div>
<script>
test(t => {
    assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 128, 0)");
    target.className = "red";
    assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 128, 0)");
}, "!important should not override transition");
</script>

chromium/third_party/blink/web_tests/external/wpt/css/css-transitions/transition-important.html