display-contents-fieldset-002.html (2392B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1140160"> 4 <link rel="help" href="https://drafts.csswg.org/css-display/#box-generation"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1140160"> 6 <link rel="match" href="display-contents-fieldset-002-ref.html"> 7 <style> 8 fieldset { padding:0; } 9 span { display:block; width:10px; height:10px; background:lime; } 10 .contents { display: contents; } 11 legend { border: 1px solid; } 12 .test2 legend { display:contents; } 13 .test2 legend::after, .test3 legend::after { content:"legend"; } 14 .test2 legend.static, .test3 legend.static { display:block; } 15 .test2 legend.static::before, .test3 legend.static::before { content:"static "; } 16 .after::after { content:"::after"; } 17 .before::before { content:"::before"; } 18 </style> 19 </head> 20 <body> 21 <fieldset><div class="test contents"></div></fieldset> 22 <fieldset><div class="test contents">x</div></fieldset> 23 <fieldset><div class="test contents after"></div></fieldset> 24 <fieldset><div class="test contents before"></div></fieldset> 25 <fieldset><div class="test contents before after"></div></fieldset> 26 <fieldset><legend class="test contents"></legend></fieldset> 27 <fieldset><div class="contents"><legend class="test contents"></legend></div></fieldset> 28 <fieldset><legend class="contents"><div class="test contents"></div></legend></fieldset> 29 <fieldset class="test2"></fieldset> 30 <fieldset class="test2 after"></fieldset> 31 <fieldset class="test2"><legend class="static"></legend></fieldset> 32 <fieldset class="test2"><legend class="static contents"></legend></fieldset> 33 <fieldset class="test2"><div class="contents"><legend class="static"></legend></div></fieldset> 34 <fieldset><div class="test2 contents"></div></fieldset> 35 <fieldset><div class="test3 contents"></div></fieldset> 36 <fieldset><div class="test2 contents"><legend class="static"></legend></div></fieldset> 37 <fieldset><div class="test3 contents"><legend class="static"></legend></div></fieldset> 38 <script> 39 document.body.offsetHeight; 40 var tests = document.querySelectorAll('.test'); 41 for (i=0; i < tests.length; ++i) { 42 test = tests[i]; 43 test.appendChild(document.createElement('span')); 44 } 45 var tests = document.querySelectorAll('.test2,.test3'); 46 for (i=0; i < tests.length; ++i) { 47 test = tests[i]; 48 test.appendChild(document.createElement('legend')); 49 } 50 </script> 51 </body> 52 </html>