| <!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> |
