| <!DOCTYPE html> |
| <style> |
| .outerBlock { |
| border: 1px solid black; |
| transition: all 1s linear; |
| -moz-transition: all 1s linear; |
| } |
| |
| .innerBlock { |
| background-color: green; |
| height: 100px; |
| 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="../../animations/resources/animation-test-helpers.js"></script> |
| <script> |
| |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| const transitioningElements = ["outer", "innerTransition"]; |
| |
| expectedValues = [ |
| // time, element, property, expected-value, tolerance |
| [0.00, "inner", 'width', 60, 10], |
| [0.25, "inner", 'width', 110, 10], |
| [0.50, "inner", 'width', 160, 10], |
| [0.75, "inner", 'width', 210, 10], |
| [1.00, "inner", 'width', 260, 10], |
| |
| [0.00, "innerTransition", 'width', 20, 10], |
| [0.25, "innerTransition", 'width', 70, 10], |
| [0.50, "innerTransition", 'width', 165, 10], |
| [0.75, "innerTransition", 'width', 305, 10], |
| [1.00, "innerTransition", 'width', 490, 10], |
| ]; |
| |
| runTransitionTest(expectedValues, setupTest); |
| |
| |
| function setupTest() { |
| for (var i = 0; i < transitioningElements.length; i++) { |
| var element = document.getElementById(transitioningElements[i]); |
| element.className += " go"; |
| } |
| } |
| |
| |
| </script> |
