| <!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> |