Thu, 15 Jan 2015 15:55:04 +0100
Back out 97036ab72558 which inappropriately compared turds to third parties.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Test inheritance through various anonymous boxes: {ib}
5 situations, buttons, overflow, columns, listboxes, first-line</title>
6 <style>
7 /**
8 * The idea is that "color" inherits by default while "border-color" does
9 * not. So if the former is red and the latter is green on a parent, and
10 * the child's border-color is set to "inherit", it'll be green only if
11 * the child is inheriting from the parent. If not, it'll either be
12 * whatever the border-color is on what it's inheriting from, which will
13 * be red if what it's inheriting from has the default (currentColor)
14 * border-color).
15 */
17 /* 't' for "test" */
18 * { color: red; border: 0px hidden red; background: transparent }
19 .t { border-color: green }
20 .t:not(.d2) > :first-child
21 { border-color: inherit; border-style: solid; border-width: 10px }
22 .d2 > span { border-style: solid; border-width: 10px }
23 .f::first-line { border-color: green }
24 </style>
25 <script>
26 function make(str) {
27 return document.createElement(str);
28 }
30 function makeDiv() {
31 return make("div");
32 }
34 window.onload = function() {
35 var lst = document.getElementsByClassName("d");
36 for (var i = 0; i < lst.length; ++i) {
37 if (lst[i].nodeName != "select") {
38 lst[i].appendChild(makeDiv());
39 } else {
40 lst[i].appendChild(make("option"));
41 }
42 }
44 lst = document.getElementsByClassName("d2");
45 for (i = 0; i < lst.length; ++i) {
46 var span = lst[i].getElementsByTagName("span")[0];
47 span.style.cssText =
48 "border-color: inherit; border-style: solid; border-width: 10px";
49 }
51 var x = document.getElementsByClassName("f d")[0];
52 x.appendChild(make("span"));
53 x.appendChild(make("br"));
54 x.appendChild(make("span"));
55 }
56 </script>
57 </head>
58 <body>
59 <div class="t"><div></div></div>
60 <span class="t"><div></div></span>
61 <span style="position: relative" class="t"><div></div></span>
62 <div class="f"><span></span><br><span></span></div>
63 <button class="t"><div></div></button>
64 <div style="overflow: auto" class="t"><div></div></div>
65 <div style="-moz-column-count: 2" class="t"><div></div></div>
66 <select size="2" class="t">
67 <option></option>
68 </select>
70 <div class="t d"></div>
71 <span class="t d"></span>
72 <span style="position: relative" class="t d"></span>
73 <div class="f d"></div>
74 <button class="t d"></button>
75 <div style="overflow: auto" class="t d"></div>
76 <div style="-moz-column-count: 2" class="t d"></div>
77 <select size="2" class="t d">
78 <option></option>
79 </select>
81 <span class="t d2"><div></div><span></span></span>
82 <span style="position: relative" class="t d2"><div></div><span></span></span>
83 </body>
84 </html>