mirror of
https://github.com/servo/servo
synced 2026-05-14 10:56:44 +02:00
84 lines
2.4 KiB
HTML
84 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<title>Test elementFromPoint for list-item</title>
|
|
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint">
|
|
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
ul {
|
|
font-size: 10px;
|
|
}
|
|
ul.inside {
|
|
list-style-position: inside;
|
|
}
|
|
.image {
|
|
list-style-image: url(../../images/green-16x16.png);
|
|
}
|
|
.debug-marker {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
outline: 2px solid red;
|
|
}
|
|
</style>
|
|
<body>
|
|
<ul>
|
|
<li>Outside 1</li>
|
|
<li>Outside 2</li>
|
|
<li>Outside 3</li>
|
|
<li class="image">Image Outside 1</li>
|
|
<li class="image">Image Outside 2</li>
|
|
</ul>
|
|
<ul class="inside">
|
|
<li>Inside 1</li>
|
|
<li>Inside 2</li>
|
|
<li>Inside 3</li>
|
|
<li class="image">Image Inside 1</li>
|
|
<li class="image">Image Inside 2</li>
|
|
</ul>
|
|
<script>
|
|
setup({explicit_done:true});
|
|
window.onload = function() {
|
|
for (let li of document.getElementsByTagName('li')) {
|
|
test(() => {
|
|
let bounds = li.getBoundingClientRect();
|
|
let style = window.getComputedStyle(li);
|
|
let y = (bounds.top + bounds.bottom) / 2;
|
|
if (style.listStylePosition === 'inside') {
|
|
// Inside markers are normal inline boxes.
|
|
// It is safe to assume "left + 1" is in the box.
|
|
let x = bounds.left + 1;
|
|
addDebugMarker(x, y);
|
|
let result = document.elementFromPoint(x, y);
|
|
assert_equals(result, li);
|
|
} else {
|
|
// The spec does not define outside marker position.
|
|
// This code assumes that the marker is within "left - 40" to "left - 1".
|
|
// This is heuristic, but all browsers seem to pass with this method.
|
|
let result = null;
|
|
for (let x = bounds.left - 40; x < bounds.left; x++) {
|
|
result = document.elementFromPoint(x, y);
|
|
if (result === li) {
|
|
addDebugMarker(x, y);
|
|
break;
|
|
}
|
|
}
|
|
assert_equals(result, li);
|
|
}
|
|
}, `<li>${li.textContent}</li>`);
|
|
}
|
|
done();
|
|
};
|
|
|
|
// Show a marker for the debugging purposes, in case the heuristic doesn't apply.
|
|
function addDebugMarker(x, y) {
|
|
let div = document.createElement('div');
|
|
div.className = 'debug-marker';
|
|
let style = div.style;
|
|
style.left = x + 'px';
|
|
style.top = y + 'px';
|
|
document.body.appendChild(div);
|
|
}
|
|
</script>
|
|
</body>
|