diff --git a/lib/mixins/dir-mixin.html b/lib/mixins/dir-mixin.html
index a833fc1e40..7261f8443d 100644
--- a/lib/mixins/dir-mixin.html
+++ b/lib/mixins/dir-mixin.html
@@ -15,30 +15,24 @@
(function() {
'use strict';
- const HOST_DIR = /:host\(:dir\(rtl\)\)/g;
- const HOST_DIR_REPLACMENT = ':host([dir="rtl"])';
+ const HOST_DIR = /:host\(:dir\((ltr|rtl)\)\)/g;
+ const HOST_DIR_REPLACMENT = ':host([dir="$1"])';
- const EL_DIR = /([\s\w#\.\[\]\*]*):dir\(rtl\)/g;
- const EL_DIR_REPLACMENT = ':host([dir="rtl"]) $1';
-
- const NATIVE_SHADOW = !(window.ShadyDOM && window.ShadyDOM.inUse);
+ const EL_DIR = /([\s\w#\.\[\]\*]*):dir\((ltr|rtl)\)/g;
+ const EL_DIR_REPLACMENT = ':host([dir="$2"]) $1';
/**
- * @type {!Array}
+ * @type {!Array}
*/
const DIR_INSTANCES = [];
- if (NATIVE_SHADOW) {
- new MutationObserver(() => {
- DIR_INSTANCES.forEach(i => setRTL(i));
- }).observe(document.documentElement, {attributes: true, attributeFilter: ['dir']});
- }
+ let observed = false;
/**
- * @param {!Dir} instance Instance to set RTL status on
+ * @param {!Polymer_DirMixin} instance Instance to set RTL status on
*/
function setRTL(instance) {
- if (NATIVE_SHADOW && !instance.__origRTLStatus) {
+ if (!instance.__origRTLStatus) {
const el = /** @type {!HTMLElement} */(instance);
if (document.documentElement.getAttribute('dir') === 'rtl') {
el.setAttribute('dir', 'rtl');
@@ -58,6 +52,12 @@
*/
Polymer.DirMixin = Polymer.dedupingMixin((base) => {
+ if (!observed) {
+ new MutationObserver(() => {
+ DIR_INSTANCES.forEach(i => setRTL(i));
+ }).observe(document.documentElement, {attributes: true, attributeFilter: ['dir']});
+ }
+
/**
* @constructor
* @extends {base}
@@ -78,22 +78,20 @@
*/
static _processStyleText(is, template, baseURI) {
let cssText = super._processStyleText(is, template, baseURI);
- if (NATIVE_SHADOW) {
- cssText = cssText.replace(HOST_DIR, HOST_DIR_REPLACMENT);
- cssText = cssText.replace(EL_DIR, EL_DIR_REPLACMENT);
- }
+ cssText = cssText.replace(HOST_DIR, HOST_DIR_REPLACMENT);
+ cssText = cssText.replace(EL_DIR, EL_DIR_REPLACMENT);
return cssText;
}
- /**
- * @suppress {invalidCasts} This is an element, but closure needs to be told
- */
constructor() {
super();
/** @type {boolean} */
this.__origRTLStatus = false;
}
+ /**
+ * @suppress {invalidCasts} Closure doesn't understand that `this` is an HTMLElement
+ */
ready() {
super.ready();
this.__origRTLStatus = /** @type {!HTMLElement} */(this).hasAttribute('dir');
@@ -104,6 +102,7 @@
DIR_INSTANCES.push(this);
setRTL(this);
}
+
disconnectedCallback() {
super.disconnectedCallback();
const idx = DIR_INSTANCES.indexOf(this);
diff --git a/test/runner.html b/test/runner.html
index fdd567b492..8fe8b14f85 100644
--- a/test/runner.html
+++ b/test/runner.html
@@ -72,7 +72,8 @@
'unit/logging.html',
'unit/mixin-utils.html',
'unit/mixin-behaviors.html',
- 'unit/render-status.html'
+ 'unit/render-status.html',
+ 'unit/dir.html'
];
// http://eddmann.com/posts/cartesian-product-in-javascript/
diff --git a/test/smoke/dir.html b/test/smoke/dir.html
deleted file mode 100644
index 4d3fb5b135..0000000000
--- a/test/smoke/dir.html
+++ /dev/null
@@ -1,92 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
- no rtl styling
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/test/unit/dir.html b/test/unit/dir.html
new file mode 100644
index 0000000000..8dd6d5ec6f
--- /dev/null
+++ b/test/unit/dir.html
@@ -0,0 +1,204 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ no rtl styling
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file