third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-new-API.html - chromium/src.git - Git at Google

 <html>
 <head>

 <link rel="stylesheet" href="resources/styles-new-API.css">

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

 function test()
 {
     var bodyId;
     InspectorTest.runTestSuite([
         function test_styles(next)
         {
             function callback(styles)
             {
                 InspectorTest.addResult("");
                 InspectorTest.addResult("=== Computed style property count for body ===");
                 var propCount = styles.computedStyle.length;
                 InspectorTest.addResult(propCount > 200 ? "OK" : "FAIL (" + propCount + ")");

                 InspectorTest.addResult("");
                 InspectorTest.addResult("=== Matched rules for body ===");
                 InspectorTest.dumpRuleMatchesArray(styles.matchedCSSRules);

                 InspectorTest.addResult("");
                 InspectorTest.addResult("=== Pseudo rules for body ===");
                 for (var i = 0; i < styles.pseudoElements.length; ++i) {
                     InspectorTest.addResult("PseudoType=" + styles.pseudoElements[i].pseudoType);
                     InspectorTest.dumpRuleMatchesArray(styles.pseudoElements[i].matches);
                 }

                 InspectorTest.addResult("");
                 InspectorTest.addResult("=== Inherited styles for body ===");
                 for (var i = 0; i < styles.inherited.length; ++i) {
                     InspectorTest.addResult("Level=" + (i + 1));
                     InspectorTest.dumpStyle(styles.inherited[i].inlineStyle);
                     InspectorTest.dumpRuleMatchesArray(styles.inherited[i].matchedCSSRules);
                 }

                 InspectorTest.addResult("");
                 InspectorTest.addResult("=== Inline style for body ===");
                 InspectorTest.dumpStyle(styles.inlineStyle);
                 next();
             }

             var resultStyles = {};

             function computedCallback(computedStyle)
             {
                 if (!computedStyle) {
                     InspectorTest.addResult("Error");
                     InspectorTest.completeTest();
                     return;
                 }
                 resultStyles.computedStyle = computedStyle;
             }

             function matchedCallback(response)
             {
                 if (response[Protocol.Error]) {
                     InspectorTest.addResult("error: " + response[Protocol.Error]);
                     InspectorTest.completeTest();
                     return;
                 }

                 resultStyles.inlineStyle = response.inlineStyle;
                 resultStyles.matchedCSSRules = response.matchedCSSRules;
                 resultStyles.pseudoElements = response.pseudoElements;
                 resultStyles.inherited = response.inherited;
             }

             function nodeCallback(node)
             {
                 bodyId = node.id;
                 var promises = [
                     InspectorTest.CSSAgent.getComputedStyleForNode(node.id).then(computedCallback),
                     InspectorTest.CSSAgent.invoke_getMatchedStylesForNode({nodeId: node.id}).then(matchedCallback)
                 ];
                 Promise.all(promises).then(callback.bind(null, resultStyles));
             }
             InspectorTest.selectNodeWithId("mainBody", nodeCallback);
         },

         async function test_forcedState(next)
         {
             InspectorTest.CSSAgent.forcePseudoState(bodyId, ["hover"]);
             var response = await InspectorTest.CSSAgent.invoke_getMatchedStylesForNode({nodeId: bodyId});

             InspectorTest.addResult("=== BODY with forced :hover ===");
             InspectorTest.dumpRuleMatchesArray(response.matchedCSSRules);
             InspectorTest.CSSAgent.forcePseudoState(bodyId, ["hover"]).then(next);
         },

         function test_textNodeComputedStyles(next)
         {
             InspectorTest.nodeWithId("toggle", nodeCallback);

             async function nodeCallback(node)
             {
                 var textNode = node.children()[0];
                 if (textNode.nodeType() !== Node.TEXT_NODE) {
                     InspectorTest.addResult("Failed to retrieve TextNode.");
                     InspectorTest.completeTest();
                     return;
                 }
                 var computedStyle = await InspectorTest.CSSAgent.getComputedStyleForNode(textNode.id);
                 if (!computedStyle) {
                     InspectorTest.addResult("Error");
                     return;
                 }
                 InspectorTest.addResult("");
                 InspectorTest.addResult("=== Computed style property count for TextNode ===");
                 var propCount = computedStyle.length;
                 InspectorTest.addResult(propCount > 200 ? "OK" : "FAIL (" + propCount + ")");
                 next();
             }
         },

         function test_tableStyles(next)
         {
             async function nodeCallback(node)
             {
                 var response = await InspectorTest.CSSAgent.invoke_getInlineStylesForNode({nodeId: node.id});
                 if (response[Protocol.Error]) {
                     InspectorTest.addResult("error: " + response[Protocol.Error]);
                     next();
                     return;
                 }
                 InspectorTest.addResult("");
                 InspectorTest.addResult("=== Attributes style for table ===");
                 InspectorTest.dumpStyle(response.attributesStyle);

                 var result = await InspectorTest.CSSAgent.getStyleSheetText(response.inlineStyle.styleSheetId);

                 InspectorTest.addResult("");
                 InspectorTest.addResult("=== Stylesheet-for-inline-style text ===");
                 InspectorTest.addResult(result || "");

                 await InspectorTest.CSSAgent.setStyleSheetText(response.inlineStyle.styleSheetId, "");

                 InspectorTest.addResult("");
                 InspectorTest.addResult("=== Stylesheet-for-inline-style modification result ===");
                 InspectorTest.addResult(null);
                 next();
             }
             InspectorTest.nodeWithId("thetable", nodeCallback);
         },

         async function test_addRule(next)
         {
             var frameId = InspectorTest.resourceTreeModel.mainFrame.id;
             var styleSheetId = await InspectorTest.CSSAgent.createStyleSheet(frameId);
             if (!styleSheetId) {
                 InspectorTest.addResult("Error in CSS.createStyleSheet");
                 next();
                 return;
             }

             var range = {
                 startLine: 0,
                 startColumn: 0,
                 endLine: 0,
                 endColumn: 0
             };

             var rule = await InspectorTest.CSSAgent.addRule(styleSheetId, "body {}", range);
             if (!rule) {
                 InspectorTest.addResult("Error in CSS.addRule");
                 next();
                 return;
             }

             var style = await InspectorTest.CSSAgent.setStyleTexts([
                 {
                     styleSheetId: rule.style.styleSheetId,
                     range: {
                         startLine: rule.style.range.startLine,
                         startColumn: rule.style.range.startColumn,
                         endLine: rule.style.range.startLine,
                         endColumn: rule.style.range.startColumn
                     },
                     text: "font-family: serif;"
                 }
             ]);
             if (!style) {
                 InspectorTest.addResult("Error in CSS.setStyleTexts");
                 next();
                 return;
             }

             var response = await InspectorTest.CSSAgent.invoke_getMatchedStylesForNode({nodeId: bodyId});
             if (response[Protocol.Error]) {
                 InspectorTest.addResult("error: " + response[Protocol.Error]);
                 next();
                 return;
             }

             InspectorTest.addResult("");
             InspectorTest.addResult("=== Matched rules after rule added ===");
             InspectorTest.dumpRuleMatchesArray(response.matchedCSSRules);
             next();
         },
     ]);
 }

 </script>

 <style>

 /* An inline stylesheet */
 body.mainpage {
     text-decoration: none; /* at least one valid property is necessary for WebCore to match a rule */
     ;badproperty: 1badvalue1;
 }

 body.mainpage {
     prop1: val1;
     prop2: val2;
 }

 body:hover {
   color: #CDE;
 }
 </style>
 </head>

 <body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font-weight: normal; width: 85%; background-image: url(bar.png)">
 <p>
 Tests that InspectorCSSAgent API methods work as expected.
 </p>
 <table width="50%" id="thetable">
 </table>
 <h1 id="toggle">H1</h1>
 </body>
 </html>
	<html>
	<head>

	<link rel="stylesheet" href="resources/styles-new-API.css">

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

	function test()
	{
	var bodyId;
	InspectorTest.runTestSuite([
	function test_styles(next)
	{
	function callback(styles)
	{
	InspectorTest.addResult("");
	InspectorTest.addResult("=== Computed style property count for body ===");
	var propCount = styles.computedStyle.length;
	InspectorTest.addResult(propCount > 200 ? "OK" : "FAIL (" + propCount + ")");

	InspectorTest.addResult("");
	InspectorTest.addResult("=== Matched rules for body ===");
	InspectorTest.dumpRuleMatchesArray(styles.matchedCSSRules);

	InspectorTest.addResult("");
	InspectorTest.addResult("=== Pseudo rules for body ===");
	for (var i = 0; i < styles.pseudoElements.length; ++i) {
	InspectorTest.addResult("PseudoType=" + styles.pseudoElements[i].pseudoType);
	InspectorTest.dumpRuleMatchesArray(styles.pseudoElements[i].matches);
	}

	InspectorTest.addResult("");
	InspectorTest.addResult("=== Inherited styles for body ===");
	for (var i = 0; i < styles.inherited.length; ++i) {
	InspectorTest.addResult("Level=" + (i + 1));
	InspectorTest.dumpStyle(styles.inherited[i].inlineStyle);
	InspectorTest.dumpRuleMatchesArray(styles.inherited[i].matchedCSSRules);
	}

	InspectorTest.addResult("");
	InspectorTest.addResult("=== Inline style for body ===");
	InspectorTest.dumpStyle(styles.inlineStyle);
	next();
	}

	var resultStyles = {};

	function computedCallback(computedStyle)
	{
	if (!computedStyle) {
	InspectorTest.addResult("Error");
	InspectorTest.completeTest();
	return;
	}
	resultStyles.computedStyle = computedStyle;
	}

	function matchedCallback(response)
	{
	if (response[Protocol.Error]) {
	InspectorTest.addResult("error: " + response[Protocol.Error]);
	InspectorTest.completeTest();
	return;
	}

	resultStyles.inlineStyle = response.inlineStyle;
	resultStyles.matchedCSSRules = response.matchedCSSRules;
	resultStyles.pseudoElements = response.pseudoElements;
	resultStyles.inherited = response.inherited;
	}

	function nodeCallback(node)
	{
	bodyId = node.id;
	var promises = [
	InspectorTest.CSSAgent.getComputedStyleForNode(node.id).then(computedCallback),
	InspectorTest.CSSAgent.invoke_getMatchedStylesForNode({nodeId: node.id}).then(matchedCallback)
	];
	Promise.all(promises).then(callback.bind(null, resultStyles));
	}
	InspectorTest.selectNodeWithId("mainBody", nodeCallback);
	},

	async function test_forcedState(next)
	{
	InspectorTest.CSSAgent.forcePseudoState(bodyId, ["hover"]);
	var response = await InspectorTest.CSSAgent.invoke_getMatchedStylesForNode({nodeId: bodyId});

	InspectorTest.addResult("=== BODY with forced :hover ===");
	InspectorTest.dumpRuleMatchesArray(response.matchedCSSRules);
	InspectorTest.CSSAgent.forcePseudoState(bodyId, ["hover"]).then(next);
	},

	function test_textNodeComputedStyles(next)
	{
	InspectorTest.nodeWithId("toggle", nodeCallback);

	async function nodeCallback(node)
	{
	var textNode = node.children()[0];
	if (textNode.nodeType() !== Node.TEXT_NODE) {
	InspectorTest.addResult("Failed to retrieve TextNode.");
	InspectorTest.completeTest();
	return;
	}
	var computedStyle = await InspectorTest.CSSAgent.getComputedStyleForNode(textNode.id);
	if (!computedStyle) {
	InspectorTest.addResult("Error");
	return;
	}
	InspectorTest.addResult("");
	InspectorTest.addResult("=== Computed style property count for TextNode ===");
	var propCount = computedStyle.length;
	InspectorTest.addResult(propCount > 200 ? "OK" : "FAIL (" + propCount + ")");
	next();
	}
	},

	function test_tableStyles(next)
	{
	async function nodeCallback(node)
	{
	var response = await InspectorTest.CSSAgent.invoke_getInlineStylesForNode({nodeId: node.id});
	if (response[Protocol.Error]) {
	InspectorTest.addResult("error: " + response[Protocol.Error]);
	next();
	return;
	}
	InspectorTest.addResult("");
	InspectorTest.addResult("=== Attributes style for table ===");
	InspectorTest.dumpStyle(response.attributesStyle);

	var result = await InspectorTest.CSSAgent.getStyleSheetText(response.inlineStyle.styleSheetId);

	InspectorTest.addResult("");
	InspectorTest.addResult("=== Stylesheet-for-inline-style text ===");
	InspectorTest.addResult(result \|\| "");

	await InspectorTest.CSSAgent.setStyleSheetText(response.inlineStyle.styleSheetId, "");

	InspectorTest.addResult("");
	InspectorTest.addResult("=== Stylesheet-for-inline-style modification result ===");
	InspectorTest.addResult(null);
	next();
	}
	InspectorTest.nodeWithId("thetable", nodeCallback);
	},

	async function test_addRule(next)
	{
	var frameId = InspectorTest.resourceTreeModel.mainFrame.id;
	var styleSheetId = await InspectorTest.CSSAgent.createStyleSheet(frameId);
	if (!styleSheetId) {
	InspectorTest.addResult("Error in CSS.createStyleSheet");
	next();
	return;
	}

	var range = {
	startLine: 0,
	startColumn: 0,
	endLine: 0,
	endColumn: 0
	};

	var rule = await InspectorTest.CSSAgent.addRule(styleSheetId, "body {}", range);
	if (!rule) {
	InspectorTest.addResult("Error in CSS.addRule");
	next();
	return;
	}

	var style = await InspectorTest.CSSAgent.setStyleTexts([
	{
	styleSheetId: rule.style.styleSheetId,
	range: {
	startLine: rule.style.range.startLine,
	startColumn: rule.style.range.startColumn,
	endLine: rule.style.range.startLine,
	endColumn: rule.style.range.startColumn
	},
	text: "font-family: serif;"
	}
	]);
	if (!style) {
	InspectorTest.addResult("Error in CSS.setStyleTexts");
	next();
	return;
	}

	var response = await InspectorTest.CSSAgent.invoke_getMatchedStylesForNode({nodeId: bodyId});
	if (response[Protocol.Error]) {
	InspectorTest.addResult("error: " + response[Protocol.Error]);
	next();
	return;
	}

	InspectorTest.addResult("");
	InspectorTest.addResult("=== Matched rules after rule added ===");
	InspectorTest.dumpRuleMatchesArray(response.matchedCSSRules);
	next();
	},
	]);
	}

	</script>

	<style>

	/* An inline stylesheet */
	body.mainpage {
	text-decoration: none; /* at least one valid property is necessary for WebCore to match a rule */
	;badproperty: 1badvalue1;
	}

	body.mainpage {
	prop1: val1;
	prop2: val2;
	}

	body:hover {
	color: #CDE;
	}
	</style>
	</head>

	<body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font-weight: normal; width: 85%; background-image: url(bar.png)">
	<p>
	Tests that InspectorCSSAgent API methods work as expected.
	</p>
	<table width="50%" id="thetable">
	</table>
	<h1 id="toggle">H1</h1>
	</body>
	</html>