third_party/WebKit/LayoutTests/svg/hittest/rect-miterlimit.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body onload="onPageLoad()">
   4 Check that hit testing on a &lt;rect&gt; with various miterlimits around sqrt(2) works properly. If the test passes, you will see "PASS" below.
   5 <p id="result">Running test...</p>
   6 <svg id="svg" width="100" height="100" version="1.1">
   7     <rect id="rect" fill="none" stroke="black" stroke-width="20" x="10" y="10" width="80" height="80"/>
   8 </svg>
   9 <script type="text/javascript">
  10 if (window.testRunner) {
  11     testRunner.dumpAsText();
  12     testRunner.waitUntilDone();
  13 }
  14
  15 var result = document.getElementById("result"),
  16     svg = document.getElementById("svg"),
  17     rect = document.getElementById("rect");
  18 function onPageLoad() {
  19     // sqrt(2) = 1.414213562373095...
  20     var intervals = [
  21         ["1.4", "1.5"],
  22         ["1.41", "1.42"],
  23         ["1.414", "1.415"],
  24         ["1.4142", "1.4143"],
  25         ["1.41421", "1.41422"],
  26         ["1.414213", "1.414220"]
  27         //,["1.4142135", "1.4142136"]
  28     ];
  29
  30     var bcr = svg.getBoundingClientRect(),
  31         x0 = bcr.left,
  32         y0 = bcr.top;
  33
  34     var i = 0;
  35     requestAnimationFrame(function nextInterval() {
  36         if (i >= intervals.length) {
  37             if (result.textContent == "Running test...")
  38                 result.textContent = "PASS";
  39
  40             if (window.testRunner)
  41                 testRunner.notifyDone();
  42
  43             return;
  44         }
  45
  46         var interval = intervals[i++];
  47
  48         if (!(interval[0] < Math.SQRT2))
  49             result.textContent += " FAIL - Expecting " + interval[0] + " to be strictly less than sqrt(2).";
  50         rect.setAttribute("stroke-miterlimit", interval[0]);
  51         var actualMiterlimit = getComputedStyle(rect, null).strokeMiterlimit;
  52         if (!(actualMiterlimit < Math.SQRT2))
  53             result.textContent += " FAIL - After setting the miterlimit to " + interval[0] + ", expecting the computed miterlimit " + actualMiterlimit + " to be strictly less than sqrt(2).";
  54
  55         // Because the miterlimit is less than sqrt(2), the join style should
  56         // switch to "bevel".
  57         // i.e. if we get the element near the bottom right corner, it should be
  58         // the <svg> and not the <rect>.
  59         if (document.elementFromPoint(x0 + 97, y0 + 97) !== svg) {
  60             result.textContent += " FAIL - The element at point (97, 97) should be the <svg> element (miterlimit is actually " + actualMiterlimit + " after setting it to " + interval[0] + ").";
  61             // If this check fails, stop the test early so we can examine the
  62             // <rect> visually.
  63             if (window.testRunner)
  64                 testRunner.notifyDone();
  65             return;
  66         }
  67
  68         requestAnimationFrame(function () {
  69             if (!(interval[1] >= Math.SQRT2))
  70                 result.textContent += " FAIL - Expecting " + interval[1] + " to be greater than or equal to sqrt(2).";
  71             rect.setAttribute("stroke-miterlimit", interval[1]);
  72             var actualMiterlimit = getComputedStyle(rect, null).strokeMiterlimit;
  73             if (!(actualMiterlimit >= Math.SQRT2))
  74                 result.textContent += " FAIL - After setting the miterlimit to " + interval[1] + ", expecting the computed miterlimit " + actualMiterlimit + " to be greater than or equal to sqrt(2).";
  75
  76             // The join style should still be "bevel".
  77             if (document.elementFromPoint(x0 + 97, y0 + 97) !== rect) {
  78                 result.textContent += " FAIL - The element at point (97, 97) should be the <rect> element (miterlimit is actually " + actualMiterlimit + " after setting it to " + interval[1] + ").";
  79                 // If this check fails, stop the test early so we can examine the
  80                 // <rect> visually.
  81                 if (window.testRunner)
  82                     testRunner.notifyDone();
  83                 return;
  84             }
  85
  86             requestAnimationFrame(nextInterval);
  87         });
  88     });
  89 }
  90 </script>
  91 </body>
  92 </html>