Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make __styleScoped a one-time optimization. Fixes #1733 #1739

Merged
merged 2 commits into from
Jun 4, 2015
Merged

Make __styleScoped a one-time optimization. Fixes #1733 #1739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c2eb14e
Re-insert rows when re-attaching. Fixes #1498.
kevinpschaaf May 27, 2015
8257a0f
Make __styleScoped a one-time optimization. Fixes #1733
kevinpschaaf Jun 4, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion src/lib/template/dom-repeat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,15 @@
this._detachRow(i);
}
}
this.rows = null;
},

attached: function() {
if (this.rows) {
var parentNode = Polymer.dom(this).parentNode;
for (var i=0; i<this.rows.length; i++) {
Polymer.dom(parentNode).insertBefore(this.rows[i].root, this);
}
}
},

ready: function() {
Expand Down
10 changes: 8 additions & 2 deletions src/standard/styling.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,14 @@
// instance-y
// add scoping class whenever an element is added to localDOM
_elementAdd: function(node) {
if (this._encapsulateStyle && !node.__styleScoped) {
styleTransformer.dom(node, this.is, this._scopeCssViaAttr);
if (this._encapsulateStyle) {
// If __styleScoped is set, this is a one-time optimization to
// avoid scoping pre-scoped document fragments
if (node.__styleScoped) {
node.__styleScoped = false;
} else {
styleTransformer.dom(node, this.is, this._scopeCssViaAttr);
}
}
},

Expand Down
2 changes: 1 addition & 1 deletion test/unit/dom-bind.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@
test('move dom-bind', function() {
domBind.parentElement.removeChild(domBind);
// TODO(kschaaf): detached/attached not called if takeRecords isn't
// called between remove & insert on polyfill... seems bad?
// called between remove & insert on polyfill... See wcjs #311.
CustomElements.takeRecords();
container.appendChild(domBind);
CustomElements.takeRecords();
Expand Down
19 changes: 19 additions & 0 deletions test/unit/dom-repeat-elements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -344,3 +344,22 @@
}
});
</script>


<dom-module id="x-simple-repeat">
<template>
<template is="dom-repeat" items="{{items}}">
<x-foo itema-prop="{{item.prop}}"></x-foo>
</template>
</template>
<script>
Polymer({
is: 'x-simple-repeat',
properties: {
items: {
value: window.data
}
}
});
</script>
</dom-module>
145 changes: 144 additions & 1 deletion test/unit/dom-repeat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@
</head>
<body>

<h4>x-simple-repeat</h4>
<x-simple-repeat id="simple"></x-simple-repeat>

<h4>x-nested-repeat-configured</h4>
<x-nested-repeat-configured id="configured"></x-nested-repeat-configured>

Expand All @@ -29,7 +32,7 @@ <h4>x-nested-repeat unconfigured2</h4>
</template>

<h4>inDocumentRepeater</h4>
<div id="inDocumentContainer">
<div id="inDocumentContainerOrig">
<template id="inDocumentRepeater" is="dom-repeat" as="itema" index-as="indexa">
<x-foo
innera-prop="{{innera.prop}}"
Expand Down Expand Up @@ -62,6 +65,9 @@ <h4>inDocumentRepeater</h4>
</template>
</div>

<div id="inDocumentContainer">
</div>

<script>

/*
Expand Down Expand Up @@ -400,6 +406,111 @@ <h4>inDocumentRepeater</h4>
test('basic rendering, downward item binding', function() {
inDocumentRepeater.items = window.data;
inDocumentRepeater.render();
var stamped = Polymer.dom(inDocumentContainerOrig).querySelectorAll('*:not(template)');
assert.equal(stamped.length, 3 + 3*3 + 3*3*3, 'total stamped count incorrect');
assert.equal(stamped[0].itemaProp, 'prop-1');
assert.equal(stamped[0].indexa, 0);
assert.equal(stamped[0].$.bar.itemaProp, 'prop-1');
assert.equal(stamped[1].itembProp, 'prop-1-1');
assert.equal(stamped[1].indexa, 0);
assert.equal(stamped[1].indexb, 0);
assert.equal(stamped[1].$.bar.itembProp, 'prop-1-1');
assert.equal(stamped[2].itemcProp, 'prop-1-1-1');
assert.equal(stamped[2].indexa, 0);
assert.equal(stamped[2].indexb, 0);
assert.equal(stamped[2].indexc, 0);
assert.equal(stamped[2].$.bar.itemcProp, 'prop-1-1-1');
assert.equal(stamped[3].itemcProp, 'prop-1-1-2');
assert.equal(stamped[3].indexa, 0);
assert.equal(stamped[3].indexb, 0);
assert.equal(stamped[3].indexc, 1);
assert.equal(stamped[3].$.bar.itemcProp, 'prop-1-1-2');
assert.equal(stamped[4].itemcProp, 'prop-1-1-3');
assert.equal(stamped[4].indexa, 0);
assert.equal(stamped[4].indexb, 0);
assert.equal(stamped[4].indexc, 2);
assert.equal(stamped[4].$.bar.itemcProp, 'prop-1-1-3');
assert.equal(stamped[13].itemaProp, 'prop-2');
assert.equal(stamped[13].indexa, 1);
assert.equal(stamped[13].$.bar.itemaProp, 'prop-2');
assert.equal(stamped[36].itemcProp, 'prop-3-3-1');
assert.equal(stamped[36].indexa, 2);
assert.equal(stamped[36].indexb, 2);
assert.equal(stamped[36].indexc, 0);
assert.equal(stamped[36].$.bar.itemcProp, 'prop-3-3-1');
assert.equal(stamped[37].itemcProp, 'prop-3-3-2');
assert.equal(stamped[37].indexa, 2);
assert.equal(stamped[37].indexb, 2);
assert.equal(stamped[37].indexc, 1);
assert.equal(stamped[37].$.bar.itemcProp, 'prop-3-3-2');
assert.equal(stamped[38].itemcProp, 'prop-3-3-3');
assert.equal(stamped[38].indexa, 2);
assert.equal(stamped[38].indexb, 2);
assert.equal(stamped[38].indexc, 2);
assert.equal(stamped[38].$.bar.itemcProp, 'prop-3-3-3');
});

test('move to different container', function() {
var repeater = inDocumentRepeater;
repeater.parentElement.removeChild(repeater);
// TODO(kschaaf): detached/attached not called if takeRecords isn't
// called between remove & insert on polyfill... See wcjs #311.
CustomElements.takeRecords();
CustomElements.takeRecords();
CustomElements.takeRecords();
inDocumentContainer.appendChild(repeater);
CustomElements.takeRecords();
CustomElements.takeRecords();
CustomElements.takeRecords();
var stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template)');
assert.equal(stamped.length, 3 + 3*3 + 3*3*3, 'total stamped count incorrect');
assert.equal(stamped[0].itemaProp, 'prop-1');
assert.equal(stamped[0].indexa, 0);
assert.equal(stamped[0].$.bar.itemaProp, 'prop-1');
assert.equal(stamped[1].itembProp, 'prop-1-1');
assert.equal(stamped[1].indexa, 0);
assert.equal(stamped[1].indexb, 0);
assert.equal(stamped[1].$.bar.itembProp, 'prop-1-1');
assert.equal(stamped[2].itemcProp, 'prop-1-1-1');
assert.equal(stamped[2].indexa, 0);
assert.equal(stamped[2].indexb, 0);
assert.equal(stamped[2].indexc, 0);
assert.equal(stamped[2].$.bar.itemcProp, 'prop-1-1-1');
assert.equal(stamped[3].itemcProp, 'prop-1-1-2');
assert.equal(stamped[3].indexa, 0);
assert.equal(stamped[3].indexb, 0);
assert.equal(stamped[3].indexc, 1);
assert.equal(stamped[3].$.bar.itemcProp, 'prop-1-1-2');
assert.equal(stamped[4].itemcProp, 'prop-1-1-3');
assert.equal(stamped[4].indexa, 0);
assert.equal(stamped[4].indexb, 0);
assert.equal(stamped[4].indexc, 2);
assert.equal(stamped[4].$.bar.itemcProp, 'prop-1-1-3');
assert.equal(stamped[13].itemaProp, 'prop-2');
assert.equal(stamped[13].indexa, 1);
assert.equal(stamped[13].$.bar.itemaProp, 'prop-2');
assert.equal(stamped[36].itemcProp, 'prop-3-3-1');
assert.equal(stamped[36].indexa, 2);
assert.equal(stamped[36].indexb, 2);
assert.equal(stamped[36].indexc, 0);
assert.equal(stamped[36].$.bar.itemcProp, 'prop-3-3-1');
assert.equal(stamped[37].itemcProp, 'prop-3-3-2');
assert.equal(stamped[37].indexa, 2);
assert.equal(stamped[37].indexb, 2);
assert.equal(stamped[37].indexc, 1);
assert.equal(stamped[37].$.bar.itemcProp, 'prop-3-3-2');
assert.equal(stamped[38].itemcProp, 'prop-3-3-3');
assert.equal(stamped[38].indexa, 2);
assert.equal(stamped[38].indexb, 2);
assert.equal(stamped[38].indexc, 2);
assert.equal(stamped[38].$.bar.itemcProp, 'prop-3-3-3');
});

test('basic rendering, downward item binding', function() {
var r = inDocumentRepeater;
r.parentElement.removeChild(r);
inDocumentContainer.appendChild(r);

var stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template)');
assert.equal(stamped.length, 3 + 3*3 + 3*3*3, 'total stamped count incorrect');
assert.equal(stamped[0].itemaProp, 'prop-1');
Expand Down Expand Up @@ -1159,6 +1270,38 @@ <h4>inDocumentRepeater</h4>
assert.equal(stamped2[15].indexc, 0);
});

test('css scoping retained when re-ordering', function(done) {
if (!Polymer.Settings.useShadow) {
// Confirm initial scoping
var stamped = Polymer.dom(simple.root).querySelectorAll('*:not(template)');
assert.equal(stamped[0].itemaProp, 'prop-1');
assert(stamped[0].classList.contains('x-simple-repeat'), 'expected scoping');
assert.equal(stamped.length, 3, 'total stamped count incorrect');
var row = stamped[0];
// Move
removed = simple.splice('items', 0, 1);
simple.splice('items', 1, 0, removed[0]);
setTimeout(function() {
stamped = Polymer.dom(simple.root).querySelectorAll('*:not(template)');
assert.equal(stamped.length, 3, 'total stamped count incorrect');
assert.equal(row, stamped[1]);
assert.equal(stamped[1].itemaProp, 'prop-1');
assert(stamped[1].classList.contains('x-simple-repeat'), 'expected scoping');
// Revert
removed = simple.splice('items', 1, 1);
simple.splice('items', 0, 0, removed[0]);
setTimeout(function() {
stamped = Polymer.dom(simple.root).querySelectorAll('*:not(template)');
assert.equal(stamped.length, 3, 'total stamped count incorrect');
assert.equal(row, stamped[0]);
assert.equal(stamped[0].itemaProp, 'prop-1');
assert(stamped[0].classList.contains('x-simple-repeat'), 'expected scoping');
done();
});
});
}
});

});

suite('reacting to changes, array sort with filter', function() {
Expand Down