Bug 1262755 - Enlarge caret touch target by 59% for Fennec. r=capella…

…,snorp

Enlarge the touch target of the caret to the left, bottom, and right by
59% (13px) per bug 1262755 comment 7.

Since the touch target becomes larger, the carets on the <input> in
previous test might cause the next test to fail on <textarea> because it
will press on the caret when trying to focus on <textarea>. Add <br>
elements to testAccessibleCarets.html to separate these test fields.

MozReview-Commit-ID: JIwmuHJ2QsQ

layout/style/res/ua.css

@@ -359,7 +359,8 @@ div:-moz-native-anonymous.moz-accessiblecaret > div.image {
   background-position: center bottom;
   background-size: 100%;
   background-repeat: no-repeat;
-  bottom: 0;
+  background-origin: content-box;
+  top: 0;
   width: 100%;
   height: 100%;
 

mobile/android/tests/browser/robocop/testAccessibleCarets.html

@@ -25,7 +25,7 @@
 
     <input id="LTRinput" style="direction: ltr;" value="Type something">
     <input id="RTLinput" style="direction: rtl;" value="לרוץ במעלה הגבעה">
-    <br>
+    <br><br><br>
 
     <textarea id="LTRtextarea" style="direction: ltr;"
       rows="3" cols="8">Words in a box</textarea>
@@ -38,7 +38,7 @@
     <br>
     <input id="RTLphone" style="direction: rtl;" size="40"
       value="התקשר +972 3 7347514 במשך זמן טוב">
-    <br>
+    <br><br><br>
     <div><input value="DDs12">3 45<em id="bug1265750"> 678</em> 90</div>
 
   </body>

mobile/android/themes/core/content.css

@@ -336,6 +336,14 @@ input[type=number]::-moz-number-spin-box {
   display: none;
 }
 
+div:-moz-native-anonymous.moz-accessiblecaret > div.image {
+  /* border: 0.1px solid red; */ /* Uncomment border to see the touch target. */
+  padding-left: 59%;    /* ((48-22)/2)px / 22px ~= 59% */
+  padding-bottom: 59%;
+  padding-right: 59%;
+  left: -59%;
+}
+
 /* Override accessiblecaret css in layout/style/ua.css */
 div:-moz-native-anonymous.moz-accessiblecaret.normal > div.image {
   background-image: url("chrome://browser/skin/images/accessiblecaret-normal-hdpi.png");