1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<!DOCTYPE html>
<html>
<script src="../../../resources/js-test.js"></script>
<head>
<link id="importLink" rel="import" href="resources/style-link-child.html">
<style>
.red-from-import {
color: white; // Overriding with white.
};
</style>
</head>
<body>
<h1>These elements should be styled appropriately:</h1>
<div id="testContainer">
<div id="shouldBeBlue" class="blue-from-import">Should be blue.</div>
<div id="shouldBeAqua" class="aqua-from-import">Should become aqua.</div>
<div id="shouldBeWhite" class="red-from-import">Should be white.</div>
<div id="shouldBeYellow" class="yellow-from-import">Should be yellow.</div>
<div id="shouldBeTeal" class="gray-from-subimport">Should be teal.</div>
<div id="shouldBeGreen" class="green-from-import">Should become green.</div>
</div>
<script>
window.jsTestIsAsync = true;
// a trivial case
shouldBeEqualToString("window.getComputedStyle(shouldBeBlue).color", "rgb(0, 0, 255)");
// @import from rel=import-ed stylesheet
shouldBeEqualToString("window.getComputedStyle(shouldBeAqua).color", "rgb(0, 255, 255)");
// Nested case
shouldBeEqualToString("window.getComputedStyle(shouldBeYellow).color", "rgb(255, 255, 0)");
// Overriding import from the master
shouldBeEqualToString("window.getComputedStyle(shouldBeWhite).color", "rgb(255, 255, 255)");
// Overriding subimport from parent import
shouldBeEqualToString("window.getComputedStyle(shouldBeTeal).color", "rgb(0, 128, 128)");
// Dynamically adding
shouldBeEqualToString("window.getComputedStyle(shouldBeGreen).color", "rgb(0, 0, 0)");
var linkWithGreen = importLink.import.createElement("link");
linkWithGreen.setAttribute("href", "style-link-dynamic.css");
linkWithGreen.setAttribute("rel", "stylesheet");
linkWithGreen.setAttribute("type", "text/css");
importLink.import.head.appendChild(linkWithGreen);
linkWithGreen.onload = function() {
shouldBeEqualToString("window.getComputedStyle(shouldBeGreen).color", "rgb(0, 128, 0)");
// Dyanically removing
Array.prototype.forEach.call(importLink.import.querySelectorAll("link"), function(e) { e.remove(); });
shouldBeEqualToString("window.getComputedStyle(shouldBeBlue).color", "rgb(0, 0, 0)");
shouldBeEqualToString("window.getComputedStyle(shouldBeGreen).color", "rgb(0, 0, 0)");
finishJSTest();
}
</script>
</body>
</html>
|
