| <!DOCTYPE html> |
| <style> |
| .transitionTest { |
| background-color: green; |
| height: 100px; |
| transition: all 1s linear; |
| -moz-transition: all 1s linear; |
| } |
| |
| #startCalcEndCalc, #startCalcEndPx, #startCalcEndPercent { |
| width: calc(10% + 50px); |
| width: -moz-calc(10% + 50px); |
| } |
| |
| #startPxEndCalc { |
| width: 100px; |
| } |
| |
| #startPercentEndCalc { |
| width: 20%; |
| } |
| |
| #startCalcEndCalc.go, #startPxEndCalc.go, #startPercentEndCalc.go { |
| width: calc(100% - 100px); |
| width: -moz-calc(100% - 100px); |
| } |
| |
| #startCalcEndPx.go { |
| width: 400px; |
| } |
| |
| #startCalcEndPercent.go { |
| width: 80%; |
| } |
| </style> |
| |
| This tests that transitions containing calc() expressions transition correctly. |
| <div style="width:500px; border: 1px solid black;"> |
| <div class="transitionTest" id="startCalcEndCalc"></div> |
| <div class="transitionTest" id="startPxEndCalc"></div> |
| <div class="transitionTest" id="startPercentEndCalc"></div> |
| <div class="transitionTest" id="startCalcEndPx"></div> |
| <div class="transitionTest" id="startCalcEndPercent"></div> |
| </div> |
| <div id="result"></div> |
| |
| <script src="../../animations/resources/animation-test-helpers.js"></script> |
| <script> |
| |
| const tests = ["startCalcEndCalc", "startPxEndCalc", "startPercentEndCalc", "startCalcEndPx", "startCalcEndPercent"]; |
| |
| expectedValues = []; |
| |
| for (var i = 0; i < tests.length; i++) { |
| expectedValues = expectedValues.concat([[0.25, tests[i], 'width', 175, 2]]); |
| expectedValues = expectedValues.concat([[0.5, tests[i], 'width', 250, 2]]); |
| expectedValues = expectedValues.concat([[0.75, tests[i], 'width', 325, 2]]); |
| expectedValues = expectedValues.concat([[1.0, tests[i], 'width', 400, 2]]); |
| } |
| |
| function initialize(id) |
| { |
| var expectedStartWidth = 100; |
| var element = document.getElementById(id); |
| var width = element.offsetWidth; |
| if (width == expectedStartWidth) |
| result += 'PASS - "width" property for "' + id +'" element at 0.0s was: ' + width + '<br>'; |
| else |
| result += 'FAIL - "width" property for "' + id +'" element at 0.0s expected: ' + expectedStartWidth + ' but saw: ' + width + '<br>'; |
| |
| element.className += " go"; |
| } |
| |
| function setupTest() |
| { |
| for (var i = 0; i < tests.length; i++) |
| initialize(tests[i]); |
| } |
| |
| runTransitionTest(expectedValues, setupTest, undefined, false /* pixel test */); |
| |
| </script> |
