From 1cc06fc2dbdcda872abd16afbd842d9581a2ab26 Mon Sep 17 00:00:00 2001 From: Daniel Freedman Date: Thu, 30 Nov 2017 12:40:58 -0800 Subject: [PATCH] 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 --- src/lib/style-transformer.html | 33 +++++++++++++++++++++++++++---- test/smoke/dir.html | 14 ++++++++++++- test/unit/dir.html | 36 +++++++++++++++++++++++++++++++++- 3 files changed, 77 insertions(+), 6 deletions(-) diff --git a/src/lib/style-transformer.html b/src/lib/style-transformer.html index d33ef27afe..ae921d8a9c 100644 --- 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 index 3e3b151ed3..09908af4ff 100644 --- a/test/smoke/dir.html +++ b/test/smoke/dir.html @@ -21,7 +21,9 @@ - + +
black border?
+ + + + +