MarqueeLayoutTest.html | Explore in Territory

<!DOCTYPE html>
<p>Test passes if all silver blocks are the same size as the green blocks next to them.
<div id='horiz'>
    <div class='pre'></div>
    <marquee>foo</marquee>
    <div class='post'></div>
</div>
<hr>
<div id='vertAuto'>
    <div class='pre'></div>
    <marquee direction='up'>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </marquee>
    <div class='post'>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>
<hr>
<div id='vertFixed'>
    <div class='pre'></div>
    <marquee direction='up'>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </marquee>
    <div class='post'></div>
</div>
<style>
.pre {
    background: green;
    display: inline-block;
    width: 50px;
}
.post {
    background: red;
    display: inline-block;
    width: 50px;
}
marquee {
    background: silver;
    width: 50px;
}

#horiz .pre {
    height: 10px;
}
#horiz .post {
    height: 20px;
}
#horiz marquee {
    font-size: 20px;
    height: 10px;
}

#vertAuto .pre {
    height: 200px;
}
#vertAuto .post {
}
#vertAuto marquee {
    height: auto;
}

#vertFixed .pre {
    height: 100px;
}
#vertFixed .post {
    height: 200px;
}
#vertFixed marquee {
    height: 100px;
}
</style>

<script src="../../resources/js-test.js"></script>
<script>
description("The height of a horizontal marquee is computed as normal for inline-blocks. The 'auto' height of a vertical marquee defaults to 200px.");
var horiz = document.querySelector('#horiz marquee');
var vertAuto = document.querySelector('#vertAuto marquee');
var vertFixed = document.querySelector('#vertFixed marquee');
shouldBe('getComputedStyle(horiz).height', '"10px"');
shouldBe('getComputedStyle(vertAuto).height', '"380px"');
shouldBe('getComputedStyle(vertFixed).height', '"100px"');
if (window.testRunner) {
    testRunner.dumpAsText();
}
</script>
chromium/third_party/blink/web_tests/fast/css/MarqueeLayoutTest.html
