<!DOCTYPE html>
<html>
  <script>
    function check_rect_bbox(bbox, test_name)
    {
        var result_str = "";
        var visible_rect = document.querySelector("#r1");
        var expected_bbox = visible_rect.getBBox();

        if (bbox.x == expected_bbox.x && bbox.y == expected_bbox.y && bbox.width == expected_bbox.width && bbox.height == expected_bbox.height) {                           
            result_str = "Passed";
	    } else {
            result_str += test_name + ": Failed";
            result_str += "("+bbox.x+","+bbox.y+":"+bbox.width + "," + bbox.height+")";
            visible_rect.setAttribute("fill", "red");
     
            var bbox_rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
            bbox_rect.setAttribute("x", bbox.x);
            bbox_rect.setAttribute("y", bbox.y);
            bbox_rect.setAttribute("width", bbox.width);
            bbox_rect.setAttribute("height", bbox.height);
            bbox_rect.setAttribute("fill", "none");
            bbox_rect.setAttribute("stroke", "red");
            bbox_rect.setAttribute("stroke-dasharray", "5 5");
            document.querySelector("svg").appendChild(bbox_rect);
        }
        
        var p_result = document.querySelector("#result");
        p_result.appendChild(document.createTextNode(result_str + "; "));
    }
  
    function run()
    {
        if (window.testRunner)
            testRunner.dumpAsText();
        
        var g_bbox = document.querySelector("#g1").getBBox();
        check_rect_bbox(g_bbox, "Group with hidden child");
    }
  </script>

<body onload="run()">
<p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=134184">134184</a>: Bounding box of hidden child is unioned with other elements of group</p>
<p>For this test to pass, you should see 'Passed' below.</a>
<p id="result"></p>
<svg xmlns="http://www.w3.org/2000/svg">
<g id="g1">
    <rect id="r1" x="50" y="50" width="50" height="50" fill="green" />
    <rect id="r2" x="20" y="20" width="20" height="0" fill="red" />
    <rect id="r3" x="120" y="20" width="20" height="20" fill="blue" style="display:none" />
    <ellipse id="c1" cx="20" cy="120" rx="0" ry="20" fill="black" />
    <!-- test the fall-back case as well as the normal case -->
    <ellipse id="c2" cx="120" cy="20" rx="0" ry="20" stroke="black" vector-effect="non-scaling-stroke" />
    <rect id="r4" x="20" y="120" width="20" height="0" fill="none" stroke="black" vector-effect="non-scaling-stroke" />
    <g>
        <rect id="r4" x="120" y="120" width="-1" height="100" fill="cyan" />
    </g>
</g>
</svg>
</body>
</html>