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 |