src/third_party/WebKit/LayoutTests/fast/css/first-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>:first-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 :first-child {
  19                                 background-color: #090;
  20                         }
  21
  22                         .defaultgreen :first-child {
  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                                 <div class='defaultred'>
  42                                         <div class='test required'></div>
  43                                 </div>
  44
  45                                 <pre>div :first-child {
  46 }
  47
  48 &lt;div&gt;
  49    &lt;div&gt;&lt;/div&gt;
  50 &lt;/div&gt;</pre>
  51
  52                                 <p>
  53                                         The CSS selector should match the inner div element, because it is the only child of the outer div element
  54                                 </p>
  55                         </li>
  56
  57                         <li>
  58                                 <div class='defaultred'>
  59                                         <div class='test'></div>
  60                                         <blockquote></blockquote>
  61                                 </div>
  62
  63                                 <pre>div :first-child {
  64 }
  65
  66 &lt;div&gt;
  67    &lt;div&gt;&lt;/div&gt;
  68    &lt;blockquote&gt;&lt;/blockquote&gt;
  69 &lt;/div&gt;</pre>
  70
  71                                 <p>
  72                                         The CSS selector should match the inner div element, because it is the first child of the outer div element
  73                                 </p>
  74                         </li>
  75
  76                         <li>
  77                                 <div class='defaultred'>
  78                                         <!-- Just a comment -->
  79                                         <div class='test'></div>
  80                                 </div>
  81
  82                                 <pre>div :first-child {
  83 }
  84
  85 &lt;div&gt;
  86    &lt;!-- Just a comment --&gt;
  87    &lt;div&gt;&lt;/div&gt;
  88 &lt;/div&gt;</pre>
  89
  90                                 <p>
  91                                         The CSS selector should match the inner div element, because it is the first child of the outer div element
  92                                         Comments are not elements, so they should not be considered when determining the first child.
  93                                 </p>
  94                         </li>
  95
  96                         <li>
  97                                 <div class='defaultred'>
  98                                         .
  99                                         <div class='test'></div>
 100                                 </div>
 101
 102                                 <pre>div :first-child {
 103 }
 104
 105 &lt;div&gt;
 106    How about regular text...
 107    &lt;div&gt;&lt;/div&gt;
 108 &lt;/div&gt;</pre>
 109
 110                                 <p>
 111                                         The CSS selector should match the inner div element, because it is the first child of the outer div element.
 112                                         Regular text is not an element, so it should not be considered when determining the first child.
 113                                 </p>
 114                         </li>
 115
 116                         <li>
 117                                 <div class='defaultgreen'>
 118                                         <blockquote></blockquote>
 119                                         <div class='test default required'></div>
 120                                 </div>
 121
 122                                 <pre>div :first-child {
 123 }
 124
 125 &lt;div&gt;
 126    &lt;blockquote&gt;&lt;/blockquote&gt;
 127    &lt;div&gt;&lt;/div&gt;
 128 &lt;/div&gt;</pre>
 129
 130                                 <p>
 131                                         The CSS selector should not match the inner div element, because it is the second child of the outer div element
 132                                 </p>
 133                         </li>
 134
 135                         <li>
 136                                 <div class='defaultred'>
 137                                         <div id='insertBefore1'></div>
 138                                 </div>
 139
 140                                 <script type="text/javascript">
 141                                 <!--
 142
 143                                         var ib = document.getElementById('insertBefore1');
 144                                         var el = document.createElement("div");
 145                                         el.className = 'test';
 146                                         ib.parentNode.insertBefore(el, ib);
 147
 148
 149                                 //-->
 150                                 </script>
 151
 152                                 <pre>div :first-child {
 153 }
 154
 155 &lt;div&gt;
 156    &lt;div id='insertBefore'&gt;&lt;/div&gt;
 157 &lt;/div&gt;
 158
 159 var ib = document.getElementById('insertBefore');
 160 ib.parentElement.insertBefore(document.createElement("div"), ib);</pre>
 161
 162                                 <p>
 163                                         The CSS selector should match the div element that is inserted by the Javascript code.
 164                                 </p>
 165                         </li>
 166
 167                         <li>
 168                                 <div class='defaultgreen'>
 169                                         <div id='insertBefore2' class='test default'></div>
 170                                 </div>
 171
 172                                 <script type="text/javascript">
 173                                 <!--
 174
 175                                         var ib = document.getElementById('insertBefore2');
 176                                         ib.parentNode.insertBefore(document.createElement("div"), ib);
 177
 178                                 //-->
 179                                 </script>
 180
 181                                 <pre>div :first-child {
 182 }
 183
 184 &lt;div&gt;
 185    &lt;div id='insertBefore'&gt;&lt;/div&gt;
 186 &lt;/div&gt;
 187
 188 var ib = document.getElementById('insertBefore');
 189 ib.parentElement.insertBefore(document.createElement("div"), ib);</pre>
 190
 191                                 <p>
 192                                         The original div element should not be a match for the :first-child selector.
 193                                 </p>
 194                         </li>
 195                 </ol>
 196         </body>
 197 </html>