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
--- 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,50 +71,49 @@ 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"] {
+ transform: scaleX(-1);
+}
+
resizer[dir="left"],
resizer[dir="right"] {
cursor: ew-resize;
}
resizer[dir="topleft"] {
cursor: nw-resize;
}
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)