<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
span#container {
    display: inline-block; /* clamp the width of the enclosing P to its contents */
}

div#flexbox {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    overflow-y: hidden;
}
</style>
</head>
<body>
<span id="container">
    <div id="flexbox">line one<br>line two<a id="link" href="#" onclick="this.textContent='clicked'">not clicked</a></div>
</span>
<script>
description('Test that links painted after the ellipsis of a flexbox using -webkit-line-clamp is hit-testable.');

var divRect = document.getElementById("flexbox").getBoundingClientRect();
var aRect = document.getElementById("link").getBoundingClientRect();
var clickX = divRect.left + divRect.width - (aRect.width / 2);
var clickY = divRect.top + divRect.height  - (aRect.height / 2);

if (window.eventSender) {
    eventSender.mouseMoveTo(clickX, clickY);
    eventSender.mouseDown();
    eventSender.mouseUp();
}

shouldBeEqualToString("document.getElementsByTagName('a')[0].textContent", "clicked");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>