MediaQueryList-change-event-matches-value.html (1218B)
1 <!doctype html> 2 <title>MediaQueryList.changed is correct for all lists in the document even during a change event handler</title> 3 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 4 <link rel="author" href="https://mozilla.org" title="Mozilla"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1648839"> 6 <link rel="help" href="https://drafts.csswg.org/cssom-view/#evaluate-media-queries-and-report-changes"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="resources/matchMedia.js"></script> 10 <body> 11 <script> 12 promise_test(async t => { 13 // Create two identical media queries. 14 let mql = await createMQL(t); 15 let mql2 = getWindow(mql).matchMedia(mql.media); 16 17 let changeEvents = 0; 18 19 let check = t.step_func(function() { 20 changeEvents++; 21 assert_equals(mql.matches, mql2.matches, "Value of .matches should match"); // No pun intended 22 }); 23 24 mql.addListener(check); 25 mql2.addListener(check); 26 27 triggerMQLEvent(mql); 28 await waitForChangesReported(); 29 30 assert_equals(changeEvents, 2, "Should've fired the change event in both MediaQueryLists"); 31 }); 32 </script>