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.

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

Fixes distribution of item template via named slots (Fixes 479) #480

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
7 changes: 6 additions & 1 deletion iron-list.html
Original file line number Diff line number Diff line change
Expand Up @@ -941,7 +941,12 @@
// TODO(blasten):
// First element child is item; Safari doesn't support children[0]
// on a doc fragment. Test this to see if it still matters.
physicalItems[i] = inst.root.querySelector('*');
var newItem = inst.root.querySelector('*');
var templateSlotAttribute = this._userTemplate.getAttribute('slot');
if (templateSlotAttribute) {
newItem.setAttribute('slot', templateSlotAttribute);
}
physicalItems[i] = newItem;
this._itemsParent.appendChild(inst.root);
}
return physicalItems;
Expand Down
24 changes: 24 additions & 0 deletions test/fixtures/o-named-list.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->

<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../iron-list.html">

<dom-module id="o-named-list">
<template>
<iron-list id="list" items="{{items}}">
<slot></slot>
</iron-list>
</template>
</dom-module>

<script>
Polymer({ is: 'o-named-list' });
</script>
25 changes: 25 additions & 0 deletions test/fixtures/slot-container.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->

<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="o-named-list.html">

<dom-module id="slot-container">
<template>
<slot></slot>
<o-named-list items="{{items}}">
<slot name="test"></slot>
</o-named-list>
</template>
</dom-module>

<script>
Polymer({ is: 'slot-container' });
</script>
4 changes: 3 additions & 1 deletion test/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
'grid-changed.html?dom=shadow',
'bindings-host-to-item.html?dom=shadow',
'template-overload.html?dom=shadow',
'named-slot.html?dom=shadow',
'scroll-offset.html?dom=shadow',
'basic.html?wc-shadydom=true&wc-ce=true',
'events.html?wc-shadydom=true&wc-ce=true',
Expand All @@ -47,7 +48,8 @@
'grid-changed.html?wc-shadydom=true&wc-ce=true',
'bindings-host-to-item.html?wc-shadydom=true&wc-ce=true',
'template-overload.html?wc-shadydom=true&wc-ce=true',
'scroll-offset.html?wc-shadydom=true&wc-ce=true'
'named-slot.html?wc-shadydom=true&wc-ce=true',
'scroll-offset.html?wc-shadydom=true&wc-cez=true'
]);
</script>
</body>
Expand Down
106 changes: 106 additions & 0 deletions test/named-slot.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<html>
<head>
<meta charset="UTF-8">
<title>iron-list test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>

<link rel="import" href="fixtures/helpers.html">
<link rel="import" href="fixtures/slot-container.html">

</head>
<body>
<!-- Issue: web-component-tester/issues/505 -->
<script>void(0)</script>

<test-fixture id="namedSlotList">
<template>
<slot-container>
<template slot="test">
<div class="overloaded-template">[[item.index]]</div>
</template>
</slot-container>
</template>
</test-fixture>

<script>

suite('named slot test', function() {
var list;

setup(function() {
list = fixture('namedSlotList');
});

test('slots point to the correct places', function(done) {
list.items = buildDataSet(100);

flush(function() {
var oNamedList = list.shadowRoot.querySelector('o-named-list');
assert.isNotNull(oNamedList);
assert.isDefined(oNamedList);
var ironList = oNamedList.shadowRoot.querySelector('iron-list');
assert.isNotNull(ironList);
assert.isDefined(ironList);
// get the light dom slot from slot-container.html
var slot = ironList.children[0];
assert.isNotNull(slot);
assert.isDefined(slot);
assert.isDefined(slot.assignedNodes);
// get the assigned nodes from the slot-container.html slot
var assignedNodes = slot.assignedNodes();
// get the assigned nodes corresponding to
// the template in named-slot.html
assignedNodes = assignedNodes[1].assignedNodes();
// 100 items plus the initial template
assert.equal(assignedNodes.length, 101);
done();
});
});

test('check physical item size', function(done) {
var setSize = 10;
list.items = buildDataSet(setSize);

flush(function() {
assert.equal(list.items.length, setSize);
done();
});
});

test('check item template', function(done) {
list.items = buildDataSet(1);

flush(function() {
assert.isNotNull(Polymer.dom(list).querySelector('.overloaded-template'));
done();
});
});

test('check count of physical items', function(done) {
var setSize = 1;
list.items = buildDataSet(setSize);

flush(function() {
assert.equal(Polymer.dom(list).querySelectorAll('*').length - 1, setSize);
done();
});
});
});

</script>

</body>
</html>