Skip to content

Commit

Permalink
Merge pull request #1602 from Polymer/xstyle-1555
Browse files Browse the repository at this point in the history 
Xstyle 1555
  • Loading branch information
@kevinpschaaf
kevinpschaaf committed May 25, 2015
2 parents 4164632 + d0fd55f commit ec3ad32
Show file tree
Hide file tree
Showing 9 changed files with 162 additions and 65 deletions.
2 changes: 1 addition & 1 deletion src/lib/annotations/annotations.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@

_localSubTree: function(node, host) {
return (node === host) ? node.childNodes :
(node.lightChildren || node.childNodes);
(node._lightChildren || node.childNodes);
},

findAnnotatedNode: function(root, annote) {
Expand Down
24 changes: 12 additions & 12 deletions src/lib/dom-api.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@
// a node is in a shadyRoot, is a shadyRoot,
// or has a lightParent
_nodeIsInLogicalTree: function(node) {
return Boolean(node.lightParent || node._isShadyRoot ||
return Boolean(node._lightParent || node._isShadyRoot ||
this._ownerShadyRootForNode(node) ||
node.shadyRoot);
},
Expand All @@ -230,12 +230,12 @@
},

_removeNodeFromHost: function(node) {
if (node.lightParent) {
if (node._lightParent) {
var root = this._ownerShadyRootForNode(node);
if (root) {
root.host._elementRemove(node);
}
this._removeLogicalInfo(node, node.lightParent);
this._removeLogicalInfo(node, node._lightParent);
}
this._removeOwnerShadyRoot(node);
},
Expand All @@ -260,11 +260,11 @@
var c$ = Array.prototype.slice.call(node.childNodes);
for (var i=0, n; (i<c$.length) && (n=c$[i]); i++) {
children.splice(index++, 0, n);
n.lightParent = container;
n._lightParent = container;
}
} else {
children.splice(index, 0, node);
node.lightParent = container;
node._lightParent = container;
}
},

