summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/semantics/document-metadata/interactions-of-styling-and-scripting/conditionally-block-rendering-on-link-media-attr.html
blob: d21df46d306fa703ee5e867d5f5d5d92bfeb7b2b (plain)
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
<!DOCTYPE html>
<meta charset="utf-8">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script src="support/utils.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>
  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>