323656-3-ref.html (2069B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 5 Test inheritance through various anonymous boxes: {ib} 6 situations, buttons, overflow, columns, listboxes, first-line 7 </title> 8 <style> 9 /** 10 * The idea is that "color" inherits by default while "border-color" does 11 * not. So if the former is red and the latter is green on a parent, and 12 * the child's border-color is set to "inherit", it'll be green only if 13 * the child is inheriting from the parent. If not, it'll either be 14 * whatever the border-color is on what it's inheriting from, which will 15 * be red if what it's inheriting from has the default (currentColor) 16 * border-color). 17 */ 18 19 /* 't' for "test" */ 20 * { color: green; border: 0px hidden green; background: transparent } 21 .t { border-color: green } 22 .t:not(.d2) > :first-child, .d2 > span 23 { border-color: green; border-style: solid; border-width: 10px } 24 .f::first-line { border-color: green } 25 </style> 26 </head> 27 <body> 28 <div class="t"><div></div></div> 29 <span class="t"><div></div></span> 30 <span style="position: relative" class="t"><div></div></span> 31 <div class="f"><span></span><br><span></span></div> 32 <button class="t"><div></div></button> 33 <div style="overflow: auto" class="t"><div></div></div> 34 <div style="column-count: 2" class="t"><div></div></div> 35 <select size="2" class="t"> 36 <option></option> 37 </select> 38 39 <div class="t"><div></div></div> 40 <span class="t"><div></div></span> 41 <span style="position: relative" class="t"><div></div></span> 42 <div class="f"><span></span><br><span></span></div> 43 <button class="t"><div></div></button> 44 <div style="overflow: auto" class="t"><div></div></div> 45 <div style="column-count: 2" class="t"><div></div></div> 46 <select size="2" class="t"> 47 <option></option> 48 </select> 49 50 <span class="t d2"><div></div><span></span></span> 51 <span style="position: relative" class="t d2"><div></div><span></span></span> 52 </body> 53 </html>