| 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 div > div { color: red } |
| 5 » » <meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" /> | 5 .empty:empty, .not-empty:not(:empty) { color: green } |
| 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 |
|---|
Chromium Code Reviews
Issue 2006633002:
Rewrote :empty tests to avoid list-item bug. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master