| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| #rl { |
| background-color: red; |
| font: 6em/1 Ahem; /* computes to 96px/96px */ |
| height: 99px; /* the height of the cat image */ |
| -webkit-writing-mode: vertical-rl; /* for Webkit */ |
| } |
| #lr { |
| background-color: red; |
| font: 6em/1 Ahem; /* computes to 96px/96px */ |
| height: 99px; /* the height of the cat image */ |
| -webkit-writing-mode: vertical-lr; /* for Webkit */ |
| } |
| #rl2 { |
| background-color: red; |
| font: 6em/1 Ahem; /* computes to 96px/96px */ |
| height: 199px; /* the height of the cat image */ |
| -webkit-writing-mode: vertical-rl; /* for Webkit */ |
| } |
| img { |
| background-color: green; |
| vertical-align: baseline; |
| } |
| </style> |
| <div id="container"> |
| <p>Test passes if there is a cat and <strong>no red</strong>.</p> |
| <p>Derived from <a href="http://test.csswg.org/suites/css-writing-modes-3_dev/nightly-unstable/html/baseline-inline-replaced-002.htm">a CSS test</a>.</p> |
| <div id="rl"><img src="resources/oval.png" width="98" height="99"></div> |
| <div id="lr"><img src="resources/oval.png" width="98" height="99"></div> |
| </div> |
| <script> |
| function assertImageSize(element) { |
| var img = element.querySelector("img"); |
| assert_equals(element.offsetWidth, img.offsetWidth, "Width"); |
| assert_equals(element.offsetHeight, img.offsetHeight, "Height"); |
| } |
| |
| test(function () { assertImageSize(rl); }, "Baseline alignment of replaced elements in vertical-rl"); |
| test(function () { assertImageSize(lr); }, "Baseline alignment of replaced elements in vertical-lr"); |
| |
| if (window.testRunner) |
| container.style.display = "none"; |
| </script> |
