70 lines
1.6 KiB
HTML
70 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
.top-container {
|
|
padding: 20px;
|
|
margin: 3px;
|
|
}
|
|
|
|
.intermediate-container {
|
|
height: 50px;
|
|
width: 50px;
|
|
clip-path: inset(0);
|
|
background: green;
|
|
}
|
|
|
|
.hittest_candidate {
|
|
height: 20px;
|
|
width: 20px;
|
|
clip-path: inset(0);
|
|
background: blue;
|
|
}
|
|
|
|
iframe {
|
|
width: 200px;
|
|
height: 200px;
|
|
border: none;
|
|
}
|
|
</style>
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText();
|
|
</script>
|
|
<pre id=result>hittest result: </pre>
|
|
|
|
<!-- simple hittest -->
|
|
<div class=top-container>
|
|
<div class=intermediate-container>
|
|
<div class=hittest_candidate id=candidate1></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
result.innerText += "\n" + document.elementFromPoint(candidate1.offsetLeft, candidate1.offsetTop).id;
|
|
</script>
|
|
|
|
<!-- non-top level paint root hittest -->
|
|
<div style="border: 4px solid green; transform: translateZ(0)">
|
|
<div class=top-container>
|
|
<div class=intermediate-container>
|
|
<div class=hittest_candidate id=candidate2></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
result.innerText += "\n" + document.elementFromPoint(candidate2.offsetLeft, candidate2.offsetTop).id;
|
|
</script>
|
|
|
|
<!-- multi-level non-top level paint root hittest -->
|
|
<div style="margin: 4px; border: 1px solid cyan; transform: translateZ(0)">
|
|
<div style="height: 11px;"></div>
|
|
<div style="border: 4px solid green; transform: translateZ(0)">
|
|
<div class=top-container>
|
|
<div class=intermediate-container>
|
|
<div class=hittest_candidate id=candidate3></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
result.innerText += "\n" + document.elementFromPoint(candidate3.offsetLeft, candidate3.offsetTop).id;
|
|
</script>
|