display-contents-unusual-html-elements-none.html (1022B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Display: display:contents and unusual HTML elements as display:none</title> 4 <link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-display/#unbox-html"> 6 <link rel="match" href="display-contents-pass-ref.html"> 7 <style> 8 /* Disable kerning because kerning may differ for different node tree. */ 9 html { font-kerning: none; font-feature-settings: "kern" off; } 10 body { overflow: hidden } 11 br, wbr, meter, progress, canvas, embed, object, audio, iframe, img, video, 12 input, textarea, select { 13 display: contents; 14 border: 10px solid red; 15 width: 200px; height: 200px; 16 } 17 </style> 18 <p>You should see the word PASS below.</p> 19 <div> 20 <meter></meter> 21 <progress></progress> 22 <canvas></canvas> 23 <embed> 24 <object>FAIL</object> 25 <audio controls></audio> 26 <iframe></iframe> 27 <img> 28 <video></video> 29 <input></input> 30 <textarea></textarea> 31 <select></select> 32 </div> 33 P<br>A<wbr>S<br>S