<!DOCTYPE html>
<html>
  <head>
    <style>
      /* relative positioning ensures underlying RenderLayer */
      .renderingArea {
          position: relative;
      }
    </style>
  </head>
  <body>
    <script src="../resources/js-test-pre.js"></script>
    <pre id="console"></pre>
    <div class="renderingArea" id="svg">
      <svg>
        <foreignObject>
          <svg></svg>
        </foreignObject>
      </svg>
    </div>
    <div class="renderingArea" id="mathml">
      <math>
        <semantics>
          <annotation-xml encoding="image/svg+xml">
            <svg></svg>
          </annotation-xml>
        </semantics>
      </math>
    </div>
    <div class="renderingArea" id="non_svg"></div>
    <div class="renderingArea" id="svg_use">
      <svg>
        <defs>
          <foreignObject>
            <svg id="mySVG"></svg>
          </foreignObject>
        </defs>
        <use href="#mySVG"/>
      </svg>
    </div>
    <div class="renderingArea" id="svg_child_of_use">
      <svg>
        <use href="#invalid">
          <svg></svg>
        </use>
      </svg>
    </div>
    <div class="renderingArea" id="svg_in_shadow_tree"></div>
    <div class="renderingArea" id="mathml_in_shadow_tree"></div>
    <div class="renderingArea" id="non_svg_in_shadow_tree"></div>
    <div class="renderingArea" id="svg_use_in_shadow_tree"></div>
    <div class="renderingArea" id="svg_child_of_use_in_shadow_tree"></div>
    <script>
      const svgNS = 'http://www.w3.org/2000/svg';

      (function() {
          let nonSVG = document.createElementNS('http://example.org/', "nonSVG");
          let svg = document.createElementNS(svgNS, 'svg');
          nonSVG.appendChild(svg);
          document.getElementById("non_svg").appendChild(nonSVG);
      })();

      ["svg", "mathml", "non_svg", "svg_use", "svg_child_of_use"].forEach(id => {
          let shadowHost = document.createElement("div");
          let shadowRoot = shadowHost.attachShadow({mode: 'open'});
          let svg = document.getElementById(id).firstElementChild.cloneNode(true);
          ["href", "id"].forEach(attribute => {
              // Fix duplicate ids.
              Array.from(svg.querySelectorAll(`[${attribute}]`)).forEach(element => {
                  element.setAttribute(attribute,
                                       `${element.getAttribute(attribute)}_copy`);
              });
          });
          shadowRoot.appendChild(svg);
          document.getElementById(`${id}_in_shadow_tree`).appendChild(shadowHost);

      });

      function extractSVGRootRenderers(name) {
          let element = document.getElementById(name);
          const regexp = /\w+ \{svg\}/g;
          return window.internals.elementRenderTreeAsText(element).match(regexp);
      }

      if (window.testRunner)
          testRunner.dumpAsText();

      shouldBe("extractSVGRootRenderers('svg')",
               "['RenderSVGRoot {svg}','RenderSVGRoot {svg}']");

      shouldBe("extractSVGRootRenderers('mathml')",
               "['RenderSVGRoot {svg}']");

      shouldBe("extractSVGRootRenderers('non_svg')",
               "['RenderSVGRoot {svg}']");

      shouldBe("extractSVGRootRenderers('svg_use')",
               "['RenderSVGRoot {svg}','RenderSVGViewportContainer {svg}']");

      shouldBe("extractSVGRootRenderers('svg_child_of_use')",
               "['RenderSVGRoot {svg}','RenderSVGViewportContainer {svg}']");

      shouldBe("extractSVGRootRenderers('svg_in_shadow_tree')",
               "['RenderSVGRoot {svg}','RenderSVGRoot {svg}']");

      shouldBe("extractSVGRootRenderers('mathml_in_shadow_tree')",
               "['RenderSVGRoot {svg}']");

      shouldBe("extractSVGRootRenderers('non_svg_in_shadow_tree')",
               "['RenderSVGRoot {svg}']");

      shouldBe("extractSVGRootRenderers('svg_use_in_shadow_tree')",
               "['RenderSVGRoot {svg}','RenderSVGViewportContainer {svg}']");

      shouldBe("extractSVGRootRenderers('svg_child_of_use_in_shadow_tree')",
               "['RenderSVGRoot {svg}','RenderSVGViewportContainer {svg}']");

    </script>
    <script src="../../resources/js-test-post.js"></script>
  </body>
</html>
