src/third_party/WebKit/LayoutTests/inspector/elements/highlight-svg-root-zoomed.html

   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     function nodeSelected(node)
  34     {
  35         InspectorTest.dumpInspectorHighlight(node, InspectorTest.completeTest.bind(InspectorTest));
  36     }
  37
  38     InspectorTest.selectNodeWithId("svg-root", nodeSelected);
  39 }
  40
  41 </script>
  42 </head>
  43 <body onload="startTest()">
  44 <svg id="svg-root" width="100" height="200" viewbox="0 0 50 100"></svg>
  45 <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>
  46 <!--
  47
  48 Expected value calculations for #svg-root's highlight rectangles at 120% zoom:
  49
  50 margin rect:
  51     left:   (10) * 1.2 == 12
  52     top:    (20) * 1.2 == 24
  53     width:  (100 + 2 * (30 + 40 + 50)) * 1.2 == 340 * 1.2 == 408
  54     height: (200 + 2 * (30 + 40 + 50)) * 1.2 == 440 * 1.2 == 528
  55
  56 border rect:
  57     left:   (10 + 30) * 1.2 == 40 * 1.2 == 48
  58     top:    (20 + 30) * 1.2 == 50 * 1.2 == 60
  59     width:  (100 + 2 * (40 + 50)) * 1.2 == 280 * 1.2 == 336
  60     height: (200 + 2 * (40 + 50)) * 1.2 == 380 * 1.2 == 456
  61
  62 padding rect:
  63     left:   (10 + 30 + 40) * 1.2 == 80 * 1.2 == 96
  64     top:    (20 + 30 + 40) * 1.2 == 90 * 1.2 == 108
  65     width:  (100 + 2 * (50)) * 1.2 == 200 * 1.2 == 240
  66     height: (200 + 2 * (50)) * 1.2 == 300 * 1.2 == 360
  67
  68 content rect:
  69     left:   (10 + 30 + 40 + 50) * 1.2 == 130 * 1.2 == 156
  70     top:    (20 + 30 + 40 + 50) * 1.2 == 140 * 1.2 == 168
  71     width:  (100) * 1.2 == 120
  72     height: (200) * 1.2 == 240
  73
  74 -->
  75 <div id="console"></div>
  76 </body>
  77 </html>