Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/cssom/caretPositionFromPoint-in-flex-container.html - WPT Dashboard Interop Dashboard
<!doctype html>
<meta charset="utf-8">
<title>caretPositionFromPoint in flex/grid containers with tall children</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
#container {
display: flex;
flex-direction: column;
width: 200px;
}
/*
* pointer-events:none on the children makes the hit-test return the flex
* container element. The container's positionForPoint must then walk its
* children to find the one closest to the queried point.
*/
.item {
pointer-events: none;
font: 16px/1 Ahem;
}
</style>
<div id="container">
<div id="short" class="item" style="height: 20px">AAA</div>
<div id="tall" class="item" style="height: 300px">BBB</div>
</div>
<script>
test(() => {
const tall = document.getElementById("tall");
const rect = tall.getBoundingClientRect();
// 5 px below #tall's top edge – unambiguously inside #tall.
const pos = document.caretPositionFromPoint(rect.left + 10, rect.top + 5);
assert_not_equals(pos, null, "should return a CaretPosition");
assert_true(tall.contains(pos.offsetNode),
"caret near top of #tall must be inside #tall, not #short");
}, "caretPositionFromPoint just inside a tall flex child resolves to that child");
test(() => {
const tall = document.getElementById("tall");
const rect = tall.getBoundingClientRect();
// 100 px below #tall's top edge – well inside #tall.
const pos = document.caretPositionFromPoint(rect.left + 10, rect.top + 100);
assert_not_equals(pos, null, "should return a CaretPosition");
assert_true(tall.contains(pos.offsetNode),
"caret deep inside #tall must be inside #tall");
}, "caretPositionFromPoint well inside a tall flex child resolves to that child");
test(() => {
const short_ = document.getElementById("short");
const rect = short_.getBoundingClientRect();
// Vertically centred in #short – sanity check.
const pos = document.caretPositionFromPoint(rect.left + 10, rect.top + 10);
assert_not_equals(pos, null, "should return a CaretPosition");
assert_true(short_.contains(pos.offsetNode),
"caret inside #short must be inside #short");
}, "caretPositionFromPoint inside the short flex child resolves correctly");
</script>