LayoutTests/fast/css/only-child-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>:only-child</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 :only-child {\r
  19                                 background-color: #090;\r
  20                         }\r
  21 \r
  22                         .defaultgreen :only-child {\r
  23                                 background-color: #900;\r
  24                         }\r
  25 \r
  26                 -->                     \r
  27                 </style>\r
  28         </head>\r
  29 \r
  30         <body>\r
  31                 <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
  32                 \r
  33                 <div class='base'></div>\r
  34                         \r
  35                 <ol>\r
  36                         <li>\r
  37                                 <div class='defaultred'>\r
  38                                         <div class='test required'></div>\r
  39                                 </div>\r
  40                                 \r
  41                                 <pre>div :only-child {\r
  42 }\r
  43 \r
  44 &lt;div&gt;\r
  45    &lt;div&gt;&lt;/div&gt;\r
  46 &lt;/div&gt;</pre>\r
  47 \r
  48                                 <p>\r
  49                                         The CSS selector should match the inner div element, because it is the only child of the outer div element\r
  50                                 </p>\r
  51                         </li>\r
  52 \r
  53                         <li>\r
  54                                 <div class='defaultred'>\r
  55                                         <div class='test'></div>\r
  56                                         <!-- Just a comment -->\r
  57                                 </div>\r
  58                                 \r
  59                                 <pre>div :only-child {\r
  60 }\r
  61 \r
  62 &lt;div&gt;\r
  63    &lt;div&gt;&lt;/div&gt;\r
  64    &lt;!-- Just a comment --&gt;\r
  65 &lt;/div&gt;</pre>\r
  66 \r
  67                                 <p>\r
  68                                         The CSS selector should match the inner div element, because it is the only child of the outer div element\r
  69                                 </p>\r
  70                         </li>                   \r
  71                                 \r
  72                         <li>\r
  73                                 <div class='defaultred'>\r
  74                                         <div class='test'></div>\r
  75                                         .\r
  76                                 </div>\r
  77                                 \r
  78                                 <pre>div :only-child {\r
  79 }\r
  80 \r
  81 &lt;div&gt;\r
  82    &lt;div&gt;&lt;/div&gt;\r
  83    How about regular text...\r
  84 &lt;/div&gt;</pre>\r
  85 \r
  86                                 <p>\r
  87                                         The CSS selector should match the inner div element, because it is the only child of the outer div element\r
  88                                 </p>\r
  89                         </li>                   \r
  90                                 \r
  91                         <li>\r
  92                                 <div class='defaultgreen'>\r
  93                                         <div class='test default required'></div>\r
  94                                         <blockquote></blockquote>\r
  95                                 </div>\r
  96                                 \r
  97                                 <pre>div :only-child {\r
  98 }\r
  99 \r
 100 &lt;div&gt; \r
 101    &lt;div&gt;&lt;/div&gt;\r
 102    &lt;blockquote&gt;&lt;/blockquote&gt;\r
 103 &lt;/div&gt;</pre>\r
 104 \r
 105                                 <p>\r
 106                                         The CSS selector should not match the inner div element, because it not the only child\r
 107                                 </p>\r
 108                         </li>\r
 109 \r
 110 \r
 111                         <li>\r
 112                                 <div class='defaultgreen'>\r
 113                                         <div id='appendChild' class='test default'></div>\r
 114                                 </div>\r
 115 \r
 116                                 <script type="text/javascript">\r
 117                                 <!--\r
 118 \r
 119                                         var ib = document.getElementById('appendChild');\r
 120                                         ib.parentNode.appendChild(document.createElement("div"));\r
 121                                 \r
 122                                 //-->\r
 123                                 </script>\r
 124                                 \r
 125                                 <pre>div :only-child {\r
 126 }\r
 127 \r
 128 &lt;div&gt;\r
 129    &lt;div id='appendChild'&gt;&lt;/div&gt;\r
 130 &lt;/div&gt;\r
 131 \r
 132 var ib = document.getElementById('appendChild');\r
 133 ib.parentElement.appendChild(document.createElement("div"));</pre>\r
 134 \r
 135                                 <p>\r
 136                                         The CSS selector should not match the original div element, because it is\r
 137                                         not the only child anymore after another child is append by the Javascript code. \r
 138                                 </p>\r
 139                         </li>\r
 140                 </ol>\r
 141         </body>\r
 142 </html>\r