<!DOCTYPE html>
<html>
<!--
    REGRESSION (r154769): Wrong <title> taken as a tooltip for SVG element.
    https://bugs.webkit.org/show_bug.cgi?id=139690.

    This test ensures that the tooltip text for SVG elements is calculated correctly.
    It covers the case when an SVG is embedded in an HTML either through an inline
    <svg> tag or through an <embed> tag.
-->
<head>
  <script src="resources/svg-tooltip.js"></script>
  <script>
    function log(message)
    {
      document.getElementById("log").appendChild(document.createTextNode(message + '\n'));
    }

    function runTest()
    {
      if (window.testRunner) {
        testRunner.dumpAsText();

        // Verify the inline <svg> case
        log("Verifying the inline SVG:");
        log(verifyElementTreeToolTips(document.getElementsByTagName("svg")[0]) ? "PASS" : "");

        // Verify the <embed> SVG case
        log("\nVerifying the embedded SVG:");
        var element = document.getElementById("embedId");
        var SVGDocment = element.getSVGDocument();
        log(verifyElementTreeToolTips(SVGDocment.rootElement, 0) ? "PASS" : "");
      }
    }
  </script>
</head>
<body onload="runTest()">
    
  <!-- Inline SVG -->
  <svg width="200" height="400" id="main_svg">
    <title>outermost svg</title>
    <defs>
      <g id="shape">
        <rect width="100" height="100" fill="yellow"/>
        <circle cx="10" cy="10" r="10" fill="red"> 
          <title>def small circle!</title>
        </circle>
        <circle cx="80" cy="80" r="20" fill="red">
          <title>def big circle!</title>
        </circle>
        <g>
          <rect x="20" y="20" width="40" height="40" fill="lime"/>
          <circle cx="40" cy="40" r="10" fill="red">
            <title>nested circle!</title>
          </circle>
        </g>
        <title>def g element!</title>
      </g>
    </defs>
    
    <g id="main_g">
      <rect id="yellow_rect" width="100" height="100" fill="yellow"/>
      <circle id="small_circle" cx="10" cy="10" r="10" fill="red"> 
        <title>small circle!</title>
      </circle>
      <circle id="big_circle" cx="80" cy="80" r="20" fill="red">
        <title>big circle!</title>
      </circle>
      <g id="sub_g">
        <rect id="lime_rect" x="20" y="20" width="40" height="40" fill="lime"/>
        <circle id="nested_circle" cx="40" cy="40" r="10" fill="red">
          <title>nested circle!</title>
        </circle>
      </g>
      <title>main g element</title>
    </g>
    
    <!-- <use> element should return the first <title> element child if it exists -->
    <use id="use_with_title" xlink:href="#shape" x="0" y="120">
      <title>use element!</title>
    </use>
    <use id="use_without_title" xlink:href="#shape" x="0" y="240"/>
  </svg>

  <!-- Embedded SVG -->
  <embed id="embedId" src="resources/svg-tooltip.svg">

  <!-- For logging the test results -->      
  <pre id="log"><br></pre>
</body>
</html>
