third_party/WebKit/LayoutTests/fast/css/marquee-in-template.html

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