LayoutTests/fast/shrink-wrap/rect-shrink-wrap.html

   1 <script>
   2
   3 if (!window.internals)
   4         document.write("This test must be run in a test runner.")
   5
   6 function testRects(offset, rects, radius) {
   7     if (radius == undefined)
   8         radius = 8;
   9
  10     var gElement = document.createElementNS("http://www.w3.org/2000/svg", "g");
  11     gElement.setAttribute("transform", "translate(" + offset[0] + ", " + offset[1] + ")");
  12     document.getElementById("paths").appendChild(gElement);
  13
  14     for (var i in rects) {
  15         var rectElement = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  16         rectElement.setAttribute("x", rects[i][0]);
  17         rectElement.setAttribute("y", rects[i][1]);
  18         rectElement.setAttribute("width", rects[i][2]);
  19         rectElement.setAttribute("height", rects[i][3]);
  20         rectElement.setAttribute("fill", "rgba(0, 0, 0, 0.2)");
  21         rectElement.setAttribute("stroke", "rgba(0, 0, 0, 0.5)");
  22         gElement.appendChild(rectElement);
  23     }
  24
  25     if (window.internals) {
  26         var concatRects = [];
  27         for (var i in rects)
  28             Array.prototype.push.apply(concatRects, rects[i]);
  29         var pathString = window.internals.pathStringWithShrinkWrappedRects(concatRects, radius);
  30         var pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
  31         pathElement.setAttribute("d", pathString)
  32         pathElement.setAttribute("fill", "none");
  33         pathElement.setAttribute("stroke", "blue");
  34         pathElement.setAttribute("stroke-width", "3");
  35         gElement.appendChild(pathElement);
  36     }
  37 }
  38
  39 window.onload = function () {
  40     // Right and left aligned, touching:
  41
  42     testRects([20, 20], [
  43         [0, 0, 50, 20],
  44         [0, 20, 35, 20],
  45         [0, 40, 20, 20]]);
  46
  47     testRects([20, 90], [
  48         [0, 0, 20, 20],
  49         [0, 20, 35, 20],
  50         [0, 40, 50, 20]]);
  51
  52     testRects([80, 20], [
  53         [0, 0, 50, 20],
  54         [15, 20, 35, 20],
  55         [30, 40, 20, 20]]);
  56
  57     testRects([80, 90], [
  58         [30, 0, 20, 20],
  59         [15, 20, 35, 20],
  60         [0, 40, 50, 20]]);
  61
  62     // Center aligned, touching:
  63
  64     testRects([170, 20], [
  65         [0, 0, 100, 40],
  66         [20, 40, 60, 40],
  67         [35, 80, 30, 40]]);
  68
  69     testRects([270, 20], [
  70         [35, 0, 30, 40],
  71         [20, 40, 60, 40],
  72         [0, 80, 100, 40]]);
  73
  74     testRects([370, 20], [
  75         [0, 0, 100, 40],
  76         [35, 40, 30, 40],
  77         [20, 80, 60, 40]]);
  78
  79     // Other:
  80
  81     testRects([20, 200], [
  82         [0, 0, 40, 40],
  83         [20, 20, 40, 40],
  84         [40, 40, 40, 40]]);
  85
  86     testRects([120, 200], [
  87         [0, 40, 40, 40],
  88         [20, 20, 40, 40],
  89         [40, 0, 40, 40]]);
  90
  91     testRects([220, 200], [
  92         [0, 0, 40, 40],
  93         [0, 40, 40, 40],
  94         [0, 80, 40, 40]]);
  95
  96     testRects([200, 350], [
  97         [0, 0, 100, 50],
  98         [0, 25, 50, 50]]);
  99
 100     // Non-touching:
 101
 102     testRects([20, 300], [
 103         [0, 0, 40, 60],
 104         [0, 80, 40, 40]]);
 105
 106     // Combination of touching and non-touching:
 107
 108     testRects([280, 200], [
 109         [0, 0, 30, 40],
 110         [0, 80, 50, 40],
 111         [60, 0, 40, 40],
 112         [80, 40, 80, 40],
 113         [100, 80, 40, 40],
 114         [150, 0, 40, 20],
 115         [170, 15, 40, 20],
 116         [190, 30, 40, 20]]);
 117
 118     // Enclosing:
 119
 120     testRects([100, 300], [
 121         [0, 0, 50, 50],
 122         [10, 10, 20, 20]]);
 123
 124     testRects([100, 370], [
 125         [0, 0, 50, 50],
 126         [10, 10, 20, 20],
 127         [20, 20, 20, 20]]);
 128
 129     // Harder (widths less than the radius, horizontally arranged, etc.):
 130
 131     testRects([500, 20], [
 132         [0, 0, 40, 40],
 133         [20, 40, 65, 40],
 134         [40, 80, 40, 40]]);
 135
 136     testRects([600, 20], [
 137         [20, 0, 20, 20],
 138         [15, 20, 35, 20],
 139         [0, 40, 50, 20]]);
 140
 141     testRects([650, 100], [
 142         [0, 0, 40, 40],
 143         [40, 0, 40, 40],
 144         [80, 0, 40, 40]]);
 145
 146     testRects([700, 20], [
 147         [20, 0, 20, 20],
 148         [15, 20, 35, 20],
 149         [0, 20, 50, 20]]);
 150
 151     testRects([600, 200], [
 152         [0, 0, 20, 40],
 153         [20, 20, 20, 40],
 154         [40, 0, 20, 40]]);
 155
 156     testRects([700, 200], [
 157         [0, 0, 20, 40],
 158         [20, 25, 20, 40],
 159         [0, 50, 20, 40]]);
 160
 161     // Huge radius:
 162
 163     testRects([20, 450], [
 164         [0, 0, 50, 20],
 165         [0, 20, 35, 20],
 166         [0, 40, 20, 20]], 100);
 167
 168     testRects([20, 520], [
 169         [0, 0, 20, 20],
 170         [0, 20, 35, 20],
 171         [0, 40, 50, 20]], 100);
 172
 173     testRects([80, 450], [
 174         [0, 0, 50, 20],
 175         [15, 20, 35, 20],
 176         [30, 40, 20, 20]], 100);
 177
 178     testRects([80, 520], [
 179         [30, 0, 20, 20],
 180         [15, 20, 35, 20],
 181         [0, 40, 50, 20]], 100);
 182
 183     testRects([170, 450], [
 184         [0, 0, 100, 40],
 185         [20, 40, 60, 40],
 186         [35, 80, 30, 40]], 100);
 187
 188     testRects([270, 450], [
 189         [35, 0, 30, 40],
 190         [20, 40, 60, 40],
 191         [0, 80, 100, 40]], 100);
 192
 193     testRects([370, 450], [
 194         [0, 0, 100, 40],
 195         [35, 40, 30, 40],
 196         [20, 80, 60, 40]], 100);
 197
 198     testRects([750, 500], [
 199         [0, 0, 20, 40],
 200         [20, 20, 20, 40],
 201         [0, 40, 20, 40]]);
 202
 203     // Holes:
 204
 205     testRects([400, 300], [
 206         [30, 0, 40, 40],
 207         [60, 40, 40, 40],
 208         [30, 80, 40, 40],
 209         [0, 40, 40, 40]]);
 210
 211     // Lines with overlap:
 212
 213     testRects([520, 450], [
 214         [0, 0, 50, 20],
 215         [0, 15, 35, 20],
 216         [0, 30, 20, 20]]);
 217
 218     testRects([520, 520], [
 219         [0, 0, 20, 20],
 220         [0, 15, 35, 20],
 221         [0, 30, 50, 20]]);
 222
 223     testRects([580, 450], [
 224         [0, 0, 50, 20],
 225         [15, 15, 35, 20],
 226         [30, 30, 20, 20]]);
 227
 228     testRects([580, 520], [
 229         [30, 0, 20, 20],
 230         [15, 15, 35, 20],
 231         [0, 30, 50, 20]]);
 232 }
 233
 234 </script>
 235
 236 <style>
 237 body {
 238     margin: 0;
 239 }
 240 </style>
 241
 242 <svg id="paths" width="800" height="600"></svg>