third_party/WebKit/LayoutTests/fast/writing-mode/baseline-inline-replaced-002.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/testharness.js"></script>
   3 <script src="../../resources/testharnessreport.js"></script>
   4 <style>
   5 #rl {
   6     background-color: red;
   7     font: 6em/1 Ahem; /* computes to 96px/96px */
   8     height: 99px; /* the height of the cat image */
   9     -webkit-writing-mode: vertical-rl; /* for Webkit */
  10 }
  11 #lr {
  12     background-color: red;
  13     font: 6em/1 Ahem; /* computes to 96px/96px */
  14     height: 99px; /* the height of the cat image */
  15     -webkit-writing-mode: vertical-lr; /* for Webkit */
  16 }
  17 #rl2 {
  18     background-color: red;
  19     font: 6em/1 Ahem; /* computes to 96px/96px */
  20     height: 199px; /* the height of the cat image */
  21     -webkit-writing-mode: vertical-rl; /* for Webkit */
  22 }
  23 img {
  24     background-color: green;
  25     vertical-align: baseline;
  26 }
  27 </style>
  28 <div id="container">
  29     <p>Test passes if there is a cat and <strong>no red</strong>.</p>
  30     <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>
  31     <div id="rl"><img src="resources/oval.png" width="98" height="99"></div>
  32     <div id="lr"><img src="resources/oval.png" width="98" height="99"></div>
  33 </div>
  34 <script>
  35 function assertImageSize(element) {
  36     var img = element.querySelector("img");
  37     assert_equals(element.offsetWidth, img.offsetWidth, "Width");
  38     assert_equals(element.offsetHeight, img.offsetHeight, "Height");
  39 }
  40
  41 test(function () { assertImageSize(rl); }, "Baseline alignment of replaced elements in vertical-rl");
  42 test(function () { assertImageSize(lr); }, "Baseline alignment of replaced elements in vertical-lr");
  43
  44 if (window.testRunner)
  45     container.style.display = "none";
  46 </script>