<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test for Animation Behavior on CSS Properties</title> <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> <script type="text/javascript" src="smilTestUtils.js"></script> <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> </head> <body> <p id="display"></p> <div id="content" style="display: none"> <svg id="svg" xmlns="http://www.w3.org/2000/svg"> </svg> </div> <pre id="test"> <script class="testbody" type="text/javascript"> <![CDATA[ /* This testcase verifies that animated values of "wider" and "narrower" for "font-stretch" have the expected effect, across all possible inherited values of the property. XXXdholbert Currently, we don't support animating relative values of font-stretch, so most of the tests here use todo_is() rather than is(). */ SimpleTest.waitForExplicitFinish(); const gPropertyName="font-stretch"; // List of non-relative font-stretch values, from smallest to largest const gFontStretchValues = [ "ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded" ]; function testFontStretchValue(baseValue, narrowerStep, widerStep) { var svg = SMILUtil.getSVGRoot(); var gElem = document.createElementNS(SVG_NS, "g"); gElem.setAttribute("style", "font-stretch: " + baseValue); svg.appendChild(gElem); var textElem = document.createElementNS(SVG_NS, "text"); gElem.appendChild(textElem); var animElem = document.createElementNS(SVG_NS, "set"); animElem.setAttribute("attributeName", gPropertyName); animElem.setAttribute("attributeType", "CSS"); animElem.setAttribute("begin", "0s"); animElem.setAttribute("dur", "indefinite"); textElem.appendChild(animElem); // CHECK EFFECT OF 'narrower' // NOTE: Using is() instead of todo_is() for ultra-condensed, since // 'narrower' has no effect on that value. var myIs = (baseValue == "ultra-condensed" ? is : todo_is); animElem.setAttribute("to", "narrower"); SMILUtil.getSVGRoot().setCurrentTime(1.0); // Force a resample myIs(SMILUtil.getComputedStyleSimple(textElem, gPropertyName), narrowerStep, "checking effect of 'narrower' on inherited value '" + baseValue + "'"); // CHECK EFFECT OF 'wider' // NOTE: using is() instead of todo_is() for ultra-expanded, since // 'wider' has no effect on that value. myIs = (baseValue == "ultra-expanded" ? is : todo_is); animElem.setAttribute("to", "wider"); SMILUtil.getSVGRoot().setCurrentTime(1.0); // Force a resample myIs(SMILUtil.getComputedStyleSimple(textElem, gPropertyName), widerStep, "checking effect of 'wider' on inherited value '" + baseValue + "'"); // Removing animation should clear animated effects textElem.removeChild(animElem); svg.removeChild(gElem); } function main() { var valuesList = gFontStretchValues; for (var baseIdx in valuesList) { // 'narrower' and 'wider' are expected to shift us by one slot, but not // past the ends of the list of possible values. var narrowerIdx = Math.max(baseIdx - 1, 0); var widerIdx = Math.min(baseIdx + 1, valuesList.length - 1); testFontStretchValue(valuesList[baseIdx], valuesList[narrowerIdx], valuesList[widerIdx]); } SimpleTest.finish(); } window.addEventListener("load", main, false); ]]> </script> </pre> </body> </html>