form-in-tables.html (1446B)
1 <!DOCTYPE html> 2 <title>UA style for form in table elements</title> 3 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> 4 <link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 .block { display: block !important } 9 </style> 10 <div id="display"> 11 <table><form></form></table> 12 <table><thead><form></form></thead></table> 13 <table><tbody><form></form></tbody></table> 14 <table><tfoot><form></form></tfoot></table> 15 <table><tr><form></form></tr></table> 16 </div> 17 <div id="important"> 18 <table><form class="block"></form></table> 19 <table><thead><form class="block"></form></thead></table> 20 <table><tbody><form class="block"></form></tbody></table> 21 <table><tfoot><form class="block"></form></tfoot></table> 22 <table><tr><form class="block"></form></tr></table> 23 </div> 24 <script> 25 for (const form of display.querySelectorAll("form")) { 26 test(function() { 27 assert_equals(getComputedStyle(form).display, "none"); 28 }, `Computed display of form inside ${form.parentNode.nodeName} should be 'none'`); 29 } 30 for (const form of important.querySelectorAll("form")) { 31 test(function() { 32 assert_equals(getComputedStyle(form).display, "none"); 33 }, `Computed display of form inside ${form.parentNode.nodeName} should be 'none' (!important UA style))`); 34 } 35 </script>