| <!DOCTYPE html> |
| <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> |
| |
| 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> |
| |
| <script src="../../transitions/resources/transition-test-helpers.js"></script> |
| <script> |
| |
| if (window.testRunner) |
| window.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', 20, "outer"], |
| [0.25, "innerTransition", 'width', 70, "outer"], |
| [0.50, "innerTransition", 'width', 165, "outer"], |
| [0.75, "innerTransition", 'width', 305, "outer"], |
| [1.00, "innerTransition", 'width', 490, "outer"], |
| ]; |
| |
| function runTest(expected) |
| { |
| for (var i = 0; i < expected.length; ++i) { |
| var time = expected[i][0]; |
| var elementId = expected[i][1]; |
| var property = expected[i][2]; |
| var expectedValue = expected[i][3]; |
| var dependsOn = expected[i][4]; |
| pauseTransitionAtTimeOnElement(property, time, document.getElementById(dependsOn)); |
| pauseTransitionAtTimeOnElement(property, time, document.getElementById(elementId)); |
| var actual = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).getFloatValue(CSSPrimitiveValue.CSS_NUMBER); |
| var result = document.getElementById("result"); |
| 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 (var i = 0; i < transitioningElements.length; i++) { |
| var element = document.getElementById(transitioningElements[i]); |
| element.className += " go"; |
| } |
| |
| window.addEventListener("load", loadListener, false); |
| window.testRunner.waitUntilDone(); |
| |
| </script> |
