svg-embedded-sizing.js (3911B)
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 on <object>, <iframe> (input dependent) 10 // 11 // * width and height on <svg> 12 // 13 // * viewBox on <svg> (gives intrinsic ratio) 14 // 15 // * width and height on containing block of <object> 16 // 17 // All these contribute to the final size of the SVG in some way. 18 // 19 // The test focuses on the size of the CSS box generated by the SVG. 20 // The SVG is always empty by itself so no actual SVG are tested. 21 // Little focus is put on variations within an attribute that doesn't 22 // affect the sizing behavior. 23 // 24 // To debug a specific test, append ?<test-id> to the URL. An <iframe> 25 // is generated with equivalent test and the source code of the test 26 // can be downloaded. 27 28 var debugHint = function(id) { return "(append ?"+id+" to debug) "; }; 29 var testSingleId; 30 if (window.location.search) { 31 testSingleId = parseInt(window.location.search.substring(1)); 32 debugHint = function(id) { return ""; }; 33 } 34 35 function testPlaceholderWithHeight(placeholder, 36 placeholderHeightAttr) { 37 var testContainer = document.querySelector('#testContainer'); 38 var outerWidth = testContainer.getBoundingClientRect().width; 39 var outerHeight = testContainer.getBoundingClientRect().height; 40 41 SVGSizing.doCombinationTest( 42 [["placeholder", [ placeholder ]], 43 ["containerWidthStyle", [null, "400px"]], 44 ["containerHeightStyle", [null, "400px"]], 45 ["placeholderWidthAttr", [null, "100", "50%"]], 46 ["placeholderHeightAttr", [placeholderHeightAttr]], 47 ["svgViewBoxAttr", [ null, "0 0 100 200" ]], 48 ["svgWidthAttr", [ null, "200", "25%" ]], 49 ["svgHeightAttr", [ null, "200", "25%" ]]], 50 function (config, id, cont) { 51 var testData = new SVGSizing.TestData(config); 52 var t = async_test(testData.name); 53 var expectedRect = 54 testData.computeInlineReplacedSize(outerWidth, outerHeight); 55 var placeholder = testData.buildSVGOrPlaceholder(); 56 var container = 57 testData.buildContainer(placeholder); 58 59 var checkSize = function() { 60 var placeholderRect = 61 placeholder.getBoundingClientRect(); 62 63 try { 64 assert_equals(placeholderRect.width, 65 expectedRect.width, 66 debugHint(id) + "Wrong width"); 67 assert_equals(placeholderRect.height, 68 expectedRect.height, 69 debugHint(id) + "Wrong height"); 70 } finally { 71 testContainer.removeChild(container); 72 if (testSingleId) 73 document.body.removeChild(testContainer); 74 cont(id+1); 75 } 76 t.done(); 77 }; 78 79 if (!config.placeholder) { 80 testContainer.appendChild(container); 81 test(checkSize, testData.name); 82 } else { 83 t.step(function() { 84 placeholder.addEventListener('load', function() { 85 // step_timeout is a work-around to let engines 86 // finish layout of child browsing contexts even 87 // after the load event 88 step_timeout(t.step_func(checkSize), 0); 89 }); 90 testContainer.appendChild(container); 91 }); 92 } 93 if (testSingleId == id) 94 testData.buildDemo(expectedRect, id); 95 }, testSingleId); 96 }