<!DOCTYPE html>
<html>
<head>
<script src="resources/shadow-dom.js"></script>
<style>
div {
  margin: 10px 10px 10px 10px;
  border: solid black;
}
</style>
</head>
<body>
<script>
function text(contents) {
    return document.createTextNode(contents);
}

function shadowRoot() {
    return createShadowRootWithAttributes({'applyAuthorStyles': true}, Array.prototype.slice.call(arguments));
}

// Test for a content element which is selected by another content element.
document.body.appendChild(
    createDOM('div', {},
              shadowRoot(
                  createDOM('div', {},
                            shadowRoot(
                                createDOM('content', {'select': '#b-content'}),
                                createDOM('div', {}, text('b-1')),
                                createDOM('content', {'select': '#b-2'})),
                            createDOM('content', {'id': 'b-content', 'select': '#b-2'},
                                      createDOM('div', {}, text('should-not-be-used'))),
                            createDOM('div', {}, text('should-not-be-used')))),
              createDOM('div', {'id': 'b-2'}, text('b-2'))));

// debug('Test for a reprojection. Content elements should be used in document order.');
document.body.appendChild(
    createDOM('div', {},
              shadowRoot(
                  createDOM('content', {'select': '#c-1'}),
                  createDOM('div', {},
                            shadowRoot(
                                createDOM('content', {'select': '.child'})),
                            createDOM('content', {'select': '.child'}))),
              createDOM('div', {'id': 'c-1', 'class': 'child'}, text('c-1')),
              createDOM('div', {'id': 'c-2', 'class': 'child'}, text('c-2'))));

// debug('Test for complex re-projections.');
document.body.appendChild(
    createDOM('div', {},
              shadowRoot(
                  createDOM('div', {},
                            shadowRoot(
                                // Select #d-child-1, div, d-5
                                createDOM('content', {'select': '.foo'}),
                                createDOM('div', {}, text('d-1'))),
                            // Select #d-child-1
                            createDOM('content', {'select': '#d-child-1'},
                                      createDOM('div', {}, text('Should not be used')),
                                      createDOM('content', {'select': '.foo'}, text('Should not select any nodes. This is inactive.'))),
                            createDOM('div', {'class': 'foo'},
                                      shadowRoot(
                                          createDOM('div', {}, text('d-2')),
                                          // Select #d-child-2 and #d-4.
                                          createDOM('content', {'select': '.foo'}),
                                          createDOM('div', {}, text('d-3'))),
                                      // Select #d-child-2
                                      createDOM('content', {'select': '#d-child-2'}),
                                      createDOM('div', {'id': 'd-4', 'class': 'foo'}, text('d-4'))),
                            createDOM('div', {}, text('Should not be selected')),
                            createDOM('div', {'class': 'foo'}, text('d-5')))),
              createDOM('div', {'id': 'd-child-1', 'class': 'foo'}, text('d-child-1')),
              createDOM('div', {'class': 'foo'}, text('should-not-be-selected')),
              createDOM('div', {'id': 'd-child-2', 'class': 'foo'}, text('d-child-2'))));
</script>
</body>
</html>