display-contents-generated-content-ref.html (4131B)
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"> 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 15 .test { 16 display: inline; 17 content: "content"; 18 color: lime; 19 } 20 .contents { 21 display: inline; 22 color: green; 23 } 24 .before::before { 25 display: inline; 26 content:"before"; 27 } 28 .after::after { 29 display: inline; 30 content:"after"; 31 } 32 </style> 33 </head> 34 <body> 35 36 <div class="test"><span>A a</span></div> 37 <div class="test"><span class="contents">t1</span></div> 38 <div class="test"></div> 39 <div class="contents before">1<span>B b</span>2</div> 40 <div class="contents after">1<span>C c</span>2</div> 41 <div class="contents before after">1<span>D d</span>2</div> 42 <div class="contents before">1<span class="t5">B b</span>2</div> 43 <div class="contents after">12</div> 44 <div class="contents before after">1<span class="t7">D d</span>2</div> 45 46 <div class="contents"> 47 <div class="test"><span>span</span></div> 48 <div class="test"><span class="contents">t3</span></div> 49 <div class="test"></div> 50 <div class="contents before">1<span>span</span>2</div> 51 <div class="contents after">1<span>span</span>2</div> 52 <div class="contents before after">1<span>span</span>2</div> 53 <div class="contents before">12</div> 54 <div class="contents after">1<span class="t9">span</span>2</div> 55 <div class="contents before after">12</div> 56 <div class="contents before">1<span class="t11">span</span>2</div> 57 <div class="contents after">12</div> 58 <div class="contents before after">1<span class="t13">span</span>2</div> 59 </div> 60 61 <div class="contents"><span class="s1"> 62 <div class="test"><span>span</span></div> 63 <div class="contents before">1<span>span</span>2</div> 64 <div class="contents after">1<span>span</span>2</div> 65 <div class="contents before after">1<span>span</span>2</div> 66 </span></div> 67 68 <div class="contents"><span class="s2"> 69 <div class="test"><span>span</span></div> 70 <div class="contents before">1<span>span</span>2</div> 71 <div class="contents after">1<span>span</span>2</div> 72 <div class="contents before after">1<span>span</span>2</div> 73 </span></div> 74 75 <div class="contents"><span class="s3"> 76 <div class="test"><span>span</span></div> 77 <div class="contents before">1<span>span</span>2</div> 78 <div class="contents after">1<span>span</span>2</div> 79 <div class="contents before after">1<span>span</span>2</div> 80 </span></div> 81 82 <div class="contents"><span class="s4"> 83 <div class="test"><span>span</span></div> 84 <div class="contents before">1<span>span</span>2</div> 85 <div class="contents after">1<span>span</span>2</div> 86 <div class="contents before after">1<span>span</span>2</div> 87 </span></div> 88 89 <div class="contents"></div> 90 91 <div class="contents"></div> 92 93 <div class="contents before"><span class="s7"> 94 <div class="contents before">1<span>span</span>2</div> 95 <div class="contents after">1<span>span</span>2</div> 96 <div class="contents before after">1<span>span</span>2</div> 97 </span></div> 98 99 <div class="contents after"><span class="s8"> 100 <div class="contents before">1<span>span</span>2</div> 101 <div class="contents after">1<span>span</span>2</div> 102 <div class="contents before after">1<span>span</span>2</div> 103 </span></div> 104 105 <div class="contents"><span class="s9"> 106 <div class="contents before">1<span>span</span>2</div> 107 <div class="contents after">1<span>span</span>2</div> 108 <div class="contents before after">1<span>span</span>2</div> 109 </span></div> 110 111 <div class="contents before after"><span class="s10"> 112 <div class="test"><span>span</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 </span></div> 117 118 <div class="contents before"></div> 119 120 <div class="contents after"></div> 121 122 </body> 123 </html>