blob: cfb183127d60bf024f820888781bee3567f93caa [file] [log] [blame]
<!DOCTYPE html>
| Test case which ensures that a transition for a not inheritable CSS property
| from an ancestor is not inherited and that the property is not copied over
| to the child element. In this example, background-color should not 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,0,0);
width: 207px;
.span-prefix {
margin-right: -5.2px;
.span-suffix {
font-weight: bold;
.transition-background-color {
background-color: rgb(255,255,255);
transition: background-color 1s linear;
<div class="div-container">
<span id="containing-span" class="span-container">
<span class="span-prefix">ace fami</span>
<span class="span-suffix">ly values</span>
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 not transition because background-color is not inheritable.
var node = document.getElementById('containing-span').
if (window.testRunner) {
// Do another layout to start the transitions.
// Run the transition completely and then measure the result.