Bug 1459646 - Always flip the resizer with CSS transform draft
authorTimothy Guan-tin Chien <timdream@gmail.com>
Mon, 07 May 2018 15:05:26 -0700
changeset 792274 a0d6cf4f255775704493e4ff0cb2d02616231a8f
parent 790873 2d83e1843241d869a2fc5cf06f96d3af44c70e70
push id109058
push usertimdream@gmail.com
push dateMon, 07 May 2018 23:31:16 +0000
bugs1459646
milestone61.0a1
Bug 1459646 - Always flip the resizer with CSS transform Having the native theme widget to flip its own direction turned out to be something not needed anymore, and it interfere with the CSS rule we set to flip non-native SVG background. This patch turned that off and always flips the resizer with CSS transform. MozReview-Commit-ID: EbjTfFpJpZ0
layout/reftests/forms/textarea/reftest.list
layout/reftests/forms/textarea/resize-rtl-ref.html
layout/reftests/forms/textarea/resize-rtl.html
layout/reftests/xul/reftest.list
toolkit/content/minimal-xul.css
toolkit/themes/shared/icons/resizer-rtl.svg
toolkit/themes/shared/jar.inc.mn
--- a/layout/reftests/forms/textarea/reftest.list
+++ b/layout/reftests/forms/textarea/reftest.list
@@ -1,9 +1,10 @@
 skip-if(Android) == resize.html resize-ref.html
+skip-if(Android) == resize-rtl.html resize-rtl-ref.html
 # an offset seems to apply to the native resizer on windows so skip this test for now
 skip-if(Android) skip-if(winWidget) fuzzy-if(cocoaWidget,1,33) fuzzy-if(skiaContent&&!winWidget&&!Android,5,10) == resize-background.html resize-background-ref.html
 skip-if(Android) != ltr.html rtl.html
 skip-if(Android) != ltr-scrollbar.html rtl-scrollbar.html
 skip-if(Android) != in-ltr-doc-scrollbar.html in-rtl-doc-scrollbar.html
 skip-if(Android) != ltr.html no-resize.html
 skip-if(Android) != rtl.html no-resize.html # bug 834724
 fuzzy-if(skiaContent,1,1) == rtl.html rtl-dynamic-attr.html
copy from layout/reftests/forms/textarea/resize-ref.html
copy to layout/reftests/forms/textarea/resize-rtl-ref.html
--- a/layout/reftests/forms/textarea/resize-ref.html
+++ b/layout/reftests/forms/textarea/resize-rtl-ref.html
@@ -1,3 +1,3 @@
 <html><body>
-<div style="overflow: auto; resize: both; background: white; -moz-appearance: none; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;"></div>
+<div style="transform: scaleX(-1); overflow: auto; resize: both; background: white; -moz-appearance: none; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;"></div>
 </body></html>
copy from layout/reftests/forms/textarea/resize.html
copy to layout/reftests/forms/textarea/resize-rtl.html
--- a/layout/reftests/forms/textarea/resize.html
+++ b/layout/reftests/forms/textarea/resize-rtl.html
@@ -1,3 +1,3 @@
 <html><body>
-<textarea style="-moz-appearance: none; background: white; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;" resizable="false" multiline="true" width="100" height="100"></textarea>
+<textarea dir="rtl" style="-moz-appearance: none; background: white; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;" resizable="false" multiline="true" width="100" height="100"></textarea>
 </body></html>
--- a/layout/reftests/xul/reftest.list
+++ b/layout/reftests/xul/reftest.list
@@ -80,22 +80,18 @@ skip == treecell-image-svg-1b.xul treece
 test-pref(svg.context-properties.content.enabled,true) == treetwisty-svg-context-paint-1.xul treetwisty-svg-context-paint-1-ref.xul
 
 # resizer (non-native-themed)
 
 != resizer-bottomend.xul blank-window.xul
 == resizer-bottomend.xul resizer-bottomright.xul
 != resizer-bottomend.xul resizer-bottomend-rtl.xul
 != resizer-bottomend-rtl.xul blank-window.xul
