display-contents-state-change.html (791B)
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>