| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <link rel=author href="mailto:masonf@chromium.org"> |
| <link rel=help href="https://open-ui.org/components/popup.research.explainer"> |
| <link rel=match href="popup-hidden-display-ref.tentative.html"> |
| |
| <div class=nottoplayer popup >This content should be visible and green</div> |
| <div class=nottoplayer popup=invalid style="top:100px;">This content should be visible and green</div> |
| <div class=toplayer popup style="top:200px;">This content should be visible and green</div> |
| |
| <style> |
| [popup] { |
| display: block; /* This should make the popup visible */ |
| top: 0; |
| margin:10px; |
| width: 300px; |
| height: 50px; |
| } |
| [popup].nottoplayer { |
| background: green; |
| } |
| [popup].toplayer { |
| background: red; |
| } |
| [popup].toplayer:open { |
| background: green; |
| } |
| [popup].nottoplayer:open { |
| background: red; |
| } |
| </style> |
| <script> |
| const toplayer = document.querySelectorAll('[popup].toplayer'); |
| if (toplayer.length !== 1) |
| document.write('FAIL'); |
| toplayer[0].showPopUp(); |
| </script> |
