| <!doctype html> |
| <html> |
| <head> |
| <script src="../../fast/js/resources/js-test-pre.js"></script> |
| <script src="resources/helper.js"></script> |
| <style> |
| html { -webkit-writing-mode: vertical-lr; } |
| body { font-family: monospace; } |
| #article { -webkit-flow-into: flow; } |
| .regionBox { height: 250px; width: 50px; } |
| #region { -webkit-flow-from: flow; } |
| #region2 { -webkit-flow-from: flow; } |
| #region3 { -webkit-flow-from: flow; } |
| |
| #article2 { -webkit-flow-into: flow2; } |
| #region4 { -webkit-flow-from: flow2; } |
| #region5 { -webkit-flow-from: flow2; } |
| |
| .noRegion { -webkit-flow-from: none; } |
| </style> |
| </head> |
| <body> |
| <!-- some tests with inline elements --> |
| <div id="article"> |
| <span id="spanNode">Text inside span.</span> |
| Text outside span. Text outside span. Text outside span. |
| <span id="spanNode2">Text inside span2. Text.</span> |
| <span id="spanNode3">Text inside span3</span> |
| </div> |
| <div id="region" class="regionBox"></div> |
| <div id="region2" class="regionBox"></div> |
| |
| <!-- some tests with block elements --> |
| <div id="article2"> |
| <p id="p1">Text inside paragraph p1.</p> |
| </div> |
| <div id="region4" class="regionBox"></region> |
| <script> |
| if (window.testRunner) |
| window.testRunner.dumpAsText(); |
| description("Test for 90759: [CSSRegions] Rename NamedFlow::getRegionsByContentNode to NamedFlow::getRegionsByContent"); |
| var namedFlow = getFlowByName("flow"); |
| |
| function hideRegions() |
| { |
| document.getElementById("article").style.visibility = "hidden"; |
| document.getElementById("article2").style.visibility = "hidden"; |
| document.getElementById("region").style.visibility = "hidden"; |
| document.getElementById("region2").style.visibility = "hidden"; |
| document.getElementById("region3").style.visibility = "hidden"; |
| document.getElementById("region4").style.visibility = "hidden"; |
| document.getElementById("region5").style.visibility = "hidden"; |
| } |
| |
| var regionListArticle = namedFlow.getRegionsByContent(document.getElementById("article")); |
| shouldBeNonNull("regionListArticle"); |
| shouldEvaluateTo("regionListArticle.length", 2); |
| shouldBeEqualToString("regionListArticle.item(0).id", "region"); |
| shouldBeEqualToString("regionListArticle.item(1).id", "region2"); |
| |
| var spanNode = document.getElementById("spanNode"); |
| var regionListSpan = namedFlow.getRegionsByContent(spanNode); |
| shouldBeNonNull("regionListSpan"); |
| shouldEvaluateTo("regionListSpan.length", 1); |
| shouldBeEqualToString("regionListSpan.item(0).id", "region"); |
| |
| var spanNode2 = document.getElementById("spanNode2"); |
| var regionListSpan2 = namedFlow.getRegionsByContent(spanNode2); |
| shouldBeNonNull("regionListSpan2"); |
| shouldEvaluateTo("regionListSpan2.length", 2); |
| |
| var spanNode3 = document.getElementById("spanNode3"); |
| var regionListSpan3 = namedFlow.getRegionsByContent(spanNode3); |
| shouldBeNonNull("regionListSpan3"); |
| shouldEvaluateTo("regionListSpan3.length", 1); |
| shouldBeEqualToString("regionListSpan3.item(0).id", "region2"); |
| |
| var textNode = document.createTextNode("Text node. Text node. Text node. Text node. Text node. Text node. Text node. "); |
| document.getElementById("article").appendChild(textNode); |
| var regionListTextNode = namedFlow.getRegionsByContent(textNode); |
| shouldBeNonNull("regionListTextNode"); |
| shouldEvaluateTo("regionListTextNode.length", 1); |
| shouldBeEqualToString("regionListTextNode.item(0).id", "region2"); |
| |
| // Add another text node that will overflow the region2. |
| var textNode2 = document.createTextNode("Text node2."); |
| document.getElementById("article").appendChild(textNode2); |
| var regionListTextNode2 = namedFlow.getRegionsByContent(textNode2); |
| shouldBeNonNull("regionListTextNode2"); |
| shouldEvaluateTo("regionListTextNode2.length", 1); |
| shouldBeEqualToString("regionListTextNode2.item(0).id", "region2"); |
| |
| // Add another text node that is in the overflow of the last region. |
| var textNode3 = document.createTextNode("Text node3."); |
| document.getElementById("article").appendChild(textNode3); |
| var regionListTextNode3 = namedFlow.getRegionsByContent(textNode3); |
| shouldBeNonNull("regionListTextNode3"); |
| shouldEvaluateTo("regionListTextNode3.length", 1); |
| shouldBeEqualToString("regionListTextNode3.item(0).id", "region2"); |
| |
| // Add another region to take the overflowing elements from second region. |
| var region3 = document.createElement("div"); |
| region3.id = "region3"; |
| region3.className = "regionBox"; |
| document.body.appendChild(region3); |
| |
| var regionListTextNode2 = namedFlow.getRegionsByContent(textNode); |
| shouldEvaluateTo("regionListTextNode2.length", 2); |
| shouldBeEqualToString("regionListTextNode2.item(0).id", "region2"); |
| shouldBeEqualToString("regionListTextNode2.item(1).id", "region3"); |
| |
| var regionListTextNode32 = namedFlow.getRegionsByContent(textNode3); |
| shouldEvaluateTo("regionListTextNode32.length", 1); |
| shouldBeEqualToString("regionListTextNode32.item(0).id", "region3"); |
| |
| var namedFlow2 = getFlowByName("flow2"); |
| var regionListP1 = namedFlow2.getRegionsByContent(document.getElementById("p1")); |
| shouldBeNonNull("regionListP1"); |
| shouldEvaluateTo("regionListP1.length", 1); |
| shouldBeEqualToString("regionListP1.item(0).id", "region4"); |
| |
| var p2 = document.createElement("p"); |
| p2.id = "p2"; |
| p2.appendChild(document.createTextNode("Text inside paragraph p2.")); |
| document.getElementById("article2").appendChild(p2); |
| var regionListP2 = namedFlow2.getRegionsByContent(p2); |
| shouldBeNonNull("regionListP2"); |
| shouldEvaluateTo("regionListP2.length", 1); |
| shouldBeEqualToString("regionListP2.item(0).id", "region4"); |
| |
| // add another element p, in the overflow part of the region4 |
| var p3 = document.createElement("p"); |
| p3.id = "p3"; |
| p3.appendChild(document.createTextNode("Text inside paragraph p3.")); |
| document.getElementById("article2").appendChild(p3); |
| var regionListP3 = namedFlow2.getRegionsByContent(p3); |
| shouldBeNonNull("regionListP3"); |
| shouldEvaluateTo("regionListP3.length", 1); |
| shouldBeEqualToString("regionListP3.item(0).id", "region4"); |
| |
| // add another region to flow2, p2 and p3 go to region5 |
| var region5 = document.createElement("div"); |
| region5.id = "region5"; |
| region5.className = "regionBox"; |
| document.body.appendChild(region5); |
| |
| var regionListP22 = namedFlow2.getRegionsByContent(p2); |
| shouldEvaluateTo("regionListP22.length", 1); |
| shouldBeEqualToString("regionListP22.item(0).id", "region5"); |
| |
| hideRegions(); |
| </script> |
| <script src="../../fast/js/resources/js-test-post.js"></script> |
| </body> |
| </html> |
