| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| </head> |
| <body style="margin:0; border:0; padding:0;"> |
| |
| <div style="width:500px;height:200px;"> |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px"> |
| <rect id="r1" x="20" y="30" width="40" height="50" fill="blue" /> |
| </svg> |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="100px" viewBox="0 0 50 200" preserveAspectRatio="none"> |
| <rect id="r2" x="20" y="30" width="40" height="50" fill="green" /> |
| </svg> |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="100px"> |
| <g id="rect-group"> |
| <rect x="0" y="0" width="200px" height="50px" fill="yellow" overflow="hidden" /> |
| <rect x="50px" y="50px" width="210px" height="60px" fill="orange" overflow="visible" /> |
| </g> |
| <rect id="r3" transform="translate(50, 30) rotate(35, 50, 50)" fill="green" width="100" height="100"/> |
| <path id="path1" fill="green" stroke="black" stroke-width="10" d="M 30 40 L 80 40 L 80 90 L 30 90 Z"/> |
| <text id="text" x="10" y="30"><tspan>A<tspan dy="-5"> B</tspan><tspan dy="10"><tspan>C</tspan></tspan></tspan></text> |
| </svg> |
| </div> |
| |
| <div id="description"></div> |
| <div id="console"></div> |
| |
| <script src="../../resources/js-test-pre.js"></script> |
| <script> |
| |
| function rectToString(r) |
| { |
| return `{ x ${r.left.toFixed(2)} y ${r.top.toFixed(2)} width ${r.width.toFixed(2)} height ${r.height.toFixed(2)} }`; |
| } |
| |
| function dumpRects(rectList) |
| { |
| for (let rect of rectList) |
| debug(rectToString(rect)); |
| } |
| |
| description("This test checks getClientRects() on SVG elements"); |
| |
| debug("getClientRects on a rect at absolute coordinates:"); |
| dumpRects(document.getElementById("r1").getClientRects()); |
| |
| debug(""); |
| debug("getClientRects on a rotated rect:"); |
| dumpRects(document.getElementById("r3").getClientRects()); |
| |
| debug(""); |
| debug("getClientRects on a g:"); |
| dumpRects(document.getElementById("rect-group").getClientRects()); |
| |
| debug(""); |
| debug("getClientRects on a path:"); |
| dumpRects(document.getElementById("path1").getClientRects()); |
| |
| debug(""); |
| debug("getClientRects on text:"); |
| dumpRects(document.getElementById("path1").getClientRects()); |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| |
| </body> |
| </html> |
