third_party/WebKit/LayoutTests/svg/custom/inline-svg-use-available-width.html

   1 <!doctype html>
   2 <script src="../../resources/testharness.js"></script>
   3 <script src="../../resources/testharnessreport.js"></script>
   4 <style>
   5   .rel {
   6       position: relative;
   7       width: 400px;
   8       height: 200px;
   9   }
  10   .abs {
  11       position: absolute;
  12       left: 100px;
  13       right: 100px;
  14   }
  15   .test {
  16       display: block;
  17       background: red;
  18   }
  19   .control { /* overlay to hide the red */
  20       position: absolute;
  21       left: 100px;
  22       width: 200px;
  23       height: 200px;
  24       background-color: green;
  25   }
  26 </style>
  27 <div class="rel">
  28   <div class="abs">
  29     <svg class="test" viewBox="0 0 1 1">
  30     </svg>
  31   </div>
  32   <div class="control">
  33   </div>
  34 </div>
  35 <script>
  36     test(function() {
  37         var bounds = document.querySelector('.test').getBoundingClientRect();
  38         assert_equals(bounds.width, 200);
  39         assert_equals(bounds.height, 200);
  40     }, "Use available width and use intrinsic ratio to compute height");
  41 </script>