layout/reftests/css-display/display-contents-state-change.html

   1 <!DOCTYPE html>
   2 <meta charset="utf-8">
   3 <title>CSS display: State changes are handled correctly for display: contents children</title>
   4 <link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
   5 <link rel="author" name="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
   6 <link rel="match" href="display-contents-state-change-ref.html">
   7 <style>
   8 :focus-within .contents {
   9   color: green;
  10 }
  11 .contents {
  12   display: contents;
  13   border: 10px solid red;
  14   color: red;
  15 }
  16 input {
  17   position: absolute;
  18   left: -9999px;
  19   top: -9999px;
  20 }
  21 </style>
  22 <div>
  23   <input type="text">
  24   <div class="contents">This text should be green, there should be no red border at any time.</div>
  25 </div>
  26 <script>
  27 onload = function() {
  28   document.querySelector('input').focus();
  29 }
  30 </script>