| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Pseudo-Elements Test: Triple-click</title> |
| <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#treelike"> |
| <link rel="help" href="https://drafts.csswg.org/css-ui/#user-interaction"> |
| <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> |
| <meta name="assert" content="This test checks that there is no crash when triple-clicking a pseudo-element that is destroyed when focused." /> |
| <style> |
| .target { |
| width: max-content; |
| font: 50px/1 Ahem; |
| } |
| [data-pseudo="::marker"]:not(:focus) { |
| display: list-item; |
| list-style-type: 'XX'; |
| direction: rtl; |
| } |
| [data-pseudo="::before"]:not(:focus)::before { |
| display: inline-block; |
| content: 'XX'; |
| } |
| [data-pseudo="::after"]:not(:focus)::after { |
| display: inline-block; |
| content: 'XX'; |
| } |
| </style> |
| <div class="target" data-pseudo="::marker" contenteditable="true"></div> |
| <div class="target" data-pseudo="::before" contenteditable="true"></div> |
| <div class="target" data-pseudo="::after" contenteditable="true"></div> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/user-gesture-utils.js"></script> |
| <script> |
| for (let target of document.querySelectorAll(".target")) { |
| const {pseudo} = target.dataset; |
| test(function(t) { |
| const x = target.offsetLeft + 50; |
| const y = target.offsetTop + target.offsetHeight / 2; |
| |
| // The pseudo-element generates a 100px wide box |
| assert_equals(getComputedStyle(target, pseudo).width, "100px", "initial width"); |
| |
| // Click in the middle of #target |
| simulateUserClick(x, y); |
| |
| // #target is now focused, and the pseudo-element has been destroyed |
| assert_equals(getComputedStyle(target, pseudo).width, "auto", "width after click"); |
| |
| // Triple-click in the same location |
| simulateUserClick(x, y); |
| simulateUserClick(x, y); |
| simulateUserClick(x, y); |
| |
| // We haven't crashed |
| }, pseudo); |
| } |
| </script> |
