Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Test for the tree-listbox custom element</title>
<style>
:focus {
outline: 3px blue solid;
}
html {
height: 100%;
}
body {
height: 100%;
display: flex;
margin: 0;
}
ul[is="tree-listbox"] {
overflow-y: auto;
white-space: nowrap;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li > div {
display: flex;
align-items: center;
}
li.selected > div {
color: white;
background-color: blue;
}
li > ul {
padding-inline-start: 1em;
}
li.collapsed > ul {
display: none;
}
div.twisty {
width: 1em;
height: 1em;
}
li.children > div > div.twisty {
background-color: green;
}
li.children.collapsed > div > div.twisty {
background-color: red;
}
li.unselectable > div {
background-color: red;
}
</style>
</head>
<body>
<ul is="tree-listbox" role="tree">
<li id="row-1">
<div>
<div class="twisty"></div>
Item with no children
</div>
</li>
<li id="row-2">
<div>
<div class="twisty"></div>
Item with children
</div>
<ul>
<li id="row-2-1">
<div>
<div class="twisty"></div>
First child
</div>
</li>
<li id="row-2-2">
<div>
<div class="twisty"></div>
Second child
</div>
</li>
</ul>
</li>
<li id="row-3">
<div>
<div class="twisty"></div>
Item with grandchildren
</div>
<ul>
<li id="row-3-1">
<div>
<div class="twisty"></div>
First child
</div>
<ul>
<li id="row-3-1-1">
<div>
<div class="twisty"></div>
First grandchild
</div>
</li>
<li id="row-3-1-2">
<div>
<div class="twisty"></div>
Second grandchild
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<template id="rowToAdd">
<li id="new-row">
<div>
<div class="twisty"></div>
New row
</div>
</li>
</template>
<template id="rowsToAdd">
<li id="added-row">
<div>
<div class="twisty"></div>
Added row
</div>
<ul>
<li id="added-row-1">
<div>
<div class="twisty"></div>
Added child
</div>
<ul>
<li id="added-row-1-1">
<div>
<div class="twisty"></div>
Added grandchild
</div>
</li>
</ul>
</li>
<li id="added-row-2">
<div>
<div class="twisty"></div>
Added child
</div>
</li>
</ul>
</li>
</template>
<!-- Larger tree for deleting from -->
<ul>
<li>Before</li>
<li>
<!-- Place under a plain <li> an <ul> to make sure our selector logic
- doesn't break down. -->
<ul is="tree-listbox" id="deleteTree" role="tree">
<li id="dRow-1" class="collapsed">
<div>
<div class="twisty"></div>
Item with collapsed children
</div>
<ul>
<li id="dRow-1-1">
<div>
<div class="twisty"></div>
Hidden child
</div>
</li>
</ul>
</li>
<li id="dRow-2">
<div>
<div class="twisty"></div>
Item with children
</div>
<ul>
<li id="dRow-2-1">
<div>
<div class="twisty"></div>
First child
</div>
</li>
<li id="dRow-2-2">
<div>
<div class="twisty"></div>
Second child
</div>
</li>
</ul>
</li>
<li id="dRow-3">
<div>
<div class="twisty"></div>
Item with grandchildren
</div>
<ul>
<li id="dRow-3-1">
<div>
<div class="twisty"></div>
First child
</div>
<ul>
<li id="dRow-3-1-1" class="collapsed">
<div>
<div class="twisty"></div>
First grandchild
</div>
<ul>
<li id="dRow-3-1-1-1">
<div>
<div class="twisty"></div>
Hidden child
</div>
</li>
</ul>
</li>
<li id="dRow-3-1-2">
<div>
<div class="twisty"></div>
Second grandchild
</div>
</li>
<li id="dRow-3-1-3" class="collapsed">
<div>
<div class="twisty"></div>
Third grandchild
</div>
<ul>
<li id="dRow-3-1-3-1">
<div>
<div class="twisty"></div>
Hidden child
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="dRow-4">
<div>
<div class="twisty"></div>
Fourth item
</div>
<ul>
<li id="dRow-4-1" class="collapsed">
<div>
<div class="twisty"></div>
First child
</div>
<ul>
<li id="dRow-4-1-1">
<div>
<div class="twisty"></div>
Hidden child 1
</div>
</li>
<li id="dRow-4-1-2">
<div>
<div class="twisty"></div>
Hidden child 2
</div>
</li>
</ul>
</li>
<li id="dRow-4-2">
<div>
<div class="twisty"></div>
Second child
</div>
</li>
<li id="dRow-4-3">
<div>
<div class="twisty"></div>
Third child
</div>
<ul>
<li id="dRow-4-3-1">
<div>
<div class="twisty"></div>
First Grand child
</div>
</li>
<li id="dRow-4-3-2">
<div>
<div class="twisty"></div>
Second Grand child
</div>
</li>
</ul>
</li>
<li id="dRow-4-4" class="collapsed">
<div>
<div class="twisty"></div>
Fourth child
</div>
<ul>
<li id="dRow-4-4-1">
<div>
<div class="twisty"></div>
Hidden child 1
</div>
</li>
<li id="dRow-4-4-2">
<div>
<div class="twisty"></div>
Hidden child 2
</div>
</li>
</ul>
</li>
</ul>
</li>
<li id="dRow-5">
<div>
<div class="twisty"></div>
Second last item
</div>
<ul>
<li id="dRow-5-1">
<div>
<div class="twisty"></div>
Last child
</div>
</li>
</ul>
</li>
<li id="dRow-6">
<div>
<div class="twisty"></div>
Last item
</div>
</li>
</ul>
</li>
<li>After</li>
</ul>
<!-- Tree with unselectable rows -->
<ul is="tree-listbox" id="unselectableTree" role="tree">
<li id="uRow-1" class="unselectable">
<div>Item with no children</div>
</li>
<li id="uRow-2" class="unselectable">
<div>Item with children</div>
<ul>
<li id="uRow-2-1">
<div>
<div class="twisty"></div>
First child
</div>
</li>
<li id="uRow-2-2">
<div>
<div class="twisty"></div>
Second child
</div>
</li>
</ul>
</li>
<li id="uRow-3" class="unselectable">
<div>Item with grandchildren</div>
<ul>
<li id="uRow-3-1">
<div>
<div class="twisty"></div>
First child
</div>
<ul>
<li id="uRow-3-1-1">
<div>
<div class="twisty"></div>
First grandchild
</div>
</li>
<li id="uRow-3-1-2">
<div>
<div class="twisty"></div>
Second grandchild
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>