| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| |
| body { |
| margin: 0; |
| } |
| #svg-root { |
| position: relative; |
| left: 10px; |
| top: 20px; |
| margin: 30px; |
| border: solid 40px aqua; |
| padding: 50px; |
| background-color: blue; |
| } |
| |
| </style> |
| <script src="../../http/tests/inspector/inspector-test.js"></script> |
| <script src="../../http/tests/inspector/elements-test.js"></script> |
| <script> |
| |
| function startTest() |
| { |
| if (window.eventSender) |
| window.eventSender.zoomPageIn(); |
| runTest(); |
| } |
| |
| function test() |
| { |
| function nodeSelected(node) |
| { |
| RuntimeAgent.evaluate("dumpInspectorHighlightRects()", InspectorTest.completeTest); |
| } |
| |
| InspectorTest.selectNodeWithId("svg-root", nodeSelected); |
| } |
| |
| </script> |
| </head> |
| <body onload="startTest()"> |
| <svg id="svg-root" width="100" height="200" viewbox="0 0 50 100"></svg> |
| <p id="description">This test verifies the position and size of the highlight rectangles overlayed on an SVG root element when the page is zoomed.</p> |
| <!-- |
| |
| Expected value calculations for #svg-root's highlight rectangles at 120% zoom: |
| |
| margin rect: |
| left: (10) * 1.2 == 12 |
| top: (20) * 1.2 == 24 |
| width: (100 + 2 * (30 + 40 + 50)) * 1.2 == 340 * 1.2 == 408 |
| height: (200 + 2 * (30 + 40 + 50)) * 1.2 == 440 * 1.2 == 528 |
| |
| border rect: |
| left: (10 + 30) * 1.2 == 40 * 1.2 == 48 |
| top: (20 + 30) * 1.2 == 50 * 1.2 == 60 |
| width: (100 + 2 * (40 + 50)) * 1.2 == 280 * 1.2 == 336 |
| height: (200 + 2 * (40 + 50)) * 1.2 == 380 * 1.2 == 456 |
| |
| padding rect: |
| left: (10 + 30 + 40) * 1.2 == 80 * 1.2 == 96 |
| top: (20 + 30 + 40) * 1.2 == 90 * 1.2 == 108 |
| width: (100 + 2 * (50)) * 1.2 == 200 * 1.2 == 240 |
| height: (200 + 2 * (50)) * 1.2 == 300 * 1.2 == 360 |
| |
| content rect: |
| left: (10 + 30 + 40 + 50) * 1.2 == 130 * 1.2 == 156 |
| top: (20 + 30 + 40 + 50) * 1.2 == 140 * 1.2 == 168 |
| width: (100) * 1.2 == 120 |
| height: (200) * 1.2 == 240 |
| |
| --> |
| <div id="console"></div> |
| </body> |
| </html> |
