popover-hidden-display.html (1221B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel=author href="mailto:masonf@chromium.org"> 4 <link rel=help href="https://open-ui.org/components/popover.research.explainer"> 5 <link rel=help href="https://html.spec.whatwg.org/multipage/popover.html"> 6 <link rel=match href="popover-hidden-display-ref.html"> 7 <meta name=fuzzy content="0-1;0-15"> 8 9 <div class=nottoplayer popover >This content should be visible and green</div> 10 <div class=nottoplayer popover=invalid style="top:100px;">This content should be visible and green</div> 11 <div class=toplayer popover style="top:200px;">This content should be visible and green</div> 12 13 <style> 14 [popover] { 15 display: block; /* This should make the popover visible */ 16 top: 0; 17 margin:10px; 18 width: 300px; 19 height: 50px; 20 } 21 [popover].nottoplayer { 22 background: green; 23 } 24 [popover].toplayer { 25 background: red; 26 } 27 [popover].toplayer:popover-open { 28 background: green; 29 } 30 [popover].nottoplayer:popover-open { 31 background: red; 32 } 33 </style> 34 <script> 35 const toplayer = document.querySelectorAll('[popover].toplayer'); 36 if (toplayer.length !== 1) 37 document.write('FAIL'); 38 toplayer[0].showPopover(); 39 </script>