| <!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: https://www.w3.org/TR/css-backgrounds-3/#the-background-color |
| --> |
| <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,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; |
| } |
| </style> |
| </head> |
| <body> |
| <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> |
| </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 not transition because background-color is not inheritable. |
| var node = document.getElementById('containing-span'). |
| classList.add("transition-background-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(1000); |
| window.testRunner.notifyDone(); |
| } |
| }); |
| </script> |
| |
| </body> |
| </html> |
