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">\r
   2 \r
   3 <html>\r
   4         <head>\r
   5                 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />\r
   6                 <title>:empty</title>\r
   7                 \r
   8                 <style type='text/css'>\r
   9                 <!--\r
  10 \r
  11                         body { background: #fff; color: 000; font-family: Arial, Helvetica, sans-serif; }\r
  12                         pre { background: #fff; padding: 0.5em; }\r
  13                         li { background: #aaa; padding: 1em; width: 80%; margin: 0 0 3em; }\r
  14                         .test { display: block; padding: 0.75em; }\r
  15                         .base, .defaultgreen { background-color: #090; }\r
  16                         .defaultred { background-color: #900; }\r
  17                         \r
  18                         .defaultred :empty {\r
  19                                 background-color: #090;\r
  20                         }\r
  21 \r
  22                         .defaultgreen :empty {\r
  23                                 background-color: #900;\r
  24                         }\r
  25 \r
  26                         blockquote {\r
  27                                 margin: 0;\r
  28                         }\r
  29                         \r
  30                 -->                     \r
  31                 </style>\r
  32         </head>\r
  33 \r
  34         <body>\r
  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>\r
  36                 \r
  37                 <div class='base'></div>\r
  38         \r
  39                 <ol>\r
  40                         <li>\r
  41                                 \r
  42                                 <div class='defaultred'>\r
  43                                         <div class='test required'></div>\r
  44                                 </div>\r
  45                                 \r
  46                                 <pre>:empty {\r
  47 }\r
  48 \r
  49 &lt;div&gt;&lt;/div&gt;</pre>\r
  50 \r
  51                                 <p>\r
  52                                         The CSS selector should match the div element, because it is empty\r
  53                                 </p>\r
  54                         </li>\r
  55 \r
  56                         <li>\r
  57                                 <div class='defaultred'>\r
  58                                         <div class='test'><!-- Just a comment --></div>\r
  59                                 </div>\r
  60                                 \r
  61                                 <pre>:empty {\r
  62 }\r
  63 \r
  64 &lt;div&gt;&lt;!-- Just a comment --&gt;&lt;/div&gt;</pre>\r
  65 \r
  66                                 <p>\r
  67                                         The CSS selector should match the div element, because it is empty\r
  68                                 </p>\r
  69                         </li>\r
  70 \r
  71                         <li>\r
  72                                 <div class='defaultgreen'>\r
  73                                         <div class='test default'> </div>\r
  74                                 </div>\r
  75                                 \r
  76                                 <pre>:empty {\r
  77 }\r
  78 \r
  79 &lt;div&gt; &lt;/div&gt;</pre>\r
  80 \r
  81                                 <p>\r
  82                                         The CSS selector should not match the div element, because it is not empty\r
  83                                 </p>\r
  84                         </li>\r
  85                         \r
  86                         <li>\r
  87                                 <div class='defaultgreen'>\r
  88                                         <div class='test default'>\r
  89                                                 .\r
  90                                         </div>\r
  91                                 </div>\r
  92                                 \r
  93                                 <pre>:empty {\r
  94 }\r
  95 \r
  96 &lt;div&gt; \r
  97    How about regular text...\r
  98 &lt;/div&gt;</pre>\r
  99 \r
 100                                 <p>\r
 101                                         The CSS selector should not match the div element, because it is not empty\r
 102                                 </p>\r
 103                         </li>\r
 104 \r
 105                         <li>\r
 106                                 <div class='defaultgreen'>\r
 107                                         <div class='test default required'><blockquote></blockquote></div>\r
 108                                 </div>\r
 109                                 \r
 110                                 <pre>:empty {\r
 111 }\r
 112 \r
 113 &lt;div&gt;&lt;blockquote&gt;&lt;/blockquote&gt;&lt;/div&gt;</pre>\r
 114 \r
 115                                 <p>\r
 116                                         The CSS selector should not match the div element, because it is not empty\r
 117                                 </p>\r
 118                         </li>\r
 119 \r
 120                         <li>\r
 121                                 <div class='defaultgreen'>\r
 122                                         <div id='appendChild' class='test default'></div>\r
 123                                 </div>\r
 124 \r
 125                                 <script type="text/javascript">\r
 126                                 <!--\r
 127 \r
 128                                         var ib = document.getElementById('appendChild');\r
 129                                         ib.appendChild(document.createElement("div"));\r
 130                                 \r
 131                                 //-->\r
 132                                 </script>\r
 133                                 \r
 134                                 <pre>:empty {\r
 135 }\r
 136 \r
 137 &lt;div id='appendChild'&gt;&lt;/div&gt;\r
 138 \r
 139 var ib = document.getElementById('appendChild');\r
 140 ib.appendChild(document.createElement("div"));</pre>\r
 141 \r
 142                                 <p>\r
 143                                         The CSS selector should not match the orignal div element, because it will not be empty\r
 144                                         anymore after the Javascript code appends a child element to it.\r
 145                                 </p>\r
 146                         </li>\r
 147                 </ol>\r
 148         </body>\r
 149 </html>\r