display-contents-fieldset-002-ref.html (2227B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1140160"> 4 <style> 5 fieldset { padding:0; } 6 span { display:block; width:10px; height:10px; background:lime; } 7 .contents { } 8 legend { border: 1px solid; } 9 .test2 legend { } 10 .test2 legend::after, .test3 legend::after { content:"legend"; } 11 .test2 legend.static, .test3 legend.static { display:block; } 12 .test2 legend.static::before, .test3 legend.static::before { content:"static "; } 13 .test2 legend.static::before { content:"static "; } 14 .after::after { content:"::after"; } 15 .before::before { content:"::before"; } 16 .nb legend.static { border: 1px solid; } 17 .nb legend { border-style:none; } 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><span></span></fieldset> 27 <fieldset><span></span></fieldset> 28 <fieldset><span></span></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"><legend class="static"></legend></fieldset> 34 <fieldset class="test2"></fieldset> 35 <fieldset class="test3"></fieldset> 36 <fieldset class="test2"><legend class="static"></legend></fieldset> 37 <fieldset class="test3"><legend class="static"></legend></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'); 46 for (i=0; i < tests.length; ++i) { 47 test = tests[i]; 48 let span = document.createElement('dummy-inline'); 49 span.innerHTML = "legend"; 50 test.appendChild(span); 51 } 52 53 var tests = document.querySelectorAll('.test3'); 54 for (i=0; i < tests.length; ++i) { 55 test = tests[i]; 56 test.appendChild(document.createElement('legend')); 57 } 58 </script> 59 </body> 60 </html>