content-none-select-1.html (2598B)
1 <!doctype html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>CSS Content: content:none on SELECT size=1</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964"> 10 <link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none"> 11 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964"> 12 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1979755"> 13 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 14 <meta name="flags" content="ahem"> 15 <meta name="assert" content="content:none should not inhibit the <select> children from having boxes."> 16 <meta name="timeout" content="long"> 17 <link rel="match" href="content-none-select-1-ref.html"> 18 <style> 19 html,body { 20 color:black; background-color:white; font:4px/1 Ahem; padding:0; margin:0; 21 } 22 body { 23 margin-left: 3ch; 24 } 25 * { font:10px/1 Ahem; } 26 .wrapper { 27 display: inline-block; 28 position: relative; 29 height: 2em; 30 width: 5em; 31 border: 1px solid black; 32 margin: 1px; 33 vertical-align: top; 34 } 35 .wrapper > * { 36 content:none; 37 padding:0; margin:0; border:none; 38 } 39 ::marker { content: 'M'; } 40 .after::after { content: 'A'; } 41 .before::before { content: 'B'; } 42 </style> 43 </head> 44 <body> 45 46 <script> 47 document.body.style.display = 'none'; 48 49 const display = [ 50 "display:block", "display:inline", "display:ruby", "display:none", "display:grid", 51 "display:flex", "display:table", "display:list-item", "display:contents", 52 "columns:2", 53 ]; 54 const overflow = [ 55 "", "overflow:scroll", "overflow:clip", 56 ]; 57 const position = [ 58 "", "position:absolute", 59 ]; 60 const tags = [ 61 "select", 62 ]; 63 const classes = [ 64 "", "after", "before", 65 ]; 66 const body = document.body; 67 for (var d of display) { 68 for (var o of overflow) { 69 for (var p of position) { 70 for (var c of classes) { 71 for (var t of tags) { 72 let wrapper = document.createElement("div"); 73 wrapper.className = "wrapper"; 74 let elem = document.createElement(t); 75 elem.style = d + ';' + o + ';' + p + ';' 76 elem.className = c; 77 let option = document.createElement("option"); 78 option.append(document.createTextNode("X")); 79 elem.append(option); 80 wrapper.appendChild(elem); 81 body.append(wrapper); 82 } 83 } 84 } 85 } 86 } 87 88 document.body.style.display = ''; 89 </script> 90 </body> 91 </html>