test_smilCSSFontStretchRelative.xhtml (3608B)
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>Test for Animation Behavior on CSS Properties</title> 4 <script src="/tests/SimpleTest/SimpleTest.js"></script> 5 <script type="text/javascript" src="smilTestUtils.js"></script> 6 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 7 </head> 8 <body> 9 <p id="display"></p> 10 <div id="content" style="display: none"> 11 <svg id="svg" xmlns="http://www.w3.org/2000/svg"> 12 </svg> 13 </div> 14 <pre id="test"> 15 <script class="testbody" type="text/javascript"> 16 <![CDATA[ 17 /* This testcase verifies that animated values of "wider" and "narrower" for 18 "font-stretch" have the expected effect, across all possible inherited 19 values of the property. 20 XXXdholbert Currently, we don't support animating relative values of 21 font-stretch, so most of the tests here use todo_is() rather than is(). 22 */ 23 24 SimpleTest.waitForExplicitFinish(); 25 26 const gPropertyName="font-stretch"; 27 28 // List of non-relative font-stretch values, from smallest to largest 29 const gFontStretchValues = [ 30 ["ultra-condensed", "50%"], 31 ["extra-condensed", "62.5%"], 32 ["condensed", "75%"], 33 ["semi-condensed", "87.5%"], 34 ["normal", "100%"], 35 ["semi-expanded", "112.5%"], 36 ["expanded", "125%"], 37 ["extra-expanded", "150%"], 38 ["ultra-expanded", "200%"], 39 ]; 40 41 function testFontStretchValue([baseValue, computedValue], [narrowerStep, computedNarrowerStep], [widerStep, computedWiderStep]) 42 { 43 var svg = SMILUtil.getSVGRoot(); 44 var gElem = document.createElementNS(SVG_NS, "g"); 45 gElem.setAttribute("style", "font-stretch: " + baseValue); 46 svg.appendChild(gElem); 47 48 var textElem = document.createElementNS(SVG_NS, "text"); 49 gElem.appendChild(textElem); 50 51 var animElem = document.createElementNS(SVG_NS, "set"); 52 animElem.setAttribute("attributeName", gPropertyName); 53 animElem.setAttribute("attributeType", "CSS"); 54 animElem.setAttribute("begin", "0s"); 55 animElem.setAttribute("dur", "indefinite"); 56 textElem.appendChild(animElem); 57 58 // CHECK EFFECT OF 'narrower' 59 // NOTE: Using is() instead of todo_is() for ultra-condensed, since 60 // 'narrower' has no effect on that value. 61 var myIs = (baseValue == "ultra-condensed" ? is : todo_is); 62 animElem.setAttribute("to", "narrower"); 63 SMILUtil.getSVGRoot().setCurrentTime(1.0); // Force a resample 64 myIs(SMILUtil.getComputedStyleSimple(textElem, gPropertyName), computedNarrowerStep, 65 "checking effect of 'narrower' on inherited value '" + baseValue + "'"); 66 67 // CHECK EFFECT OF 'wider' 68 // NOTE: using is() instead of todo_is() for ultra-expanded, since 69 // 'wider' has no effect on that value. 70 myIs = (baseValue == "ultra-expanded" ? is : todo_is); 71 animElem.setAttribute("to", "wider"); 72 SMILUtil.getSVGRoot().setCurrentTime(1.0); // Force a resample 73 myIs(SMILUtil.getComputedStyleSimple(textElem, gPropertyName), computedWiderStep, 74 "checking effect of 'wider' on inherited value '" + baseValue + "'"); 75 76 // Removing animation should clear animated effects 77 textElem.removeChild(animElem); 78 svg.removeChild(gElem); 79 } 80 81 function main() 82 { 83 var valuesList = gFontStretchValues; 84 for (var baseIdx in valuesList) { 85 // 'narrower' and 'wider' are expected to shift us by one slot, but not 86 // past the ends of the list of possible values. 87 var narrowerIdx = Math.max(baseIdx - 1, 0); 88 var widerIdx = Math.min(baseIdx + 1, valuesList.length - 1); 89 90 testFontStretchValue(valuesList[baseIdx], 91 valuesList[narrowerIdx], valuesList[widerIdx]); 92 } 93 94 SimpleTest.finish(); 95 } 96 97 window.addEventListener("load", main); 98 ]]> 99 </script> 100 </pre> 101 </body> 102 </html>