display-contents-generated-content.html (7806B)
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>