OLD | NEW |
---|---|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or g/TR/html4/loose.dtd"> | 1 <!DOCTYPE html> |
2 | 2 <script src="../../resources/js-test.js"></script> |
3 <html> | 3 <style> |
4 » <head> | 4 .empty:empty, .not-empty { color: green } |
mstensho (USE GERRIT)
2016/05/24 10:37:54
For the sake of consistency, it would be nice if e
| |
5 » » <meta http-equiv="Content-Type" content="text/html; charset=iso- 8859-1" /> | 5 .not-empty:empty, .empty:not(:empty) { color: red } |
6 » » <title>:empty</title> | 6 </style> |
7 » » | 7 <div id="sandbox"> |
8 » » <style type='text/css'> | 8 <div class="empty"></div> |
9 » » <!-- | 9 <div class="empty"><!-- Just a comment --></div> |
10 | 10 <div class="not-empty"> </div> |
11 » » » body { background: #fff; color: 000; font-family: Arial, Helvetica, sans-serif; } | 11 <div class="not-empty"> |
12 » » » pre { background: #fff; padding: 0.5em; } | |
13 » » » li { background: #aaa; padding: 1em; width: 80%; margin: 0 0 3em; } | |
14 » » » .test { display: block; padding: 0.75em; } | |
15 » » » .base, .defaultgreen { background-color: #090; } | |
16 » » » .defaultred { background-color: #900; } | |
17 » » » | |
18 » » » .defaultred :empty { | |
19 » » » » background-color: #090; | |
20 » » » } | |
21 | |
22 » » » .defaultgreen :empty { | |
23 » » » » background-color: #900; | |
24 » » » } | |
25 | |
26 » » » blockquote { | |
27 » » » » margin: 0; | |
28 » » » } | |
29 » » » | |
30 » » -->» » » | |
31 » » </style> | |
32 » </head> | |
33 | |
34 » <body> | |
35 » » <p>This page is part of the <a href="http://www.css3.info">CSS3. info</a> <a href="http://www.css3.info/selectors-test/">CSS selectors test</a>. See more info on <a href="http://www.css3.info/preview/attribute-selectors.html" >CSS3 selectors</a>.</p> | |
36 » » | |
37 » » <div class='base'></div> | |
38 » | |
39 » » <ol> | |
40 » » » <li> | |
41 » » » » | |
42 » » » » <div class='defaultred'> | |
43 » » » » » <div class='test required'></div> | |
44 » » » » </div> | |
45 » » » » | |
46 » » » » <pre>:empty { | |
47 } | |
48 | |
49 <div></div></pre> | |
50 | |
51 » » » » <p> | |
52 » » » » » The CSS selector should match the div el ement, because it is empty | |
53 » » » » </p> | |
54 » » » </li> | |
55 | |
56 » » » <li> | |
57 » » » » <div class='defaultred'> | |
58 » » » » » <div class='test'><!-- Just a comment -- ></div> | |
59 » » » » </div> | |
60 » » » » | |
61 » » » » <pre>:empty { | |
62 } | |
63 | |
64 <div><!-- Just a comment --></div></pre> | |
65 | |
66 » » » » <p> | |
67 » » » » » The CSS selector should match the div el ement, because it is empty | |
68 » » » » </p> | |
69 » » » </li> | |
70 | |
71 » » » <li> | |
72 » » » » <div class='defaultgreen'> | |
73 » » » » » <div class='test default'> </div> | |
74 » » » » </div> | |
75 » » » » | |
76 » » » » <pre>:empty { | |
77 } | |
78 | |
79 <div> </div></pre> | |
80 | |
81 » » » » <p> | |
82 » » » » » The CSS selector should not match the di v element, because it is not empty | |
83 » » » » </p> | |
84 » » » </li> | |
85 » » » | |
86 » » » <li> | |
87 » » » » <div class='defaultgreen'> | |
88 » » » » » <div class='test default'> | |
89 . | 12 . |
90 </div> | 13 </div> |
91 » » » » </div> | 14 <div class="not-empty"><blockquote></blockquote></div> |
92 » » » » | 15 <div id="appendParent" class="not-empty"></div> |
93 » » » » <pre>:empty { | 16 </div> |
94 } | 17 <script> |
18 description(":empty selector tests"); | |
95 | 19 |
96 <div> | 20 appendParent.appendChild(document.createElement("div")); |
97 How about regular text... | |
98 </div></pre> | |
99 | 21 |
100 » » » » <p> | 22 var green = "rgb(0, 128, 0)"; |
101 » » » » » The CSS selector should not match the di v element, because it is not empty | |
102 » » » » </p> | |
103 » » » </li> | |
104 | 23 |
105 » » » <li> | 24 var testDivs = sandbox.querySelectorAll("#sandbox > div"); |
106 » » » » <div class='defaultgreen'> | 25 for (var i = 0; i < testDivs.length; i++) |
107 » » » » » <div class='test default required'><bloc kquote></blockquote></div> | 26 shouldBe("getComputedStyle(testDivs["+i+"]).color", "green"); |
108 » » » » </div> | 27 </script> |
109 » » » » | |
110 » » » » <pre>:empty { | |
111 } | |
112 | |
113 <div><blockquote></blockquote></div></pre> | |
114 | |
115 » » » » <p> | |
116 » » » » » The CSS selector should not match the di v element, because it is not empty | |
117 » » » » </p> | |
118 » » » </li> | |
119 | |
120 » » » <li> | |
121 » » » » <div class='defaultgreen'> | |
122 » » » » » <div id='appendChild' class='test defaul t'></div> | |
123 » » » » </div> | |
124 | |
125 » » » » <script type="text/javascript"> | |
126 » » » » <!-- | |
127 | |
128 » » » » » var ib = document.getElementById('append Child'); | |
129 » » » » » ib.appendChild(document.createElement("d iv")); | |
130 » » » » | |
131 » » » » //--> | |
132 » » » » </script> | |
133 » » » » | |
134 » » » » <pre>:empty { | |
135 } | |
136 | |
137 <div id='appendChild'></div> | |
138 | |
139 var ib = document.getElementById('appendChild'); | |
140 ib.appendChild(document.createElement("div"));</pre> | |
141 | |
142 » » » » <p> | |
143 » » » » » The CSS selector should not match the or ignal div element, because it will not be empty | |
144 » » » » » anymore after the Javascript code append s a child element to it. | |
145 » » » » </p> | |
146 » » » </li> | |
147 » » </ol> | |
148 » </body> | |
149 </html> | |
OLD | NEW |