|
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 > :first-child |
|
20 { border-color: green; border-style: solid; border-width: 10px } |
|
21 .t2 > :first-child |
|
22 { border-style: solid; border-width: 10px } |
|
23 .t2 > .test |
|
24 { border-color: green } |
|
25 </style> |
|
26 </head> |
|
27 <body> |
|
28 <table class="t"><caption></caption></table> |
|
29 |
|
30 <table class="t2 d2"><caption class="test"></caption></table> |
|
31 |
|
32 <table class="t d"><caption></caption></table> |
|
33 <table class="t d"><caption></caption></table> |
|
34 <table class="t d"><caption></caption></table> |
|
35 |
|
36 <table class="t2 d d2"><caption class="test"></caption></table> |
|
37 <table class="t2 d d2"><caption class="test"></caption></table> |
|
38 <table class="t2 d d2"><caption class="test"></caption></table> |
|
39 </body> |
|
40 </html> |