svg-inline-vertical.html | Explore in Territory

<!doctype html>
<title>Test SVG sizing in vertical writing mode</title>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
  div {
      -webkit-writing-mode: vertical-rl;
      writing-mode: vertical-rl;
      height: 200px;
  }
</style>
<div>
  <!-- All SVGs expected size is 100x200 -->
  <svg width="100" height="200">
    <rect x="0" y="0" width="100" height="200" fill="lime" stroke="black" stroke-width="10"/>
  </svg>
  <svg style="width: auto !important; height: auto !important" width="100" height="200">
    <rect x="0" y="0" width="100" height="200" fill="lime" stroke="black" stroke-width="10"/>
  </svg>
  <svg viewBox="0 0 100 200">
    <rect x="0" y="0" width="100" height="200" fill="lime" stroke="black" stroke-width="10"/>
  </svg>
  <svg width="100" viewBox="0 0 100 200">
    <rect x="0" y="0" width="100" height="200" fill="lime" stroke="black" stroke-width="10"/>
  </svg>
  <svg height="200" viewBox="0 0 100 200">
    <rect x="0" y="0" width="100" height="200" fill="lime" stroke="black" stroke-width="10"/>
  </svg>
</div>
<script>
  var svgs = document.querySelectorAll('svg');
  [].forEach.call(svgs, function (svg, index) {
      test(function() {
          var bounds = svg.getBoundingClientRect();
          assert_equals(bounds.height, 200, "Height");
          assert_equals(bounds.width, 100, "Width");

      }, "Test size calculation in vertical writing mode (" + (index + 1) + ")");
  });
</script>
chromium/third_party/blink/web_tests/svg/in-html/sizing/svg-inline-vertical.html
