i18n-element

<html lang="en" preferred> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> <script type="module"> import './basic-test-imports.js'; </script> <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>  <script src="../../../wct-browser-legacy/browser.js"></script> <script type="module" src="./basic-test-imports.js"></script> <style> .test-container.running-test { display: block; } .test-container:not(.running-test) { display: none; } </style> </head> <body> <h2 id="test-name"></h2> <test-fixture class="test-container" id="simple-text-element-default-fixture"> <template> <simple-text-element></simple-text-element> </template> </test-fixture> <test-fixture class="test-container" id="commented-simple-text-element-default-fixture"> <template> <commented-simple-text-element></commented-simple-text-element> </template> </test-fixture> <test-fixture class="test-container" id="simple-text-element-fixture"> <template is="dom-template" id="bound-simple-text-element-fixture"> <simple-text-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}"> </simple-text-element> </template> </test-fixture> <test-fixture class="test-container" id="commented-simple-text-element-fixture"> <template is="dom-template" id="bound-commented-simple-text-element"> <commented-simple-text-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}"> </commented-simple-text-element> </template> </test-fixture> <test-fixture class="test-container" id="simple-text-id-element-fixture"> <template is="dom-template" id="bound-simple-text-id-element"> <simple-text-id-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}"> </simple-text-id-element> </template> </test-fixture> <test-fixture class="test-container" id="plural-gender-element-fixture"> <template is="dom-template"> <plural-gender-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}" sender="{{sender}}" recipients="{{recipients}}"> </plural-gender-element> </template> </test-fixture> <test-fixture class="test-container" id="simple-attribute-element-fixture"> <template is="dom-template"> <simple-attribute-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}"> </simple-attribute-element> </template> </test-fixture> <test-fixture class="test-container" id="fallback-text-element-fixture"> <template is="dom-template"> <fallback-text-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}"> </fallback-text-element> </template> </test-fixture> <test-fixture class="test-container" id="compound-binding-element-fixture"> <template is="dom-template"> <compound-binding-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}" param1="{{param1}}" param2="{{param2}}"> </compound-binding-element> </template> </test-fixture> <div class="test-container"> <i18n-dom-bind id="simple-text-dom-bind"> <template> outermost text at the beginning <div><div></div></div> <span id="whitespace">   </span> <h1>outermost header 1</h1> outermost text in the middle <span>simple text without id</span> <span>simple text without id 2</span> <span id="label-1">simple text with id</span> <span id="label-2">simple text with id 2</span> <div> <span>simple text within div</span> <span>simple text within div 2</span> <div><div>great grandchild text within div</div></div> </div> <div> simple text as the first element in div <span>simple text within div</span> simple text in the middle of div <span>simple text within div 2</span> <div><div>great grandchild text within div</div></div> simple text at the last element in div </div> <div id="toplevel-div"> <span>simple text within div</span> <span>simple text within div 2</span> <div id="second-level-div"> <div id="third-level-div">great grandchild text within div</div> <div>great grandchild text within div without id</div> </div> </div> <div> <ul> <li>line item without id 1</li> <li>line item without id 2</li> <li>line item without id 3</li> </ul> <ul id="line-items"> <li>line item with id 1</li> <li>line item with id 2</li> <li>line item with id 3</li> </ul> </div> <p>A paragraph with <b>parameters</b> is converted to <code><i18n-format></code>.</p> <p id="paragraph">A paragraph with <b>id</b> is converted to <code><i18n-format></code>.</p> outermost text at the end </template> </i18n-dom-bind> </div> <div class="test-container"> <i18n-dom-bind id="simple-attribute-dom-bind"> <template> <style attr="This is not extracted"> google-chart { width: 300px; } </style> <div id="outer-div"> <div id="ordinary-div" attr="This is not targeted for extraction">text 1</div> <input id="standard-input" placeholder="standard HTML5 attribute"> <input placeholder="standard HTML5 attribute without id"> <paper-input id="paper-input-element" label="paper-input label" error-message="paper-input error message" placeholder="paper-input placeholder" value="this is not a target"> </paper-input> <paper-input label="paper-input label without id" error-message="paper-input error message without id" placeholder="paper-input placeholder without id" value="this is not a target"> </paper-input> <google-chart type="pie" id="pie-chart" options='{"title": "Distribution of days in 2001H1"}' cols='[ {"label": "Month", "type": "string"},{"label": "Days", "type": "number"} ]' rows='[ ["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30] ]'> </google-chart> <google-chart id="column-chart" type="column" options='{"title": "Inventory"}' data='[ ["Year", "Things", "Stuff"], ["2004", 1000, 400], ["2005", 1170, 460], ["2006", 660, 1120], ["2007", 1030, 540] ]'> </google-chart> <text-attribute-element id="custom-attr" custom-text-attr1="custom text attribute 1" custom-text-attr2="custom text attribute 2" custom-text-attr3="custom text attribute 3" out-of-scope-attr="out of scope attr"> </text-attribute-element> <text-attribute-element id="selective-attr" boolean-attr empty-attr string-attr="abc" custom-text-attr4="{{text.ordinary-div}} custom-text-attr4 attribute with param {{text.ordinary-div}} and param [[text.ordinary-div]] {{text.ordinary-div}}" custom-text-attr5$="[[text.ordinary-div]] custom-text-attr5 attribute with param {{or('',text.ordinary-div)}} and param [[text.ordinary-div]]" i18n-target="i18n-target attribute with param {{text.ordinary-div}} and param [[text.ordinary-div]]" i18n-target2="i18n-target2 attribute with param {{or('',text.ordinary-div)}} and param [[text.ordinary-div]]"> </text-attribute-element> <text-attribute-element id="selective-attr2" boolean-attr boolean-attr2 string-attr="aaa" i18n-target="i18n-target attribute 2"> </text-attribute-element> <text-attribute-element id="selective-attr3" i18n-target6="i18n-target6 attribute 2"> </text-attribute-element> <text-attribute-element id="selective-attr4" boolean-attr i18n-target6="i18n-target6 attribute 3" i18n-target7="unmatching i18n-target4 attribute"> </text-attribute-element> <text-attribute-element id="selective-attr5" string-attr="xxx" i18n-target7="unmatching i18n-target7 attribute"> </text-attribute-element> <span id="test-json-data-1">{{model.json-data-id.attr1}}</span> <span id="test-json-data-2">{{model.json-data-id.i18n-target-attr}}</span> <span id="test-json-data-3">{{model.template_2:json-data_1.attr1}}</span> <span id="test-json-data-4">{{model.template_2:json-data_1.i18n-target-attr}}</span> </div> <template> <json-data id="json-data-id" attr1="this attr1 is extracted" i18n-target-attr="this attribute is also extracted"></json-data> <json-data attr1="this attr1 without id is extracted" i18n-target-attr="this attribute without id is also extracted"></json-data> </template> </template> </i18n-dom-bind> </div> <div class="test-container"> <i18n-dom-bind id="compound-binding-dom-bind"> <template> outermost text at the beginning with compound {{param1}} and {{param2}} variables <div><div></div></div> <span id="whitespace">   </span> <h1>outermost header 1 with {{param1}} and {{param2}} variables</h1> outermost text in the middle with {{param1}} and {{param2}} variables <span>simple text without id with {{param1}} and {{param2}} variables</span> <span>simple text without id 2 with {{param1}} and {{param2}} variables</span> <span id="label-1">simple text with id and {{param1}} and {{param2}} variables</span> <span id="label-2">simple text with id and {{param1}} and {{param2}} variables 2</span> <div> <span>simple text within div with {{param1}} and {{param2}} variables</span> <span>simple text within div with {{param1}} and {{param2}} variables 2</span> <div><div>great grandchild text within div with {{param1}} and {{param2}} variables</div></div> </div> <div> simple text as the first element in div with {{param1}} and {{param2}} variables <span>simple text within div with {{param1}} and {{param2}} variables</span> simple text in the middle of div with {{param1}} and {{param2}} variables <span>simple text within div with {{param1}} and {{param2}} variables 2</span> <div><div>great grandchild text within div with {{param1}} and {{param2}} variables</div></div> simple text at the last element in div with {{param1}} and {{param2}} variables </div> <div id="toplevel-div"> <span>simple text within div with {{param1}} and {{param2}} variables</span> <span>simple text within div 2 with {{param1}} and {{param2}} variables</span> <div id="second-level-div"> <div id="third-level-div">great grandchild text within div with {{param1}} and {{param2}} variables</div> <div>great grandchild text within div without id with {{param1}} and {{param2}} variables</div> </div> </div> <div> <ul> <li>line item without id 1 with {{param1}} and {{param2}} variables</li> <li>line item without id 2 with {{param1}} and {{param2}} variables</li> <li>line item without id 3 with {{param1}} and {{param2}} variables</li> </ul> <ul id="line-items"> <li>line item with id 1 with {{param1}} and {{param2}} variables</li> <li>line item with id 2 with {{param1}} and {{param2}} variables</li> <li>line item with id 3 with {{param1}} and {{param2}} variables</li> </ul> </div> <p>A paragraph with {{param1}} is converted to {{param2}}.</p> <p id="paragraph">A paragraph with <b>id</b>, {{param1}}, and {{param2}} is converted to <code><i18n-format></code>.</p> outermost text at the end with {{param1}} and {{param2}} variables </template> </i18n-dom-bind> </div> <div class="test-container" id="no-template-dom-bind-container"> </div> </body> </html>