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:
| https://www.w3.org/TR/css-color/#the-color-property
-->
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<div class="div-container">
<span id="containing-span" class="span-container">
child text
</span>
</div>
<script>
if (window.testRunner) {
window.testRunner.waitUntilDone();
}
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.
window.testRunner.DoNonMeasuredLayout();
}
// 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(
"transition-color");
if (window.testRunner) {
// Do another layout to start the transitions.
window.testRunner.DoNonMeasuredLayout();
// Run the transition completely and then measure the result.
window.testRunner.AdvanceClockByMs(500);
window.testRunner.notifyDone();
}
});
</script>
</body>
</html>