2018-09-27 09:49:52 +00:00
|
|
|
<!DOCTYPE html>
|
2012-06-27 18:23:09 +00:00
|
|
|
<style>
|
|
|
|
|
.transitionTest {
|
|
|
|
|
background-color: green;
|
|
|
|
|
height: 100px;
|
|
|
|
|
-webkit-transition: all 1s linear;
|
|
|
|
|
-moz-transition: all 1s linear;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#startCalcEndCalc, #startCalcEndPx, #startCalcEndPercent {
|
2013-01-21 07:05:16 +00:00
|
|
|
width: calc(10% + 50px);
|
2012-06-27 18:23:09 +00:00
|
|
|
width: -moz-calc(10% + 50px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#startPxEndCalc {
|
|
|
|
|
width: 100px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#startPercentEndCalc {
|
|
|
|
|
width: 20%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#startCalcEndCalc.go, #startPxEndCalc.go, #startPercentEndCalc.go {
|
2013-01-21 07:05:16 +00:00
|
|
|
width: calc(100% - 100px);
|
2012-06-27 18:23:09 +00:00
|
|
|
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>
|
