matchMedia.js (1813B)
1 "use strict"; 2 3 { 4 // private variables are defined with `const` so they don't leak outside this block statement 5 const IFRAME_DEFAULT_SIZE = "200"; 6 const iframes = new WeakMap(); 7 8 // helpers are defined with `var` so they are globally accessible 9 var createMQL = async t => { 10 const iframe = await createIFrame(t); 11 const mql = iframe.contentWindow.matchMedia(`(max-width: ${IFRAME_DEFAULT_SIZE}px)`); 12 assert_true(mql.matches, "MQL should match on newly created <iframe>"); 13 iframes.set(mql, iframe); 14 return mql; 15 }; 16 17 var createIFrame = (t, width = IFRAME_DEFAULT_SIZE, height = width) => { 18 assert_not_equals(document.body, null, "<body> element is missing"); 19 20 const iframe = document.createElement("iframe"); 21 iframe.srcdoc = ""; 22 iframe.width = String(width); 23 iframe.height = String(height); 24 iframe.style.border = "none"; 25 26 t.add_cleanup(() => { 27 document.body.removeChild(iframe); 28 }); 29 30 return new Promise(resolve => { 31 iframe.addEventListener("load", () => { 32 iframe.contentDocument.body.offsetWidth; // reflow 33 resolve(iframe); 34 }); 35 36 document.body.appendChild(iframe); 37 }); 38 }; 39 40 var triggerMQLEvent = mql => { 41 const iframe = iframes.get(mql); 42 assert_not_equals(iframe, undefined, "Passed MQL instance was not created with createMQL"); 43 iframe.width = iframe.width === IFRAME_DEFAULT_SIZE ? "250" : IFRAME_DEFAULT_SIZE; 44 }; 45 46 var getWindow = mql => { 47 const iframe = iframes.get(mql); 48 assert_not_equals(iframe, undefined, "Passed MQL instance was not created with createMQL"); 49 return iframe.contentWindow; 50 }; 51 52 var waitForChangesReported = () => { 53 return new Promise(resolve => { 54 requestAnimationFrame(() => { 55 requestAnimationFrame(resolve); 56 }); 57 }); 58 }; 59 60 }