| pdr | 004c7b47 | 2015-12-16 18:59:39 | [diff] [blame] | 1 | <!DOCTYPE HTML> |
| Stephen Chenney | cd1eeb50 | 2017-08-18 19:15:10 | [diff] [blame] | 2 | <script src="../resources/testharness.js"></script> |
| 3 | <script src="../resources/testharnessreport.js"></script> |
| pdr | 004c7b47 | 2015-12-16 18:59:39 | [diff] [blame] | 4 | <script src="../resources/ahem.js"></script> |
| pdr | 004c7b47 | 2015-12-16 18:59:39 | [diff] [blame] | 5 | <style> |
| 6 | #referenceClipPath { |
| 7 | -webkit-clip-path: url(#referenceClipPathTopLeft); |
| 8 | clip-path: url(#referenceClipPathTopLeft); |
| 9 | font-size: 100px; |
| 10 | font-family: Ahem; |
| 11 | color: blue; |
| 12 | } |
| 13 | #referenceClipPath:hover { |
| 14 | color: green; |
| 15 | } |
| 16 | #shapeClipPath { |
| 17 | -webkit-clip-path: polygon(0% 0%, 100% 100%, 100% 0%); |
| 18 | clip-path: polygon(0% 0%, 100% 100%, 100% 0%); |
| 19 | font-size: 100px; |
| 20 | font-family: Ahem; |
| 21 | color: purple; |
| 22 | } |
| 23 | #shapeClipPath:hover { |
| 24 | color: orange; |
| 25 | } |
| 26 | </style> |
| Stephen Chenney | cd1eeb50 | 2017-08-18 19:15:10 | [diff] [blame] | 27 | <p>Inline hit testing should not include clipped-out regions.</p> |
| 28 | <svg width="0" height="0"> |
| 29 | <defs> |
| 30 | <clipPath id="referenceClipPathTopLeft" clipPathUnits="objectBoundingBox"> |
| 31 | <path id="path" d="M 0 0 L 100 100 L 100 0Z" /> |
| 32 | </clipPath> |
| 33 | </defs> |
| 34 | </svg> |
| 35 | <span id="referenceClipPath">a</span> |
| 36 | <span id="shapeClipPath">a</span> |
| 37 | <div id="console"></div> |
| 38 | <script> |
| 39 | test(function(t) |
| 40 | { |
| 41 | // Check that a reference clip path affects hit testing for inlines. |
| 42 | // (25,75) is outside the triangular clip path, (75,25) is inside it. |
| 43 | var referenceClipPathRect = referenceClipPath.getBoundingClientRect(); |
| 44 | assert_not_equals(document.elementFromPoint(referenceClipPathRect.left + 25, referenceClipPathRect.top + 75).id, "referenceClipPath"); |
| 45 | assert_equals(document.elementFromPoint(referenceClipPathRect.left + 75, referenceClipPathRect.top + 25).id, "referenceClipPath"); |
| 46 | |
| 47 | // Check that a shape clip path affects hit testing for inlines. |
| 48 | // (25,75) is outside the triangular clip path, (75,25) is inside it. |
| 49 | var shapeClipPathRect = shapeClipPath.getBoundingClientRect(); |
| 50 | assert_not_equals(document.elementFromPoint(shapeClipPathRect.left + 25, shapeClipPathRect.top + 75).id, "shapeClipPath"); |
| 51 | assert_equals(document.elementFromPoint(shapeClipPathRect.left + 75, shapeClipPathRect.top + 25).id, "shapeClipPath"); |
| 52 | }, "Inline hit testing should not include clipped-out regions."); |
| 53 | </script> |
