third_party/WebKit/LayoutTests/svg/in-html/sizing/svg-inline-vertical.html

   1 <!doctype html>
   2 <title>Test SVG sizing in vertical writing mode</title>
   3 <script src="../../../resources/testharness.js"></script>
   4 <script src="../../../resources/testharnessreport.js"></script>
   5 <style>
   6   div {
   7       -webkit-writing-mode: vertical-rl;
   8       writing-mode: vertical-rl;
   9       height: 200px;
  10   }
  11 </style>
  12 <div>
  13   <!-- All SVGs expected size is 100x200 -->
  14   <svg width="100" height="200">
  15     <rect x="0" y="0" width="100" height="200" fill="lime" stroke="black" stroke-width="10"/>
  16   </svg>
  17   <svg style="width: auto !important; height: auto !important" width="100" height="200">
  18     <rect x="0" y="0" width="100" height="200" fill="lime" stroke="black" stroke-width="10"/>
  19   </svg>
  20   <svg viewBox="0 0 100 200">
  21     <rect x="0" y="0" width="100" height="200" fill="lime" stroke="black" stroke-width="10"/>
  22   </svg>
  23   <svg width="100" viewBox="0 0 100 200">
  24     <rect x="0" y="0" width="100" height="200" fill="lime" stroke="black" stroke-width="10"/>
  25   </svg>
  26   <svg height="200" viewBox="0 0 100 200">
  27     <rect x="0" y="0" width="100" height="200" fill="lime" stroke="black" stroke-width="10"/>
  28   </svg>
  29 </div>
  30 <script>
  31   var svgs = document.querySelectorAll('svg');
  32   [].forEach.call(svgs, function (svg) {
  33       test(function() {
  34           var bounds = svg.getBoundingClientRect();
  35           assert_equals(bounds.height, 200, "Height");
  36           assert_equals(bounds.width, 100, "Width");
  37
  38       }, "Test size calculation in vertical writing mode");
  39   });
  40 </script>