display-contents-generated-content-2.html (8509B)
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 setup() { 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 98 function runTest() { 99 var doc = document; 100 var win = window; 101 setup(); 102 var e = doc.querySelectorAll('*'); 103 for (i=0; i < e.length; ++i) { 104 var elm = e[i]; 105 if (win.getComputedStyle(elm).display == 'contents') { 106 var c = elm.childNodes[0]; 107 if (c) { 108 var next = c.nextSibling; 109 elm.removeChild(c); 110 elm.insertBefore(c,next); 111 } 112 var c = elm.childNodes[1]; 113 if (c) { 114 var next = c.nextSibling; 115 elm.removeChild(c); 116 elm.insertBefore(c,next); 117 } 118 var c = elm.childNodes.length ? elm.childNodes[elm.childNodes.length-1] : null; 119 if (c) { 120 elm.removeChild(c); 121 elm.appendChild(c); 122 } 123 } 124 } 125 126 document.documentElement.className = ''; 127 } 128 129 </script> 130 </head> 131 <body onload="runTest()"> 132 133 <div class="test"><span>A a</span></div> 134 <div class="test"><span class="t1">t1</span></div> 135 <div class="test"><span class="t2">t2</span></div> 136 <div class="contents before">1<span>B b</span>2</div> 137 <div class="contents after">1<span>C c</span>2</div> 138 <div class="contents before after">1<span>D d</span>2</div> 139 <div class="contents before">1<span class="t5">B b</span>2</div> 140 <div class="contents after">1<span class="t6">C c</span>2</div> 141 <div class="contents before after">1<span class="t7">D d</span>2</div> 142 143 <div class="contents"> 144 <div class="test"><span>span</span></div> 145 <div class="test"><span class="t3">t3</span></div> 146 <div class="test"><span class="t4">t4</span></div> 147 <div class="contents before">1<span>span</span>2</div> 148 <div class="contents after">1<span>span</span>2</div> 149 <div class="contents before after">1<span>span</span>2</div> 150 <div class="contents before">1<span class="t8">span</span>2</div> 151 <div class="contents after">1<span class="t9">span</span>2</div> 152 <div class="contents before after">1<span class="t10">span</span>2</div> 153 <div class="contents before">1<span class="t11">span</span>2</div> 154 <div class="contents after">1<span class="t12">span</span>2</div> 155 <div class="contents before after">1<span class="t13">span</span>2</div> 156 </div> 157 158 <div class="contents"><span class="s1"> 159 <div class="test"><span>span</span></div> 160 <div class="contents before">1<span>span</span>2</div> 161 <div class="contents after">1<span>span</span>2</div> 162 <div class="contents before after">1<span>span</span>2</div> 163 </span></div> 164 165 <div class="contents"><span class="s2"> 166 <div class="test"><span>span</span></div> 167 <div class="contents before">1<span>span</span>2</div> 168 <div class="contents after">1<span>span</span>2</div> 169 <div class="contents before after">1<span>span</span>2</div> 170 </span></div> 171 172 <div class="contents"><span class="s3"> 173 <div class="test"><span>span</span></div> 174 <div class="contents before">1<span>span</span>2</div> 175 <div class="contents after">1<span>span</span>2</div> 176 <div class="contents before after">1<span>span</span>2</div> 177 </span></div> 178 179 <div class="contents"><span class="s4"> 180 <div class="test"><span>span</span></div> 181 <div class="contents before">1<span>span</span>2</div> 182 <div class="contents after">1<span>span</span>2</div> 183 <div class="contents before after">1<span>span</span>2</div> 184 </span></div> 185 186 <div class="contents"><span class="s5"> 187 <div class="test"><span>span</span></div> 188 <div class="contents before">1<span>span</span>2</div> 189 <div class="contents after">1<span>span</span>2</div> 190 <div class="contents before after">1<span>span</span>2</div> 191 </span></div> 192 193 <div class="contents"><span class="s6"> 194 <div class="test"><span>span</span></div> 195 <div class="contents before">1<span>span</span>2</div> 196 <div class="contents after">1<span>span</span>2</div> 197 <div class="contents before after">1<span>span</span>2</div> 198 </span></div> 199 200 <div class="contents before"><span class="s7"> 201 <div class="contents before">1<span>span</span>2</div> 202 <div class="contents after">1<span>span</span>2</div> 203 <div class="contents before after">1<span>span</span>2</div> 204 </span></div> 205 206 <div class="contents after"><span class="s8"> 207 <div class="contents before">1<span>span</span>2</div> 208 <div class="contents after">1<span>span</span>2</div> 209 <div class="contents before after">1<span>span</span>2</div> 210 </span></div> 211 212 <div class="contents"><span class="s9"> 213 <div class="contents before">1<span>span</span>2</div> 214 <div class="contents after">1<span>span</span>2</div> 215 <div class="contents before after">1<span>span</span>2</div> 216 </span></div> 217 218 <div class="contents before after"><span class="s10"> 219 <div class="test"><span>span</span></div> 220 <div class="contents before">1<span>span</span>2</div> 221 <div class="contents after">1<span>span</span>2</div> 222 <div class="contents before after">1<span>span</span>2</div> 223 </span></div> 224 225 <div class="contents before"><span class="s11"> 226 <div class="test"><span>span</span></div> 227 <div class="contents before">1<span>span</span>2</div> 228 <div class="contents after">1<span>span</span>2</div> 229 <div class="contents before after">1<span>span</span>2</div> 230 </span></div> 231 232 <div class="contents after"><span class="s12"> 233 <div class="test"><span>span</span></div> 234 <div class="contents before">1<span>span</span>2</div> 235 <div class="contents after">1<span>span</span>2</div> 236 <div class="contents before after">1<span>span</span>2</div> 237 </span></div> 238 239 </body> 240 </html>