| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <style> | |
| 5 | |
| 6 body { | |
| 7 margin: 0; | |
| 8 } | |
| 9 #svg-root { | |
| 10 position: relative; | |
| 11 left: 10px; | |
| 12 top: 20px; | |
| 13 margin: 30px; | |
| 14 border: solid 40px aqua; | |
| 15 padding: 50px; | |
| 16 background-color: blue; | |
| 17 } | |
| 18 | |
| 19 </style> | |
| 20 <script src="../../http/tests/inspector/inspector-test.js"></script> | |
| 21 <script src="../../http/tests/inspector/elements-test.js"></script> | |
| 22 <script> | |
| 23 | |
| 24 function startTest() | |
| 25 { | |
| 26 if (window.eventSender) | |
| 27 window.eventSender.zoomPageIn(); | |
| 28 runTest(); | |
| 29 } | |
| 30 | |
| 31 function test() | |
| 32 { | |
| 33 InspectorTest.dumpInspectorHighlightJSON("svg-root", InspectorTest.completeT
est.bind(InspectorTest)); | |
| 34 } | |
| 35 | |
| 36 </script> | |
| 37 </head> | |
| 38 <body onload="startTest()"> | |
| 39 <svg id="svg-root" width="100" height="200" viewbox="0 0 50 100"></svg> | |
| 40 <p id="description">This test verifies the position and size of the highlight re
ctangles overlayed on an SVG root element when the page is zoomed.</p> | |
| 41 <!-- | |
| 42 | |
| 43 Expected value calculations for #svg-root's highlight rectangles at 120% zoom: | |
| 44 | |
| 45 margin rect: | |
| 46 left: (10) * 1.2 == 12 | |
| 47 top: (20) * 1.2 == 24 | |
| 48 width: (100 + 2 * (30 + 40 + 50)) * 1.2 == 340 * 1.2 == 408 | |
| 49 height: (200 + 2 * (30 + 40 + 50)) * 1.2 == 440 * 1.2 == 528 | |
| 50 | |
| 51 border rect: | |
| 52 left: (10 + 30) * 1.2 == 40 * 1.2 == 48 | |
| 53 top: (20 + 30) * 1.2 == 50 * 1.2 == 60 | |
| 54 width: (100 + 2 * (40 + 50)) * 1.2 == 280 * 1.2 == 336 | |
| 55 height: (200 + 2 * (40 + 50)) * 1.2 == 380 * 1.2 == 456 | |
| 56 | |
| 57 padding rect: | |
| 58 left: (10 + 30 + 40) * 1.2 == 80 * 1.2 == 96 | |
| 59 top: (20 + 30 + 40) * 1.2 == 90 * 1.2 == 108 | |
| 60 width: (100 + 2 * (50)) * 1.2 == 200 * 1.2 == 240 | |
| 61 height: (200 + 2 * (50)) * 1.2 == 300 * 1.2 == 360 | |
| 62 | |
| 63 content rect: | |
| 64 left: (10 + 30 + 40 + 50) * 1.2 == 130 * 1.2 == 156 | |
| 65 top: (20 + 30 + 40 + 50) * 1.2 == 140 * 1.2 == 168 | |
| 66 width: (100) * 1.2 == 120 | |
| 67 height: (200) * 1.2 == 240 | |
| 68 | |
| 69 --> | |
| 70 <div id="console"></div> | |
| 71 </body> | |
| 72 </html> | |
| OLD | NEW |