LayoutTests/fast/css/MarqueeLayoutTest.html - WebKit - Git at Google

 <!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-pre.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', '"200px"');
 shouldBe('getComputedStyle(vertFixed).height', '"100px"');
 if (window.testRunner) {
     testRunner.dumpAsText();
 }
 </script>
 <script src="../../resources/js-test-post.js"></script>
	<!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-pre.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', '"200px"');
	shouldBe('getComputedStyle(vertFixed).height', '"100px"');
	if (window.testRunner) {
	testRunner.dumpAsText();
	}
	</script>
	<script src="../../resources/js-test-post.js"></script>