-# fuzzy for comparing SVG image flipped by CSS with a flipped SVG image.
-# See bug 1450017 comment 79.
-fuzzy(43,98) == resizer-bottomend-rtl.xul resizer-bottomend-flipped.xul
-fuzzy(43,98) == resizer-bottomleft-rtl.xul resizer-bottomleft.xul
-fuzzy(43,98) == resizer-bottomright-rtl.xul resizer-bottomright.xul
+== resizer-bottomend-rtl.xul resizer-bottomend-flipped.xul
+== resizer-bottomleft-rtl.xul resizer-bottomleft.xul
+== resizer-bottomright-rtl.xul resizer-bottomright.xul
 
 != resizer-bottomstart.xul blank-window.xul
 == resizer-bottomstart.xul resizer-bottomleft.xul
 == resizer-bottomstart.xul resizer-left.xul
 != resizer-bottomstart.xul resizer-bottomstart-rtl.xul
 != resizer-bottomstart-rtl.xul blank-window.xul
-# fuzzy for comparing SVG image flipped by CSS to a flipped SVG image.
-# See bug 1450017 comment 79.
-fuzzy(43,98) == resizer-bottomstart-rtl.xul resizer-bottomend.xul
+== resizer-bottomstart-rtl.xul resizer-bottomend.xul
--- a/toolkit/content/minimal-xul.css
+++ b/toolkit/content/minimal-xul.css
@@ -71,52 +71,48 @@ label html|span.accesskey {
   text-decoration: underline;
 }
 
 /********** resizer **********/
 
 resizer {
   position: relative;
   z-index: 2147483647;
+  /* Widget gets decide on its own whether or not the native theme should apply,
+     based on the context/OS theme. If it does not, SVG background will kick in. */
   -moz-appearance: resizer;
+
+  /* native resizer should never flip on its own;
+     we will flip it (or the SVG background) with CSS transform below. */
+  direction: ltr;
+  writing-mode: initial;
+
   background: url("chrome://global/skin/icons/resizer.svg") no-repeat;
   background-size: 100% 100%;
   cursor: se-resize;
   width: 15px;
   height: 15px;
 }
 
