third_party/WebKit/LayoutTests/svg/custom/pattern-3-step-cycle-dynamic-4.html

   1 <!DOCTYPE html>
   2 <script>
   3 if (window.testRunner) {
   4   testRunner.dumpAsText();
   5   testRunner.waitUntilDone();
   6   window.onload = function() {
   7     testRunner.layoutAndPaintAsyncThen(function() {
   8       mutateTree();
   9       testRunner.layoutAndPaintAsyncThen(function() {
  10         testRunner.notifyDone();
  11       });
  12     });
  13   };
  14 } else {
  15   window.onload = function() { setTimeout(mutateTree, 100); };
  16 }
  17 const svgNs = 'http://www.w3.org/2000/svg';
  18 function buildPattern(patternId, refId) {
  19   var pattern = document.createElementNS(svgNs, 'pattern');
  20   var rect = pattern.appendChild(document.createElementNS(svgNs, 'rect'));
  21   pattern.setAttribute('id', patternId);
  22   pattern.setAttribute('width', 1);
  23   pattern.setAttribute('height', 1);
  24   rect.setAttribute('width', 100);
  25   rect.setAttribute('height', 100);
  26   rect.setAttribute('fill', 'url(#' + refId + ')');
  27   return pattern;
  28 }
  29 function mutateTree() {
  30   // Get reference to rect in pattern#p2 before inserting the pattern.
  31   var p2rect = document.getElementsByTagName('rect')[1];
  32
  33   // Add a pattern#p3 and a reference to it from pattern#p2 to form a cycle.
  34   var defs = document.querySelector('defs');
  35   defs.appendChild(buildPattern('p3', 'p1'));
  36   p2rect.setAttribute('fill', 'url(#p3)');
  37 }
  38 </script>
  39 <p>PASS if no crash (stack overflow).</p>
  40 <svg width="100" height="100">
  41   <rect width="100" height="100" fill="url(#p1)"/>
  42   <defs>
  43     <pattern id="p2" width="1" height="1">
  44       <rect width="100" height="100"/>
  45     </pattern>
  46     <pattern id="p1" width="1" height="1">
  47       <rect fill="url(#p2)" width="100" height="100"/>
  48     </pattern>
  49   </defs>
  50 </svg>