--- /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 createContentWithSelect(select, fallback) {
+ var content = internals.createContentElement(document);
+ content.setAttribute('select', select);
+ if (!fallback)
+ content.appendChild(createSpanWithText("FALLBACK"));
+
+ return content;
+}
+
+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("}"));
+}
+
+// ----------------------------------------------------------------------
+// Test Functions.
+
+function testChangeSelect1(callIfDone) {
+ document.getElementById('expect-container').innerHTML =
+ "<div><span>BEFORE</span><span>LIGHT 2</span><span>AFTER</span></div>";
+
+ var root = document.createElement('div');
+
+ // Create light tree.
+ root.innerHTML = "<span class='c1'>LIGHT 1</span><span class='c2'>LIGHT 2</span>";
+
+ // Create shadow tree.
+ var content = createContentWithSelect('.c1');
+ var sr = internals.ensureShadowRoot(root);
+ sr.appendChild(createSpanWithText("BEFORE"));
+ sr.appendChild(content);
+ sr.appendChild(createSpanWithText("AFTER"));
+
+ document.getElementById('actual-container').appendChild(root);
+
+ var f = (function(root, content, callIfDone) {
+ return function() {
+ content.setAttribute('select', '.c2');
+ callIfDone();
+ };
+ })(root, content, callIfDone);
+
+ setTimeout(f, 0);
+}
+
+function testChangeSelect2(callIfDone) {
+ document.getElementById('expect-container').innerHTML =
+ "<div><span>BEFORE</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>";
+
+ var root = document.createElement('div');
+
+ // Create light tree.
+ root.innerHTML = "<span class='c1'>LIGHT 1</span><span class='c2'>LIGHT 2</span>";
+
+ // Create shadow tree.
+ var content = createContentWithSelect('.c1');
+ var sr = internals.ensureShadowRoot(root);
+ sr.appendChild(createSpanWithText("BEFORE"));
+ sr.appendChild(content);
+ sr.appendChild(createSpanWithText("AFTER"));
+
+ document.getElementById('actual-container').appendChild(root);
+
+ var f = (function(root, content, callIfDone) {
+ return function() {
+ content.setAttribute('select', 'span');
+ callIfDone();
+ };
+ })(root, content, callIfDone);
+
+ setTimeout(f, 0);
+}
+
+function testChangeSelectToEmpty(callIfDone) {
+ document.getElementById('expect-container').innerHTML =
+ "<div><span>BEFORE</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>";
+
+ var root = document.createElement('div');
+
+ // Create light tree.
+ root.innerHTML = "<span class='c1'>LIGHT 1</span><span class='c2'>LIGHT 2</span>";
+
+ // Create shadow tree.
+ var content = createContentWithSelect('.c1');
+ var sr = internals.ensureShadowRoot(root);
+ sr.appendChild(createSpanWithText("BEFORE"));
+ sr.appendChild(content);
+ sr.appendChild(createSpanWithText("AFTER"));
+
+ document.getElementById('actual-container').appendChild(root);
+
+ var f = (function(root, content, callIfDone) {
+ return function() {
+ content.removeAttribute('select');
+ callIfDone();
+ };
+ })(root, content, callIfDone);
+
+ setTimeout(f, 0);
+}
+
+function testChangeSelectToFallback(callIfDone) {
+ document.getElementById('expect-container').innerHTML =
+ "<div><span>BEFORE</span><span>FALLBACK</span><span>AFTER</span></div>";
+
+ var root = document.createElement('div');
+
+ // Create light tree.
+ root.innerHTML = "<span class='c1'>LIGHT 1</span><span class='c2'>LIGHT 2</span>";
+
+ // Create shadow tree.
+ var content = createContentWithSelect('.c1');
+ content.innerHTML = "<span>FALLBACK</span>"
+
+ var sr = internals.ensureShadowRoot(root);
+ sr.appendChild(createSpanWithText("BEFORE"));
+ sr.appendChild(content);
+ sr.appendChild(createSpanWithText("AFTER"));
+
+ document.getElementById('actual-container').appendChild(root);
+
+ var f = (function(root, content, callIfDone) {
+ return function() {
+ content.setAttribute('select', 'div')
+ callIfDone();
+ };
+ })(root, content, callIfDone);
+
+ setTimeout(f, 0);
+}
+
+function testChangeSelectFromFallback(callIfDone) {
+ document.getElementById('expect-container').innerHTML =
+ "<div><span>BEFORE</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>";
+
+ var root = document.createElement('div');
+
+ // Create light tree.
+ root.innerHTML = "<span class='c1'>LIGHT 1</span><span class='c2'>LIGHT 2</span>";
+
+ // Create shadow tree.
+ var content = createContentWithSelect('div');
+ content.innerHTML = "<span>FALLBACK</span>"
+
+ var sr = internals.ensureShadowRoot(root);
+ sr.appendChild(createSpanWithText("BEFORE"));
+ sr.appendChild(content);
+ sr.appendChild(createSpanWithText("AFTER"));
+
+ document.getElementById('actual-container').appendChild(root);
+
+ var f = (function(root, content, callIfDone) {
+ return function() {
+ content.setAttribute('select', 'span')
+ callIfDone();
+ };
+ })(root, content, callIfDone);
+
+ setTimeout(f, 0);
+}
+
+// ----------------------------------------------------------------------
+// Test Drivers.
+
+var testFuncs = [
+ testChangeSelect1,
+ testChangeSelect2,
+ testChangeSelectToEmpty,
+ testChangeSelectToFallback,
+ testChangeSelectFromFallback,
+];
+
+function doTestIfLeft() {
+ var test = testFuncs.shift();
+ if (test == null)
+ return doneTest();
+
+ var callIfDone = function() {
+ setTimeout(function() {
+ check();
+ cleanUp();
+ doTestIfLeft();
+ }, 0);
+ };
+
+ log(test.name);
+ test(callIfDone);
+}
+
+function doneTest() {
+ log("TEST COMPLETED");
+ layoutTestController.notifyDone();
+}
+
+function doTest() {
+ if (window.layoutTestController) {
+ layoutTestController.waitUntilDone();
+ layoutTestController.dumpAsText();
+ }
+
+ cleanUp();
+ doTestIfLeft();
+}
+</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