svg-inline.js (2934B)
1 // global async_test, assert_equals 2 // 3 // This test generates a couple of scenarios (each a 4 // SVGSizing.TestData) for sizing inline <svg> and uses a simple 5 // JavaScript sizing implementation for comparison. 6 // 7 // The tests loops through different combinations of: 8 // 9 // * width and height attributes and style on <svg> 10 // 11 // * viewBox on <svg> (gives intrinsic ratio) 12 // 13 // * width and height on containing block of <svg> 14 // 15 // All these may contribute to the final size of the SVG. The test 16 // focuses on the size of the CSS box generated by the SVG. Little 17 // focus is put on variations within an attribute that doesn't affect 18 // the final size. 19 // 20 // To debug a specific test append ?<test-id> to the URL. An <iframe> 21 // is generated with equivalent test and the source of the test is 22 // added to a <pre> element. 23 24 var debugHint = function(id) { return "(append ?"+id+" to debug) "; }; 25 var testSingleId; 26 if (window.location.search) { 27 testSingleId = window.location.search.substring(1); 28 debugHint = function(id) { return ""; }; 29 } 30 31 var testContainer = document.querySelector('#testContainer'); 32 var testContainerWidth = testContainer.getBoundingClientRect().width; 33 var testContainerHeight = testContainer.getBoundingClientRect().height; 34 35 SVGSizing.doCombinationTest( 36 [["placeholder", [ null ]], 37 ["containerWidthStyle", [null, "400px"]], 38 ["containerHeightStyle", [null, "400px"]], 39 ["svgViewBoxAttr", [ null, "0 0 100 200" ]], 40 ["svgWidthStyle", [ null, "100px", "50%" ]], 41 ["svgHeightStyle", [ null, "100px", "50%" ]], 42 ["svgWidthAttr", [ null, "200", "25%" ]], 43 ["svgHeightAttr", [ null, "200", "25%" ]]], 44 function(config, id, cont) { 45 var testData = new SVGSizing.TestData(config); 46 47 var expectedRect = 48 testData.computeInlineReplacedSize(testContainerWidth, 49 testContainerHeight); 50 var svgElement = testData.buildSVGOrPlaceholder(); 51 var container = 52 testData.buildContainer(svgElement); 53 54 var checkSize = function() { 55 var svgRect = 56 svgElement.getBoundingClientRect(); 57 58 try { 59 assert_equals(svgRect.width, 60 expectedRect.width, 61 debugHint(id) + "Wrong width"); 62 assert_equals(svgRect.height, 63 expectedRect.height, 64 debugHint(id) + "Wrong height"); 65 } finally { 66 testContainer.removeChild(container); 67 if (testSingleId) 68 document.body.removeChild(testContainer); 69 cont(id+1); 70 } 71 }; 72 73 testContainer.appendChild(container); 74 test(checkSize, testData.name); 75 76 if (testSingleId == id) { 77 testData.buildDemo(expectedRect, id); 78 } 79 }, testSingleId);