<!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>
