| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="UTF-8"> |
| <title></title> |
| |
| <style> |
| .outerBlock { |
| border: 1px solid black; |
| -webkit-transition: all 1s linear; |
| -moz-transition: all 1s linear; |
| } |
| |
| .innerBlock { |
| background-color: green; |
| height: 100px; |
| -webkit-transition: all 1s linear; |
| -moz-transition: all 1s linear; |
| } |
| |
| #outer { |
| width: 100px; |
| } |
| |
| #outer.go { |
| width: 500px; |
| } |
| |
| #inner { |
| width: calc(50% + 10px); |
| } |
| |
| #innerTransition { |
| width: calc(10% + 10px); |
| } |
| |
| #innerTransition.go { |
| width: calc(100% - 10px); |
| } |
| </style> |
| </head> |
| |
| <body> |
| This tests that calc() expressions depending on transitioning elements behave correctly. |
| <div class="outerBlock" id="outer"> |
| <div class="innerBlock" id="inner"></div> |
| <div class="innerBlock" id="innerTransition"></div> |
| </div> |
| <div id="result"></div> |
| </body> |
| |
| <script src="../../transitions/resources/transition-test-helpers.js"></script> |
| <script> |
| |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| const transitioningElements = ["outer", "innerTransition"]; |
| |
| expectedValues = [ |
| // time, element, property, expected-value, depends-on |
| [0.00, "inner", 'width', 60, "outer"], |
| [0.25, "inner", 'width', 110, "outer"], |
| [0.50, "inner", 'width', 160, "outer"], |
| [0.75, "inner", 'width', 210, "outer"], |
| [1.00, "inner", 'width', 260, "outer"], |
| |
| [0.00, "innerTransition", 'width', 60, "outer"], |
| [0.25, "innerTransition", 'width', 167.5, "outer"], |
| [0.50, "innerTransition", 'width', 275, "outer"], |
| [0.75, "innerTransition", 'width', 382.5, "outer"], |
| [1.00, "innerTransition", 'width', 490, "outer"], |
| ]; |
| |
| function getPropertyCSSValue(elementId, property) |
| { |
| let element = document.getElementById(elementId); |
| let style = window.getComputedStyle(element, null); |
| return style.getPropertyValue(property); |
| } |
| |
| function runTest(expected) |
| { |
| let result = document.getElementById("result"); |
| for (let i = 0; i < expected.length; i++) { |
| let [time, elementId, property, expectedValue, dependsOn] = expected[i]; |
| let elem = (i < 5) ? dependsOn : elementId; |
| pauseTransitionAtTimeOnElement(property, time, document.getElementById(elem)); |
| let actual = Number.parseFloat(getPropertyCSSValue(elementId, property)); |
| if (actual == expectedValue) |
| result.innerHTML += 'PASS - "' + property + '" property for "' + elementId +'" element at ' + time + 's was: ' + actual + '<br/>'; |
| else |
| result.innerHTML += 'FAIL - "' + property + '" property for "' + elementId +'" element at ' + time + 's expected: ' + expectedValue + ' but saw: ' + actual + '<br/>'; |
| } |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| |
| function loadListener() |
| { |
| waitForAnimationStart(function(){runTest(expectedValues);}); |
| } |
| |
| for (let each of transitioningElements) { |
| let element = document.getElementById(each); |
| element.className += " go"; |
| } |
| |
| window.addEventListener("load", loadListener, false); |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| </script> |
| |
| </html> |
