dynamic-getter.html (2908B)
1 <!DOCTYPE html> 2 <title>innerText/outerText getter test with dynamic style changes</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <div id="container"></div> 6 <script> 7 let container = document.querySelector('#container'); 8 9 function testText(html, expectedPlain, msg, mutate) { 10 test(function() { 11 container.innerHTML = html; 12 13 // Cause a flush of style and layout 14 document.body.offsetTop; 15 16 mutate(); 17 18 var e = document.getElementById('target'); 19 if (!e) { 20 e = container.firstChild; 21 } 22 assert_equals(e.innerText, expectedPlain, "innerText"); 23 assert_equals(e.outerText, expectedPlain, "outerText"); 24 container.textContext = ''; 25 }, msg + ' (' + format_value(html) + ')'); 26 } 27 28 function setStyle(id, attr, value) { 29 let el = document.getElementById(id); 30 if (el) { 31 el.style[attr] = value; 32 } 33 } 34 35 testText("<div id='target'><div id='child'>abc", "ABC", 36 "text-transform applied to child element", function() { 37 setStyle("child", "text-transform", "uppercase"); 38 }); 39 testText("<div id='parent'><div id='target'>abc", "ABC", 40 "text-transform applied to parent element", function() { 41 setStyle("parent", "text-transform", "uppercase"); 42 }); 43 44 testText("<div id='target'>abc<div id='child'>def", "abc", 45 "display: none applied to child element", function() { 46 setStyle("child", "display", "none"); 47 }); 48 testText("<div id='parent'>invisible<div id='target'>abc", "abc", 49 "display: none applied to parent element", function() { 50 setStyle("parent", "display", "none"); 51 }); 52 53 testText("<div id='target'>abc", "abc\ndef", 54 "insert node into sub-tree", function() { 55 let el = document.getElementById("target"); 56 if (el) { 57 let c = document.createTextNode("def"); 58 let d = document.createElement("div"); 59 d.appendChild(c); 60 el.appendChild(d); 61 } 62 }); 63 64 testText("<div id='target'>abc<div id='remove'>def", "abc", 65 "remove node from sub-tree", function() { 66 let el = document.getElementById("target"); 67 let victim = document.getElementById("remove"); 68 if (el && victim) { 69 el.removeChild(victim); 70 } 71 }); 72 73 testText("<div id='target'>", "abcdef", 74 "insert whole sub-tree", function() { 75 var el = document.getElementById("target"); 76 if (el) { 77 var def = document.createTextNode("def"); 78 var s = document.createElement("span"); 79 s.appendChild(def); 80 81 var abc = document.createTextNode("abc"); 82 var d = document.createElement("div"); 83 d.appendChild(abc); 84 d.appendChild(s); 85 el.appendChild(d); 86 } 87 }); 88 </script>