LayoutTests/inspector/styles/protocol-css-regions-commands.html - WebKit - Git at Google

 <html>
 <head>
 <script src="../../http/tests/inspector/inspector-test.js"></script>
 <script>

 function createDynamicElements()
 {
     var frameDoc = window.frames[0].document;

     var el = frameDoc.createElement("article");
     el.style.webkitFlowInto = "flow4";
     frameDoc.body.appendChild(el);

     el = frameDoc.createElement("div");
     el.style.webkitFlowFrom = "flow4";
     frameDoc.body.appendChild(el);

     runTest();
 }

 function createNamedFlow()
 {
     var article = document.createElement("article");
     var div = document.createElement("div");

     article.id = "tmpArticle";
     article.style["-webkit-flow-into"] = "tmpNamedFlow";
     article.textContent = "This text is from CSS Named Flow \"tmpNamedFlow\"";

     div.id = "tmpDiv";
     div.style["-webkit-flow-from"] = "tmpNamedFlow";
     div.style["height"] = "5px";
     div.style["width"] = "20px";

     document.body.appendChild(article);
     document.body.appendChild(div);
 }

 function removeNamedFlow()
 {
     document.body.removeChild(document.getElementById("tmpArticle"));
     document.body.removeChild(document.getElementById("tmpDiv"));
 }

 function test()
 {
     WebInspector.showPanel("elements");
     InspectorTest.runTestSuite([
         function testGetNamedFlowCollection(next)
         {
             WebInspector.domAgent.requestDocument(documentCallback);

             function documentCallback(document)
             {
                 WebInspector.cssModel.getNamedFlowCollectionAsync(document.id, namedFlowCallback);
             }

             function namedFlowCallback(namedFlowCollection)
             {
                 InspectorTest.addResult("=== CSS Named Flows in main document ===");

                 if (!namedFlowCollection) {
                     InspectorTest.addResult("[!] Failed to get Named Flows");
                     InspectorTest.completeTest();
                     return;
                 }

                 var namedFlowMap = namedFlowCollection.namedFlowMap;
                 var namedFlows = [];
                 for (var flowName in namedFlowMap)
                     namedFlows.push(namedFlowMap[flowName]);

                 namedFlows.sort(function (nf1, nf2) {
                     return ((nf1.name == nf2.name) ? 0 : ((nf1.name > nf2.name) ? 1 : -1));
                 });

                 for (var i = 0; i < namedFlows.length; ++i)
                     printNamedFlow(namedFlows[i]);

                 next();
             }
         },

         function testGetNamedFlowCollectionWithInvalidDocument(next)
         {
             WebInspector.domAgent.requestDocument(documentCallback);

             function documentCallback(document)
             {
                 WebInspector.domAgent.querySelector(document.id, "#fake-document", querySelectorCallback);
             }

             function querySelectorCallback(nodeId)
             {
                 WebInspector.cssModel.getNamedFlowCollectionAsync(nodeId, namedFlowCallback);
             }

             function namedFlowCallback(namedFlowCollection)
             {
                 InspectorTest.addResult("=== CSS Named Flows in #fake-document ===");

                 if (namedFlowCollection) {
                     InspectorTest.addResult("[!] Failed");
                     InspectorTest.completeTest();
                     return;
                 }

                 InspectorTest.addResult("#fake-document is not a document")
                 next();
             }
         },

         function testGetFlowByName(next)
         {
             WebInspector.domAgent.requestDocument(documentCallback);

             function documentCallback(document)
             {
                 WebInspector.cssModel.getFlowByNameAsync(document.id, "flow2", namedFlowCallback);
             }

             function namedFlowCallback(namedFlow)
             {
                 InspectorTest.addResult("=== Named Flow \"flow2\" from main document ===");

                 if (!namedFlow) {
                     InspectorTest.addResult("[!] Failed to get Named Flow");
                     InspectorTest.completeTest();
                     return;
                 }

                 printNamedFlow(namedFlow);

                 next();
             }
         },

         function testGetFlowByNameWithInvalidName(next)
         {
             WebInspector.domAgent.requestDocument(documentCallback);

             function documentCallback(document)
             {
                 WebInspector.cssModel.getFlowByNameAsync(document.id, "flow4", namedFlowCallback);
             }

             function namedFlowCallback(namedFlow)
             {
                 InspectorTest.addResult("=== Name Flow \"flow4\" from main document ===");

                 if (namedFlow) {
                     InspectorTest.addResult("[!] Failed")
                     InspectorTest.completeTest();
                     return;
                 }

                 InspectorTest.addResult("There is no Named Flow \"flow4\" in the main document");
                 next();
             }
         },

         function testNamedFlowCreated(next)
         {
             WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.NamedFlowCreated, callback, this);
             InspectorTest.evaluateInPage("createNamedFlow()");

             function callback(event)
             {
                 if (event.data.name !== "tmpNamedFlow")
                     return;

                 WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.NamedFlowCreated, callback, this);

                 InspectorTest.addResult("NamedFlowCreated: \"tmpNamedFlow\"");
                 next();
             }
         },

         function testRegionOversetChanged(next)
         {
             WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.RegionOversetChanged, callback, this);
             InspectorTest.evaluateInPage("window.document.getElementById(\"region3\").style.webkitFlowFrom=\"flow3\"");

             function callback(event)
             {
                 if (event.data.name !== "flow3")
                     return;

                 WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.RegionOversetChanged, callback, this);

                 InspectorTest.addResult("RegionOversetChanged: \"flow3\"");
                 next();
             }
         },

         function testNamedFlowRemoved(next)
         {
             WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.NamedFlowRemoved, callback, this);
             InspectorTest.evaluateInPage("removeNamedFlow()");

             function callback(event)
             {
                 if (event.data.flowName !== "tmpNamedFlow")
                     return;

                 WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.NamedFlowRemoved, callback, this);

                 InspectorTest.addResult("NamedFlowRemoved: \"tmpNamedFlow\"");
                 next();
             }
         }
     ]);

     function printNamedFlow(namedFlow)
     {
         InspectorTest.addResult("* Named Flow \"" + namedFlow.name + "\"");
         InspectorTest.addResult("Content Elements: " + namedFlow.content.length);
         InspectorTest.addResult("Regions: " + namedFlow.regions.length);
     }
 }
 </script>
 </head>

 <body onload="createDynamicElements()">
 <p>
 Tests the following commands and events:
 <ul>
     <li>getNamedFlowCollection <a href="https://bugs.webkit.org/show_bug.cgi?id=91607">Bug 91607</a></li>
     <li>getFlowByName <a href="https://bugs.webkit.org/show_bug.cgi?id=91855">Bug 91855</a></li>
     <li>namedFlowCreated <a href="https://bugs.webkit.org/show_bug.cgi?id=92739">Bug 92739</a></li>
     <li>namedFlowRemoved <a href="https://bugs.webkit.org/show_bug.cgi?id=92739">Bug 92739</a></li>
     <li>regionOversetChanged <a href="https://bugs.webkit.org/show_bug.cgi?id=117833">Bug 117833</a></li>
 </ul>
 </p>

 <article style="-webkit-flow-into: flow1"></article>
 <div style="-webkit-flow-from: flow1"></div>
 <div style="-webkit-flow-from: flow1"></div>
 <div style="-webkit-flow-from: flow1"></div>

 <article style="-webkit-flow-into: flow2"></article>
 <div style="-webkit-flow-from: flow2"></div>
 <div style="-webkit-flow-from: flow2"></div>

 <article style="-webkit-flow-into: flow3">
     This text is from CSS Named Flow "flow3".
 </article>
 <div id="region3" style="-webkit-flow-from: none; height: 20px; width: 5px"></div>

 <div id="fake-document"></div>

 <iframe></iframe>

 </body>
 </html>
	<html>
	<head>
	<script src="../../http/tests/inspector/inspector-test.js"></script>
	<script>

	function createDynamicElements()
	{
	var frameDoc = window.frames[0].document;

	var el = frameDoc.createElement("article");
	el.style.webkitFlowInto = "flow4";
	frameDoc.body.appendChild(el);

	el = frameDoc.createElement("div");
	el.style.webkitFlowFrom = "flow4";
	frameDoc.body.appendChild(el);

	runTest();
	}

	function createNamedFlow()
	{
	var article = document.createElement("article");
	var div = document.createElement("div");

	article.id = "tmpArticle";
	article.style["-webkit-flow-into"] = "tmpNamedFlow";
	article.textContent = "This text is from CSS Named Flow \"tmpNamedFlow\"";

	div.id = "tmpDiv";
	div.style["-webkit-flow-from"] = "tmpNamedFlow";
	div.style["height"] = "5px";
	div.style["width"] = "20px";

	document.body.appendChild(article);
	document.body.appendChild(div);
	}

	function removeNamedFlow()
	{
	document.body.removeChild(document.getElementById("tmpArticle"));
	document.body.removeChild(document.getElementById("tmpDiv"));
	}

	function test()
	{
	WebInspector.showPanel("elements");
	InspectorTest.runTestSuite([
	function testGetNamedFlowCollection(next)
	{
	WebInspector.domAgent.requestDocument(documentCallback);

	function documentCallback(document)
	{
	WebInspector.cssModel.getNamedFlowCollectionAsync(document.id, namedFlowCallback);
	}

	function namedFlowCallback(namedFlowCollection)
	{
	InspectorTest.addResult("=== CSS Named Flows in main document ===");

	if (!namedFlowCollection) {
	InspectorTest.addResult("[!] Failed to get Named Flows");
	InspectorTest.completeTest();
	return;
	}

	var namedFlowMap = namedFlowCollection.namedFlowMap;
	var namedFlows = [];
	for (var flowName in namedFlowMap)
	namedFlows.push(namedFlowMap[flowName]);

	namedFlows.sort(function (nf1, nf2) {
	return ((nf1.name == nf2.name) ? 0 : ((nf1.name > nf2.name) ? 1 : -1));
	});

	for (var i = 0; i < namedFlows.length; ++i)
	printNamedFlow(namedFlows[i]);

	next();
	}
	},

	function testGetNamedFlowCollectionWithInvalidDocument(next)
	{
	WebInspector.domAgent.requestDocument(documentCallback);

	function documentCallback(document)
	{
	WebInspector.domAgent.querySelector(document.id, "#fake-document", querySelectorCallback);
	}

	function querySelectorCallback(nodeId)
	{
	WebInspector.cssModel.getNamedFlowCollectionAsync(nodeId, namedFlowCallback);
	}

	function namedFlowCallback(namedFlowCollection)
	{
	InspectorTest.addResult("=== CSS Named Flows in #fake-document ===");

	if (namedFlowCollection) {
	InspectorTest.addResult("[!] Failed");
	InspectorTest.completeTest();
	return;
	}

	InspectorTest.addResult("#fake-document is not a document")
	next();
	}
	},

	function testGetFlowByName(next)
	{
	WebInspector.domAgent.requestDocument(documentCallback);

	function documentCallback(document)
	{
	WebInspector.cssModel.getFlowByNameAsync(document.id, "flow2", namedFlowCallback);
	}

	function namedFlowCallback(namedFlow)
	{
	InspectorTest.addResult("=== Named Flow \"flow2\" from main document ===");

	if (!namedFlow) {
	InspectorTest.addResult("[!] Failed to get Named Flow");
	InspectorTest.completeTest();
	return;
	}

	printNamedFlow(namedFlow);

	next();
	}
	},

	function testGetFlowByNameWithInvalidName(next)
	{
	WebInspector.domAgent.requestDocument(documentCallback);

	function documentCallback(document)
	{
	WebInspector.cssModel.getFlowByNameAsync(document.id, "flow4", namedFlowCallback);
	}

	function namedFlowCallback(namedFlow)
	{
	InspectorTest.addResult("=== Name Flow \"flow4\" from main document ===");

	if (namedFlow) {
	InspectorTest.addResult("[!] Failed")
	InspectorTest.completeTest();
	return;
	}

	InspectorTest.addResult("There is no Named Flow \"flow4\" in the main document");
	next();
	}
	},

	function testNamedFlowCreated(next)
	{
	WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.NamedFlowCreated, callback, this);
	InspectorTest.evaluateInPage("createNamedFlow()");

	function callback(event)
	{
	if (event.data.name !== "tmpNamedFlow")
	return;

	WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.NamedFlowCreated, callback, this);

	InspectorTest.addResult("NamedFlowCreated: \"tmpNamedFlow\"");
	next();
	}
	},

	function testRegionOversetChanged(next)
	{
	WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.RegionOversetChanged, callback, this);
	InspectorTest.evaluateInPage("window.document.getElementById(\"region3\").style.webkitFlowFrom=\"flow3\"");

	function callback(event)
	{
	if (event.data.name !== "flow3")
	return;

	WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.RegionOversetChanged, callback, this);

	InspectorTest.addResult("RegionOversetChanged: \"flow3\"");
	next();
	}
	},

	function testNamedFlowRemoved(next)
	{
	WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.NamedFlowRemoved, callback, this);
	InspectorTest.evaluateInPage("removeNamedFlow()");

	function callback(event)
	{
	if (event.data.flowName !== "tmpNamedFlow")
	return;

	WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.NamedFlowRemoved, callback, this);

	InspectorTest.addResult("NamedFlowRemoved: \"tmpNamedFlow\"");
	next();
	}
	}
	]);

	function printNamedFlow(namedFlow)
	{
	InspectorTest.addResult("* Named Flow \"" + namedFlow.name + "\"");
	InspectorTest.addResult("Content Elements: " + namedFlow.content.length);
	InspectorTest.addResult("Regions: " + namedFlow.regions.length);
	}
	}
	</script>
	</head>

	<body onload="createDynamicElements()">
	<p>
	Tests the following commands and events:
	<ul>
	<li>getNamedFlowCollection <a href="https://bugs.webkit.org/show_bug.cgi?id=91607">Bug 91607</a></li>
	<li>getFlowByName <a href="https://bugs.webkit.org/show_bug.cgi?id=91855">Bug 91855</a></li>
	<li>namedFlowCreated <a href="https://bugs.webkit.org/show_bug.cgi?id=92739">Bug 92739</a></li>
	<li>namedFlowRemoved <a href="https://bugs.webkit.org/show_bug.cgi?id=92739">Bug 92739</a></li>
	<li>regionOversetChanged <a href="https://bugs.webkit.org/show_bug.cgi?id=117833">Bug 117833</a></li>
	</ul>
	</p>

	<article style="-webkit-flow-into: flow1"></article>
	<div style="-webkit-flow-from: flow1"></div>
	<div style="-webkit-flow-from: flow1"></div>
	<div style="-webkit-flow-from: flow1"></div>

	<article style="-webkit-flow-into: flow2"></article>
	<div style="-webkit-flow-from: flow2"></div>
	<div style="-webkit-flow-from: flow2"></div>

	<article style="-webkit-flow-into: flow3">
	This text is from CSS Named Flow "flow3".
	</article>
	<div id="region3" style="-webkit-flow-from: none; height: 20px; width: 5px"></div>

	<div id="fake-document"></div>

	<iframe></iframe>

	</body>
	</html>