Anders Hartvoll Ruud
e730603664
Automatic update from web-platform-tests [revert-rule] Drop .tentative suffix from tests Update "help" links to point at the relevant part of the specification. Bug: 393582263 Change-Id: I2a3ad41715d0cb7b329a0646bbae84f8c610e09c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7581477 Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Steinar H Gunderson <sesse@chromium.org> Cr-Commit-Position: refs/heads/main@{#1585625} -- wpt-commits: 6c5b61b7d7fbf3a4509431510a1c2f4892a302f2 wpt-pr: 57827
77 lines
1.9 KiB
HTML
77 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<title>The revert-rule keyword: basic behavior</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#revert-rule-keyword">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
|
|
<style>
|
|
#test1 {
|
|
color: green;
|
|
}
|
|
#test1 {
|
|
color: red;
|
|
color: revert-rule;
|
|
}
|
|
</style>
|
|
<div id=test1></div>
|
|
<script>
|
|
test(() => {
|
|
assert_true(CSS.supports('color:revert-rule'));
|
|
assert_equals(getComputedStyle(test1).color, 'rgb(0, 128, 0)')
|
|
}, 'The revert-rule keyword rolls back to the previous rule');
|
|
</script>
|
|
|
|
|
|
<style>
|
|
#test2 { /* Specificity: (0, 0, 1) */
|
|
color: red;
|
|
}
|
|
#test2#test2#test2 { /* Specificity: (0, 0, 3) */
|
|
color: red;
|
|
color: revert-rule;
|
|
}
|
|
#test2#test2 { /* Specificity: (0, 0, 2) */
|
|
color: green;
|
|
}
|
|
</style>
|
|
<div id=test2></div>
|
|
<script>
|
|
test(() => {
|
|
assert_true(CSS.supports('color:revert-rule'));
|
|
assert_equals(getComputedStyle(test2).color, 'rgb(0, 128, 0)')
|
|
}, 'Cascade order determines the previous rule, not order of appearance');
|
|
</script>
|
|
|
|
|
|
<style>
|
|
#test3 {
|
|
color: red;
|
|
}
|
|
#test3 {
|
|
color: green;
|
|
}
|
|
</style>
|
|
<div id=test3 style="color:red; color:revert-rule"></div>
|
|
<script>
|
|
test(() => {
|
|
assert_true(CSS.supports('color:revert-rule'));
|
|
assert_equals(getComputedStyle(test3).color, 'rgb(0, 128, 0)')
|
|
}, 'Reverting from style attribute reverts to regular rules');
|
|
</script>
|
|
|
|
|
|
<style>
|
|
#test4 { z-index: 1; }
|
|
#test4 { z-index: 2; }
|
|
#test4 { z-index: -1; z-index: revert-rule; }
|
|
#test4 { z-index: -1; z-index: revert-rule; }
|
|
#test4 { z-index: -1; z-index: revert-rule; }
|
|
</style>
|
|
<div id=test4></div>
|
|
<script>
|
|
test(() => {
|
|
assert_true(CSS.supports('z-index:revert-rule'));
|
|
assert_equals(getComputedStyle(test4).zIndex, '2')
|
|
}, 'A chain of revert-rule works');
|
|
</script>
|