svg-get-bounding-client-rect-in-non-rendered-elements.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /svg/geometry/svg-get-bounding-client-rect-in-non-rendered-elements.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>Get Bounding Client Rect in Non-Rendered SVG elements</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<link rel="author" title="Divyansh Mangal" href="mailto:dmangal@microsoft.com">

<svg width="100" height="20">

  <g display="none">

    <rect id="rect1" width="10" height="10" />

  </g>

  <symbol id="symbol" width="10" height="10">

    <rect id="rect2" display="none" width="10" height="10" />

  </symbol>

<g>

    <rect id="rect3" display="none" width="10" height="10" />

  </g>

  <defs>

    <rect id="rect4" width="10" height="10" />

  </defs>

  <pattern>

    <rect id="rect5" width="10" height="10" />

  </pattern>

<g>

    <rect id="rect6" width="10" height="10" />

  </g>

</svg>

<script>

  let rect1 = document.getElementById("rect1"),

    rect2 = document.getElementById("rect2"),

    rect3 = document.getElementById("rect3"),

    rect4 = document.getElementById("rect4");

    rect5 = document.getElementById("rect5"),

    rect6 = document.getElementById("rect6"),

    symbol = document.getElementById("symbol");

  test(function () {

    assert_equals(rect1.getBoundingClientRect().width, 0, "rect1");

    assert_equals(rect2.getBoundingClientRect().width, 0, "rect2");

    assert_equals(rect3.getBoundingClientRect().width, 0, "rect3");

    assert_equals(rect4.getBoundingClientRect().width, 0, "rect4");

    assert_equals(rect5.getBoundingClientRect().width, 0, "rect5");

    assert_equals(rect6.getBoundingClientRect().width, 10, "rect6");

    assert_equals(symbol.getBoundingClientRect().width, 0, "symbol");

    assert_equals(rect1.getBoundingClientRect().height, 0, "rect1");

    assert_equals(rect2.getBoundingClientRect().height, 0, "rect2");

    assert_equals(rect3.getBoundingClientRect().height, 0, "rect3");

    assert_equals(rect4.getBoundingClientRect().height, 0, "rect4");

    assert_equals(rect5.getBoundingClientRect().height, 0, "rect5");

    assert_equals(rect6.getBoundingClientRect().height, 10, "rect6");

    assert_equals(symbol.getBoundingClientRect().height, 0, "symbol");

  }, "Get Bounding Client Rect");

</script>