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