/*
 * Copyright (c) 2014, the Dart project authors.  Please see the AUTHORS file
 * for details. All rights reserved. Use of this source code is governed by a
 * BSD-style license that can be found in the LICENSE file.
 */
/** 
 * @description The height of a horizontal marquee is computed as normal for
 * inline-blocks. The 'auto' height of a vertical marquee defaults to 360px in
 * Webkit
 */
import "dart:html";
import "../../testcommon.dart";

main() {
  if (!document.documentElement.style.supportsProperty('WebkitAppearance')) {
    return;
  }
  var style = new Element.html('''
      <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>
      ''', treeSanitizer: new NullTreeSanitizer());
  document.head.append(style);

  document.body.setInnerHtml('''
      <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>
      ''', treeSanitizer: new NullTreeSanitizer());

  var horiz = document.querySelector('#horiz marquee');
  var vertAuto = document.querySelector('#vertAuto marquee');
  var vertFixed = document.querySelector('#vertFixed marquee');
  shouldBeLikeString(horiz.getComputedStyle().height, "10px");
  shouldBeLikeString(vertAuto.getComputedStyle().height, "360px");
  shouldBeLikeString(vertFixed.getComputedStyle().height, "100px");
}