| <!DOCTYPE html> |
| <template> |
| <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> |
| </template> |
| <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> |
| <div id="container"></div> |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| // Add the content in the template tag to the document. |
| var content = document.querySelector('template').content; |
| document.querySelector('#container').appendChild(document.importNode(content, true)); |
| |
| description("Test the layout of the marquee element when it is instantiated in a template tag."); |
| 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> |
