<!doctype html>
<html>
<head>
<style>
#target, #targetInShadow {
    color: red;
}
</style>
<script src="../../../resources/js-test-pre.js"></script>
<script src="../../dom/shadow/resources/polyfill.js"></script>
<script>
if (window.testRunner)
    testRunner.dumpAsText();
</script>
</head>
<body>
  <div id="grandparent">
    <div id="parent">
      <span class="target" id="target"></span>
    </div>
  </div>
</body>
<script>
debug("Test whether scoped styles are applied in the cascade order or not.");
debug("If this test passes, rules which are declared in descendant scoping element are applied to a target element.");
debug("c.f. https://bugs.webkit.org/show_bug.cgi?id=103239");

var target = document.getElementById("target");
debug("Only document.style is applied to the target.");
shouldBe("window.getComputedStyle(target).color", '"rgb(255, 0, 0)"');

var styleForGrandparent = document.createElement("style");
styleForGrandparent.scoped = true;
styleForGrandparent.innerHTML = ".target { color: yellow; }";
document.getElementById("grandparent").appendChild(styleForGrandparent);
debug("A new scoped style is inserted into the grandparent node of the target. A class rule in the inserted scoped style wins an id rule in document.style.");
shouldBe("window.getComputedStyle(target).color", '"rgb(255, 255, 0)"');

var styleForParent = document.createElement("style");
styleForParent.scoped = true;
styleForParent.innerHTML = "span { color: blue; }";
document.getElementById("parent").appendChild(styleForParent);
debug("A new scoped style is inserted into the parent node of the target. A tag rule in the inserted scoped style wins an id rule and a class rule in existing styles.");
shouldBe("window.getComputedStyle(target).color", '"rgb(0, 0, 255)"');

var shadowRoot = target.webkitCreateShadowRoot();
shadowRoot.innerHTML = '<span id="targetInShadow" class="target"></span>';
var targetInShadow = shadowRoot.getElementById("targetInShadow");
shadowRoot.applyAuthorStyles = true;
// Disable style-inheritance from its shadow host to check whether rules match
// the span in the shadow tree or not.
shadowRoot.resetStyleInheritance = true;
debug("Test a span in some shadow dom tree. Since the span's host node is the above target, we have to see all inserted scoped styles and an author style to find whether the styles have any matched rules or not.");
shouldBe("window.getComputedStyle(targetInShadow).color", '"rgb(0, 0, 255)"');

var styleInShadow = document.createElement("style");
styleInShadow.innerHTML = "span { color: lime; }";
shadowRoot.appendChild(styleInShadow);
debug("Append a new style element to the shadow root. The style's scoping element is the shadow root. Rules in the style should override other rules in ascendant (scoped) styles.");
shouldBe("window.getComputedStyle(targetInShadow).color", '"rgb(0, 255, 0)"');

</script>
<script src="../../../resources/js-test-post.js"></script>
</html>