third_party/WebKit/LayoutTests/inspector/elements/highlight/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     InspectorTest.dumpInspectorHighlightJSON("svg-root", InspectorTest.completeTest.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 rectangles 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>