test_connectRoot_webcomponent.html (2440B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test DOMLocalization.prototype.connectRoot with Web Components</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 class FluentWidget extends HTMLElement { 12 constructor() { 13 super(); 14 const shadowRoot = this.attachShadow({mode: "open"}); 15 const t = document.querySelector("#fluent-widget-template"); 16 const instance = t.content.cloneNode(true); 17 shadowRoot.appendChild(instance); 18 } 19 connectedCallback() { 20 document.domLoc.connectRoot(this.shadowRoot); 21 ok(true); 22 23 let label = this.shadowRoot.getElementById("label"); 24 25 // Test for mutations applied. 26 let verifyL10n = () => { 27 if (label.textContent.length) { 28 window.removeEventListener("MozAfterPaint", verifyL10n); 29 // Notice: In normal tests we do not want to test against any particular 30 // value as per https://firefox-source-docs.mozilla.org/l10n/fluent/tutorial.html#testing 31 // But in this particular test, since we do not rely on actual real 32 // localization, but instead we mock it in the test, we can test 33 // against the actual value safely. 34 is(label.textContent, "Value for Key 1", "localization content applied to element"); 35 SimpleTest.finish(); 36 } 37 }; 38 window.addEventListener("MozAfterPaint", verifyL10n); 39 40 document.domLoc.setAttributes(label, "key1"); 41 } 42 } 43 customElements.define("fluent-widget", FluentWidget); 44 </script> 45 <script type="application/javascript"> 46 "use strict"; 47 const l10nReg = new L10nRegistry(); 48 const fs = [ 49 { path: "/localization/en-US/mock.ftl", source: ` 50 key1 = Value for Key 1 51 ` }, 52 ]; 53 const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs); 54 l10nReg.registerSources([source]); 55 56 document.domLoc = new DOMLocalization( 57 ["/mock.ftl"], 58 false, 59 l10nReg, 60 ["en-US"], 61 ); 62 </script> 63 </head> 64 <body> 65 <template id="fluent-widget-template"> 66 <div> 67 <p id="label"></p> 68 </div> 69 </template> 70 <fluent-widget id="widget1"></fluent-widget> 71 </body> 72 </html>