Test that focus does not unnecessarily scroll.
Add test to ensure that a element focus with a short line size does not
unnecessarily scroll an element.
Differential Revision: https://phabricator.services.mozilla.com/D192869
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1858984
gecko-commit: 0eb9a79316cb53fe90be317cc08183f5555bd31f
gecko-reviewers: emilio
diff --git a/focus/focus-large-element-in-overflow-hidden-container-ref.html b/focus/focus-large-element-in-overflow-hidden-container-ref.html
new file mode 100644
index 0000000..856f794
--- /dev/null
+++ b/focus/focus-large-element-in-overflow-hidden-container-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#dom-focus">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1858984">
+<style>
+#overflowHiddenContainer
+{
+ margin: 4px;
+ height: 12px;
+ border: 1px solid black;
+ overflow: hidden;
+ line-height: 25px;
+}
+
+#container
+{
+ position: relative;
+ display: inline-block;
+ width: 30px;
+ height: 10px;
+ vertical-align: text-top;
+}
+
+#visibleTarget
+{
+ position: absolute;
+ inset: 0;
+ height: 15px;
+}
+
+</style>
+</head>
+<body>
+ <div id="overflowHiddenContainer">
+ <label id="container">
+ <div tabindex=0 id="visibleTarget">
+ </div>
+ </label>
+ </div>
+</body>
+<script>
+ visibleTarget.focus();
+</script>
+</html>
diff --git a/focus/focus-large-element-in-overflow-hidden-container.html b/focus/focus-large-element-in-overflow-hidden-container.html
new file mode 100644
index 0000000..31d2a8b
--- /dev/null
+++ b/focus/focus-large-element-in-overflow-hidden-container.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#dom-focus">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1858984">
+<link rel="match" href="focus-large-element-in-overflow-hidden-container-ref.html">
+<style>
+#overflowHiddenContainer
+{
+ margin: 4px;
+ height: 12px;
+ border: 1px solid black;
+ overflow: hidden;
+ line-height: 25px;
+}
+
+#container
+{
+ position: relative;
+ display: inline-block;
+ width: 30px;
+ height: 10px;
+ vertical-align: text-top;
+}
+
+#visibleTarget
+{
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ height: 15px;
+}
+
+#error
+{
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ background-color: red;
+ height: 5px;
+ width: 5px;
+}
+</style>
+</head>
+<body>
+ <div id="overflowHiddenContainer">
+ <label id="container">
+ <div tabindex=0 id="visibleTarget">
+ <div id="error"></div>
+ </div>
+ </label>
+ </div>
+</body>
+<script>
+ visibleTarget.focus();
+</script>
+</html>
diff --git a/focus/focus-visible-element-in-overflow-hidden-container-ref.html b/focus/focus-visible-element-in-overflow-hidden-container-ref.html
new file mode 100644
index 0000000..d9c41ab
--- /dev/null
+++ b/focus/focus-visible-element-in-overflow-hidden-container-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#dom-focus">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1858984">
+<style>
+#container
+{
+ margin: 4px;
+ height: 25px;
+ border: 1px solid black;
+ overflow: hidden;
+ line-height: 25px;
+}
+
+#switch
+{
+ position: relative;
+ display: inline-block;
+ width: 30px;
+ height: 17px;
+ vertical-align: text-top;
+}
+
+#checkbox
+{
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+#slider
+{
+ position: absolute;
+ inset: 0;
+ background-color: #ccc;
+}
+</style>
+</head>
+<body>
+ <div id="container">
+ <label id="switch">
+ <input id="checkbox" type="checkbox">
+ <span id="slider"></span>
+ </label>
+ </div>
+</body>
+</html>
diff --git a/focus/focus-visible-element-in-overflow-hidden-container.html b/focus/focus-visible-element-in-overflow-hidden-container.html
new file mode 100644
index 0000000..22f5c33
--- /dev/null
+++ b/focus/focus-visible-element-in-overflow-hidden-container.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#dom-focus">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1858984">
+<link rel="match" href="focus-visible-element-in-overflow-hidden-container-ref.html">
+<style>
+#overflowHiddenContainer
+{
+ margin: 4px;
+ height: 25px;
+ border: 1px solid black;
+ overflow: hidden;
+ line-height: 25px;
+}
+
+#container
+{
+ position: relative;
+ display: inline-block;
+ width: 30px;
+ height: 17px;
+ vertical-align: text-top;
+}
+
+#emptyCheckbox
+{
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+#visibleTarget
+{
+ position: absolute;
+ inset: 0;
+ background-color: #ccc;
+}
+</style>
+</head>
+<body>
+ <div id="overflowHiddenContainer">
+ <label id="container">
+ <input id="emptyCheckbox" type="checkbox">
+ <span id="visibleTarget"></span>
+ </label>
+ </div>
+</body>
+<script>
+ emptyCheckbox.focus();
+</script>
+</html>
