test_connectRoot_webcomponent_lazy.html (3678B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test Web Component connecting into Document's l10n</title> 6 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 7 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 8 <script type="application/javascript"> 9 SimpleTest.waitForExplicitFinish(); 10 11 // In this test we are introducing two widgets. The only difference between them 12 // is that the first one is using `connectRoot` with the `aTranslate` argument set to `true`, 13 // and the other one to `false`. 14 // 15 // In this test, we will inject both of them lazily, after initial parsing is completed. 16 // For a test that verifies the behavior when they're injected during parsing, see 17 // `test_connectRoot_webcomponent.html` test. 18 // 19 // The expected difference is that when both get lazily injected into the DOM, the first one 20 // will get translated, while the other will not. 21 // The latter behavior will be used by widgets that will want to translate the initial DOM on their 22 // own before connecting the root. 23 24 let firstWidgetTranslated = false; 25 26 class FluentWidget extends HTMLElement { 27 constructor() { 28 super(); 29 const shadowRoot = this.attachShadow({mode: "open"}); 30 const t = document.querySelector("#fluent-widget-template"); 31 const instance = t.content.cloneNode(true); 32 shadowRoot.appendChild(instance); 33 } 34 connectedCallback() { 35 MozXULElement.insertFTLIfNeeded("browser/preferences/preferences.ftl"); 36 37 document.l10n.connectRoot(this.shadowRoot, true); 38 39 let label = this.shadowRoot.getElementById("label"); 40 41 let verifyL10n = () => { 42 if (label.textContent.length) { 43 window.removeEventListener("MozAfterPaint", verifyL10n); 44 is(label.textContent, "Learn more", "localization content applied to element"); 45 firstWidgetTranslated = true; 46 } 47 }; 48 window.addEventListener("MozAfterPaint", verifyL10n); 49 } 50 } 51 52 class FluentWidget2 extends HTMLElement { 53 constructor() { 54 super(); 55 const shadowRoot = this.attachShadow({mode: "open"}); 56 const t = document.querySelector("#fluent-widget-template"); 57 const instance = t.content.cloneNode(true); 58 shadowRoot.appendChild(instance); 59 } 60 connectedCallback() { 61 MozXULElement.insertFTLIfNeeded("browser/preferences/preferences.ftl"); 62 63 document.l10n.connectRoot(this.shadowRoot, false); 64 65 let label = this.shadowRoot.getElementById("label"); 66 67 let verifyL10n = () => { 68 if (firstWidgetTranslated) { 69 is(label.textContent.length, 0, "This widget should remain untranslated."); 70 window.removeEventListener("MozAfterPaint", verifyL10n); 71 SimpleTest.finish(); 72 } 73 }; 74 window.addEventListener("MozAfterPaint", verifyL10n); 75 } 76 } 77 78 customElements.define("fluent-widget", FluentWidget); 79 customElements.define("fluent-widget2", FluentWidget2); 80 81 window.addEventListener("load", () => { 82 window.requestIdleCallback(async () => { 83 let widget = document.createElement("fluent-widget"); 84 document.body.appendChild(widget); 85 let widget2 = document.createElement("fluent-widget2"); 86 document.body.appendChild(widget2); 87 }); 88 }, { once: true }); 89 </script> 90 </head> 91 <body> 92 <template id="fluent-widget-template"> 93 <div> 94 <button id="label" data-l10n-id="content-blocking-learn-more"></button> 95 </div> 96 </template> 97 </body> 98 </html>