Files
ladybird/Tests/LibWeb/Text/input/input-value-does-not-force-layout.html
Jelle Raaijmakers ded42e649b LibWeb: Do not scroll cursor into view on programmatic selection changes
We were mimicking Firefox' behavior that whenever a programmatic change
to an <input>'s or <textarea>'s selection happened, the new selection
focus is brought into view by scrolling. Currently we run a layout
update synchronously for that to make sure we have the fragment's
correct dimensions, which caused a significant performance regression in
Speedometer.

Since this is non-standard behavior, let's mimic Chromium instead which
does not scroll at all - only for direct user initiated input such as
typing.

Relevant issues:

* https://github.com/whatwg/html/issues/6217
* https://bugzilla.mozilla.org/show_bug.cgi?id=232405
* https://issues.chromium.org/issues/41081857
2026-02-17 10:24:00 +01:00

38 lines
1.1 KiB
HTML

<!DOCTYPE html>
<style>
.row {
display: flex;
align-items: center;
padding: 4px;
}
</style>
<input id="inp" />
<div id="app"></div>
<script src="include.js"></script>
<script>
test(() => {
const input = document.querySelector("#inp");
const app = document.querySelector("#app");
for (let i = 0; i < 2000; i++) {
const row = document.createElement("div");
row.className = "row";
row.innerHTML = `<input type="checkbox"><span>${i}</span><button>x</button>`;
app.appendChild(row);
}
input.focus();
input.offsetWidth;
// Performance test: setting input.value must not synchronously trigger a full layout.
const values = ["a", "ab"];
const start = performance.now();
for (let i = 0; i < 2000; i++) {
app.children[i % 2000].style.padding = (4 + (i % 2)) + "px";
input.value = values[i % 2];
}
const elapsed = performance.now() - start;
println(elapsed < 5000 ? "PASS" : `FAIL: took ${elapsed.toFixed(0)}ms`);
});
</script>