| <!DOCTYPE html> |
| <title>innerText getter test with dynamic style changes</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <div id="container"></div> |
| <script> |
| let container = document.querySelector('#container'); |
| |
| function testText(html, expectedPlain, msg, mutate) { |
| test(function() { |
| container.innerHTML = html; |
| |
| // Cause a flush of style and layout |
| document.body.offsetTop; |
| |
| mutate(); |
| |
| var e = document.getElementById('target'); |
| if (!e) { |
| e = container.firstChild; |
| } |
| assert_equals(e.innerText, expectedPlain); |
| container.textContext = ''; |
| }, msg + ' (' + format_value(html) + ')'); |
| } |
| |
| function setStyle(id, attr, value) { |
| let el = document.getElementById(id); |
| if (el) { |
| el.style[attr] = value; |
| } |
| } |
| |
| testText("<div id='target'><div id='child'>abc", "ABC", |
| "text-transform applied to child element", function() { |
| setStyle("child", "text-transform", "uppercase"); |
| }); |
| testText("<div id='parent'><div id='target'>abc", "ABC", |
| "text-transform applied to parent element", function() { |
| setStyle("parent", "text-transform", "uppercase"); |
| }); |
| |
| testText("<div id='target'>abc<div id='child'>def", "abc", |
| "display: none applied to child element", function() { |
| setStyle("child", "display", "none"); |
| }); |
| testText("<div id='parent'>invisible<div id='target'>abc", "abc", |
| "display: none applied to parent element", function() { |
| setStyle("parent", "display", "none"); |
| }); |
| |
| testText("<div id='target'>abc", "abc\ndef", |
| "insert node into sub-tree", function() { |
| let el = document.getElementById("target"); |
| if (el) { |
| let c = document.createTextNode("def"); |
| let d = document.createElement("div"); |
| d.appendChild(c); |
| el.appendChild(d); |
| } |
| }); |
| |
| testText("<div id='target'>abc<div id='remove'>def", "abc", |
| "remove node from sub-tree", function() { |
| let el = document.getElementById("target"); |
| let victim = document.getElementById("remove"); |
| if (el && victim) { |
| el.removeChild(victim); |
| } |
| }); |
| |
| testText("<div id='target'>", "abcdef", |
| "insert whole sub-tree", function() { |
| var el = document.getElementById("target"); |
| if (el) { |
| var def = document.createTextNode("def"); |
| var s = document.createElement("span"); |
| s.appendChild(def); |
| |
| var abc = document.createTextNode("abc"); |
| var d = document.createElement("div"); |
| d.appendChild(abc); |
| d.appendChild(s); |
| el.appendChild(d); |
| } |
| }); |
| </script> |