From 788aad5f6f3a5697fcd4e60269b588b569a48c6f Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Wed, 8 Nov 2017 09:45:50 -0800
Subject: [PATCH] Fix :dir() bare selector in native shadowdom

More correct fix for :dir() with CSS Custom Property Shim enabled
---
 src/lib/style-properties.html  | 16 +++++-----------
 src/lib/style-transformer.html |  8 +++++++-
 test/unit/dir.html             | 17 ++++++++++++++---
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html
index 54a6b317f9..fab1cb8153 100644
--- a/src/lib/style-properties.html
+++ b/src/lib/style-properties.html
@@ -442,21 +442,15 @@
         rule.transformedSelector = rule.transformedSelector || rule.selector;
         var selector = rule.transformedSelector;
         var scope = styleTransformer._calcElementScope(scopeId, viaAttr);
+        var hostScope = styleTransformer._calcElementScope(hostSelector, viaAttr);
         var parts = selector.split(',');
+        var isDirOrHostContextSelector = this._hasDirOrHostContext(rule.parsedSelector);
         for (var i=0, l=parts.length, p; (i<l) && (p=parts[i]); i++) {
-          // :host-context and :dir will
-          if (this._hasDirOrHostContext(rule.parsedSelector)) {
-            var hostScope = styleTransformer._calcElementScope(hostSelector, viaAttr);
-            var sub = p.split(' ');
-            for (var j = 0; j < sub.length; j++) {
-              sub[j] = sub[j].replace(hostScope, scope);
-            }
-            parts[i] = sub.join(' ');
-          } else {
             parts[i] = p.match(hostRx) ?
               p.replace(hostSelector, scope) :
-              scope + ' ' + p;
-          }
+              isDirOrHostContextSelector ?
+                p.replace(hostScope, scope + ' ' + hostScope) :
+                scope + ' ' + p;
         }
         rule.selector = parts.join(',');
       },
diff --git a/src/lib/style-transformer.html b/src/lib/style-transformer.html
index 60503fe75e..1b9862c99c 100644
--- a/src/lib/style-transformer.html
+++ b/src/lib/style-transformer.html
@@ -319,7 +319,13 @@
       _dirShadowTransform: function(selector) {
         return selector.split(',').map(function(s) {
           s = s.replace(HOST_DIR, HOST_DIR_REPLACE);
-          s = s.replace(DIR_PAREN, SHADOW_DIR_REPLACE);
+          if (s.match(DIR_PAREN)) {
+            s = s.replace(DIR_PAREN, SHADOW_DIR_REPLACE);
+            // make sure `:dir() {` acts as `:dir() * {`
+            if (s[s.length - 1] === ' ') {
+              s = s + '*';
+            }
+          }
           return s;
         }).join(',');
       },
diff --git a/test/unit/dir.html b/test/unit/dir.html
index a89fc7993c..110a37195c 100644
--- a/test/unit/dir.html
+++ b/test/unit/dir.html
@@ -91,12 +91,16 @@
     <template>
       <style>
         :host {
-          display: var(--ziz, block);
+          display: block;
+        }
+        :host(:dir(rtl)) {
+          border: var(--outer-size) solid black;
         }
         :dir(rtl) {
-          border: 10px solid rgb(123, 123, 123);
+          border: var(--inner-size) solid black;
         }
       </style>
+      <div id="inner"></div>
     </template>
     <script>
       addEventListener('WebComponentsReady', function() {
@@ -119,6 +123,12 @@
 
   <test-fixture id="var">
     <template>
+      <style is="custom-style">
+        html {
+          --outer-size: 10px;
+          --inner-size: 2px;
+        }
+      </style>
       <x-var></x-var>
     </template>
   </test-fixture>
@@ -195,8 +205,9 @@
       });
 
       test('elements with :dir and CSS Custom Properties work', function() {
-        var el = fixture('var');
+        var el = fixture('var')[1];
         assertComputed(el, '10px');
+        assertComputed(el.$.inner, '2px');
       })
     });
   </script>