mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 17:55:07 +02:00
8654e2caf4
Fixes the selection rect on the title text of https://modern-css.com/ being misaligned with the actual characters.
31 lines
727 B
HTML
31 lines
727 B
HTML
<!DOCTYPE html>
|
|
<script src="include.js"></script>
|
|
<style>
|
|
p {
|
|
font-size: 48px;
|
|
letter-spacing: -.045em;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
<p>Stop writing CSS</p>
|
|
<script>
|
|
test(() => {
|
|
const p = document.querySelector("p");
|
|
const text = p.firstChild;
|
|
|
|
function rangeWidth(start, end) {
|
|
var range = document.createRange();
|
|
range.setStart(text, start);
|
|
range.setEnd(text, end);
|
|
return range.getBoundingClientRect().width;
|
|
}
|
|
|
|
var fullWidth = rangeWidth(0, text.length);
|
|
var firstHalf = rangeWidth(0, 8);
|
|
var secondHalf = rangeWidth(8, text.length);
|
|
|
|
println(`firstHalf + secondHalf: ${firstHalf + secondHalf}`);
|
|
println(`fullWidth: ${fullWidth}`);
|
|
});
|
|
</script>
|