third_party/WebKit/LayoutTests/fast/css/empty-pseudo-class.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   2
   3 <html>
   4         <head>
   5                 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   6                 <title>:empty</title>
   7
   8                 <style type='text/css'>
   9                 <!--
  10
  11                         body { background: #fff; color: 000; font-family: Arial, Helvetica, sans-serif; }
  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 &lt;div&gt;&lt;/div&gt;</pre>
  50
  51                                 <p>
  52                                         The CSS selector should match the div element, 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 &lt;div&gt;&lt;!-- Just a comment --&gt;&lt;/div&gt;</pre>
  65
  66                                 <p>
  67                                         The CSS selector should match the div element, 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 &lt;div&gt; &lt;/div&gt;</pre>
  80
  81                                 <p>
  82                                         The CSS selector should not match the div element, because it is not empty
  83                                 </p>
  84                         </li>
  85
  86                         <li>
  87                                 <div class='defaultgreen'>
  88                                         <div class='test default'>
  89                                                 .
  90                                         </div>
  91                                 </div>
  92
  93                                 <pre>:empty {
  94 }
  95
  96 &lt;div&gt;
  97    How about regular text...
  98 &lt;/div&gt;</pre>
  99
 100                                 <p>
 101                                         The CSS selector should not match the div element, because it is not empty
 102                                 </p>
 103                         </li>
 104
 105                         <li>
 106                                 <div class='defaultgreen'>
 107                                         <div class='test default required'><blockquote></blockquote></div>
 108                                 </div>
 109
 110                                 <pre>:empty {
 111 }
 112
 113 &lt;div&gt;&lt;blockquote&gt;&lt;/blockquote&gt;&lt;/div&gt;</pre>
 114
 115                                 <p>
 116                                         The CSS selector should not match the div element, because it is not empty
 117                                 </p>
 118                         </li>
 119
 120                         <li>
 121                                 <div class='defaultgreen'>
 122                                         <div id='appendChild' class='test default'></div>
 123                                 </div>
 124
 125                                 <script type="text/javascript">
 126                                 <!--
 127
 128                                         var ib = document.getElementById('appendChild');
 129                                         ib.appendChild(document.createElement("div"));
 130
 131                                 //-->
 132                                 </script>
 133
 134                                 <pre>:empty {
 135 }
 136
 137 &lt;div id='appendChild'&gt;&lt;/div&gt;
 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 orignal div element, because it will not be empty
 144                                         anymore after the Javascript code appends a child element to it.
 145                                 </p>
 146                         </li>
 147                 </ol>
 148         </body>
 149 </html>