name-content-attribute-and-property.html (2334B)
1 <!DOCTYPE html> 2 <title>Only certain HTML elements reflect the name content attribute as a property</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/html/resources/common.js"></script> 6 <div id="log"></div> 7 <script> 8 function doesReflect(tagName) { 9 var element = document.createElement(tagName); 10 element.setAttribute("name", "foo"); 11 assert_equals(element.getAttribute("name"), "foo", "setAttribute should change content attribute"); 12 element.name = "bar"; 13 assert_equals(element.getAttribute("name"), "bar", "assignment to .name should change content attribute"); 14 } 15 16 function doesNotReflect(tagName) { 17 var element = document.createElement(tagName); 18 element.setAttribute("name", "foo"); 19 assert_equals(element.getAttribute("name"), "foo", "setAttribute should change content attribute"); 20 element.name = "bar"; 21 assert_equals(element.getAttribute("name"), "foo", "assignment to .name should not change content attribute"); 22 } 23 24 var reflectingTagNames = [ 25 "a", "button", "embed", "fieldset", "form", "frame", 26 "iframe", "img", "input", "map", "meta", "object", "output", 27 "param", "select", "slot", "textarea", 28 ]; 29 30 // Optionally add "details" to reflectingTagNames since Chromium is 31 // prototyping the proposal at 32 // https://open-ui.org/components/accordion.explainer that adds this 33 // reflection to "details" as well. 34 // TODO(https://crbug.com/1444057): This runtime check should eventually be 35 // removed, and depending on the outcome of the proposal details should 36 // possibly be added to reflectingTagNames unconditionally. 37 if ("name" in HTMLDetailsElement.prototype) { 38 reflectingTagNames.push("details"); 39 } 40 41 const old_and_new_elements = [...HTML5_ELEMENTS, ...HTML5_DEPRECATED_ELEMENTS]; 42 43 const nonReflectingTagNames = old_and_new_elements.filter(x => !reflectingTagNames.includes(x)); 44 45 reflectingTagNames.forEach(function(tagName) { 46 test(function() { 47 doesReflect(tagName) 48 }, tagName + " element's name property reflects its content attribute"); 49 }); 50 51 nonReflectingTagNames.forEach(function(tagName) { 52 test(function() { 53 doesNotReflect(tagName) 54 }, tagName + " element's name property does not reflect its content attribute"); 55 }); 56 </script>