--- /dev/null
+ <!DOCTYPE html>
+<html>
+<head>
+<style>
+/* relative positioning ensures underlying RenderLayer */
+.container {
+ position: relative;
+}
+
+.span {
+ display: boxed-inline;
+ margin: 2px;
+ border: solid;
+}
+</style>
+<script>
+function log(message) {
+ document.getElementById('console').innerHTML += (message + "\n");
+}
+
+function removeAllChildren(elem) {
+ while (elem.firstChild)
+ elem.removeChild(elem.firstChild);
+}
+
+function cleanUp() {
+ removeAllChildren(document.getElementById('actual-container'));
+ removeAllChildren(document.getElementById('expect-container'));
+}
+
+function removeContainerLines(text) {
+ var lines = text.split('\n');
+ lines.splice(0, 2);
+ return lines.join('\n');
+}
+
+function check() {
+ var refContainerRenderTree = internals.elementRenderTreeAsText(document.getElementById('expect-container'));
+ var refRenderTree = removeContainerLines(refContainerRenderTree);
+
+ var targetContainerRenderTree = internals.elementRenderTreeAsText(document.getElementById('actual-container'));
+ var targetRenderTree = removeContainerLines(targetContainerRenderTree);
+
+ if (targetRenderTree == refRenderTree)
+ log("PASS");
+ else {
+ log("FAIL");
+ log("Expected: ");
+ log(refRenderTree);
+ log("Actual: ");
+ log(targetRenderTree);
+ }
+
+}
+
+function createSpanWithText(text) {
+ var span = document.createElement('span');
+ span.appendChild(document.createTextNode(text));
+ return span;
+}
+
+function appendShadow(target, select) {
+ var root = internals.ensureShadowRoot(target);
+
+ var content = internals.createContentElement(document);
+ content.setAttribute('select', select);
+ content.appendChild(createSpanWithText("FALLBACK"));
+
+ root.appendChild(document.createTextNode("{SHADOW: "));
+ root.appendChild(content);
+ root.appendChild(document.createTextNode("}"));
+}
+
+function appendShadowDeep(target, select) {
+ var root = internals.ensureShadowRoot(target);
+
+ var child = document.createElement("span");
+ {
+ var content = internals.createContentElement(document);
+ content.setAttribute('select', select);
+ content.appendChild(createSpanWithText("FALLBACK"));
+
+ child.appendChild(document.createTextNode("{INNER: "));
+ child.appendChild(content);
+ child.appendChild(document.createTextNode("}"));
+ }
+
+ root.appendChild(document.createTextNode("{SHADOW: "));
+ root.appendChild(child);
+ root.appendChild(document.createTextNode("}"));
+}
+
+function testFallback() {
+ var target = document.createElement('div');
+ target.innerHTML = "<span>SELECTED</span>";
+
+ appendShadow(target, "#non-element");
+
+ document.getElementById('actual-container').appendChild(target);
+ document.getElementById('expect-container').innerHTML =
+ "<div>{SHADOW: <span>FALLBACK</span>}</div>";
+}
+
+function testFallbackDeep() {
+ var target = document.createElement('div');
+ target.innerHTML = "<span>SELECTED</span>";
+
+ appendShadowDeep(target, "#non-element");
+
+ document.getElementById('actual-container').appendChild(target);
+ document.getElementById('expect-container').innerHTML =
+ "<div>{SHADOW: <span>{INNER: <span>FALLBACK</span>}</span>}</div>";
+}
+
+function testNonFallbackWithLightChildren() {
+ var target = document.createElement('div');
+ target.innerHTML = "<span id='selected-1'>SELECTED</span>";
+
+ appendShadow(target, "#selected-1");
+
+ document.getElementById('actual-container').appendChild(target);
+ document.getElementById('expect-container').innerHTML =
+ "<div>{SHADOW: <span>SELECTED</span>}</div>";
+}
+
+function testNonFallbackDeepWithLightChildren() {
+ var target = document.createElement('div');
+ target.innerHTML = "<span id='selected-2'>SELECTED</span>";
+
+ appendShadowDeep(target, "#selected-2");
+
+ document.getElementById('actual-container').appendChild(target);
+ document.getElementById('expect-container').innerHTML =
+ "<div>{SHADOW: <span>{INNER: <span>SELECTED</span>}</span>}</div>";
+}
+
+function testComplexFallback() {
+ var target = document.createElement('div');
+ appendShadow(target, '#complex-1');
+
+ var selectContent = document.createElement('span');
+ selectContent.setAttribute('id', 'complex-1');
+ {
+ selectContent.appendChild(createSpanWithText('SELECTED'));
+ }
+ appendShadow(selectContent, 'span');
+
+ target.appendChild(document.createTextNode('[WONT SELECTED]'));
+ target.appendChild(selectContent);
+ target.appendChild(document.createTextNode('[WONT SELECTED]'));
+
+ document.getElementById('actual-container').appendChild(target);
+ document.getElementById('expect-container').innerHTML =
+ "<div>{SHADOW: <span>{SHADOW: <span>SELECTED</span>}</span>}</div>";
+}
+
+function testComplexFallbackDeep() {
+ var target = document.createElement('div');
+ appendShadowDeep(target, '#complex-2');
+
+ var selectContent = document.createElement('span');
+ selectContent.setAttribute('id', 'complex-2');
+ {
+ selectContent.appendChild(createSpanWithText('SELECTED'));
+ }
+ appendShadowDeep(selectContent, 'span');
+
+ target.appendChild(document.createTextNode('[WONT SELECTED]'));
+ target.appendChild(selectContent);
+ target.appendChild(document.createTextNode('[WONT SELECTED]'));
+
+ document.getElementById('actual-container').appendChild(target);
+ document.getElementById('expect-container').innerHTML =
+ "<div>{SHADOW: <span>{INNER: <span>{SHADOW: <span>{INNER: <span>SELECTED</span>}</span>}</span>}</span>}</span></div>";
+}
+
+function testComplexFallbackAgain() {
+ var target = document.createElement('div');
+ appendShadow(target, '#complex-3');
+
+ var selectContent = document.createElement('span');
+ selectContent.setAttribute('id', 'complex-3');
+ {
+ selectContent.appendChild(createSpanWithText('SELECTED'));
+ }
+ appendShadow(selectContent, '#non-element');
+
+ target.appendChild(document.createTextNode('[WONT SELECTED]'));
+ target.appendChild(selectContent);
+ target.appendChild(document.createTextNode('[WONT SELECTED]'));
+
+ document.getElementById('actual-container').appendChild(target);
+ document.getElementById('expect-container').innerHTML =
+ "<div>{SHADOW: <span>{SHADOW: <span>FALLBACK</span>}</span>}</span></div>";
+}
+
+function testComplexFallbackDeepAgain() {
+ var target = document.createElement('div');
+ appendShadowDeep(target, '#complex-4');
+
+ var selectContent = document.createElement('span');
+ selectContent.setAttribute('id', 'complex-4');
+ {
+ selectContent.appendChild(createSpanWithText('SELECTED'));
+ }
+ appendShadowDeep(selectContent, '#non-element');
+
+ target.appendChild(document.createTextNode('[WONT SELECTED]'));
+ target.appendChild(selectContent);
+ target.appendChild(document.createTextNode('[WONT SELECTED]'));
+
+ document.getElementById('actual-container').appendChild(target);
+ document.getElementById('expect-container').innerHTML =
+ "<div>{SHADOW: <span>{INNER: <span>{SHADOW: <span>{INNER: <span>FALLBACK</span>}</span>}</span>}</span>}</span></div>";
+}
+
+var testFuncs = [
+ testFallback,
+ testFallbackDeep,
+ testNonFallbackWithLightChildren,
+ testNonFallbackDeepWithLightChildren,
+ testComplexFallback,
+ testComplexFallbackDeep,
+ testComplexFallbackAgain,
+ testComplexFallbackDeepAgain
+]
+
+function doTest() {
+ layoutTestController.dumpAsText();
+ cleanUp();
+
+ for (var i = 0; i < testFuncs.length; ++i) {
+ testFuncs[i]();
+ check();
+ cleanUp();
+ }
+}
+</script>
+</head>
+<body onload="doTest()">
+
+<div id="actual-container" class="container"></div>
+<div id="expect-container" class="container"></div>
+<pre id="console"></pre>
+
+</body>
+</html>
projects / profile / ivi / webkit-efl.git / commitdiff