/*
 * 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 
 */
import "dart:html";
import "../../testcommon.dart";
import "../../../Utils/async_utils.dart";
import "pwd.dart";

getComputedStyle(x, [pseudoElement]) => x.getComputedStyle(pseudoElement);

main() {
  var style = new Element.html('''
      <style>
          #container {
              width: 500px;
              height: 500px;
              position: relative;
          }
          #container > div {
              position: relative;
              border: 1px solid red;
              font-size: 20px;
              width: 100px;
              height: 100px;
          }
          #test-fixed  {
              left: 100px;
              right: 100px;
              top: 100px;
              bottom: 100px;
          }
          #test-percentage {
              left: 20%;
              right: 20%;
              top: 10%;
              bottom: 10%;
          }
          #test-viewport {
              left: 10vw;
              right: 10vw;
              top: 10vh;
              bottom: 10vh;
          }
      </style>
      ''', treeSanitizer: new NullTreeSanitizer());
  document.head.append(style);

  document.body.setInnerHtml('''
        <p>
            Reported computed offset should not change with zoom level.
        </p>
        <div id="container">
            <div id="test-fixed"></div>
            <div id="test-percentage"></div>
            <div id="test-viewport"></div>
        </div>
     ''', treeSanitizer: new NullTreeSanitizer());

  var fixedElement = document.getElementById('test-fixed');
  var percentageElement = document.getElementById('test-percentage');
  var viewportElement = document.getElementById('test-viewport');

  test(zoomLevel) {
    document.body.style.zoom = zoomLevel.toString();
    var windowWidth = "${window.innerWidth ~/ 10}px";
    var windowHeight = "${window.innerHeight ~/ 10}px";

    shouldBe(getComputedStyle(fixedElement).top, '100px');
    shouldBe(getComputedStyle(fixedElement).right, '100px');
    shouldBe(getComputedStyle(fixedElement).bottom, '100px');
    shouldBe(getComputedStyle(fixedElement).left, '100px');

    shouldBe(getComputedStyle(percentageElement).top, '50px');
    shouldBe(getComputedStyle(percentageElement).right, '100px');
    shouldBe(getComputedStyle(percentageElement).bottom, '50px');
    shouldBe(getComputedStyle(percentageElement).left, '100px');

    shouldBe(getComputedStyle(viewportElement).top, windowHeight);
    shouldBe(getComputedStyle(viewportElement).right, windowWidth);
    shouldBe(getComputedStyle(viewportElement).bottom, windowHeight);
    shouldBe(getComputedStyle(viewportElement).left, windowWidth);
  }

  test(0.5);
  test(1.25);
  test(1.0);
}