Skip to content

GitLab

T
tangled
Commit 6320d4b5 authored by Anupam Snigdha's avatar Anupam Snigdha Committed by Commit Bot
Browse files
Options

[VirtualKeyboard] Width/Height CSS env variable implementation for VK 

This change added width and height of the virtual keyboard rectangle
to the CSS environment variables reported in the geometrychange event
defined for VK.
This was a feedback from TAG review as well as from web devs who are
experimenting with VK APIs.
https://github.com/w3ctag/design-reviews/issues/507

Bug:1127746

Change-Id: Ib3eaefa4f92b5e7482f30c0c6643ccd470728a7c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2422701Reviewed-by: default avatarAnders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: default avatarKinuko Yasuda <kinuko@chromium.org>
Commit-Queue: Anupam Snigdha <snianu@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#809346}
parent 4b379e09
Hide whitespace changes
Inline Side-by-side
Showing with 113 additions and 2 deletions
content/browser/renderer_host/render_widget_host_view_aura_vk_browsertest.cc
View file @ 6320d4b5
......@@ -469,6 +469,98 @@ IN_PROC_BROWSER_TEST_F(RenderWidgetHostViewAuraBrowserMockIMETest,
.ExtractString());
}
IN_PROC_BROWSER_TEST_F(RenderWidgetHostViewAuraBrowserMockIMETest,
VirtualKeyboardCSSEnvVarWidthAndHeightIntegrationTest) {
// The keyboard input pane events are not supported on Win7.
if (base::win::GetVersion() <= base::win::Version::WIN7) {
return;
}
const char kVirtualKeyboardDataURL[] =
"data:text/html,<!DOCTYPE html>"
"<style>"
" .target {"
" width: env(keyboard-inset-width);"
" height: env(keyboard-inset-height);"
" }"
"</style>"
"<body>"
"<div class='target'></div>"
"<script>"
" let numEvents = 0;"
" navigator.virtualKeyboard.overlaysContent = true;"
" const e = document.getElementsByClassName('target')[0];"
" const style = window.getComputedStyle(e, null);"
" navigator.virtualKeyboard.addEventListener('geometrychange',"
" evt => {"
" numEvents++;"
" }, false);"
"</script></body>";
EXPECT_TRUE(NavigateToURL(shell(), GURL(kVirtualKeyboardDataURL)));
EXPECT_EQ("0px",
EvalJs(shell(), "style.getPropertyValue('width')").ExtractString());
EXPECT_EQ(
"0px",
EvalJs(shell(), "style.getPropertyValue('height')").ExtractString());
RenderWidgetHostViewAura* rwhvi = GetRenderWidgetHostView();
// Send a touch event so that RenderWidgetHostViewAura will create the
// keyboard observer (requires last_pointer_type_ to be TOUCH).
ui::TouchEvent press(ui::ET_TOUCH_PRESSED, gfx::Point(30, 30),
base::TimeTicks::Now(),
ui::PointerDetails(ui::EventPointerType::kTouch, 0));
rwhvi->OnTouchEvent(&press);
// Emulate input type text focus in the root frame (the only frame), by
// setting frame focus and updating TextInputState. This is a more direct way
// of triggering focus in a textarea in the web page.
WebContentsImpl* web_contents =
static_cast<WebContentsImpl*>(shell()->web_contents());
auto* root = web_contents->GetFrameTree()->root();
web_contents->GetFrameTree()->SetFocusedFrame(
root, root->current_frame_host()->GetSiteInstance());
ui::mojom::TextInputState text_input_state;
text_input_state.show_ime_if_needed = true;
text_input_state.type = ui::TEXT_INPUT_TYPE_TEXT;
TextInputManager* text_input_manager = rwhvi->GetTextInputManager();
text_input_manager->UpdateTextInputState(rwhvi, text_input_state);
// Send through a keyboard showing event with a rect, and verify the
// javascript event fires with the appropriate values.
constexpr int kKeyboardX = 0;
constexpr int kKeyboardY = 200;
constexpr int kKeyboardWidth = 200;
constexpr int kKeyboardHeight = 200;
gfx::Rect keyboard_rect(kKeyboardX, kKeyboardY, kKeyboardWidth,
kKeyboardHeight);
input_method_->GetMockKeyboardController()->NotifyObserversOnKeyboardShown(
keyboard_rect);
// There are x and y-offsets for the main frame in content_browsertest
// hosting. We need to take these into account for the expected values.
gfx::PointF root_widget_origin(0.f, 0.f);
rwhvi->TransformPointToRootSurface(&root_widget_origin);
EXPECT_EQ(1, EvalJs(shell(), "numEvents"));
EXPECT_EQ("198px",
EvalJs(shell(), "style.getPropertyValue('width')").ExtractString());
EXPECT_EQ(
"200px",
EvalJs(shell(), "style.getPropertyValue('height')").ExtractString());
input_method_->GetMockKeyboardController()->NotifyObserversOnKeyboardHidden();
EXPECT_EQ(2, EvalJs(shell(), "numEvents"));
EXPECT_EQ("0px",
EvalJs(shell(), "style.getPropertyValue('width')").ExtractString());
EXPECT_EQ(
"0px",
EvalJs(shell(), "style.getPropertyValue('height')").ExtractString());
}
IN_PROC_BROWSER_TEST_F(RenderWidgetHostViewAuraBrowserMockIMETest,
VirtualKeyboardAccessibilityFocusTest) {
// The keyboard input pane events are not supported on Win7.
......
third_party/blink/renderer/core/css/style_environment_variables.cc
View file @ 6320d4b5
......@@ -36,6 +36,10 @@ void SetDefaultEnvironmentVariables(StyleEnvironmentVariables* instance) {
kKeyboardInsetDefault);
instance->SetVariable(UADefinedVariable::kKeyboardInsetRight,
kKeyboardInsetDefault);
instance->SetVariable(UADefinedVariable::kKeyboardInsetWidth,
kKeyboardInsetDefault);
instance->SetVariable(UADefinedVariable::kKeyboardInsetHeight,
kKeyboardInsetDefault);
}
}
......@@ -87,6 +91,12 @@ const AtomicString StyleEnvironmentVariables::GetVariableName(
case UADefinedVariable::kKeyboardInsetRight:
DCHECK(RuntimeEnabledFeatures::VirtualKeyboardEnabled());
return "keyboard-inset-right";
case UADefinedVariable::kKeyboardInsetWidth:
DCHECK(RuntimeEnabledFeatures::VirtualKeyboardEnabled());
return "keyboard-inset-width";
case UADefinedVariable::kKeyboardInsetHeight:
DCHECK(RuntimeEnabledFeatures::VirtualKeyboardEnabled());
return "keyboard-inset-height";
case UADefinedVariable::kFoldTop:
DCHECK(RuntimeEnabledFeatures::CSSFoldablesEnabled());
return "fold-top";
......
third_party/blink/renderer/core/css/style_environment_variables.h
View file @ 6320d4b5
......@@ -26,8 +26,9 @@ enum class UADefinedVariable {
kSafeAreaInsetBottom,
kSafeAreaInsetRight,
// The keyboard area insets are four environment variables that define a
// virtual keyboard rectangle by its top, right, bottom, and left insets
// The keyboard area insets are six environment variables that define a
// virtual keyboard rectangle by its top, right, bottom, left, width and
// height insets
// from the edge of the viewport.
// Explainers:
// https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/VirtualKeyboardAPI/explainer.md
......@@ -35,6 +36,8 @@ enum class UADefinedVariable {
kKeyboardInsetLeft,
kKeyboardInsetBottom,
kKeyboardInsetRight,
kKeyboardInsetWidth,
kKeyboardInsetHeight,
// The fold environment variables define a rectangle that is splitting the
// layout viewport.
......
third_party/blink/renderer/modules/virtualkeyboard/virtual_keyboard.cc
View file @ 6320d4b5
......@@ -77,6 +77,12 @@ void VirtualKeyboard::VirtualKeyboardOverlayChanged(
vars.SetVariable(
UADefinedVariable::kKeyboardInsetRight,
StyleEnvironmentVariables::FormatPx(keyboard_rect.right()));
vars.SetVariable(
UADefinedVariable::kKeyboardInsetWidth,
StyleEnvironmentVariables::FormatPx(keyboard_rect.width()));
vars.SetVariable(
UADefinedVariable::kKeyboardInsetHeight,
StyleEnvironmentVariables::FormatPx(keyboard_rect.height()));
}
DispatchEvent(*(MakeGarbageCollected<VirtualKeyboardGeometryChangeEvent>(
event_type_names::kGeometrychange, bounding_rect_)));
......
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