browser_rules_media-queries_reload.js (1818B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test that applicable media queries are updated in the Rule view after reloading 7 // the page and resizing the window. 8 9 const TEST_URI = ` 10 <style type='text/css'> 11 @media all and (max-width: 550px) { 12 div { 13 color: red; 14 } 15 } 16 @media all and (min-width: 550px) { 17 div { 18 color: green; 19 } 20 } 21 </style> 22 <div></div> 23 `; 24 25 add_task(async function () { 26 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 27 const { inspector, view: ruleView, toolbox } = await openRuleView(); 28 const hostWindow = toolbox.win.parent; 29 30 const originalWidth = hostWindow.outerWidth; 31 const originalHeight = hostWindow.outerHeight; 32 33 await selectNode("div", inspector); 34 35 info("Resize window so the media query for small viewports applies"); 36 hostWindow.resizeTo(500, 400); 37 38 await waitForMediaRuleColor(ruleView, "red"); 39 ok(true, "Small viewport media query inspected"); 40 41 info("Reload the current page"); 42 await reloadBrowser(); 43 await selectNode("div", inspector); 44 45 info("Resize window so the media query for large viewports applies"); 46 hostWindow.resizeTo(800, 800); 47 48 info("Reselect the rule after page reload."); 49 await waitForMediaRuleColor(ruleView, "green"); 50 ok(true, "Large viewport media query inspected"); 51 52 info("Resize window to original dimentions"); 53 const onResize = once(hostWindow, "resize"); 54 hostWindow.resizeTo(originalWidth, originalHeight); 55 await onResize; 56 }); 57 58 function waitForMediaRuleColor(ruleView, color) { 59 return waitUntil(() => { 60 try { 61 const { value } = getTextProperty(ruleView, 1, { color }); 62 return value === color; 63 } catch (e) { 64 return false; 65 } 66 }); 67 }