layout/reftests/svg/outline-ref.html

   1 <!DOCTYPE HTML>
   2 <html lang="en">
   3 <body>
   4 <svg xmlns="http://www.w3.org/2000/svg" overflow="visible">
   5   <g>
   6     <rect id="rect" width="100" height="100" style="fill: yellow"/>
   7     <text id="text" x="0" y="140" font-family="Verdana" font-size="20">
   8       Hello world
   9     </text>
  10      <foreignObject id="foreignObject" x="0" y="160" width="200" height="60">
  11       <div xmlns="http://www.w3.org/1999/xhtml">
  12         Here is a paragraph that requires word wrap
  13       </div>
  14     </foreignObject>
  15     <circle id="circle" cx="40" cy="275" r="40" style="fill: green"/>
  16     <ellipse id="ellipse" cx="70" cy="380" rx="70" ry="50" style="fill: yellow"/>
  17     <image id="image" x="0" y="450" height="100" width="100"/>
  18     <line id="line" x1="0" y1="580" x2="100" y2="580" style="stroke: red; stroke-width: 2"/>
  19     <path id="path" d="M50 600 L10 650 L90 650 Z"/>
  20     <polygon id="polygon" points="300,50 350,0 400,50" style="fill: lime"/>
  21     <polyline id="polyline" points="300,80 350,70 400,80" style="fill: none;stroke: black; stroke-width: 3"/>
  22     <g transform="translate(300, 70)">
  23       <circle id="gCircle" cx="50" cy="50" r="20" style="fill: blue"/>
  24     </g>
  25     <g transform="translate(300, 150)">
  26       <circle id="ggCircle" cx="50" cy="50" r="20" style="fill: green"/>
  27       <g>
  28         <rect id="ggRect" x="15" y ="15" width="30" height="10" style="fill: blue"/>
  29       </g>
  30     </g>
  31     <svg x="300" y="250">
  32       <rect id="innerRect" x="30" y="10" height="50" width="50" style="fill: red"/>
  33     </svg>
  34     <a xlink:href="#" id="link">
  35       <text x="300" y="350" font-family="Verdana" font-size="20">
  36         link
  37       </text>
  38     </a>
  39   </g>
  40 </svg>
  41 <script>
  42
  43 function createOutline(boundingRect) {
  44   // Outline starts from a top-left shift pixel of the bounding rect
  45   var left = boundingRect.left - 1;
  46   var top  = boundingRect.top - 1;
  47   var right = boundingRect.right;
  48   var bottom = boundingRect.bottom;
  49   var width = boundingRect.width;
  50   var height = boundingRect.height;
  51
  52   var lines = document.createElement("div");
  53   var styles = 'border: 1px solid black;'
  54                + 'width: ' + width + 'px;'
  55                + 'height: ' + height + 'px;'
  56                + 'position: absolute;'
  57                + 'top: ' + top + 'px;'
  58                + 'left: ' + left + 'px;';
  59
  60   lines.setAttribute('style', styles);
  61   document.body.appendChild(lines);
  62 }
  63
  64 window.onload = function drawOutline() {
  65   var elements = ['rect', 'foreignObject', 'circle',
  66                   'ellipse', 'image', 'line', 'path',
  67                   'polygon', 'polyline', 'text','gCircle',
  68                   'innerRect', 'link'];
  69   elements.forEach(id => {
  70     var element = document.getElementById(id);
  71     createOutline(element.getBoundingClientRect());
  72   });
  73
  74   var ggRect = document.getElementById('ggRect');
  75   var ggRectbbox = ggRect.getBoundingClientRect();
  76   createOutline(ggRectbbox);
  77
  78   var ggCircle = document.getElementById('ggCircle');
  79   var ggCirclebbox = ggCircle.getBoundingClientRect();
  80
  81   var ggbbox = {
  82     left: ggRectbbox.left,
  83     top: ggRectbbox.top,
  84     right: ggCirclebbox.right,
  85     bottom: ggCirclebbox.bottom
  86   };
  87   ggbbox.width = ggbbox.right - ggbbox.left;
  88   ggbbox.height = ggbbox.bottom - ggbbox.top;
  89   createOutline(ggbbox);
  90 }
  91 </script>
  92 </body>
  93 </html>