Expand All @@ -274,11 +274,11 @@
_removeLogicalInfo: function(node, container) {
var children = factory(container).childNodes;
var index = children.indexOf(node);
if ((index < 0) || (container !== node.lightParent)) {
if ((index < 0) || (container !== node._lightParent)) {
throw Error('The node to be removed is not a child of this node');
}
children.splice(index, 1);
node.lightParent = null;
node._lightParent = null;
},

_removeOwnerShadyRoot: function(node) {
Expand Down Expand Up @@ -458,7 +458,7 @@

parentNode: {
get: function() {
return this.node.lightParent ||
return this.node._lightParent ||
(this.node.__patched ? this.node._composedParent :
this.node.parentNode);
},
Expand Down Expand Up @@ -687,7 +687,7 @@
Polymer.dom.flush = DomApi.prototype.flush;

function getLightChildren(node) {
var children = node.lightChildren;
var children = node._lightChildren;
return children ? children : node.childNodes;
}

Expand Down Expand Up @@ -740,12 +740,12 @@
// source of truth for the light children of the element. This element's
// actual children will be treated as the rendered state once lightChildren
// is populated.
if (!node.lightChildren) {
if (!node._lightChildren) {
var c$ = Array.prototype.slice.call(node.childNodes);
for (var i=0, l=c$.length, child; (i<l) && (child=c$[i]); i++) {
child.lightParent = child.lightParent || node;
child._lightParent = child._lightParent || node;
}
node.lightChildren = c$;
node._lightChildren = c$;
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/lib/experimental/patch-dom.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@
}
getComposedChildren(this.node);
saveLightChildrenIfNeeded(this.node);
if (!this.node.lightParent) {
this.node.lightParent = this.node.parentNode;
if (!this.node._lightParent) {
this.node._lightParent = this.node.parentNode;
}
if (!this.node._composedParent) {
this.node._composedParent = this.node.parentNode;
Expand Down
2 changes: 1 addition & 1 deletion src/lib/style-defaults.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
// an element in an import applied styles (e.g. custom-style)
this._styles._rootStyleProperties = null;
this._properties = styleProperties
.rootPropertiesFromStyles(this._styles);
.scopePropertiesFromStyles(this._styles);
}
return this._properties;
},
Expand Down
64 changes: 44 additions & 20 deletions src/lib/style-properties.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,10 +127,11 @@
// case (2) variable
var self = this;
var fn = function(all, prefix, value, fallback) {
return prefix + (self.valueForProperty(props[value], props) ||
var propertyValue = (self.valueForProperty(props[value], props) ||
(props[fallback] ?
self.valueForProperty(props[fallback], props) :
fallback));
return prefix + (propertyValue || '');
};
property = property.replace(this.rx.VAR_MATCH, fn);
}
Expand Down Expand Up @@ -196,25 +197,43 @@
return {properties: props, key: o};
},

// Test if a rule matches root crteria (:host or :root) and if so,
// Test if a rule matches scope crteria (* or :root) and if so,
// collect any custom properties into `props`.
// these rules may already be shimmed and it's $ to reparse,
// so we check `is` value as a fallback
rootPropertiesFromStyles: function(styles) {
if (!styles._rootStyleProperties) {
var props = {}, self = this;
styleUtil.forRulesInStyles(styles, function(rule) {
if (!rule.propertyInfo) {
self.decorateRule(rule);
}
var s = rule.parsedSelector;
if (s === self.HOST || s === self.ROOT) {
scopePropertiesFromStyles: function(styles) {
if (!styles._scopeStyleProperties) {
styles._scopeStyleProperties =
this.selectedPropertiesFromStyles(styles, this.SCOPE_SELECTORS);
}
return styles._scopeStyleProperties;
},

// Test if a rule matches host crteria (:host) and if so,
// collect any custom properties into `props`.
//
// TODO(sorvell): this should change to collecting properties from any
// :host(...) and then matching these against self.
hostPropertiesFromStyles: function(styles) {
if (!styles._hostStyleProperties) {
styles._hostStyleProperties =
this.selectedPropertiesFromStyles(styles, this.HOST_SELECTORS);
}
return styles._hostStyleProperties;
},

selectedPropertiesFromStyles: function(styles, selectors) {
var props = {}, self = this;
styleUtil.forRulesInStyles(styles, function(rule) {
if (!rule.propertyInfo) {
self.decorateRule(rule);
}
for (var i=0; i < selectors.length; i++) {
if (rule.parsedSelector === selectors[i]) {
self.collectProperties(rule, props);
return;
}
});
styles._rootStyleProperties = props;
}
return styles._rootStyleProperties;
}
});
return props;
},

transformStyles: function(element, properties, scopeSelector) {
Expand Down Expand Up @@ -304,15 +323,20 @@
rx: {
VAR_ASSIGN: /(?:^|;\s*)(--[^\:;]*?):\s*?(?:([^;{]*?)|{([^}]*)})(?=;)/gim,
MIXIN_MATCH: /(?:^|\W+)@apply[\s]*\(([^)]*)\);?/im,
VAR_MATCH: /(^|\W+)var\([\s]*([^,)]*)[\s]*,?[\s]*([^,)]*)[\s]*?\)/gim,
// note, this supports:
// var(--a)
// var(--a, --b)
// var(--a, fallback-literal)
// var(--a, fallback-literal(with-one-nested-parens))
VAR_MATCH: /(^|\W+)var\([\s]*([^,)]*)[\s]*,?[\s]*((?:[^,)]*)|(?:[^;]*\([^;)]*\)))[\s]*?\)/gim,
VAR_CAPTURE: /\([\s]*(--[^,\s)]*)(?:,[\s]*(--[^,\s)]*))?(?:\)|,)/gim,
BRACKETED: /\{[^}]*\}/g,
HOST_PREFIX: '(?:^|[^.])',
HOST_SUFFIX: '($|[.:[\\s>+~])'
},

