conditionally-block-rendering-on-link-media-attr.html (1340B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <script src="support/utils.js"></script> 6 7 <link rel=stylesheet href=stylesheet.py> 8 <link rel=stylesheet media="screen and (max-width:10px)" href=stylesheet.py?stylesNotMatchingEnvironment&delay=2> 9 <h1>Dominic Farolino</h1> 10 <script> 11 test(() => { 12 const h1 = document.querySelector('h1'); 13 const computedColor = getComputedStyle(h1).color; 14 const expectedColor = "rgb(128, 0, 128)"; 15 16 assert_equals(computedColor, expectedColor); 17 assert_true(styleExists("h1 { color: purple; }")); // first style sheet 18 assert_false(styleExists("h1 { color: brown; }")); // second style sheet (should not be loaded yet) 19 }, "Only the style sheet loaded via a link element whose media attribute matches the environment should block following script execution"); 20 21 const secondStylesheetTest = async_test("Both style sheets loaded via the link elements should be registered as style sheets for the document after 2 seconds"); 22 secondStylesheetTest.step_timeout(() => { 23 assert_true(styleExists("h1 { color: purple; }")); // first style sheet 24 assert_true(styleExists("h1 { color: brown; }")); // second style sheet (loaded now!) 25 secondStylesheetTest.done(); 26 }, 3000); 27 </script>