src/third_party/WebKit/LayoutTests/fast/css/MarqueeLayoutTest.html

   1 <!DOCTYPE html>
   2 <p>Test passes if all silver blocks are the same size as the green blocks next to them.
   3 <div id='horiz'>
   4     <div class='pre'></div>
   5     <marquee>foo</marquee>
   6     <div class='post'></div>
   7 </div>
   8 <hr>
   9 <div id='vertAuto'>
  10     <div class='pre'></div>
  11     <marquee direction='up'>
  12         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  13     </marquee>
  14     <div class='post'>
  15         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  16     </div>
  17 </div>
  18 <hr>
  19 <div id='vertFixed'>
  20     <div class='pre'></div>
  21     <marquee direction='up'>
  22         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  23     </marquee>
  24     <div class='post'></div>
  25 </div>
  26 <style>
  27 .pre {
  28     background: green;
  29     display: inline-block;
  30     width: 50px;
  31 }
  32 .post {
  33     background: red;
  34     display: inline-block;
  35     width: 50px;
  36 }
  37 marquee {
  38     background: silver;
  39     width: 50px;
  40 }
  41
  42 #horiz .pre {
  43     height: 10px;
  44 }
  45 #horiz .post {
  46     height: 20px;
  47 }
  48 #horiz marquee {
  49     font-size: 20px;
  50     height: 10px;
  51 }
  52
  53 #vertAuto .pre {
  54     height: 200px;
  55 }
  56 #vertAuto .post {
  57 }
  58 #vertAuto marquee {
  59     height: auto;
  60 }
  61
  62 #vertFixed .pre {
  63     height: 100px;
  64 }
  65 #vertFixed .post {
  66     height: 200px;
  67 }
  68 #vertFixed marquee {
  69     height: 100px;
  70 }
  71 </style>
  72
  73 <script src="../../resources/js-test.js"></script>
  74 <script>
  75 description("The height of a horizontal marquee is computed as normal for inline-blocks. The 'auto' height of a vertical marquee defaults to 200px.");
  76 var horiz = document.querySelector('#horiz marquee');
  77 var vertAuto = document.querySelector('#vertAuto marquee');
  78 var vertFixed = document.querySelector('#vertFixed marquee');
  79 shouldBe('getComputedStyle(horiz).height', '"10px"');
  80 shouldBe('getComputedStyle(vertAuto).height', '"380px"');
  81 shouldBe('getComputedStyle(vertFixed).height', '"100px"');
  82 if (window.testRunner) {
  83     testRunner.dumpAsText();
  84 }
  85 </script>