Handle more dir cases

Handle cases where direction is set on an intermediate ancestor between the host element and another element. Test distributed elements and nested custom elements
Polymer · Nov 30, 2017 · 1cc06fc · 1cc06fc
1 parent f0ff70d
commit 1cc06fc
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 6 deletions.
diff --git a/src/lib/style-transformer.html b/src/lib/style-transformer.html
@@ -200,9 +200,20 @@
         return s;
       },
 
+      // given a match from HOST_SCOPE_PAREN regex, add selectors for more :dir cases
+      // nested: [dir] is set on an ancestor node that is inside the host element
+      _additionalDirSelectors: function(dir, after, prefix) {
+        if (!dir || !after) {
+          return '';
+        }
+        prefix = prefix || '';
+        return COMPLEX_SELECTOR_SEP + prefix + ' ' + dir + ' ' + after;
+      },
+
       _transformComplexSelector: function(selector, scope, hostScope) {
         var stop = false;
         var hostContext = false;
+        var dir = false;
         var self = this;
         selector = selector.trim();
         selector = this._slottedToContent(selector);
@@ -214,6 +225,7 @@
             var info = self._transformCompoundSelector(s, c, scope, hostScope);
             stop = stop || info.stop;
             hostContext = hostContext || info.hostContext;
+            dir = dir || info.dir;
             c = info.combinator;
             s = info.value;
           } else {
@@ -224,8 +236,12 @@
         if (hostContext) {
           selector = selector.replace(HOST_CONTEXT_PAREN,
             function(m, pre, paren, post) {
-              return pre + paren + ' ' + hostScope + post +
+              var replacement = pre + paren + ' ' + hostScope + post +
                 COMPLEX_SELECTOR_SEP + ' ' + pre + hostScope + paren + post;
+              if (dir) {
+                replacement += self._additionalDirSelectors(paren, post, hostScope);
+              }
+              return replacement;
              });
         }
         return selector;
@@ -243,7 +259,11 @@
         // replace :host with host scoping class
         var jumpIndex = selector.search(SCOPE_JUMP);
         var hostContext = false;
-        selector = this._transformDir(selector);
+        var dir = false;
+        if (selector.match(DIR_PAREN)){
+          selector = this._transformDir(selector);
+          dir = true;
+        }
         if (selector.indexOf(HOST_CONTEXT) >=0) {
           hostContext = true;
         } else if (selector.indexOf(HOST) >=0) {
@@ -265,7 +285,7 @@
           stop = true;
         }
         return {value: selector, combinator: combinator, stop: stop,
-          hostContext: hostContext};
+          hostContext: hostContext, dir: dir};
       },
 
       _transformSimpleSelector: function(selector, scope) {
@@ -339,7 +359,12 @@
       _dirShadowTransform: function(selector) {
         return selector.split(',').map(function(s) {
           s = this._ensureScopedDir(s);
-          return this._transformDir(s);
+          s = this._transformDir(s);
+          var m = HOST_CONTEXT_PAREN.exec(s);
+          if (m) {
+            s += this._additionalDirSelectors(m[2], m[3], '');
+          }
+          return s;
         }, this).join(',');
       },
 

diff --git a/test/smoke/dir.html b/test/smoke/dir.html
@@ -21,7 +21,9 @@
 </head>
 <body>
 
-  <x-el></x-el>
+  <x-el>
+    <div>black border?</div>
+  </x-el>
 
   <dom-module id="x-el">
     <template>
@@ -34,9 +36,19 @@
         :dir(rtl) #target {
           background: red;
         }
+        #other:dir(rtl) {
+          border: 10px solid orange;
+        }
+        #container:dir(rtl) ::slotted(*) {
+          border: 2px solid black;
+        }
       </style>
       <div>hello</div>
       <div id="target">am i red?</div>
+      <div id="other">orange border?</div>
+      <div id="container">
+        <slot id="slot"></slot>
+      </div>
     </template>
     <script>
       addEventListener('WebComponentsReady', function() {

diff --git a/test/unit/dir.html b/test/unit/dir.html
@@ -109,6 +109,14 @@
     </script>
   </dom-module>
 
+  <dom-module id="other-element">
+    <script>
+      addEventListener('WebComponentsReady', function() {
+        Polymer({is: 'other-element'});
+      });
+    </script>
+  </dom-module>
+
   <dom-module id="x-complicated">
     <template>
       <style>
@@ -120,9 +128,29 @@
         :dir(rtl) #target {
           background: rgb(255, 0, 0);
         }
+        #direct:dir(rtl) {
+          border: 2px solid black;
+        }
+        #container:dir(rtl) ::slotted(*) {
+          border: 10px solid black;
+        }
+        other-element:dir(rtl) {
+          border: 5px solid black;
+        }
+        #nested:dir(ltr) {
+          border: 4px solid black;
+        }
       </style>
       <div id="normal">hello</div>
       <div id="target">am i red?</div>
+      <div id="direct">orange border?</div>
+      <div id="container">
+        <slot id="slot"></slot>
+      </div>
+      <other-element id="other"></other-element>
+      <div dir="ltr">
+        <other-element id="nested"></other-element>
+      </div>
     </template>
     <script>
       addEventListener('WebComponentsReady', function() {
@@ -157,7 +185,9 @@
 
   <test-fixture id="complicated">
     <template>
-      <x-complicated></x-complicated>
+      <x-complicated>
+        <div></div>
+      </x-complicated>
     </template>
   </test-fixture>
 
@@ -242,6 +272,10 @@
         var el = fixture('complicated');
         assertComputed(el.$.normal, '0px', 'padding-left');
         assertComputed(el.$.target, 'rgb(255, 0, 0)', 'background-color');
+        assertComputed(el.$.direct, '2px');
+        assertComputed(Polymer.dom(el).firstElementChild, '10px');
+        assertComputed(el.$.other, '5px');
+        assertComputed(el.$.nested, '4px');
       })
     });
   </script>