HOST: ':host',
ROOT: ':root',
HOST_SELECTORS: [':host'],
SCOPE_SELECTORS: [':root'],
XSCOPE_NAME: 'x-scope'

};
Expand Down
6 changes: 3 additions & 3 deletions src/mini/shady.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
// removed from document by shadyDOM distribution
// so we ensure this here
if (!this.dataHost) {
upgradeLightChildren(this.lightChildren);
upgradeLightChildren(this._lightChildren);
}
}
},
Expand Down Expand Up @@ -236,7 +236,7 @@
this._updateChildNodes(this, this._composeNode(this));
var p$ = this.shadyRoot._insertionPoints;
for (var i=0, l=p$.length, p, parent; (i<l) && (p=p$[i]); i++) {
parent = p.lightParent || p.parentNode;
parent = p._lightParent || p.parentNode;
if (!parent._useContent && (parent !== this) &&
(parent !== this.shadyRoot)) {
this._updateChildNodes(parent, this._composeNode(parent));
Expand Down Expand Up @@ -356,7 +356,7 @@

// dirty a shadyRoot if a change may trigger reprojection!
function maybeRedistributeParent(content, host) {
var parent = content.lightParent;
var parent = content._lightParent;
if (parent && parent.shadyRoot &&
hasInsertionPoint(parent.shadyRoot) &&
parent.shadyRoot._distributionClean) {
Expand Down
5 changes: 4 additions & 1 deletion src/standard/x-styling.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,12 +114,15 @@
}
// start with scope style properties
var props = Object.create(scope._styleProperties);
// mixin own host properties (lower specifity than scope props)
this.mixin(props, propertyUtils.hostPropertiesFromStyles(this._styles));
// mixin properties matching this element in scope
scopeProps = scopeProps ||
propertyUtils.propertyDataFromStyles(scope._styles, this).properties;
this.mixin(props, scopeProps);
// finally mixin properties inherent to this element
this.mixin(props, propertyUtils.rootPropertiesFromStyles(this._styles));
this.mixin(props,
propertyUtils.scopePropertiesFromStyles(this._styles));
this.mixin(props, this.customStyle);
// reify properties (note: only does own properties)
propertyUtils.reify(props);
Expand Down
42 changes: 21 additions & 21 deletions test/unit/shady.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,14 +135,14 @@
assert.strictEqual(getComposedHTML(host),
'<x-content-test id="p">a: <a></a>b: <b></b></x-content-test>');

assertArrayEqual(host.lightChildren, [a]);
assert.strictEqual(a.lightParent, host);
assertArrayEqual(host.shadyRoot.lightChildren, [p]);
assert.strictEqual(p.lightParent, host.shadyRoot);
assertArrayEqual(p.lightChildren, [b, content]);
assert.strictEqual(b.lightParent, p);
assert.strictEqual(content.lightParent, p);
assertArrayEqual(p.shadyRoot.lightChildren,
assertArrayEqual(host._lightChildren, [a]);
assert.strictEqual(a._lightParent, host);
assertArrayEqual(host.shadyRoot._lightChildren, [p]);
assert.strictEqual(p._lightParent, host.shadyRoot);
assertArrayEqual(p._lightChildren, [b, content]);
assert.strictEqual(b._lightParent, p);
assert.strictEqual(content._lightParent, p);
assertArrayEqual(p.shadyRoot._lightChildren,
[textNodeA, contentA, textNodeB, contentB]);
}

Expand All @@ -165,7 +165,7 @@
distributeContentNow(host);
assert.strictEqual(getComposedHTML(host), '<a></a>');

host.lightChildren = [];
host._lightChildren = [];
distributeContentNow(host);
assert.strictEqual(getComposedHTML(host), 'fallback');
});
Expand All @@ -180,11 +180,11 @@
distributeContentNow(host);
assert.strictEqual(getComposedHTML(host), '<a>Hello</a><b>after</b>');

host.shadyRoot.lightChildren[1].textContent = '';
host.shadyRoot._lightChildren[1].textContent = '';
distributeContentNow(host);
assert.strictEqual(getComposedHTML(host), '<a>Hello</a><b></b>');

host.shadyRoot.lightChildren = [];
host.shadyRoot._lightChildren = [];
distributeContentNow(host);
assert.strictEqual(getComposedHTML(host), '');
});
Expand All @@ -203,11 +203,11 @@
distributeContentNow(host);
assert.strictEqual(getComposedHTML(host), '<b></b>');

host.shadyRoot.firstChild.lightChildren = [];
host.shadyRoot.firstChild._lightChildren = [];
distributeContentNow(host);
assert.strictEqual(getComposedHTML(host), '');

host.shadyRoot.lightChildren = [];
host.shadyRoot._lightChildren = [];
distributeContentNow(host);
assert.strictEqual(getComposedHTML(host), '');
});
Expand All @@ -225,7 +225,7 @@
distributeContentNow(host);
assert.strictEqual(getComposedHTML(host), '<a></a>');

host.lightChildren = [];
host._lightChildren = [];
distributeContentNow(host);
assert.strictEqual(getComposedHTML(host), 'fallback');
});
Expand Down Expand Up @@ -265,11 +265,11 @@
distributeContentNow(host);
assert.strictEqual(getComposedHTML(host), '<a>Hello</a><b></b>');

host.shadyRoot.lightChildren.splice(1, 1); // remove b
host.shadyRoot._lightChildren.splice(1, 1); // remove b
distributeContentNow(host);
assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');

host.shadyRoot.lightChildren = []; // remove a
host.shadyRoot._lightChildren = []; // remove a
distributeContentNow(host);
assert.strictEqual(getComposedHTML(host), '');
});
Expand Down Expand Up @@ -368,7 +368,7 @@
assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');

var b = document.createElement('b');
host.lightChildren[0] = b;
host._lightChildren[0] = b;
distributeContentNow(host);
assert.strictEqual(getComposedHTML(host), '<b></b>');
});
Expand Down Expand Up @@ -437,12 +437,12 @@
});

function syncLightDOM(n) {
if (n.lightChildren) {
if (n._lightChildren) {
var c$ = n.__patched ? n._composedChildren || [] : Array.prototype.slice.call(n.childNodes);
c$.forEach(function(c) {
if (n.lightChildren.indexOf(c) < 0) {
c.lightParent = n;
n.lightChildren.push(c);
if (n._lightChildren.indexOf(c) < 0) {
c._lightParent = n;
n._lightChildren.push(c);
}
});
}
Expand Down
Loading

0 comments on commit ec3ad32

Please sign in to comment.