tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

test_connectRoot_webcomponent.html (3185B)

      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  <link rel="localization" href="browser/preferences/preferences.ftl"></link>
      9  <script type="application/javascript">
     10    SimpleTest.waitForExplicitFinish();
     11 
     12    // In this test we are introducing two widgets. The only difference between them
     13    // is that the first one is using `connectRoot` with the `aTranslate` argument set to `true`,
     14    // and the other one to `false`.
     15    //
     16    // In this test, we will inject both of them into the DOM for parsing.
     17    // For a test that verifies the behavior when they're injected lazily, see
     18    // `test_connectRoot_webcomponent_lazy.html` test.
     19    //
     20    // Since both widgets get injected into DOM during parsing, we expect both of them
     21    // to get translated before `document.l10n.ready` is resolved.
     22 
     23    let passedTests = 0;
     24 
     25    class FluentWidget extends HTMLElement {
     26      constructor() {
     27        super();
     28        const shadowRoot = this.attachShadow({mode: "open"});
     29        const t = document.querySelector("#fluent-widget-template");
     30        const instance = t.content.cloneNode(true);
     31        shadowRoot.appendChild(instance);
     32      }
     33      async connectedCallback() {
     34        MozXULElement.insertFTLIfNeeded("browser/preferences/preferences.ftl");
     35 
     36        document.l10n.connectRoot(this.shadowRoot, true);
     37 
     38        let label = this.shadowRoot.getElementById("label");
     39 
     40        await document.l10n.ready;
     41        is(label.textContent, "Learn more", "localization content applied to element");
     42        passedTests++;
     43        if (passedTests == 2) {
     44          SimpleTest.finish();
     45        }
     46      }
     47    }
     48 
     49    class FluentWidget2 extends HTMLElement {
     50      constructor() {
     51        super();
     52        const shadowRoot = this.attachShadow({mode: "open"});
     53        const t = document.querySelector("#fluent-widget-template");
     54        const instance = t.content.cloneNode(true);
     55        shadowRoot.appendChild(instance);
     56      }
     57      async connectedCallback() {
     58        MozXULElement.insertFTLIfNeeded("browser/preferences/preferences.ftl");
     59 
     60        document.l10n.connectRoot(this.shadowRoot, false);
     61 
     62        let label = this.shadowRoot.getElementById("label");
     63 
     64        await document.l10n.ready;
     65        is(label.textContent, "Learn more", "localization content applied to element");
     66        passedTests++;
     67        if (passedTests == 2) {
     68          SimpleTest.finish();
     69        }
     70      }
     71    }
     72 
     73    customElements.define("fluent-widget", FluentWidget);
     74    customElements.define("fluent-widget2", FluentWidget2);
     75  </script>
     76 </head>
     77 <body>
     78  <template id="fluent-widget-template">
     79    <div>
     80      <button id="label" data-l10n-id="content-blocking-learn-more"></button>
     81    </div>
     82  </template>
     83  <fluent-widget></fluent-widget>
     84  <fluent-widget2></fluent-widget2>
     85  <script>
     86    // This trick makes sure that we connect the widgets before parsing is completed.
     87    document.write("");
     88  </script>
     89 </body>
     90 </html>