inline-svg-use-available-width.html

<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
  .rel {
      position: relative;
      width: 400px;
      height: 200px;
  }
  .abs {
      position: absolute;
      left: 100px;
      right: 100px;
  }
  .test {
      display: block;
      background: red;
  }
  .control { /* overlay to hide the red */
      position: absolute;
      left: 100px;
      width: 200px;
      height: 200px;
      background-color: green;
  }
</style>
<div class="rel">
  <div class="abs">
    <svg class="test" viewBox="0 0 1 1">
    </svg>
  </div>
  <div class="control">
  </div>
</div>
<script>
    test(function() {
        var bounds = document.querySelector('.test').getBoundingClientRect();
        assert_equals(bounds.width, 200);
        assert_equals(bounds.height, 200);
    }, "Use available width and use intrinsic ratio to compute height");
</script>

chromium/third_party/blink/web_tests/svg/custom/inline-svg-use-available-width.html