diff --git a/content/browser/renderer_host/render_widget_host_view_aura_vk_browsertest.cc b/content/browser/renderer_host/render_widget_host_view_aura_vk_browsertest.cc
index ede76b7e27e4cc..d9544f18809714 100644
--- a/content/browser/renderer_host/render_widget_host_view_aura_vk_browsertest.cc
+++ b/content/browser/renderer_host/render_widget_host_view_aura_vk_browsertest.cc
@@ -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,"
+ ""
+ "
"
+ ""
+ "";
+ 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(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.
diff --git a/third_party/blink/renderer/core/css/style_environment_variables.cc b/third_party/blink/renderer/core/css/style_environment_variables.cc
index 1a7404f31843b4..0be4a09d55b88f 100644
--- a/third_party/blink/renderer/core/css/style_environment_variables.cc
+++ b/third_party/blink/renderer/core/css/style_environment_variables.cc
@@ -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";
diff --git a/third_party/blink/renderer/core/css/style_environment_variables.h b/third_party/blink/renderer/core/css/style_environment_variables.h
index 983685276266c0..115fa2e6aa7ef4 100644
--- a/third_party/blink/renderer/core/css/style_environment_variables.h
+++ b/third_party/blink/renderer/core/css/style_environment_variables.h
@@ -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.
diff --git a/third_party/blink/renderer/modules/virtualkeyboard/virtual_keyboard.cc b/third_party/blink/renderer/modules/virtualkeyboard/virtual_keyboard.cc
index 1d29353aad868c..c2681add45ee52 100644
--- a/third_party/blink/renderer/modules/virtualkeyboard/virtual_keyboard.cc
+++ b/third_party/blink/renderer/modules/virtualkeyboard/virtual_keyboard.cc
@@ -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(
event_type_names::kGeometrychange, bounding_rect_)));