Bug 1307027 - Fix vertical position for caret images. r?mtseng draft
authorTing-Yu Lin <tlin@mozilla.com>
Mon, 03 Oct 2016 15:26:40 +0800
changeset 420065 22a0a61cfcc993a5f38974777509eeb7a718094f
parent 419914 7c576fe3279d87543f0a03b844eba7bc215e17f1
child 532708 f088212db720839fa8cc070d09f607f60013abcb
push id31079
push userbmo:tlin@mozilla.com
push dateMon, 03 Oct 2016 07:46:42 +0000
reviewersmtseng
bugs1307027
milestone52.0a1
Bug 1307027 - Fix vertical position for caret images. r?mtseng After the splitting of text overlay and the caret images, the caret image should be placed from the top of #image div. Delete those "top" style for Fennec since they're not needed anymore in current setup. MozReview-Commit-ID: Dn6jgqaFfek
layout/style/res/ua.css
mobile/android/themes/core/content.css
--- a/layout/style/res/ua.css
+++ b/layout/style/res/ua.css
@@ -367,17 +367,17 @@ div:-moz-native-anonymous.moz-accessible
   width: 100%;
 
   /* Override this property in moz-custom-content-container to make dummy touch
    * listener work. */
   pointer-events: auto;
 }
 
 div:-moz-native-anonymous.moz-accessiblecaret > #image {
-  background-position: center bottom;
+  background-position: center top;
   background-size: 100%;
   background-repeat: no-repeat;
   background-origin: content-box;
   height: 100%;
 }
 
 div:-moz-native-anonymous.moz-accessiblecaret > #bar {
   margin-left: 49%;
--- a/mobile/android/themes/core/content.css
+++ b/mobile/android/themes/core/content.css
@@ -331,44 +331,49 @@ input[type="submit"]:active:hover {
   padding-inline-start: 7px;
 }
 
 input[type=number] > div > div, /* work around bug 946184 */
 input[type=number]::-moz-number-spin-box {
   display: none;
 }
 
+/* Override accessiblecaret css in layout/style/ua.css */
 div:-moz-native-anonymous.moz-accessiblecaret > #text-overlay,
 div:-moz-native-anonymous.moz-accessiblecaret > #image {
   /* border: 0.1px solid red; */ /* Uncomment border to see the touch target. */
-  padding-left: 59%;    /* ((48-22)/2)px / 22px ~= 59% */
-  padding-right: 59%;
+  padding-left: 59%; /* Enlarge the touch area. ((48-22)/2)px / 22px ~= 59% */
+  padding-right: 59%; /* Enlarge the touch area. */
   left: -59%;
 }
 
 div:-moz-native-anonymous.moz-accessiblecaret > #image {
-  padding-bottom: 59%;
+  padding-bottom: 59%; /* Enlarge the touch area. */
 }
 
-/* Override accessiblecaret css in layout/style/ua.css */
 div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
   background-image: url("chrome://browser/skin/images/accessiblecaret-normal-hdpi.png");
-  top: 11%; /* space between the blinking cursor and the caret */
+}
+
+div:-moz-native-anonymous.moz-accessiblecaret.left > #text-overlay,
+div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
+  margin-left: -50%;
 }
 
 div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
   background-image: url("chrome://browser/skin/images/accessiblecaret-tilt-left-hdpi.png");
-  margin-left: -50%;
-  top: 1%; /* space between the selection highlight and the caret */
+}
+
+div:-moz-native-anonymous.moz-accessiblecaret.right > #text-overlay,
+div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
+  margin-left: 47%;
 }
 
 div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
   background-image: url("chrome://browser/skin/images/accessiblecaret-tilt-right-hdpi.png");
-  margin-left: 47%;
-  top: 1%; /* space between the selection highlight and the caret */
 }
 
 @media (min-resolution: 1.5dppx) {
   div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
     background-image: url("chrome://browser/skin/images/accessiblecaret-normal-hdpi.png");
   }
 
   div:-moz-native-anonymous.moz-accessiblecaret.left > #image {