test_viewBox.html (2531B)
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1396642 5 --> 6 <head> 7 <title>Test for Bug 1396642</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 10 </head> 11 <body> 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1396642">Mozilla Bug 1396642</a> 13 <p id="display"></p> 14 <div id="content" style="display: none"></div> 15 16 <div id="svg"></div> 17 18 <pre id="test"> 19 <script class="testbody" type="application/javascript"> 20 SimpleTest.waitForExplicitFinish(); 21 22 function runTest() { 23 var testsElement = $("svg"); 24 25 // Turn for instance `2.3` into `230` (px). Round to avoid floating point 26 // issues. 27 const scale = (number) => Math.round(100 * number); 28 29 const widths = [2, 2.3, 2.5, 2.8]; 30 const heights = [3, 3.3, 3.5, 3.8]; 31 32 for (const width of widths) { 33 for (const height of heights) { 34 const variations = [ 35 {width, height}, 36 {width: "auto", height}, 37 {width, height: "auto"}, 38 {width: "auto", height: "auto"}, 39 ]; 40 41 for (const variation of variations) { 42 const svgWrapperElement = document.createElement("div"); 43 svgWrapperElement.style.width = 44 variation.width === "auto" && variation.height === "auto" 45 ? `${scale(width)}px` 46 : "auto"; 47 48 const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 49 svgElement.setAttribute("viewBox", `0 0 ${width} ${height}`); 50 svgElement.style.width = 51 typeof variation.width === "number" 52 ? `${scale(variation.width)}px` 53 : variation.width; 54 svgElement.style.height = 55 typeof variation.height === "number" 56 ? `${scale(variation.height)}px` 57 : variation.height; 58 59 svgWrapperElement.appendChild(svgElement); 60 61 testsElement.appendChild(svgWrapperElement); 62 63 const rect = svgElement.getBoundingClientRect(); 64 const actual = { 65 width: Math.round(rect.width), 66 height: Math.round(rect.height), 67 }; 68 const expected = { 69 width: scale(width), 70 height: scale(height), 71 }; 72 73 isfuzzy(expected.width, actual.width, 0.001, "checking width"); 74 isfuzzy(expected.height, actual.height, 0.001, "checking height"); 75 } 76 } 77 } 78 79 SimpleTest.finish(); 80 } 81 82 window.addEventListener("load", runTest); 83 </script> 84 </pre> 85 </body> 86 </html>