Skip to content

GitLab

T
tangled
Commit e8c6b1a1 authored by Andrei Polushin's avatar Andrei Polushin Committed by Commit Bot
Browse files
Options

Disable scroll-anchoring of input::placeholder when suggestion displayed. 

The placeholder's style and value gets manipulated by autofill when
previewing suggestions.  Due to the dynamic style changing of the
placeholder, disabling scroll anchoring on a placeholder could prevent
occasional scroll adjustment.

Note that the scroll anchoring gets disabled on a placeholder within an
input element, but not on the input element itself, which is still
perfectly eligible to become a scroll anchor.  Moreover, as the position
of the input element is more stable, it could be a better choice for for
a scroll anchor.

BUG=1033423
TEST=run_web_tests.py fast/forms/text/input-appearance-scroll-position.html

Change-Id: I981599b781f9c010e2a11d01f23f5db1a937cd56
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1966153Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Reviewed-by: default avatarNick Burris <nburris@chromium.org>
Commit-Queue: Mason Freed <masonfreed@chromium.org>
Auto-Submit: Andrei Polushin <anpol@yandex-team.ru>
Cr-Commit-Position: refs/heads/master@{#727186}
parent edc58914
Hide whitespace changes
Inline Side-by-side
Showing with 60 additions and 0 deletions
third_party/blink/renderer/core/html/resources/html.css
View file @ e8c6b1a1
......@@ -538,6 +538,7 @@ textarea::-internal-input-suggested {
from the scrollable area instead of from the overrides in
LayoutTextControl{Single,Multi}Line::Scroll{Height,Width}(). */
overflow: hidden !important;
overflow-anchor: none;
}
input[type="password" i] {
......
third_party/blink/web_tests/fast/forms/text/input-appearance-scroll-position.html 0 → 100644
View file @ e8c6b1a1
<html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
input,
textarea {
font: 20px Arial;
padding: 5px;
margin: 5px;
}
input.emulated-input-suggested::placeholder,
textarea.emulated-input-suggested::placeholder {
/* Emulate a built-in style change in a normal browser. */
font: -webkit-small-control;
}
body {
/* Add an expander margin to get scrolling. */
margin-bottom: 2000px;
}
</style>
<body>
<div><input id="previewInput" placeholder="Name"></div>
<div><textarea id="previewTextArea" rows="1" placeholder="Address"></textarea></div>
<script>
function scrollToPartiallyHide(preview) {
const previewRect = preview.getBoundingClientRect();
preview.offsetParent.scrollTop += previewRect.top + previewRect.height / 2;
}
function setSuggestedValue(preview, text) {
if (window.internals) {
internals.setSuggestedValue(preview, text);
} else {
preview.classList.add('emulated-input-suggested');
preview.placeholder = text;
}
}
for (const id of ['previewInput', 'previewTextArea']) {
test(() => {
const preview = document.getElementById(id);
scrollToPartiallyHide(preview);
const expectedTop = preview.offsetParent.scrollTop;
setSuggestedValue(preview, 'Foooooooooooooooooooooooooooooooooooo');
const actualTop = preview.offsetParent.scrollTop;
assert_equals(actualTop, expectedTop,
'Element should have the same scrolling position');
}, 'Testing that a partially hidden #' + id + ' field does not cause' +
' a scrolling adjustment when a value is previewed.\n');
}
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment