323656-6.html (1848B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Test inheritance into captions</title> 5 <style> 6 /** 7 * The idea is that "color" inherits by default while "border-color" does 8 * not. So if the former is red and the latter is green on a parent, and 9 * the child's border-color is set to "inherit", it'll be green only if 10 * the child is inheriting from the parent. If not, it'll either be 11 * whatever the border-color is on what it's inheriting from, which will 12 * be red if what it's inheriting from has the default (currentColor) 13 * border-color). 14 */ 15 16 /* 't' for "test" */ 17 * { color: red; border: 0px hidden red; background: transparent } 18 .t, .t2 { border-color: green } 19 .t > caption 20 { border-color: inherit; border-style: solid; border-width: 10px } 21 .t2 > caption 22 { border-style: solid; border-width: 10px } 23 .t2 > caption.test 24 { border-color: inherit } 25 </style> 26 <script> 27 function makeCaption() { 28 return document.createElement("caption"); 29 } 30 31 window.onload = function() { 32 var lst = document.getElementsByClassName("d"); 33 for (var i = 0; i < lst.length; ++i) { 34 lst[i].appendChild(makeCaption()); 35 } 36 37 var lst = document.getElementsByClassName("d2"); 38 for (var i = 0; i < lst.length; ++i) { 39 lst[i].firstChild.className = "test"; 40 } 41 } 42 </script> 43 </head> 44 <body> 45 <table class="t"><caption></caption></table> 46 47 <table class="t2 d2"><caption></caption></table> 48 49 <table class="t d"></table> 50 <div class="t d"></div> 51 <div style="display: table" class="t d"></div> 52 53 <table class="t2 d d2"></table> 54 <div class="t2 d d2"></div> 55 <div style="display: table" class="t2 d d2"></div> 56 </body> 57 </html>