Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/cssom/system-color-inherit.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>System color keyword inheritance</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.parent {
color: blue;
}
.child {
color: inherit;
}
.override {
color: red !important;
}
</style>
<body>
<div class="parent" id="parentDiv">
Parent element (blue)
<div class="child" id="child">
Child element (inherits blue)
</div>
<div class="child override" id="overridden">
Overridden child element (red)
</div>
</div>
<script>
"use strict";
const parentDiv = document.getElementById("parentDiv");
const child = document.getElementById("child");
const overridden = document.getElementById("overridden");
test(() => {
assert_equals(
window.getComputedStyle(parentDiv).color,
"rgb(0, 0, 255)",
"Parent has blue color"
);
assert_equals(
window.getComputedStyle(child).color,
"rgb(0, 0, 255)",
"Child inherits blue color from parent"
);
assert_equals(
window.getComputedStyle(overridden).color,
"rgb(255, 0, 0)",
"Overridden child has red color (inheritance overridden)"
);
}, "Test color inheritance");
test(() => {
child.style.color = "green";
assert_equals(
window.getComputedStyle(child).color,
"rgb(0, 128, 0)",
"Dynamic override works correctly"
);
}, "Dynamically override inherited color");
</script>
</body>