103 lines
2.9 KiB
HTML
103 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<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>
|
|
|
|
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="../../transitions/resources/transition-test-helpers.js"></script>
|
|
<script>
|
|
|
|
if (window.testRunner)
|
|
window.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', 20, "outer"],
|
|
[0.25, "innerTransition", 'width', 70, "outer"],
|
|
[0.50, "innerTransition", 'width', 165, "outer"],
|
|
[0.75, "innerTransition", 'width', 305, "outer"],
|
|
[1.00, "innerTransition", 'width', 490, "outer"],
|
|
];
|
|
|
|
function runTest(expected)
|
|
{
|
|
for (var i = 0; i < expected.length; ++i) {
|
|
var time = expected[i][0];
|
|
var elementId = expected[i][1];
|
|
var property = expected[i][2];
|
|
var expectedValue = expected[i][3];
|
|
var dependsOn = expected[i][4];
|
|
pauseTransitionAtTimeOnElement(property, time, document.getElementById(dependsOn));
|
|
pauseTransitionAtTimeOnElement(property, time, document.getElementById(elementId));
|
|
var actual = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
|
|
var result = document.getElementById("result");
|
|
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);});
|
|
}
|
|
|
|
for (var i = 0; i < transitioningElements.length; i++) {
|
|
var element = document.getElementById(transitioningElements[i]);
|
|
element.className += " go";
|
|
}
|
|
|
|
window.addEventListener("load", loadListener, false);
|
|
window.testRunner.waitUntilDone();
|
|
|
|
</script>
|