summaryrefslogtreecommitdiffstats
path: root/layout/reftests/forms/input/text
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/forms/input/text')
-rw-r--r--layout/reftests/forms/input/text/autofill-blank.html8
-rw-r--r--layout/reftests/forms/input/text/autofill-line-height.html9
-rw-r--r--layout/reftests/forms/input/text/autofill-prefilled-value.html9
-rw-r--r--layout/reftests/forms/input/text/autofill-preview-blank.html8
-rw-r--r--layout/reftests/forms/input/text/autofill-preview-line-height.html12
-rw-r--r--layout/reftests/forms/input/text/autofill-preview.html9
-rw-r--r--layout/reftests/forms/input/text/autofill.html9
-rw-r--r--layout/reftests/forms/input/text/baseline-1-ref.html21
-rw-r--r--layout/reftests/forms/input/text/baseline-1.html31
-rw-r--r--layout/reftests/forms/input/text/bounds-1-ref.html11
-rw-r--r--layout/reftests/forms/input/text/bounds-1.html22
-rw-r--r--layout/reftests/forms/input/text/centering-1-ref.xhtml28
-rw-r--r--layout/reftests/forms/input/text/centering-1.xhtml39
-rw-r--r--layout/reftests/forms/input/text/dynamic-height-1-ref.xhtml9
-rw-r--r--layout/reftests/forms/input/text/dynamic-height-1.xhtml23
-rw-r--r--layout/reftests/forms/input/text/focus-on-anchor-ref.html2
-rw-r--r--layout/reftests/forms/input/text/focus-on-anchor.html2
-rw-r--r--layout/reftests/forms/input/text/height-small-font-notref.html2
-rw-r--r--layout/reftests/forms/input/text/height-small-font.html2
-rw-r--r--layout/reftests/forms/input/text/intrinsic-size-ref.html12
-rw-r--r--layout/reftests/forms/input/text/intrinsic-size.html16
-rw-r--r--layout/reftests/forms/input/text/line-height-0.5.html7
-rw-r--r--layout/reftests/forms/input/text/line-height-1.0.html7
-rw-r--r--layout/reftests/forms/input/text/line-height-2.5.html7
-rw-r--r--layout/reftests/forms/input/text/pseudo-class-lock-ref.html2
-rw-r--r--layout/reftests/forms/input/text/pseudo-class-lock.html5
-rw-r--r--layout/reftests/forms/input/text/reftest.list25
-rw-r--r--layout/reftests/forms/input/text/select-overflow-ref.html18
-rw-r--r--layout/reftests/forms/input/text/select-overflow.html25
-rw-r--r--layout/reftests/forms/input/text/select-ref.html18
-rw-r--r--layout/reftests/forms/input/text/select.html21
-rw-r--r--layout/reftests/forms/input/text/shadow-rules-ref.html7
-rw-r--r--layout/reftests/forms/input/text/shadow-rules.html10
-rw-r--r--layout/reftests/forms/input/text/size-1-ref.html3
-rw-r--r--layout/reftests/forms/input/text/size-1.html3
-rw-r--r--layout/reftests/forms/input/text/size-2-ref.html5
-rw-r--r--layout/reftests/forms/input/text/size-2.html5
37 files changed, 452 insertions, 0 deletions
diff --git a/layout/reftests/forms/input/text/autofill-blank.html b/layout/reftests/forms/input/text/autofill-blank.html
new file mode 100644
index 0000000000..966d314038
--- /dev/null
+++ b/layout/reftests/forms/input/text/autofill-blank.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<input type=text>
+<script>
+ let input = SpecialPowers.wrap(document.querySelector("input"));
+ SpecialPowers.Cc["@mozilla.org/satchel/form-fill-controller;1"].getService(SpecialPowers.Ci.nsIFormFillController).markAsAutofillField(input);
+ input.getBoundingClientRect();
+ SpecialPowers.wrap(window).windowUtils.addManuallyManagedState(input, "autofill");
+</script>
diff --git a/layout/reftests/forms/input/text/autofill-line-height.html b/layout/reftests/forms/input/text/autofill-line-height.html
new file mode 100644
index 0000000000..7ef5970896
--- /dev/null
+++ b/layout/reftests/forms/input/text/autofill-line-height.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+ input { height: 4em; color: GrayText; font-family: system-ui }
+</style>
+<input value="Autofill">
+<script>
+ let input = SpecialPowers.wrap(document.querySelector("input"));
+ SpecialPowers.wrap(window).windowUtils.addManuallyManagedState(input, "autofill");
+</script>
diff --git a/layout/reftests/forms/input/text/autofill-prefilled-value.html b/layout/reftests/forms/input/text/autofill-prefilled-value.html
new file mode 100644
index 0000000000..42924ac531
--- /dev/null
+++ b/layout/reftests/forms/input/text/autofill-prefilled-value.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<input type=text value="JOHN DOE">
+<script>
+ let input = SpecialPowers.wrap(document.querySelector("input"));
+ SpecialPowers.Cc["@mozilla.org/satchel/form-fill-controller;1"].getService(SpecialPowers.Ci.nsIFormFillController).markAsAutofillField(input);
+ input.getBoundingClientRect(); // previewValue setter depends on the reframe posted by markAsAutofillField() having being processed...
+ input.previewValue = "Autofill";
+ SpecialPowers.wrap(window).windowUtils.addManuallyManagedState(input, "-moz-autofill-preview");
+</script>
diff --git a/layout/reftests/forms/input/text/autofill-preview-blank.html b/layout/reftests/forms/input/text/autofill-preview-blank.html
new file mode 100644
index 0000000000..a235b7430f
--- /dev/null
+++ b/layout/reftests/forms/input/text/autofill-preview-blank.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<input type=text>
+<script>
+ let input = SpecialPowers.wrap(document.querySelector("input"));
+ SpecialPowers.Cc["@mozilla.org/satchel/form-fill-controller;1"].getService(SpecialPowers.Ci.nsIFormFillController).markAsAutofillField(input);
+ input.getBoundingClientRect();
+ SpecialPowers.wrap(window).windowUtils.addManuallyManagedState(input, "-moz-autofill-preview");
+</script>
diff --git a/layout/reftests/forms/input/text/autofill-preview-line-height.html b/layout/reftests/forms/input/text/autofill-preview-line-height.html
new file mode 100644
index 0000000000..7ce1cadb2e
--- /dev/null
+++ b/layout/reftests/forms/input/text/autofill-preview-line-height.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<style>
+ input { height: 4em; font-family: system-ui }
+</style>
+<input value="Autofill">
+<script>
+ let input = SpecialPowers.wrap(document.querySelector("input"));
+ SpecialPowers.Cc["@mozilla.org/satchel/form-fill-controller;1"].getService(SpecialPowers.Ci.nsIFormFillController).markAsAutofillField(input);
+ input.getBoundingClientRect(); // previewValue setter depends on the reframe posted by markAsAutofillField() having being processed...
+ input.previewValue = "Autofill";
+ SpecialPowers.wrap(window).windowUtils.addManuallyManagedState(input, "-moz-autofill-preview");
+</script>
diff --git a/layout/reftests/forms/input/text/autofill-preview.html b/layout/reftests/forms/input/text/autofill-preview.html
new file mode 100644
index 0000000000..1382d29abd
--- /dev/null
+++ b/layout/reftests/forms/input/text/autofill-preview.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<input type=text>
+<script>
+ let input = SpecialPowers.wrap(document.querySelector("input"));
+ SpecialPowers.Cc["@mozilla.org/satchel/form-fill-controller;1"].getService(SpecialPowers.Ci.nsIFormFillController).markAsAutofillField(input);
+ input.getBoundingClientRect(); // previewValue setter depends on the reframe posted by markAsAutofillField() having being processed...
+ input.previewValue = "Autofill";
+ SpecialPowers.wrap(window).windowUtils.addManuallyManagedState(input, "-moz-autofill-preview");
+</script>
diff --git a/layout/reftests/forms/input/text/autofill.html b/layout/reftests/forms/input/text/autofill.html
new file mode 100644
index 0000000000..ccb2b15b1b
--- /dev/null
+++ b/layout/reftests/forms/input/text/autofill.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<input type=text>
+<script>
+ let input = SpecialPowers.wrap(document.querySelector("input"));
+ SpecialPowers.Cc["@mozilla.org/satchel/form-fill-controller;1"].getService(SpecialPowers.Ci.nsIFormFillController).markAsAutofillField(input);
+ input.getBoundingClientRect(); // previewValue setter depends on the reframe posted by markAsAutofillField() having being processed...
+ input.previewValue = "Autofill";
+ SpecialPowers.wrap(window).windowUtils.addManuallyManagedState(input, "autofill");
+</script>
diff --git a/layout/reftests/forms/input/text/baseline-1-ref.html b/layout/reftests/forms/input/text/baseline-1-ref.html
new file mode 100644
index 0000000000..427911eb04
--- /dev/null
+++ b/layout/reftests/forms/input/text/baseline-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+ <title>Text baseline positioning reference</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <style type="text/css">
+ @font-face {
+ font-family: "MarkA";
+ src: url(../fonts/markA.ttf);
+ }
+ input {
+ font-family: "MarkA", sans-serif;
+ font-size: 32px;
+ }
+ </style>
+</head>
+<body>
+ <input size="2" value="AAAAAAAA">
+</body>
+</html>
diff --git a/layout/reftests/forms/input/text/baseline-1.html b/layout/reftests/forms/input/text/baseline-1.html
new file mode 100644
index 0000000000..59e92018b1
--- /dev/null
+++ b/layout/reftests/forms/input/text/baseline-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+ <title>Text baseline positioning test</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <!--
+ The primary font MarkA has a small line height. The fallback font
+ (used for the character '1') will probably have a maximum ascent
+ greater than the ascent plus half leading of MarkA, but this
+ should not adversly affect the positioning of characters from the
+ primary font. Currently the maximum ascent of the fallback font
+ has no effect on the position, but if a future implementation
+ considers the fallback font in the position, this test may need to
+ be modified to accommodate.
+ -->
+ <style type="text/css">
+ @font-face {
+ font-family: "MarkA";
+ src: url(../fonts/markA.ttf);
+ }
+ input {
+ font-family: "MarkA", sans-serif;
+ font-size: 32px;
+ }
+ </style>
+</head>
+<body>
+ <input size="2" value="AAAAAAAA1">
+</body>
+</html>
diff --git a/layout/reftests/forms/input/text/bounds-1-ref.html b/layout/reftests/forms/input/text/bounds-1-ref.html
new file mode 100644
index 0000000000..14d39ba729
--- /dev/null
+++ b/layout/reftests/forms/input/text/bounds-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Reference for bug 806583 test</title>
+ <style>
+ body { background: blue }
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/forms/input/text/bounds-1.html b/layout/reftests/forms/input/text/bounds-1.html
new file mode 100644
index 0000000000..4af490dce6
--- /dev/null
+++ b/layout/reftests/forms/input/text/bounds-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Test for bug 806583</title>
+ <style>
+ body, div { background: blue }
+ div { position: fixed; }
+ </style>
+</head>
+<body>
+ <input id="input">
+ <div id="cover"/>
+ <script>
+var rect = document.getElementById("input").getBoundingClientRect();
+var cover = document.getElementById("cover");
+cover.style.left = rect.left + "px";
+cover.style.top = rect.top + "px";
+cover.style.width = rect.width + "px";
+cover.style.height = rect.height + "px";
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/forms/input/text/centering-1-ref.xhtml b/layout/reftests/forms/input/text/centering-1-ref.xhtml
new file mode 100644
index 0000000000..f1bf3e49cf
--- /dev/null
+++ b/layout/reftests/forms/input/text/centering-1-ref.xhtml
@@ -0,0 +1,28 @@
+<?xml version="1.0"?>
+<window title="Text input text centering reference"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <html:style type="text/css">
+ @font-face {
+ font-family: "Ahem";
+ src: url(../fonts/Ahem.ttf);
+ }
+ hbox {
+ height: 128px;
+ background-color: white;
+ }
+ input {
+ height: 64px;
+ background-color: white;
+ border: none;
+ margin: 0px;
+ padding: 0px;
+ font-family: "Ahem", sans-serif;
+ font-size: 32px;
+ }
+ </html:style>
+
+ <hbox align="center">
+ <html:input value="Ahem"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/input/text/centering-1.xhtml b/layout/reftests/forms/input/text/centering-1.xhtml
new file mode 100644
index 0000000000..dc72bda555
--- /dev/null
+++ b/layout/reftests/forms/input/text/centering-1.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0"?>
+<window title="Text input text centering test"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <!--
+
+ There is no spec that says where text within an html text input element
+ should be placed, but some sort of centering reduces the likelihood or
+ extent of clipping.
+
+ This test uses a font where every character used has an ascent and
+ descent equal to typographical ascent of the font. This makes it
+ unlikely that using a different concept of centering will change the
+ results of this test.
+
+ -->
+ <html:style type="text/css">
+ @font-face {
+ font-family: "Ahem";
+ src: url(../fonts/Ahem.ttf);
+ }
+ hbox {
+ height: 128px;
+ background-color: white;
+ }
+ input {
+ background-color: white;
+ border: none;
+ margin: 0px;
+ padding: 0px;
+ font-family: "Ahem", sans-serif;
+ font-size: 32px;
+ }
+ </html:style>
+
+ <hbox align="stretch">
+ <html:input value="Ahem"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/input/text/dynamic-height-1-ref.xhtml b/layout/reftests/forms/input/text/dynamic-height-1-ref.xhtml
new file mode 100644
index 0000000000..93b9b4387a
--- /dev/null
+++ b/layout/reftests/forms/input/text/dynamic-height-1-ref.xhtml
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <hbox align="stretch">
+ <box style="height: 5em"/>
+ <html:input value="YO"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/input/text/dynamic-height-1.xhtml b/layout/reftests/forms/input/text/dynamic-height-1.xhtml
new file mode 100644
index 0000000000..745aac3658
--- /dev/null
+++ b/layout/reftests/forms/input/text/dynamic-height-1.xhtml
@@ -0,0 +1,23 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ onload="onLoad();">
+ <script type="application/javascript">
+<![CDATA[
+ function onLoad()
+ {
+ var adjust = document.getElementById("adjust");
+ flush();
+ adjust.style.height = "5em";
+ }
+
+ function flush() { document.documentElement.getBoundingClientRect(); }
+
+]]>
+ </script>
+ <hbox align="stretch">
+ <box id="adjust"/>
+ <html:input id="input" value="YO"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/input/text/focus-on-anchor-ref.html b/layout/reftests/forms/input/text/focus-on-anchor-ref.html
new file mode 100644
index 0000000000..84d46a9790
--- /dev/null
+++ b/layout/reftests/forms/input/text/focus-on-anchor-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input autofocus>
diff --git a/layout/reftests/forms/input/text/focus-on-anchor.html b/layout/reftests/forms/input/text/focus-on-anchor.html
new file mode 100644
index 0000000000..398e4ab60d
--- /dev/null
+++ b/layout/reftests/forms/input/text/focus-on-anchor.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input id="anchor">
diff --git a/layout/reftests/forms/input/text/height-small-font-notref.html b/layout/reftests/forms/input/text/height-small-font-notref.html
new file mode 100644
index 0000000000..bf43cdb1ea
--- /dev/null
+++ b/layout/reftests/forms/input/text/height-small-font-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input style="width: 100px; font-size: 10px">
diff --git a/layout/reftests/forms/input/text/height-small-font.html b/layout/reftests/forms/input/text/height-small-font.html
new file mode 100644
index 0000000000..d269aa540a
--- /dev/null
+++ b/layout/reftests/forms/input/text/height-small-font.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input style="width: 100px; font-size: 16px">
diff --git a/layout/reftests/forms/input/text/intrinsic-size-ref.html b/layout/reftests/forms/input/text/intrinsic-size-ref.html
new file mode 100644
index 0000000000..2735336e3b
--- /dev/null
+++ b/layout/reftests/forms/input/text/intrinsic-size-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Intrinsic Size Test Reference</title>
+ <style>input, textarea { border-radius:0; background:none; border:none; }</style>
+ </head>
+ <body>
+ <div>
+ <span style="border:2px solid black; padding-left:200px"><input style="background-color:transparent; border:none; font-family:monospace"/></span>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/text/intrinsic-size.html b/layout/reftests/forms/input/text/intrinsic-size.html
new file mode 100644
index 0000000000..29eb66a77d
--- /dev/null
+++ b/layout/reftests/forms/input/text/intrinsic-size.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Intrinsic Size Test</title>
+ <style>input, textarea { border-radius:0; background:none; border:none; }</style>
+ </head>
+ <body>
+ <div>
+ <span style="border:2px solid black"><input style="background-color:transparent; border:none; font-family:monospace;"/></span>
+ </div>
+ <script>
+ let input = document.querySelector("input");
+ input.style.paddingLeft = (200 + parseInt(getComputedStyle(input).paddingLeft, 10)) + "px";
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/text/line-height-0.5.html b/layout/reftests/forms/input/text/line-height-0.5.html
new file mode 100644
index 0000000000..e60a5f3a8c
--- /dev/null
+++ b/layout/reftests/forms/input/text/line-height-0.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 0.5 }
+
+</style>
+<input type="text" value="text input" size="20">
diff --git a/layout/reftests/forms/input/text/line-height-1.0.html b/layout/reftests/forms/input/text/line-height-1.0.html
new file mode 100644
index 0000000000..52a0fde6c0
--- /dev/null
+++ b/layout/reftests/forms/input/text/line-height-1.0.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 1.0 }
+
+</style>
+<input type="text" value="text input" size="20">
diff --git a/layout/reftests/forms/input/text/line-height-2.5.html b/layout/reftests/forms/input/text/line-height-2.5.html
new file mode 100644
index 0000000000..d04be79e72
--- /dev/null
+++ b/layout/reftests/forms/input/text/line-height-2.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 2.5 }
+
+</style>
+<input type="text" value="text input" size="20">
diff --git a/layout/reftests/forms/input/text/pseudo-class-lock-ref.html b/layout/reftests/forms/input/text/pseudo-class-lock-ref.html
new file mode 100644
index 0000000000..3811045777
--- /dev/null
+++ b/layout/reftests/forms/input/text/pseudo-class-lock-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type=text disabled>
diff --git a/layout/reftests/forms/input/text/pseudo-class-lock.html b/layout/reftests/forms/input/text/pseudo-class-lock.html
new file mode 100644
index 0000000000..d9196ae3a2
--- /dev/null
+++ b/layout/reftests/forms/input/text/pseudo-class-lock.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<input type=text>
+<script>
+ SpecialPowers.wrap(window).InspectorUtils.addPseudoClassLock(document.querySelector("input"), ":disabled", true);
+</script>
diff --git a/layout/reftests/forms/input/text/reftest.list b/layout/reftests/forms/input/text/reftest.list
new file mode 100644
index 0000000000..b6217d46bc
--- /dev/null
+++ b/layout/reftests/forms/input/text/reftest.list
@@ -0,0 +1,25 @@
+== bounds-1.html bounds-1-ref.html
+fuzzy(0-65,0-3) == size-1.html size-1-ref.html
+fuzzy-if(winWidget,0-36,0-1) == size-2.html size-2-ref.html
+== baseline-1.html baseline-1-ref.html
+== chrome://reftest/content/forms/input/text/centering-1.xhtml chrome://reftest/content/forms/input/text/centering-1-ref.xhtml
+== chrome://reftest/content/forms/input/text/dynamic-height-1.xhtml chrome://reftest/content/forms/input/text/dynamic-height-1-ref.xhtml
+fuzzy(0-1,0-500) needs-focus == select.html select-ref.html
+== intrinsic-size.html intrinsic-size-ref.html
+== line-height-0.5.html line-height-1.0.html
+!= line-height-2.5.html line-height-1.0.html
+== shadow-rules.html shadow-rules-ref.html
+!= height-small-font.html height-small-font-notref.html
+
+# Autofill tests
+== autofill-blank.html autofill-preview-blank.html
+!= autofill.html autofill-blank.html
+!= autofill-preview.html autofill-preview-blank.html
+!= autofill.html autofill-preview.html
+== autofill-prefilled-value.html autofill-preview.html
+== autofill-preview-line-height.html autofill-line-height.html
+
+== pseudo-class-lock.html pseudo-class-lock-ref.html
+
+needs-focus == focus-on-anchor.html#anchor focus-on-anchor-ref.html
+needs-focus == select-overflow.html select-overflow-ref.html
diff --git a/layout/reftests/forms/input/text/select-overflow-ref.html b/layout/reftests/forms/input/text/select-overflow-ref.html
new file mode 100644
index 0000000000..f36028b59a
--- /dev/null
+++ b/layout/reftests/forms/input/text/select-overflow-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<script>
+function selectEnd() {
+ e = document.getElementById('e');
+ // Just get to the end
+ e.scrollLeft = e.scrollWidth;
+ window.requestAnimationFrame(() => {
+ document.documentElement.removeAttribute("class");
+ });
+}
+</script>
+<body onload="selectEnd();">
+<input
+ id="e"
+ style="padding: 100px; width: 200px;"
+ type="text"
+ value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaab">
diff --git a/layout/reftests/forms/input/text/select-overflow.html b/layout/reftests/forms/input/text/select-overflow.html
new file mode 100644
index 0000000000..abe2c62add
--- /dev/null
+++ b/layout/reftests/forms/input/text/select-overflow.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<script>
+function selectEnd() {
+ e = document.getElementById('e');
+ // Make sure we are at the beginning
+ e.scrollLeft = 0;
+ e.setSelectionRange(e.value.length, e.value.length);
+ // Focusing scrolls to where the cursor is
+ e.focus();
+ window.requestAnimationFrame(() => {
+ // Now take the cursor out of equation
+ e.blur();
+ window.requestAnimationFrame(() => {
+ document.documentElement.removeAttribute("class");
+ });
+ });
+}
+</script>
+<body onload="selectEnd();">
+<input
+ id="e"
+ style="padding: 100px; width: 200px;"
+ type="text"
+ value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaab">
diff --git a/layout/reftests/forms/input/text/select-ref.html b/layout/reftests/forms/input/text/select-ref.html
new file mode 100644
index 0000000000..added237cf
--- /dev/null
+++ b/layout/reftests/forms/input/text/select-ref.html
@@ -0,0 +1,18 @@
+<html class="reftest-wait">
+ <head>
+ <script type="text/javascript">
+ function finishTest() {
+ document.documentElement.removeAttribute("class");
+ }
+ function runTest() {
+ var field = document.getElementById('field');
+ field.focus();
+ field.select();
+ setTimeout(finishTest, 0);
+ }
+ </script>
+ </head>
+ <body onload="runTest()">
+ <input id="field" type="text" value="1234">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/text/select.html b/layout/reftests/forms/input/text/select.html
new file mode 100644
index 0000000000..eba0c38244
--- /dev/null
+++ b/layout/reftests/forms/input/text/select.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+ <head>
+ <script type="text/javascript">
+ function finishTest() {
+ document.documentElement.removeAttribute("class");
+ }
+ function runTest() {
+ var field = document.getElementById('field');
+ field.focus();
+ field.disabled = true;
+ field.setSelectionRange(0, 4);
+ field.disabled = false;
+ field.select();
+ setTimeout(finishTest, 0);
+ }
+ </script>
+ </head>
+ <body onload="runTest()">
+ <input id="field" type="text" value="1234">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/text/shadow-rules-ref.html b/layout/reftests/forms/input/text/shadow-rules-ref.html
new file mode 100644
index 0000000000..edc6813db3
--- /dev/null
+++ b/layout/reftests/forms/input/text/shadow-rules-ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<div id="host"></div>
+<script>
+ host.attachShadow({ mode: "open" }).innerHTML = `
+ <input type="text" value="Should not be red">
+ `;
+</script>
diff --git a/layout/reftests/forms/input/text/shadow-rules.html b/layout/reftests/forms/input/text/shadow-rules.html
new file mode 100644
index 0000000000..906472ea5a
--- /dev/null
+++ b/layout/reftests/forms/input/text/shadow-rules.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<div id="host"></div>
+<script>
+ host.attachShadow({ mode: "open" }).innerHTML = `
+ <style>
+ input > *|* { color: red !important; }
+ </style>
+ <input type="text" value="Should not be red">
+ `;
+</script>
diff --git a/layout/reftests/forms/input/text/size-1-ref.html b/layout/reftests/forms/input/text/size-1-ref.html
new file mode 100644
index 0000000000..c9a4803585
--- /dev/null
+++ b/layout/reftests/forms/input/text/size-1-ref.html
@@ -0,0 +1,3 @@
+<html lang="en">
+ <input size="4" value="1234" style="font-family: monospace">
+</html>
diff --git a/layout/reftests/forms/input/text/size-1.html b/layout/reftests/forms/input/text/size-1.html
new file mode 100644
index 0000000000..e0390261d5
--- /dev/null
+++ b/layout/reftests/forms/input/text/size-1.html
@@ -0,0 +1,3 @@
+<html lang="en">
+ <input size="4" value="1234|6" style="font-family: monospace">
+</html>
diff --git a/layout/reftests/forms/input/text/size-2-ref.html b/layout/reftests/forms/input/text/size-2-ref.html
new file mode 100644
index 0000000000..94512260b7
--- /dev/null
+++ b/layout/reftests/forms/input/text/size-2-ref.html
@@ -0,0 +1,5 @@
+<html lang="en">
+<body style="background-color:white;">
+ <input size="40" value="1234" style="background-color:white; color:black; font-family: monospace; border: none">
+</body>
+</html>
diff --git a/layout/reftests/forms/input/text/size-2.html b/layout/reftests/forms/input/text/size-2.html
new file mode 100644
index 0000000000..7353238f76
--- /dev/null
+++ b/layout/reftests/forms/input/text/size-2.html
@@ -0,0 +1,5 @@
+<html lang="en">
+<body style="background-color:white;">
+ <input size="4" value="1234" style="background-color:white; color:black; font-family: monospace; border: none">
+</body>
+</html>