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