layout/reftests/css-display/display-contents-generated-content.html

   1 <!DOCTYPE html>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <html lang="en-US" class="reftest-wait">
   7 <head>
   8   <meta charset="UTF-8">
   9   <title>CSS Test: CSS display:contents; generated content</title>
  10   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
  11   <link rel="help" href="http://dev.w3.org/csswg/css-display">
  12 <style type="text/css">
  13 body,html { color:black; background-color:white; }
  14 div { display:inline; }
  15
  16 .test {
  17   display: contents;
  18   content: "content";
  19   color: lime;
  20 }
  21 .contents {
  22   display: contents;
  23   color: green;
  24 }
  25 .s1 {display: none;}
  26 .s2 {display: none;}
  27 .s3 {display: contents;}
  28 .s5 {display: contents;}
  29 .s7 {display: none;}
  30 .s8 {display: none;}
  31 .s9 {display: contents;}
  32 .s11 {display: contents;}
  33 .before::before {
  34   display: contents;
  35   content:"before";
  36 }
  37 .after::after {
  38   display: contents;
  39   content:"after";
  40 }
  41 </style>
  42 <script>
  43
  44 function runTest() {
  45   document.body.offsetHeight;
  46   document.querySelector('.t1').className = 'contents';
  47   document.body.offsetHeight;
  48   document.querySelector('.t2').style.display = 'none';
  49   document.body.offsetHeight;
  50   document.querySelector('.t3').className = 'contents';
  51   document.body.offsetHeight;
  52   document.querySelector('.t4').style.display = 'none';
  53   document.body.offsetHeight;
  54   document.querySelector('.t5').className = 'contents';
  55   document.body.offsetHeight;
  56   document.querySelector('.t6').style.display = 'none';
  57   document.body.offsetHeight;
  58   document.querySelector('.t7').className = 'contents';
  59   document.body.offsetHeight;
  60   document.querySelector('.t8').style.display = 'none';
  61   document.body.offsetHeight;
  62   document.querySelector('.t9').className = 'contents';
  63   document.body.offsetHeight;
  64   document.querySelector('.t10').style.display = 'none';
  65   document.body.offsetHeight;
  66   document.querySelector('.t11').className = 'contents';
  67   document.body.offsetHeight;
  68   document.querySelector('.t12').style.display = 'none';
  69   document.body.offsetHeight;
  70   document.querySelector('.t13').className = 'contents';
  71   document.body.offsetHeight;
  72   document.querySelector('.s1').className = 'contents';
  73   document.body.offsetHeight;
  74   document.querySelector('.s2').style.display = 'inline';
  75   document.body.offsetHeight;
  76   document.querySelector('.s3').style.display = 'normal';
  77   document.body.offsetHeight;
  78   document.querySelector('.s4').className = 'contents';
  79   document.body.offsetHeight;
  80   document.querySelector('.s5').style.display = 'none';
  81   document.body.offsetHeight;
  82   document.querySelector('.s6').style.display = 'none';
  83   document.body.offsetHeight;
  84   document.querySelector('.s7').className = 'contents';
  85   document.body.offsetHeight;
  86   document.querySelector('.s8').style.display = 'inline';
  87   document.body.offsetHeight;
  88   document.querySelector('.s9').style.display = 'normal';
  89   document.body.offsetHeight;
  90   document.querySelector('.s10').className = 'contents';
  91   document.body.offsetHeight;
  92   document.querySelector('.s11').style.display = 'none';
  93   document.body.offsetHeight;
  94   document.querySelector('.s12').style.display = 'none';
  95   document.body.offsetHeight;
  96
  97   document.documentElement.className = '';
  98 }
  99
 100 </script>
 101 </head>
 102 <body onload="runTest()">
 103
 104 <div class="test"><span>A a</span></div>
 105 <div class="test"><span class="t1">t1</span></div>
 106 <div class="test"><span class="t2">t2</span></div>
 107 <div class="contents before">1<span>B b</span>2</div>
 108 <div class="contents after">1<span>C c</span>2</div>
 109 <div class="contents before after">1<span>D d</span>2</div>
 110 <div class="contents before">1<span class="t5">B b</span>2</div>
 111 <div class="contents after">1<span class="t6">C c</span>2</div>
 112 <div class="contents before after">1<span class="t7">D d</span>2</div>
 113
 114 <div class="contents">
 115   <div class="test"><span>span</span></div>
 116   <div class="test"><span class="t3">t3</span></div>
 117   <div class="test"><span class="t4">t4</span></div>
 118   <div class="contents before">1<span>span</span>2</div>
 119   <div class="contents after">1<span>span</span>2</div>
 120   <div class="contents before after">1<span>span</span>2</div>
 121   <div class="contents before">1<span class="t8">span</span>2</div>
 122   <div class="contents after">1<span class="t9">span</span>2</div>
 123   <div class="contents before after">1<span class="t10">span</span>2</div>
 124   <div class="contents before">1<span class="t11">span</span>2</div>
 125   <div class="contents after">1<span class="t12">span</span>2</div>
 126   <div class="contents before after">1<span class="t13">span</span>2</div>
 127 </div>
 128
 129 <div class="contents"><span class="s1">
 130   <div class="test"><span>span</span></div>
 131   <div class="contents before">1<span>span</span>2</div>
 132   <div class="contents after">1<span>span</span>2</div>
 133   <div class="contents before after">1<span>span</span>2</div>
 134 </span></div>
 135
 136 <div class="contents"><span class="s2">
 137   <div class="test"><span>span</span></div>
 138   <div class="contents before">1<span>span</span>2</div>
 139   <div class="contents after">1<span>span</span>2</div>
 140   <div class="contents before after">1<span>span</span>2</div>
 141 </span></div>
 142
 143 <div class="contents"><span class="s3">
 144   <div class="test"><span>span</span></div>
 145   <div class="contents before">1<span>span</span>2</div>
 146   <div class="contents after">1<span>span</span>2</div>
 147   <div class="contents before after">1<span>span</span>2</div>
 148 </span></div>
 149
 150 <div class="contents"><span class="s4">
 151   <div class="test"><span>span</span></div>
 152   <div class="contents before">1<span>span</span>2</div>
 153   <div class="contents after">1<span>span</span>2</div>
 154   <div class="contents before after">1<span>span</span>2</div>
 155 </span></div>
 156
 157 <div class="contents"><span class="s5">
 158   <div class="test"><span>span</span></div>
 159   <div class="contents before">1<span>span</span>2</div>
 160   <div class="contents after">1<span>span</span>2</div>
 161   <div class="contents before after">1<span>span</span>2</div>
 162 </span></div>
 163
 164 <div class="contents"><span class="s6">
 165   <div class="test"><span>span</span></div>
 166   <div class="contents before">1<span>span</span>2</div>
 167   <div class="contents after">1<span>span</span>2</div>
 168   <div class="contents before after">1<span>span</span>2</div>
 169 </span></div>
 170
 171 <div class="contents before"><span class="s7">
 172   <div class="contents before">1<span>span</span>2</div>
 173   <div class="contents after">1<span>span</span>2</div>
 174   <div class="contents before after">1<span>span</span>2</div>
 175 </span></div>
 176
 177 <div class="contents after"><span class="s8">
 178   <div class="contents before">1<span>span</span>2</div>
 179   <div class="contents after">1<span>span</span>2</div>
 180   <div class="contents before after">1<span>span</span>2</div>
 181 </span></div>
 182
 183 <div class="contents"><span class="s9">
 184   <div class="contents before">1<span>span</span>2</div>
 185   <div class="contents after">1<span>span</span>2</div>
 186   <div class="contents before after">1<span>span</span>2</div>
 187 </span></div>
 188
 189 <div class="contents before after"><span class="s10">
 190   <div class="test"><span>span</span></div>
 191   <div class="contents before">1<span>span</span>2</div>
 192   <div class="contents after">1<span>span</span>2</div>
 193   <div class="contents before after">1<span>span</span>2</div>
 194 </span></div>
 195
 196 <div class="contents before"><span class="s11">
 197   <div class="test"><span>span</span></div>
 198   <div class="contents before">1<span>span</span>2</div>
 199   <div class="contents after">1<span>span</span>2</div>
 200   <div class="contents before after">1<span>span</span>2</div>
 201 </span></div>
 202
 203 <div class="contents after"><span class="s12">
 204   <div class="test"><span>span</span></div>
 205   <div class="contents before">1<span>span</span>2</div>
 206   <div class="contents after">1<span>span</span>2</div>
 207   <div class="contents before after">1<span>span</span>2</div>
 208 </span></div>
 209
 210 </body>
 211 </html>