browser_boxmodel_update-after-navigation.js (3251B)
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 the box model view continues to work after a page navigation and that 7 // it also works after going back 8 9 const IFRAME1 = URL_ROOT_SSL + "doc_boxmodel_iframe1.html"; 10 const IFRAME2 = URL_ROOT_SSL + "doc_boxmodel_iframe2.html"; 11 12 add_task(async function () { 13 const tab = await addTab(IFRAME1); 14 const browser = tab.linkedBrowser; 15 const { inspector, boxmodel } = await openLayoutView(); 16 17 await testFirstPage(inspector, boxmodel, browser); 18 19 info("Navigate to the second page"); 20 let onMarkupLoaded = waitForMarkupLoaded(inspector); 21 await navigateTo(IFRAME2); 22 await onMarkupLoaded; 23 24 await testSecondPage(inspector, boxmodel, browser); 25 26 info("Go back to the first page"); 27 onMarkupLoaded = waitForMarkupLoaded(inspector); 28 gBrowser.goBack(); 29 await onMarkupLoaded; 30 31 await testBackToFirstPage(inspector, boxmodel, browser); 32 }); 33 34 async function testFirstPage(inspector, boxmodel, browser) { 35 info("Test that the box model view works on the first page"); 36 37 await selectNode("p", inspector); 38 39 info("Checking that the box model view shows the right value"); 40 const paddingElt = boxmodel.document.querySelector( 41 ".boxmodel-padding.boxmodel-top > span" 42 ); 43 is(paddingElt.textContent, "50"); 44 45 info("Listening for box model view changes and modifying the padding"); 46 const onUpdated = waitForUpdate(inspector); 47 await setStyle(browser, "p", "padding", "20px"); 48 await onUpdated; 49 ok(true, "Box model view got updated"); 50 51 info("Checking that the box model view shows the right value after update"); 52 is(paddingElt.textContent, "20"); 53 } 54 55 async function testSecondPage(inspector, boxmodel, browser) { 56 info("Test that the box model view works on the second page"); 57 58 await selectNode("p", inspector); 59 60 info("Checking that the box model view shows the right value"); 61 const sizeElt = boxmodel.document.querySelector(".boxmodel-size > span"); 62 is(sizeElt.textContent, "100" + "\u00D7" + "100"); 63 64 info("Listening for box model view changes and modifying the size"); 65 const onUpdated = waitForUpdate(inspector); 66 await setStyle(browser, "p", "width", "200px"); 67 await onUpdated; 68 ok(true, "Box model view got updated"); 69 70 info("Checking that the box model view shows the right value after update"); 71 is(sizeElt.textContent, "200" + "\u00D7" + "100"); 72 } 73 74 async function testBackToFirstPage(inspector, boxmodel, browser) { 75 info("Test that the box model view works on the first page after going back"); 76 77 await selectNode("p", inspector); 78 79 info( 80 "Checking that the box model view shows the right value, which is the" + 81 "modified value from step one because of the bfcache" 82 ); 83 const paddingElt = boxmodel.document.querySelector( 84 ".boxmodel-padding.boxmodel-top > span" 85 ); 86 is(paddingElt.textContent, "20"); 87 88 info("Listening for box model view changes and modifying the padding"); 89 const onUpdated = waitForUpdate(inspector); 90 await setStyle(browser, "p", "padding", "100px"); 91 await onUpdated; 92 ok(true, "Box model view got updated"); 93 94 info("Checking that the box model view shows the right value after update"); 95 is(paddingElt.textContent, "100"); 96 }