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