browser_toolbox_computed_view.js (1922B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Check that when the viewport is resized, the computed-view refreshes. 7 8 const TEST_URI = 9 "data:text/html;charset=utf-8," + 10 ` 11 <meta name="viewport" content="width=device-width"> 12 <style> 13 div { 14 width: 500px; 15 height: 10px; 16 background: purple; 17 } 18 @media screen and (max-width: 200px) { 19 div { 20 width: 100px; 21 } 22 }; 23 </style><div></div></html> 24 `; 25 26 addRDMTask(TEST_URI, async function ({ ui, manager }) { 27 info("Open the responsive design mode and set its size to 500x500 to start"); 28 await setViewportSize(ui, manager, 500, 500); 29 30 info("Open the inspector, computed-view and select the test node"); 31 const { inspector, view } = await openComputedView(); 32 await selectNode("div", inspector); 33 34 info("Try shrinking the viewport and checking the applied styles"); 35 await testShrink(view, inspector, ui, manager); 36 37 info("Try growing the viewport and checking the applied styles"); 38 await testGrow(view, inspector, ui, manager); 39 }); 40 41 async function testShrink(computedView, inspector, ui, manager) { 42 is(computedWidth(computedView), "500px", "Should show 500px initially."); 43 44 const onRefresh = inspector.once("computed-view-refreshed"); 45 await setViewportSize(ui, manager, 100, 100); 46 await onRefresh; 47 48 is(computedWidth(computedView), "100px", "Should be 100px after shrinking."); 49 } 50 51 async function testGrow(computedView, inspector, ui, manager) { 52 const onRefresh = inspector.once("computed-view-refreshed"); 53 await setViewportSize(ui, manager, 500, 500); 54 await onRefresh; 55 56 is(computedWidth(computedView), "500px", "Should be 500px after growing."); 57 } 58 59 function computedWidth(computedView) { 60 for (const prop of computedView.propertyViews) { 61 if (prop.name === "width") { 62 return prop.valueNode.textContent; 63 } 64 } 65 return null; 66 }