-/* Do not try to remove the RTL asset and flip it with CSS transform;
-   native theme style rely on CSS transfrom below to flip too, when
-   replacing the background image. */
-resizer:-moz-locale-dir(rtl) {
-  background: url("chrome://global/skin/icons/resizer-rtl.svg") no-repeat;
-}
-
-resizer[dir="left"]:-moz-locale-dir(ltr),
-resizer[dir="right"]:-moz-locale-dir(rtl),
-resizer[dir="bottomleft"]:-moz-locale-dir(ltr),
-resizer[dir="bottomright"]:-moz-locale-dir(rtl),
-resizer[dir="bottomstart"] {
-  transform: scaleX(-1);
-}
-
+/* bottomstart/bottomend is supported in XUL window only */
 resizer[dir="bottomleft"],
 resizer[dir="bottomstart"]:-moz-locale-dir(ltr),
 resizer[dir="bottomend"]:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
   cursor: sw-resize;
 }
 
 resizer[dir="top"],
 resizer[dir="bottom"] {
   cursor: ns-resize;
 }
 
 resizer[dir="left"],
 resizer[dir="right"] {
+  transform: scaleX(-1);
   cursor: ew-resize;
 }
 
 resizer[dir="topleft"] {
   cursor: nw-resize;
 }
 
 resizer[dir="topright"] {
deleted file mode 100644
--- a/toolkit/themes/shared/icons/resizer-rtl.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
-  <path d="M 0.658,2.129 1.14,1.646 a 0.5,0.5 0 0 0 0,0.708 L 12.646,13.86 a 0.5,0.5 0 0 0 0.708,0 l -0.483,0.482 a 0.5,0.5 0 0 1 -0.707,0 L 0.658,2.836 a 0.5,0.5 0 0 1 0,-0.707 z" fill="#f9f9fa" opacity=".4"/>
-  <path d="m 0.644,5.649 0.5,-0.5 a 0.5,0.5 0 0 0 0,0.707 l 8,8 a 0.5,0.5 0 0 0 0.707,0 l -0.5,0.5 a 0.5,0.5 0 0 1 -0.707,0 l -8,-8 a 0.5,0.5 0 0 1 0,-0.707 z" fill="#f9f9fa" opacity=".4"/>
-  <path d="M 0.637,9.158 1.148,8.647 a 0.5,0.5 0 0 0 0,0.707 l 4.5,4.5 a 0.5,0.5 0 0 0 0.707,0 l -0.511,0.511 a 0.5,0.5 0 0 1 -0.707,0 l -4.5,-4.5 a 0.5,0.5 0 0 1 0,-0.707 z" fill="#f9f9fa" opacity=".4"/>
-  <path d="m 0.685,12.621 0.468,-0.468 a 0.5,0.5 0 0 0 0,0.707 l 0.993,0.993 a 0.5,0.5 0 0 0 0.707,0 l -0.468,0.468 a 0.5,0.5 0 0 1 -0.707,0 L 0.685,13.328 a 0.5,0.5 0 0 1 0,-0.707 z" fill="#f9f9fa" opacity=".4"/>
-  <path d="m 1.14,1.646 a 0.5,0.5 0 0 1 0.708,0 L 13.354,13.152 A 0.5006316,0.5006316 0 1 1 12.646,13.86 L 1.14,2.354 a 0.5,0.5 0 0 1 0,-0.708 z" fill="#0c0c0d" opacity=".4"/>
-  <path d="m 1.146,5.146 a 0.5,0.5 0 0 1 0.707,0 l 8,8 a 0.5,0.5 0 0 1 -0.707,0.707 l -8,-8 a 0.5,0.5 0 0 1 0,-0.707 z" fill="#0c0c0d" opacity=".4"/>
-  <path d="m 1.148,8.647 a 0.5,0.5 0 0 1 0.707,0 l 4.5,4.5 a 0.5,0.5 0 0 1 -0.707,0.707 l -4.5,-4.5 a 0.5,0.5 0 0 1 0,-0.707 z" fill="#0c0c0d" opacity=".4"/>
-  <path d="m 1.153,12.153 a 0.5,0.5 0 0 1 0.707,0 l 0.993,0.993 A 0.5,0.5 0 1 1 2.146,13.853 L 1.153,12.86 a 0.5,0.5 0 0 1 0,-0.707 z" fill="#0c0c0d" opacity=".4"/>
-</svg>
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -35,17 +35,16 @@ toolkit.jar:
   skin/classic/global/icons/find-previous-arrow.svg        (../../shared/icons/find-previous-arrow.svg)
   skin/classic/global/icons/find-next-arrow.svg            (../../shared/icons/find-next-arrow.svg)
   skin/classic/global/icons/help.svg                       (../../shared/icons/help.svg)
   skin/classic/global/icons/info.svg                       (../../shared/incontent-icons/info.svg)
   skin/classic/global/icons/input-clear.svg                (../../shared/icons/input-clear.svg)
   skin/classic/global/icons/loading.png                    (../../shared/icons/loading.png)
   skin/classic/global/icons/loading@2x.png                 (../../shared/icons/loading@2x.png)
   skin/classic/global/icons/resizer.svg                    (../../shared/icons/resizer.svg)
-  skin/classic/global/icons/resizer-rtl.svg                (../../shared/icons/resizer-rtl.svg)
   skin/classic/global/icons/spinner-arrow-down.svg         (../../shared/icons/spinner-arrow-down.svg)
   skin/classic/global/icons/spinner-arrow-up.svg           (../../shared/icons/spinner-arrow-up.svg)
   skin/classic/global/icons/arrow-dropdown-12.svg          (../../shared/icons/arrow-dropdown-12.svg)
   skin/classic/global/icons/arrow-dropdown-16.svg          (../../shared/icons/arrow-dropdown-16.svg)
   skin/classic/global/icons/warning.svg                    (../../shared/icons/warning.svg)
   skin/classic/global/illustrations/about-rights.svg       (../../shared/illustrations/about-rights.svg)
   skin/classic/global/icons/blocked.svg                    (../../shared/incontent-icons/blocked.svg)
   skin/classic/global/illustrations/about-license.svg      (../../shared/illustrations/about-license.svg)