GeezerVisonThe World Wide Web, restored to 800 pixels of glory. |
| Home|About|Gaming cabinet|Archives|How it works|Starter sites |
GeezerVison is showing github.com — wpt/css/selectors/open-pseudo.html at master · web-platform-tests/wpt Expand file tree/ Copy pathopen-pseudo.htmlMore file actions 89 lines (75 loc) · 3.26 KB / Copy pathopen-pseudo.htmlFile metadata and controls89 lines (75 loc) · 3.26 KB 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 <!DOCTYPE html> <link rel=help href="https://drafts.csswg.org/selectors-4/#open-state"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/resources/testdriver.js"></script> <script src="/resources/testdriver-vendor.js"></script> <style> dialog:open + #afterdialog, details:open + #afterdetails, select:open + #afterselect { will-change: text-decoration; } </style> <dialog>dialog</dialog> <p id="afterdialog"></p> <details>details</details> <p id="afterdetails"></p> <select> <option>one</option> </select> <p id="afterselect"></p> <script> test(() => { const dialog = document.querySelector('dialog'); const after = document.getElementById("afterdialog"); assert_false(dialog.matches(':open'), ':open should not match when the dialog is closed.'); assert_equals(getComputedStyle(after).willChange, "auto", ":open style should not be applied when the dialog is closed"); dialog.show(); assert_true(dialog.matches(':open'), ':open should match after dialog.show().'); assert_equals(getComputedStyle(after).willChange, "text-decoration", ":open style should be applied after dialog.show()"); dialog.close(); assert_equals(getComputedStyle(after).willChange, "auto", ":open style should not be applied when the dialog is closed (2)"); dialog.showModal(); assert_true(dialog.matches(':open'), ':open should match after dialog.showModal().'); assert_equals(getComputedStyle(after).willChange, "text-decoration", ":open style should be applied after dialog.showModal()"); dialog.close(); assert_equals(getComputedStyle(after).willChange, "auto", ":open style should not be applied when the dialog is closed (3)"); }, 'The dialog element should support :open.'); test(() => { const details = document.querySelector('details'); const after = document.getElementById("afterdetails"); assert_false(details.matches(':open'), ':open should not match when the details is closed.'); assert_equals(getComputedStyle(after).willChange, "auto", ":open style should not be applied when the details is closed"); details.open = true; assert_true(details.matches(':open'), ':open should match when the details is open.'); assert_equals(getComputedStyle(after).willChange, "text-decoration", ":open style should be applied when the details is open"); }, 'The details element should support :open.'); promise_test(async () => { const select = document.querySelector('select'); const after = document.getElementById("afterselect"); assert_false(select.matches(':open'), ':open should not match when the select is closed.'); assert_equals(getComputedStyle(after).willChange, "auto", ":open style should not be applied when the select is closed"); await test_driver.click(select); await new Promise(requestAnimationFrame); assert_true(select.matches(':open'), ':open should match when the select is open.'); assert_equals(getComputedStyle(after).willChange, "text-decoration", ":open style should be applied when the select is open"); }, 'The select element should support :open.'); </script> |
| You are visitor 01402503 — GeezerVison does not store the pages you look up. Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required. |