blob: 9bc82d33050844b93dac7b01044d54d7b3065cbd [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
#box {
display: inline;
font-size: 10px;
font-family: sans-serif;
transition: font-size 2s linear;
}
#control {
display: inline;
font-size: 15px;
font-family: sans-serif;
}
#box.changed {
font-size: 20px;
}
</style>
<script src="../animations/resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
const expectedValues = [
// [time, element-id, property, expected-value, tolerance]
[1, 'box', 'font-size', 15, 2, checkSize],
];
function checkSize()
{
var boxWidth = document.getElementById('box').offsetWidth;
var controlWidth = document.getElementById('control').offsetWidth;
var result = "";
if (isCloseEnough(boxWidth, controlWidth, 2))
result = "PASS: width is close to control";
else
result = "FAIL: width was " + boxWidth + ", should have been " + controlWidth;
return result;
}
function setupTest()
{
document.getElementById('box').className = 'changed';
}
runTransitionTest(expectedValues, setupTest);
</script>
</head>
<body>
<div id="box">Here is some text</div>
<br>
<div id="control">Here is some text</div>
<div id="result"></div>
</body>
</html>