[CSS Shapes] Can't select content within the area of the floating box when clip-path is applied

LayoutTests/fast/masking/clip-path-selection.html

+<style>
+body {
+    width: 600px;
+    font: 18px/1 Ahem;
+}
+
+#triangleLeft {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 400px;
+    height: 400px;
+    background: green;
+    -webkit-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 src="../../resources/js-test.js"></script>
+<script>
+    var sel = window.getSelection();
+    sel.removeAllRanges();
+    // select part of the polygon, not the text
+    eventSender.mouseMoveTo(180, 40);
+    eventSender.mouseDown();
+    eventSender.mouseMoveTo(200, 40);
+    eventSender.mouseUp();
+    shouldBe('sel.toString()', '""');
+
+    sel.removeAllRanges();
+    // select 'Little' using select drag
+    eventSender.mouseMoveTo(0, 260);
+    eventSender.mouseDown();
+    eventSender.mouseMoveTo(100, 260);
+    eventSender.mouseUp();
+    // verify that 'Little' was selected
+    shouldBe('sel.toString()', '"Little"');
+</script>