blob: 7e7f0fc404acb31e461aa8bee3ff8b9c21a13fd2 [file] [log] [blame]
<!DOCTYPE html>
| Test case which ensures that a transition for an inheritable CSS property
| from an ancestor is inherited and that the property is copied over to the
| child element. In this example, color should be inherited:
body {
background-color: rgb(0,0,0);
font-family: roboto;
font-size: 26px;
.div-container {
position: absolute;
padding: 26px 26px 26px 26px;
.span-container {
background-color: rgb(255,255,255);
color: rgb(0,0,0);
width: 207px;
.transition-color {
color: rgb(255,0,0);
transition: color 1s linear;
<div class="div-container">
<span id="containing-span" class="span-container">
child text
if (window.testRunner) {
window.addEventListener('load', function() {
if (window.testRunner) {
// Do a layout upon the load event so that we setup our source styles
// that we will be transitioning from.
// Modify the rule that targets the parent element. The child elements
// should transition because color is inheritable.
var node = document.getElementById('containing-span').classList.add(
if (window.testRunner) {
// Do another layout to start the transitions.
// Run the transition completely and then measure the result.