Chris Dumez
5076c19ea4
Automatic update from web-platform-tests WebKit export of https://bugs.webkit.org/show_bug.cgi?id=311543 (#58999) -- wpt-commits: 8e4077434ba80063f95abdd8bd5c25cb28ac9824 wpt-pr: 58999
59 lines
2.4 KiB
HTML
59 lines
2.4 KiB
HTML
<!doctype html>
|
||
<meta charset="utf-8">
|
||
<title>caretPositionFromPoint in flex/grid containers with tall children</title>
|
||
<link rel="help" href="https://drafts.csswg.org/cssom-view-1/#dom-document-caretpositionfrompoint">
|
||
<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>
|