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
|
<!DOCTYPE html>
<meta charset="utf-8">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<link rel=stylesheet href=stylesheet.py>
<link rel=stylesheet media="screen and (max-width:10px)" href=stylesheet.py?stylesNotMatchingEnvironment&delay=2>
<h1>Dominic Farolino</h1>
<script>
function styleExists(styleText) {
for (let styleRule of document.styleSheets) {
let currentStyleText = styleRule.cssRules["0"].cssText;
if (currentStyleText == styleText) {
return true;
}
}
return false;
}
test(() => {
const h1 = document.querySelector('h1');
const computedColor = getComputedStyle(h1).color;
const expectedColor = "rgb(128, 0, 128)";
assert_equals(computedColor, expectedColor);
assert_true(styleExists("h1 { color: purple; }")); // first style sheet
assert_false(styleExists("h1 { color: brown; }")); // second style sheet (should not be loaded yet)
}, "Only the style sheet loaded via a link element whose media attribute matches the environment should block following script execution");
const secondStylesheetTest = async_test("Both style sheets loaded via the link elements should be registered as style sheets for the document after 2 seconds");
secondStylesheetTest.step_timeout(() => {
assert_true(styleExists("h1 { color: purple; }")); // first style sheet
assert_true(styleExists("h1 { color: brown; }")); // second style sheet (loaded now!)
secondStylesheetTest.done();
}, 3000);
</script>
|
