Skip to content

GitLab

T
tangled
Commit ca266f49 authored by Liviu Tinta's avatar Liviu Tinta Committed by Commit Bot
Browse files
Options

Input element does not fire scroll event 

When there is text that overflows an input element, the scroll event is
not fired when the text scrolls into view.
The input element never receives the scroll event from the user agent
shadow DOM internal editor element. The fix is to change the scroll
event's target to the shadow host element when the event is generated.

Bug: 989937
Change-Id: Iff4aeae6adb931d681a2ade72eb8032c5a23067c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2064818
Commit-Queue: Liviu Tinta <liviutinta@chromium.org>
Reviewed-by: default avatarNavid Zolghadr <nzolghadr@chromium.org>
Reviewed-by: default avatarDavid Bokan <bokan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#745459}
parent aa783bb6
Hide whitespace changes
Inline Side-by-side
Showing with 82 additions and 0 deletions
third_party/blink/renderer/core/html/forms/text_control_inner_elements.cc
View file @ ca266f49
......@@ -87,6 +87,17 @@ void TextControlInnerEditorElement::DefaultEventHandler(Event& event) {
if (shadow_ancestor)
shadow_ancestor->DefaultEventHandler(event);
}
if (event.type() == event_type_names::kScroll) {
// The scroller for a text control is inside of a shadow tree but the
// scroll event won't bubble past the shadow root and authors cannot add
// an event listener to it. Fire the scroll event at the shadow host so
// that the page can hear about the scroll.
Element* shadow_ancestor = OwnerShadowHost();
if (shadow_ancestor)
shadow_ancestor->DispatchEvent(event);
}
if (!event.DefaultHandled())
HTMLDivElement::DefaultEventHandler(event);
}
......
third_party/blink/web_tests/external/wpt/dom/events/scrolling/input-text-scroll-event-when-using-arrow-keys.html 0 → 100644
View file @ ca266f49
<!doctype html>
<html>
<head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
</head>
<body onload=runTest()>
<p>Moving the cursor using the arrow keys into an
input element fires scroll events when text has to scroll into view.
Uses arrow keys to move forward and backwards in the input
element.</p>
<input type="text" style='width: 50px'
value="Fooooooooooooooooooooooooooooooooooooooooooooooooo"/>
<textarea rows="4" cols="4">
Fooooooooooooooooooooooooooooooooooooooooooooooooo
</textarea>
<script>
async function moveCursorRightInsideElement(element, value){
var arrowRight = '\uE014';
for(var i=0;i<value;i++){
await test_driver.send_keys(element, arrowRight);
}
}
function runTest(){
promise_test(async(t) => { return new Promise(async (resolve, reject) => {
var input = document.getElementsByTagName('input')[0];
function handleScroll(){
resolve("Scroll Event successfully fired!");
}
input.addEventListener('scroll', handleScroll, false);
// move cursor to the right until the text scrolls
while(input.scrollLeft === 0){
await moveCursorRightInsideElement(input, 1);
}
// if there is no scroll event fired then test will fail by timeout
})},
/*
Moving the cursor using the arrow keys into an input element
fires scroll events when text has to scroll into view.
Uses arrow keys to move right in the input element.
*/
"Scroll event fired for <input> element.");
promise_test(async(t) => { return new Promise(async (resolve, reject) => {
var textarea = document.getElementsByTagName('textarea')[0];
function handleScroll(){
resolve("Scroll Event successfully fired!");
}
textarea.addEventListener('scroll', handleScroll, false);
// move cursor to the right until the text scrolls
while(textarea.scrollLeft === 0){
await moveCursorRightInsideElement(textarea, 1);
}
// if there is no scroll event fired then test will fail by timeout
})},
/*
Moving the cursor using the arrow keys into a textarea element
fires scroll events when text has to scroll into view.
Uses arrow keys to move right in the textarea element.
*/
"Scroll event fired for <textarea> element.");
}
</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