<!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>
const leftButton = 0;
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: leftButton},
          {name: 'pointerMove', x: to.x, y: to.y},
          {name: 'pointerUp', button: leftButton}
        ]
      }],
      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>