test_addSheet.html (4123B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test for addSheet</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 7 </head> 8 <body> 9 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1024707">Mozilla Bug 1024707</a> 10 11 <iframe id="iframe1" src="additional_sheets_helper.html"></iframe> 12 <iframe id="iframe2" src="additional_sheets_helper.html"></iframe> 13 14 <pre id="test"> 15 <script type="application/javascript"> 16 17 let gIOService = SpecialPowers.Cc["@mozilla.org/network/io-service;1"] 18 .getService(SpecialPowers.Ci.nsIIOService); 19 20 let gSSService = SpecialPowers.Cc["@mozilla.org/content/style-sheet-service;1"] 21 .getService(SpecialPowers.Ci.nsIStyleSheetService); 22 23 function test(win, sheet) { 24 let cs = win.getComputedStyle(win.document.body); 25 is(cs.getPropertyValue("color"), "rgb(0, 0, 0)", "should have default color"); 26 var windowUtils = SpecialPowers.getDOMWindowUtils(win); 27 windowUtils.addSheet(sheet, SpecialPowers.Ci.nsIDOMWindowUtils.USER_SHEET); 28 is(cs.getPropertyValue("color"), "rgb(255, 0, 0)", "should have changed color to red"); 29 } 30 31 function onDocumentElementInserted(url, callback) { 32 const obs = SpecialPowers.Services.obs; 33 function observer(doc) { 34 if (doc.URL === url) { 35 obs.removeObserver(observer, "document-element-inserted"); 36 callback(doc); 37 } 38 }; 39 obs.addObserver(observer, "document-element-inserted"); 40 } 41 42 // Resolves when the document (and iframe1 + iframe2) have loaded. 43 const loadedPromise = new Promise(resolve => { 44 window.addEventListener("load", () => resolve(), { once: true }); 45 }); 46 add_setup(async () => loadedPromise); 47 48 add_task(async function test_addSheet_in_existing_frame() { 49 var uri = gIOService.newURI("data:text/css,body{color:red;}"); 50 let sheet = gSSService.preloadSheet(uri, SpecialPowers.Ci.nsIStyleSheetService.USER_SHEET); 51 52 test(document.getElementById("iframe1").contentWindow, sheet); 53 test(document.getElementById("iframe2").contentWindow, sheet); 54 }); 55 56 // Regression test for https://bugzilla.mozilla.org/show_bug.cgi?id=1961064 57 add_task(async function test_addSheet_order_in_new_frame() { 58 const USER_SHEET = SpecialPowers.Ci.nsIStyleSheetService.USER_SHEET; 59 var uri1 = gIOService.newURI("data:text/css,body{--css-var:1;}"); 60 var uri2 = gIOService.newURI("data:text/css,body{--css-var:2;}"); 61 var uri3 = gIOService.newURI("data:text/css,body{--css-var:3;}"); 62 var uri4 = gIOService.newURI("data:text/css,body{--css-var:4;}"); 63 let sheet1 = gSSService.preloadSheet(uri1, USER_SHEET); 64 let sheet2 = gSSService.preloadSheet(uri2, USER_SHEET); 65 let sheet3 = gSSService.preloadSheet(uri3, USER_SHEET); 66 let sheet4 = gSSService.preloadSheet(uri4, USER_SHEET); 67 68 let f = document.createElement("iframe"); 69 f.src = "additional_sheets_helper.html?frame"; 70 let elementInsertedPromise = new Promise(resolve => { 71 onDocumentElementInserted(f.src, doc => { 72 info("Testing addSheet at document-element-inserted"); 73 // At this point, mStyleSetFilled == false, so the initialization 74 // of the styles is delayed until Document::FillStyleSet is called: 75 // https://bugzilla.mozilla.org/show_bug.cgi?id=1961064#c5 76 let windowUtils = SpecialPowers.getDOMWindowUtils(doc.defaultView); 77 windowUtils.addSheet(sheet1, USER_SHEET); 78 windowUtils.addSheet(sheet2, USER_SHEET); 79 resolve(); 80 }); 81 }); 82 await new Promise(resolve => { 83 f.onload = resolve; 84 document.body.append(f); 85 }); 86 await elementInsertedPromise; 87 let cs = f.contentWindow.getComputedStyle(f.contentDocument.body); 88 is(cs.getPropertyValue("--css-var"), "2", "Last addSheet (2) applies last"); 89 90 info("Testing addSheet in an existing document"); 91 // At this point, mStyleSetFilled == true, so the style sheets are applied 92 // immediately. 93 let windowUtils = SpecialPowers.getDOMWindowUtils(f.contentWindow); 94 windowUtils.addSheet(sheet3, USER_SHEET); 95 windowUtils.addSheet(sheet4, USER_SHEET); 96 is(cs.getPropertyValue("--css-var"), "4", "Last addSheet (4) applies last"); 97 98 f.remove(); 99 }); 100 101 </script> 102 </body> 103 </html>