| <!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 propertyValue(elementId, property) |
| { |
| let element = document.getElementById(elementId); |
| let style = window.getComputedStyle(element, null); |
| return parseFloat(style.getPropertyValue(property)) |
| } |
| |
| function initTransitionOnElement(elementId) |
| { |
| let element = document.getElementById(elementId); |
| element.className += " go"; |
| for (let animation of element.getAnimations()) { |
| if (animation instanceof CSSTransition && animation.transitionProperty == "width") { |
| animation.pause(); |
| } |
| } |
| } |
| |
| function runTest(expected) |
| { |
| let result = document.getElementById("result"); |
| |
| initTransitionOnElement("outer"); |
| for (let i = 0; i < 5; i++) { |
| let [time, elementId, property, expectedValue, dependsOn] = expected[i]; |
| |
| pauseTransitionAtTimeOnElement(property, time, document.getElementById(dependsOn)); |
| let actual = propertyValue(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/>`; |
| |
| } |
| |
| initTransitionOnElement("innerTransition"); |
| for (let i = 5; i < expected.length; i++) { |
| let [time, elementId, property, expectedValue, dependsOn] = expected[i]; |
| |
| pauseTransitionAtTimeOnElement(property, time, document.getElementById(elementId)); |
| let actual = propertyValue(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);}); |
| } |
| |
| window.addEventListener("load", loadListener, false); |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| </script> |
| |
| </html> |
