lang-attribute-update.html (2005B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset=utf-8> 4 <link rel="help" href="https://github.com/WICG/PEPC/blob/main/explainer.md#locking-the-pepc-style"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <body> 11 <div id="el1" lang="en"> 12 <div id="el2" lang="en"> 13 <div> 14 <permission id="permission-element" type="geolocation" style="width:fit-content"></permission> 15 </div> 16 </div> 17 </div> 18 19 <script> 20 // Since the `lang` attribute is inherited, but the actual inherited value 21 // isn't available via IDL, there's no direct way to check that it gets 22 // invalidated and updated when changes are made. As such, this test looks 23 // for side-effects of changing the language, such as changing the rendered 24 // size of the element. 25 promise_test(async() => { 26 var permission_element = document.getElementById("permission-element"); 27 const initial_width = permission_element.offsetWidth; 28 let widths = new Set(); 29 widths.add(initial_width); 30 const outer_lang_div = document.getElementById("el1"); 31 const inner_lang_div = document.getElementById("el2"); 32 33 // Changing the lang of the outer div should not have any effect as it is 34 // shadowed by the inner div. 35 outer_lang_div.lang = "de"; 36 assert_equals(permission_element.offsetWidth, initial_width); 37 38 // The width of the permission element should change due to the changed 39 // language of the inner element. Try a couple languages to make sure one 40 // of them has a different size. 41 ['de','hu','fr-AG','es'].forEach(lang => { 42 inner_lang_div.lang = lang; 43 widths.add(permission_element.offsetWidth); 44 }); 45 assert_true(widths.size > 1); 46 47 }, "Permission element should dynamically change text when the lang \ 48 attribute changes") 49 </script> 50 </body> 51 </html>