inspector/styles/styles-new-API.html - external/WebKit_LayoutTests - 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()
 {
     WebInspector.showPanel("elements");

     test_styles();

     var bodyId;
     function test_styles(node)
     {
         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 ===");
             dumpRuleMatchesArray(styles.matchedCSSRules);

             InspectorTest.addResult("");
             InspectorTest.addResult("=== Pseudo rules for body ===");
             for (var i = 0; i < styles.pseudoElements.length; ++i) {
                 InspectorTest.addResult("PseudoId=" + styles.pseudoElements[i].pseudoId);
                 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));
                 dumpStyle(styles.inherited[i].inlineStyle);
                 dumpRuleMatchesArray(styles.inherited[i].matchedCSSRules);
             }

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

         var resultStyles = {};

         function computedCallback(error, computedStyle)
         {
             if (error) {
                 InspectorTest.addResult("error: " + error);
                 InspectorTest.completeTest();
                 return;
             }
             resultStyles.computedStyle = computedStyle;
         }

         function inlineCallback(error, inlineStyle)
         {
             if (error) {
                 InspectorTest.addResult("error: " + error);
                 InspectorTest.completeTest();
                 return;
             }
             resultStyles.inlineStyle = inlineStyle;
         }

         function matchedCallback(error, matchedCSSRules, pseudoElements, inherited)
         {
             if (error) {
                 InspectorTest.addResult("error: " + error);
                 InspectorTest.completeTest();
                 return;
             }

             resultStyles.matchedCSSRules = matchedCSSRules;
             resultStyles.pseudoElements = pseudoElements;
             resultStyles.inherited = inherited;
             callback(resultStyles);
         }

         function nodeCallback(node)
         {
             bodyId = node.id;
             CSSAgent.getComputedStyleForNode(node.id, computedCallback);
             CSSAgent.getInlineStylesForNode(node.id, inlineCallback);
             CSSAgent.getMatchedStylesForNode(node.id, true, true, matchedCallback);
         }
         InspectorTest.selectNodeWithId("mainBody", nodeCallback);
     }

     function test_forcedState()
     {
         CSSAgent.forcePseudoState(bodyId, ["hover"]);
         CSSAgent.getMatchedStylesForNode(bodyId, true, true, matchedCallback);

         function matchedCallback(error, matchedRules)
         {
             InspectorTest.addResult("=== BODY with forced :hover ===");
             dumpRuleMatchesArray(matchedRules);
             CSSAgent.forcePseudoState(bodyId, ["hover"], test_tableStyles);
         }
     }

     function test_tableStyles()
     {
         function callback(error, inlineStyle, attributesStyle)
         {
             if (error) {
                 InspectorTest.addResult("error: " + error);
                 return;
             }
             InspectorTest.addResult("");
             InspectorTest.addResult("=== Attributes style for table ===");
             dumpStyle(attributesStyle);
             test_styleSheets();
         }

         function nodeCallback(node)
         {
             CSSAgent.getInlineStylesForNode(node.id, callback);
         }
         InspectorTest.nodeWithId("thetable", nodeCallback);
     }

     function test_styleSheets()
     {
         var newStyleSheetText =
             "body.mainpage {" +
             "    text-decoration: strikethrough;" +
             "    badproperty: 2badvalue2;" +
             "}" +
             "body {" +
             "    text-align: justify;" +
             "}";

         function patchStyleSheet(styleSheet)
         {
             InspectorTest.addResult("");
             InspectorTest.addResult("=== Last stylesheet patched ===");
             CSSAgent.setStyleSheetText(styleSheet.styleSheetId, newStyleSheetText,
                 loadAndDumpStyleSheet.bind(null, styleSheet.styleSheetId, test_changeSelector));
         }

         function styleSheetInfosLoaded(error, infos)
         {
             if (error) {
                 InspectorTest.addResult("error: " + error);
                 return;
             }
             InspectorTest.addResult("");
             InspectorTest.addResult("=== All stylesheets ===");
             for (var i = 0; i < infos.length; ++i)
                 loadAndDumpStyleSheet(infos[i].styleSheetId, (i < infos.length - 1) ? null : patchStyleSheet);
         }
         CSSAgent.getAllStyleSheets(styleSheetInfosLoaded);
     }

     function test_changeSelector(styleSheet)
     {
         function didSetSelector(error, rule)
         {
             if (error) {
                 InspectorTest.addResult("error: " + error);
                 return;
             }
             InspectorTest.addResult("");
             InspectorTest.addResult("=== After selector set ===");
             loadAndDumpStyleSheet(rule.ruleId.styleSheetId, test_setStyleText);
         }

         CSSAgent.setRuleSelector(styleSheet.rules[0].ruleId, "html *, body[foo=\"bar\"]", didSetSelector);
     }

     function test_setStyleText(styleSheet)
     {
         function didSetStyleText(error, style)
         {
             if (error) {
                 InspectorTest.addResult("error: " + error);
                 return;
             }
             InspectorTest.addResult("");
             InspectorTest.addResult("=== After style text set ===");
             loadAndDumpStyleSheet(style.styleId.styleSheetId, test_addRule);
         }

         CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "", true);
         CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "", true);

         // This operation should not update the style as the new property text is not parsable.
         CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "zzz;", false);
         CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "color: white; background: black;", false, didSetStyleText);
     }

     function test_addRule()
     {
         function didGetStyles(error, matchedCSSRules)
         {
             if (error) {
                 InspectorTest.addResult("error: " + error);
                 return;
             }
             InspectorTest.addResult("");
             InspectorTest.addResult("=== Matched rules after rule added ===");
             dumpRuleMatchesArray(matchedCSSRules);
             test_disableProperty();
         }

         function didSetStyleText(error, style)
         {
             if (error) {
                 InspectorTest.addResult("error: " + error);
                 return;
             }
             CSSAgent.getMatchedStylesForNode(bodyId, false, false, didGetStyles);
         }

         function ruleAdded(error, rule)
         {
             if (error) {
                 InspectorTest.addResult("error: " + error);
                 return;
             }
             CSSAgent.setPropertyText(rule.style.styleId, 0, "font-family: serif;", false, didSetStyleText);
         }

         CSSAgent.addRule(bodyId, "body", ruleAdded);
     }

     function test_disableProperty()
     {
         function didDisableProperty(error, style)
         {
             if (error) {
                 InspectorTest.addResult("error: " + error);
                 return;
             }
             InspectorTest.addResult("");
             InspectorTest.addResult("=== After property manipulations ===");
             dumpStyle(style);
             test_enableProperty(style.styleId);
         }

         function stylesCallback(error, matchedCSSRules)
         {
             if (error) {
                 InspectorTest.addResult("error: " + error);
                 return;
             }
             // height : 100% ;
             // border: 1px solid;
             // border-width: 2px;
             // background-color : #33FF33;
             // googles: abra;
             // foo: .bar;
             // -moz-goog: 1***;
             // border-width: 0px;

             var styleId = matchedCSSRules[1].rule.style.styleId;
             CSSAgent.toggleProperty(styleId, 0, true); // height: 100%
             CSSAgent.toggleProperty(styleId, 7, true); // border-width: 0px
             CSSAgent.setPropertyText(styleId, 7, "font-size: 12px;", false);
             CSSAgent.setPropertyText(styleId, 9, "font-size: 14px;", false);
             CSSAgent.toggleProperty(styleId, 9, true); // font-size: 14px
             CSSAgent.setPropertyText(styleId, 8, "border-width: 1px;", true);
             CSSAgent.toggleProperty(styleId, 8, false); // border-width: 1px
             // height : 100% ; [d]
             // border: 1px solid;
             // border-width: 2px;
             // background-color : #33FF33;
             // googles: abra;
             // foo: .bar;
             // -moz-goog: 1***;
             // font-size: 12px;
             // border-width: 1px;
             // font-size: 14px; [d]

             CSSAgent.setPropertyText(styleId, 3, "", true, didDisableProperty);
         }

         function nodeCallback(node)
         {
             CSSAgent.getMatchedStylesForNode(node.id, false, false, stylesCallback);
         }
         InspectorTest.nodeWithId("toggle", nodeCallback);
     }

     function test_enableProperty(styleId)
     {
         function didEnableProperty(error, style)
         {
             if (error) {
                 InspectorTest.addResult("error: " + error);
                 return;
             }
             InspectorTest.addResult("");
             InspectorTest.addResult("=== After property enabled ===");
             dumpStyle(style);
             InspectorTest.completeTest();
         }

         CSSAgent.toggleProperty(styleId, 6, false);
         CSSAgent.toggleProperty(styleId, 8, false, didEnableProperty);
     }

     // Data dumping

     const indent = "    ";

     function dumpRulesArray(rules, currentIndent)
     {
         if (!rules)
             return;
         currentIndent = currentIndent || "";
         for (var i = 0; i < rules.length; ++i)
             dumpRule(rules[i], currentIndent);
     }

     function dumpRuleMatchesArray(matches, currentIndent)
     {
         if (!matches)
             return;
         currentIndent = currentIndent || "";
         for (var i = 0; i < matches.length; ++i)
             dumpRule(matches[i].rule, currentIndent);
     }

     function dumpRule(rule, currentIndent)
     {
         currentIndent = currentIndent || "";

         if (!rule.type || rule.type === "style") {
             InspectorTest.addResult(currentIndent + rule.selectorList.text + ": [" + rule.origin + "] {");
             dumpStyle(rule.style, currentIndent + indent);
             InspectorTest.addResult(currentIndent + "}");
             return;
         }

         if (rule.type === "media") {
             InspectorTest.addResult(currentIndent + "@media " + rule.mediaText + " {");
             dumpRulesArray(rule.childRules, currentIndent + indent);
             InspectorTest.addResult(currentIndent + "}");
             return;
         }

         if (rule.type === "import") {
             InspectorTest.addResult(currentIndent + "@import: header=" + InspectorTest.rangeText(rule.headerRange) + ", body=" + InspectorTest.rangeText(rule.bodyRange));
             return;
         }

         if (rule.type === "page" || rule.type === "font-face") {
             if (rule.type === "page")
                 InspectorTest.addResult(currentIndent + rule.selectorList.text + " {");
             else
                 InspectorTest.addResult(currentIndent + "@" + rule.type + " " + (rule.selectorList.text ? rule.selectorList.text + " " : "")  + "{");
             dumpStyle(rule.style, currentIndent + indent);
             InspectorTest.addResult(currentIndent + "}");
             return;
         }

         if (rule.type === "charset") {
             InspectorTest.addResult("@charset");
             return;
         }

         InspectorTest.addResult(currentIndent + "[UNKNOWN RULE]: header=" + InspectorTest.rangeText(rule.headerRange) + ", body=" + InspectorTest.rangeText(rule.bodyRange));
     }

     function dumpStyle(style, currentIndent)
     {
         currentIndent = currentIndent || "";
         if (!style) {
             InspectorTest.addResult(currentIndent + "[NO STYLE]");
             return;
         }
         for (var i = 0; i < style.cssProperties.length; ++i) {
             var property = style.cssProperties[i];
             if (property.status !== "disabled")
                 InspectorTest.addResult(currentIndent + "['" + property.name + "':'" + property.value + "'" + (property.priority === "important" ? " is-important" : "") + (("parsedOk" in property) ? " non-parsed" : "") +"] @" + InspectorTest.rangeText(property.range) + " " + (property.status || "style"));
             else
                 InspectorTest.addResult(currentIndent + "[text='" + property.text + "'] " + property.status);
         }
     }

     function loadAndDumpStyleSheet(styleSheetId, continuation, error)
     {
         if (error) {
             InspectorTest.addResult("error: " + error);
             return;
         }

         function styleSheetLoaded(error, styleSheet)
         {
             if (error) {
                 InspectorTest.addResult("error: " + error);
                 return;
             }
             InspectorTest.addResult("");
             InspectorTest.addResult("StyleSheet: '" + styleSheet.text + "'");
             dumpRulesArray(styleSheet.rules);
             if (continuation)
                 continuation(styleSheet);
         }

         CSSAgent.getStyleSheet(styleSheetId, styleSheetLoaded);
     }
 }

 </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()
	{
	WebInspector.showPanel("elements");

	test_styles();

	var bodyId;
	function test_styles(node)
	{
	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 ===");
	dumpRuleMatchesArray(styles.matchedCSSRules);

	InspectorTest.addResult("");
	InspectorTest.addResult("=== Pseudo rules for body ===");
	for (var i = 0; i < styles.pseudoElements.length; ++i) {
	InspectorTest.addResult("PseudoId=" + styles.pseudoElements[i].pseudoId);
	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));
	dumpStyle(styles.inherited[i].inlineStyle);
	dumpRuleMatchesArray(styles.inherited[i].matchedCSSRules);
	}

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

	var resultStyles = {};

	function computedCallback(error, computedStyle)
	{
	if (error) {
	InspectorTest.addResult("error: " + error);
	InspectorTest.completeTest();
	return;
	}
	resultStyles.computedStyle = computedStyle;
	}

	function inlineCallback(error, inlineStyle)
	{
	if (error) {
	InspectorTest.addResult("error: " + error);
	InspectorTest.completeTest();
	return;
	}
	resultStyles.inlineStyle = inlineStyle;
	}

	function matchedCallback(error, matchedCSSRules, pseudoElements, inherited)
	{
	if (error) {
	InspectorTest.addResult("error: " + error);
	InspectorTest.completeTest();
	return;
	}

	resultStyles.matchedCSSRules = matchedCSSRules;
	resultStyles.pseudoElements = pseudoElements;
	resultStyles.inherited = inherited;
	callback(resultStyles);
	}

	function nodeCallback(node)
	{
	bodyId = node.id;
	CSSAgent.getComputedStyleForNode(node.id, computedCallback);
	CSSAgent.getInlineStylesForNode(node.id, inlineCallback);
	CSSAgent.getMatchedStylesForNode(node.id, true, true, matchedCallback);
	}
	InspectorTest.selectNodeWithId("mainBody", nodeCallback);
	}

	function test_forcedState()
	{
	CSSAgent.forcePseudoState(bodyId, ["hover"]);
	CSSAgent.getMatchedStylesForNode(bodyId, true, true, matchedCallback);

	function matchedCallback(error, matchedRules)
	{
	InspectorTest.addResult("=== BODY with forced :hover ===");
	dumpRuleMatchesArray(matchedRules);
	CSSAgent.forcePseudoState(bodyId, ["hover"], test_tableStyles);
	}
	}

	function test_tableStyles()
	{
	function callback(error, inlineStyle, attributesStyle)
	{
	if (error) {
	InspectorTest.addResult("error: " + error);
	return;
	}
	InspectorTest.addResult("");
	InspectorTest.addResult("=== Attributes style for table ===");
	dumpStyle(attributesStyle);
	test_styleSheets();
	}

	function nodeCallback(node)
	{
	CSSAgent.getInlineStylesForNode(node.id, callback);
	}
	InspectorTest.nodeWithId("thetable", nodeCallback);
	}

	function test_styleSheets()
	{
	var newStyleSheetText =
	"body.mainpage {" +
	" text-decoration: strikethrough;" +
	" badproperty: 2badvalue2;" +
	"}" +
	"body {" +
	" text-align: justify;" +
	"}";

	function patchStyleSheet(styleSheet)
	{
	InspectorTest.addResult("");
	InspectorTest.addResult("=== Last stylesheet patched ===");
	CSSAgent.setStyleSheetText(styleSheet.styleSheetId, newStyleSheetText,
	loadAndDumpStyleSheet.bind(null, styleSheet.styleSheetId, test_changeSelector));
	}

	function styleSheetInfosLoaded(error, infos)
	{
	if (error) {
	InspectorTest.addResult("error: " + error);
	return;
	}
	InspectorTest.addResult("");
	InspectorTest.addResult("=== All stylesheets ===");
	for (var i = 0; i < infos.length; ++i)
	loadAndDumpStyleSheet(infos[i].styleSheetId, (i < infos.length - 1) ? null : patchStyleSheet);
	}
	CSSAgent.getAllStyleSheets(styleSheetInfosLoaded);
	}

	function test_changeSelector(styleSheet)
	{
	function didSetSelector(error, rule)
	{
	if (error) {
	InspectorTest.addResult("error: " + error);
	return;
	}
	InspectorTest.addResult("");
	InspectorTest.addResult("=== After selector set ===");
	loadAndDumpStyleSheet(rule.ruleId.styleSheetId, test_setStyleText);
	}

	CSSAgent.setRuleSelector(styleSheet.rules[0].ruleId, "html *, body[foo=\"bar\"]", didSetSelector);
	}

	function test_setStyleText(styleSheet)
	{
	function didSetStyleText(error, style)
	{
	if (error) {
	InspectorTest.addResult("error: " + error);
	return;
	}
	InspectorTest.addResult("");
	InspectorTest.addResult("=== After style text set ===");
	loadAndDumpStyleSheet(style.styleId.styleSheetId, test_addRule);
	}

	CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "", true);
	CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "", true);

	// This operation should not update the style as the new property text is not parsable.
	CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "zzz;", false);
	CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "color: white; background: black;", false, didSetStyleText);
	}

	function test_addRule()
	{
	function didGetStyles(error, matchedCSSRules)
	{
	if (error) {
	InspectorTest.addResult("error: " + error);
	return;
	}
	InspectorTest.addResult("");
	InspectorTest.addResult("=== Matched rules after rule added ===");
	dumpRuleMatchesArray(matchedCSSRules);
	test_disableProperty();
	}

	function didSetStyleText(error, style)
	{
	if (error) {
	InspectorTest.addResult("error: " + error);
	return;
	}
	CSSAgent.getMatchedStylesForNode(bodyId, false, false, didGetStyles);
	}

	function ruleAdded(error, rule)
	{
	if (error) {
	InspectorTest.addResult("error: " + error);
	return;
	}
	CSSAgent.setPropertyText(rule.style.styleId, 0, "font-family: serif;", false, didSetStyleText);
	}

	CSSAgent.addRule(bodyId, "body", ruleAdded);
	}

	function test_disableProperty()
	{
	function didDisableProperty(error, style)
	{
	if (error) {
	InspectorTest.addResult("error: " + error);
	return;
	}
	InspectorTest.addResult("");
	InspectorTest.addResult("=== After property manipulations ===");
	dumpStyle(style);
	test_enableProperty(style.styleId);
	}

	function stylesCallback(error, matchedCSSRules)
	{
	if (error) {
	InspectorTest.addResult("error: " + error);
	return;
	}
	// height : 100% ;
	// border: 1px solid;
	// border-width: 2px;
	// background-color : #33FF33;
	// googles: abra;
	// foo: .bar;
	// -moz-goog: 1***;
	// border-width: 0px;

	var styleId = matchedCSSRules[1].rule.style.styleId;
	CSSAgent.toggleProperty(styleId, 0, true); // height: 100%
	CSSAgent.toggleProperty(styleId, 7, true); // border-width: 0px
	CSSAgent.setPropertyText(styleId, 7, "font-size: 12px;", false);
	CSSAgent.setPropertyText(styleId, 9, "font-size: 14px;", false);
	CSSAgent.toggleProperty(styleId, 9, true); // font-size: 14px
	CSSAgent.setPropertyText(styleId, 8, "border-width: 1px;", true);
	CSSAgent.toggleProperty(styleId, 8, false); // border-width: 1px
	// height : 100% ; [d]
	// border: 1px solid;
	// border-width: 2px;
	// background-color : #33FF33;
	// googles: abra;
	// foo: .bar;
	// -moz-goog: 1***;
	// font-size: 12px;
	// border-width: 1px;
	// font-size: 14px; [d]

	CSSAgent.setPropertyText(styleId, 3, "", true, didDisableProperty);
	}

	function nodeCallback(node)
	{
	CSSAgent.getMatchedStylesForNode(node.id, false, false, stylesCallback);
	}
	InspectorTest.nodeWithId("toggle", nodeCallback);
	}

	function test_enableProperty(styleId)
	{
	function didEnableProperty(error, style)
	{
	if (error) {
	InspectorTest.addResult("error: " + error);
	return;
	}
	InspectorTest.addResult("");
	InspectorTest.addResult("=== After property enabled ===");
	dumpStyle(style);
	InspectorTest.completeTest();
	}

	CSSAgent.toggleProperty(styleId, 6, false);
	CSSAgent.toggleProperty(styleId, 8, false, didEnableProperty);
	}

	// Data dumping

	const indent = " ";

	function dumpRulesArray(rules, currentIndent)
	{
	if (!rules)
	return;
	currentIndent = currentIndent \|\| "";
	for (var i = 0; i < rules.length; ++i)
	dumpRule(rules[i], currentIndent);
	}

	function dumpRuleMatchesArray(matches, currentIndent)
	{
	if (!matches)
	return;
	currentIndent = currentIndent \|\| "";
	for (var i = 0; i < matches.length; ++i)
	dumpRule(matches[i].rule, currentIndent);
	}

	function dumpRule(rule, currentIndent)
	{
	currentIndent = currentIndent \|\| "";

	if (!rule.type \|\| rule.type === "style") {
	InspectorTest.addResult(currentIndent + rule.selectorList.text + ": [" + rule.origin + "] {");
	dumpStyle(rule.style, currentIndent + indent);
	InspectorTest.addResult(currentIndent + "}");
	return;
	}

	if (rule.type === "media") {
	InspectorTest.addResult(currentIndent + "@media " + rule.mediaText + " {");
	dumpRulesArray(rule.childRules, currentIndent + indent);
	InspectorTest.addResult(currentIndent + "}");
	return;
	}

	if (rule.type === "import") {
	InspectorTest.addResult(currentIndent + "@import: header=" + InspectorTest.rangeText(rule.headerRange) + ", body=" + InspectorTest.rangeText(rule.bodyRange));
	return;
	}

	if (rule.type === "page" \|\| rule.type === "font-face") {
	if (rule.type === "page")
	InspectorTest.addResult(currentIndent + rule.selectorList.text + " {");
	else
	InspectorTest.addResult(currentIndent + "@" + rule.type + " " + (rule.selectorList.text ? rule.selectorList.text + " " : "") + "{");
	dumpStyle(rule.style, currentIndent + indent);
	InspectorTest.addResult(currentIndent + "}");
	return;
	}

	if (rule.type === "charset") {
	InspectorTest.addResult("@charset");
	return;
	}

	InspectorTest.addResult(currentIndent + "[UNKNOWN RULE]: header=" + InspectorTest.rangeText(rule.headerRange) + ", body=" + InspectorTest.rangeText(rule.bodyRange));
	}

	function dumpStyle(style, currentIndent)
	{
	currentIndent = currentIndent \|\| "";
	if (!style) {
	InspectorTest.addResult(currentIndent + "[NO STYLE]");
	return;
	}
	for (var i = 0; i < style.cssProperties.length; ++i) {
	var property = style.cssProperties[i];
	if (property.status !== "disabled")
	InspectorTest.addResult(currentIndent + "['" + property.name + "':'" + property.value + "'" + (property.priority === "important" ? " is-important" : "") + (("parsedOk" in property) ? " non-parsed" : "") +"] @" + InspectorTest.rangeText(property.range) + " " + (property.status \|\| "style"));
	else
	InspectorTest.addResult(currentIndent + "[text='" + property.text + "'] " + property.status);
	}
	}

	function loadAndDumpStyleSheet(styleSheetId, continuation, error)
	{
	if (error) {
	InspectorTest.addResult("error: " + error);
	return;
	}

	function styleSheetLoaded(error, styleSheet)
	{
	if (error) {
	InspectorTest.addResult("error: " + error);
	return;
	}
	InspectorTest.addResult("");
	InspectorTest.addResult("StyleSheet: '" + styleSheet.text + "'");
	dumpRulesArray(styleSheet.rules);
	if (continuation)
	continuation(styleSheet);
	}

	CSSAgent.getStyleSheet(styleSheetId, styleSheetLoaded);
	}
	}

	</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>