| <!DOCTYPE html> |
| <title>Selection on element with clip-path</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| body { |
| width: 600px; |
| font: 18px/1 Ahem; |
| } |
| |
| #triangleLeft { |
| position: absolute; |
| top: 0px; |
| left: 0px; |
| width: 400px; |
| height: 400px; |
| background: green; |
| clip-path: polygon(0 0, 100% 50%, 0 100%); |
| } |
| </style> |
| |
| <div id="triangleLeft">Although the Culture was originated by humanoid species, subsequent interactions with other civilizations have introduced many non-humanoid species into the Culture (including some former enemy civilizations), though the majority of the biological Culture is still pan-human. Little uniformity exists in the Culture, and its citizens are such by choice, free to change physical form and even species (though some stranger biological conversions are irreversible, and conversion from biological to artificial sentience is considered to be what is known as an Unusual Life Choice). All members are also free to join, leave, and rejoin, or indeed declare themselves to be, say, 80% Culture.</div> |
| |
| <script> |
| function drag(from, to) { |
| assert_own_property(window, 'chrome'); |
| assert_own_property(window.chrome, 'gpuBenchmarking'); |
| return new Promise((resolve) => { |
| chrome.gpuBenchmarking.pointerActionSequence( |
| [{ |
| source: 'mouse', |
| actions: [ |
| {name: 'pointerMove', x: from.x, y: from.y}, |
| {name: 'pointerDown', x: from.x, y: from.y, button: 'left'}, |
| {name: 'pointerMove', x: to.x, y: to.y}, |
| {name: 'pointerUp', button: 'left'} |
| ] |
| }], |
| resolve); |
| }); |
| } |
| |
| promise_test(function() { |
| var sel = window.getSelection(); |
| sel.removeAllRanges(); |
| // select part of the polygon, not the text |
| return drag({ x: 180, y: 40 }, { x: 200, y: 40 }).then(() => { |
| assert_equals(sel.toString(), ""); |
| }); |
| }, document.title + ', outside clip / inside unclipped element'); |
| |
| promise_test(function() { |
| var sel = window.getSelection(); |
| sel.removeAllRanges(); |
| // select 'Little' using select drag |
| return drag({ x: 0, y: 260 }, { x: 100, y: 260 }).then(() => { |
| // verify that 'Little' was selected |
| assert_equals(sel.toString(), "Little"); |
| }); |
| }, document.title + ', inside clip / inside unclipped element'); |
| </script> |
