[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. w3ctag/design-reviews#507 Bug:1127746 Change-Id: Ib3eaefa4f92b5e7482f30c0c6643ccd470728a7c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2422701 Reviewed-by: Anders Hartvoll Ruud <[email protected]> Reviewed-by: Kinuko Yasuda <[email protected]> Commit-Queue: Anupam Snigdha <[email protected]> Cr-Commit-Position: refs/heads/master@{#809346}
Mu-L · Sep 22, 2020 · 6320d4b · 6320d4b
1 parent 4b379e0
commit 6320d4b
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 2 deletions.
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
@@ -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.

diff --git 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
@@ -26,15 +26,18 @@ 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
   kKeyboardInsetTop,
   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
@@ -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_)));