Blitz - WPT: display-contents-unusual-html-elements-none.html

wpt / css / css-display / display-contents-unusual-html-elements-none.html

/css/css-display/display-contents-unusual-html-elements-none.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Display: display:contents and unusual HTML elements as display:none</title>
<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-display/#unbox-html">
<link rel="match" href="display-contents-pass-ref.html">
<style>
  /* Disable kerning because kerning may differ for different node tree. */
  html { font-kerning: none; font-feature-settings: "kern" off; }
  body { overflow: hidden }
  br, wbr, meter, progress, canvas, embed, object, audio, iframe, img, video,
  input, textarea, select {
    display: contents;
    border: 10px solid red;
    width: 200px; height: 200px;
  }
</style>
<p>You should see the word PASS below.</p>
<div>
  <meter></meter>
  <progress></progress>
  <canvas></canvas>
  <embed>
  <object>FAIL</object>
  <audio controls></audio>
  <iframe></iframe>
  <img>
  <video></video>
  <input></input>
  <textarea></textarea>
  <select></select>
</div>
P<br>A<wbr>S<br>S

/css/css-display/display-contents-pass-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
<style>
/* Disable kerning because kerning may differ for different node tree. */
html { font-kerning: none; font-feature-settings: "kern" off; }
</style>
<p>You should see the word PASS below.</p>
PASS