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