LayoutTests/fast/css/style-scoped/style-scoped-with-important-rule_t01.dart

/*
 * 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 Test that rules in an inner scoped stylesheet don't override
 * !important rules declared in an outer scoped stylesheet.
 */
import "dart:html";
import "../../../testcommon.dart";
import "../../../../Utils/async_utils.dart";
import "pwd.dart";

main() {
  var style = new Element.html('''
      <style>
      span { border-color: lime ! important; }
      div { border-color: orange; }
      div#id2 { border-color: yellow; }
      </style>
      ''', treeSanitizer: new NullTreeSanitizer());
  document.head.append(style);

  document.body.setInnerHtml('''
      <div>
        <style scoped>
            div { border-color: green ! important; }
            div { border-color: red; }
            div#id2 {border-color: purple; }
        </style>
        <div>
          <style scoped>
              div { border-color: blue; }
          </style>
          <div id="id1"></div>
        </div>
        <div>
          <style scoped>
              div#id2 { border-color: blue; }
          </style>
          <div id="id2"></div>
        </div>
        <div>
          <style scoped>
              div { border-color: blue; }
          </style>
          <div id="id3" style="border-color: red;"></div>
        </div>
        <div>
          <style scoped>
            div { border-color: blue !important; }
          </style>
          <div id="id4"></div>
        </div>
      </div>
      <div>
        <style scoped>
            span#id5 { border-color: blue; }
        </style>
        <span id="id5"></span>
      </div>
      <div>
        <style scoped>
            span { border-color: blue !important; }
        </style>
        <span id="id6"></span>
      </div>
      ''', treeSanitizer: new NullTreeSanitizer());

  var target1 = document.getElementById("id1");
  debug("Case1: The target element has any matched important rule declared in an outer scoped stylesheet, and the element also has any matched normal rule declared in an inner scoped stylesheet.");
  shouldBe(getComputedStyle(target1).borderColor, "rgb(0, 128, 0)");

  debug("Case2: The target element has any matched important rule declared in an outer scoped stylesheet, and the element also has a matched normal ID rule declared in an inner scoped stylesheet.");
  var target2 = document.getElementById("id2");
  shouldBe(getComputedStyle(target2).borderColor, "rgb(0, 128, 0)");

  debug("Case3: The target element has any matched important rule declared in an outer scoped stylesheet, and the element also has matched normal rules declared in an inner scoped stylesheet and in a STYLE attribute.");
  var target3 = document.getElementById("id3");
  shouldBe(getComputedStyle(target3).borderColor, "rgb(0, 128, 0)");

  debug("Case4: The target element has matched important rules. One is declared in an outer scoped stylesheet and the other is declared in an inner scoped stylesheet.");
  var target4 = document.getElementById("id4");
  shouldBe(getComputedStyle(target4).borderColor, "rgb(0, 0, 255)");

  debug("Case5: The target element has any matched important rule declared in an author stylesheet, and the element also has matched normal rules declared in an inner scoped stylesheet.");
  var target5 = document.getElementById("id5");
  shouldBe(getComputedStyle(target5).borderColor, "rgb(0, 255, 0)");

  debug("Case6: The target element has matched important rules. One is declared in an author stylesheet (not scoped) and the other is declared in a scoped stylesheet.");
  var target6 = document.getElementById("id6");
  shouldBe(getComputedStyle(target6).borderColor, "rgb(0, 0, 255)");
}