blob: f1861cc4d70a2ae598e485375c44c6b2b08fb536 [file] [log] [blame]
<!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=false ] -->
<style>
.transitionTest {
background-color: green;
height: 100px;
-webkit-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="../../transitions/resources/transition-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)
element.innerHTML += 'PASS - "width" property for "' + id +'" element at 0.0s was: ' + width;
else
element.innerHTML += 'FAIL - "width" property for "' + id +'" element at 0.0s expected: ' + expectedStartWidth + ' but saw: ' + width;
element.className += " go";
}
function setupTest()
{
for (var i = 0; i < tests.length; i++)
initialize(tests[i]);
}
runTransitionTest(expectedValues, setupTest, true, false /* pixel test */);
</script>