<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
.specwidth { width: 400px }
.stf { float: left; }
.test { display: block; background-color: red }
.sizer { width: 200px }
.control { /* overlay to hide the red */
position: absolute;
width: 200px;
height: 200px;
background-color: green;
}
</style>
<body>
<div class="specwidth">
<div class="stf">
<svg class="test" viewBox="0 0 1 1">
</svg>
<div class="sizer">
</div>
</div>
</div>
<div class="control">
</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>
</body>