LayoutTests/inspector/styles/styles-formatting.html

   1 <html>
   2 <head>
   3
   4 <script src="../../http/tests/inspector/inspector-test.js"></script>
   5 <script src="../../http/tests/inspector/elements-test.js"></script>
   6 <script>
   7
   8 function test()
   9 {
  10     var formattedStyle;
  11     var unformattedStyle;
  12
  13     InspectorTest.runTestSuite([
  14         function initFormattedStyle(next)
  15         {
  16             function callback(styles)
  17             {
  18                 if (!styles) {
  19                     InspectorTest.addResult("empty styles");
  20                     return;
  21                 }
  22
  23                 formattedStyle = styles.matchedCSSRules[1].style;
  24                 next();
  25             }
  26
  27             function nodeCallback(node)
  28             {
  29                 WebInspector.cssModel.getMatchedStylesAsync(node.id, undefined, false, false, callback);
  30             }
  31             InspectorTest.selectNodeWithId("formatted", nodeCallback);
  32         },
  33
  34         function testFormattedInsertStart(next)
  35         {
  36             formattedStyle.insertPropertyAt(0, "firstProperty", "firstValue", dumpFormattedAndCallNext.bind(null, next));
  37         },
  38
  39         function testFormattedRemoveStart(next)
  40         {
  41             formattedStyle.allProperties[0].setText("", true, true, dumpFormattedAndCallNext.bind(null, next));
  42         },
  43
  44         function testFormattedInsertMiddle(next)
  45         {
  46             formattedStyle.insertPropertyAt(1, "middleProperty", "middleValue", dumpFormattedAndCallNext.bind(null, next));
  47         },
  48
  49         function testFormattedRemoveMiddle(next)
  50         {
  51             formattedStyle.allProperties[1].setText("", true, true, dumpFormattedAndCallNext.bind(null, next));
  52         },
  53
  54         function testFormattedInsertEnd(next)
  55         {
  56             formattedStyle.insertPropertyAt(3, "endProperty", "endValue", dumpFormattedAndCallNext.bind(null, next));
  57         },
  58
  59         function testFormattedRemoveEnd(next)
  60         {
  61             formattedStyle.allProperties[3].setText("", true, true, dumpFormattedAndCallNext.bind(null, next));
  62         },
  63
  64         function testFormattedDisableStart(next)
  65         {
  66             formattedStyle.allProperties[0].setDisabled(true, dumpFormattedAndCallNext.bind(null, next));
  67         },
  68
  69         function testFormattedDisableEnd(next)
  70         {
  71             formattedStyle.allProperties[2].setDisabled(true, dumpFormattedAndCallNext.bind(null, next));
  72         },
  73
  74         function testFormattedDisableMiddle(next)
  75         {
  76             formattedStyle.allProperties[1].setDisabled(true, dumpFormattedAndCallNext.bind(null, next));
  77         },
  78
  79         function testFormattedInsert1(next)
  80         {
  81             formattedStyle.insertPropertyAt(0, "propA", "valA", dumpFormattedAndCallNext.bind(null, next));
  82         },
  83
  84         function testFormattedInsert2(next)
  85         {
  86             formattedStyle.insertPropertyAt(2, "propB", "valB", dumpFormattedAndCallNext.bind(null, next));
  87         },
  88
  89         function testFormattedInsert3(next)
  90         {
  91             formattedStyle.insertPropertyAt(5, "propC", "valC", dumpFormattedAndCallNext.bind(null, next));
  92         },
  93
  94         function testFormattedEnableStart(next)
  95         {
  96             formattedStyle.allProperties[1].setDisabled(false, dumpFormattedAndCallNext.bind(null, next));
  97         },
  98
  99         function testFormattedEnableEnd(next)
 100         {
 101             formattedStyle.allProperties[4].setDisabled(false, dumpFormattedAndCallNext.bind(null, next));
 102         },
 103
 104         function testFormattedEnableMiddle(next)
 105         {
 106             formattedStyle.allProperties[3].setDisabled(false, dumpFormattedAndCallNext.bind(null, next));
 107         },
 108
 109         function initUnformattedStyle(next)
 110         {
 111             function callback(styles)
 112             {
 113                 if (!styles) {
 114                     InspectorTest.addResult("empty styles");
 115                     return;
 116                 }
 117
 118                 unformattedStyle = styles.matchedCSSRules[1].style;
 119                 next();
 120             }
 121
 122             function nodeCallback(node)
 123             {
 124                 WebInspector.cssModel.getMatchedStylesAsync(node.id, undefined, false, false, callback);
 125             }
 126             InspectorTest.selectNodeWithId("unformatted", nodeCallback);
 127         },
 128
 129         function testUnformattedInsertStart(next)
 130         {
 131             unformattedStyle.insertPropertyAt(0, "firstProperty", "firstValue", dumpUnformattedAndCallNext.bind(null, next));
 132         },
 133
 134         function testUnformattedRemoveStart(next)
 135         {
 136             unformattedStyle.allProperties[0].setText("", true, true, dumpUnformattedAndCallNext.bind(null, next));
 137         },
 138
 139         function testUnformattedInsertMiddle(next)
 140         {
 141             unformattedStyle.insertPropertyAt(1, "middleProperty", "middleValue", dumpUnformattedAndCallNext.bind(null, next));
 142         },
 143
 144         function testUnformattedRemoveMiddle(next)
 145         {
 146             unformattedStyle.allProperties[1].setText("", true, true, dumpUnformattedAndCallNext.bind(null, next));
 147         },
 148
 149         function testUnformattedInsertEnd(next)
 150         {
 151             unformattedStyle.insertPropertyAt(3, "endProperty", "endValue", dumpUnformattedAndCallNext.bind(null, next));
 152         },
 153
 154         function testUnformattedRemoveEnd(next)
 155         {
 156             unformattedStyle.allProperties[3].setText("", true, true, dumpUnformattedAndCallNext.bind(null, next));
 157         },
 158
 159         function testUnformattedDisableStart(next)
 160         {
 161             unformattedStyle.allProperties[0].setDisabled(true, dumpUnformattedAndCallNext.bind(null, next));
 162         },
 163
 164         function testUnformattedDisableEnd(next)
 165         {
 166             unformattedStyle.allProperties[2].setDisabled(true, dumpUnformattedAndCallNext.bind(null, next));
 167         },
 168
 169         function testUnformattedDisableMiddle(next)
 170         {
 171             unformattedStyle.allProperties[1].setDisabled(true, dumpUnformattedAndCallNext.bind(null, next));
 172         },
 173
 174         function testUnformattedEnableStart(next)
 175         {
 176             unformattedStyle.allProperties[0].setDisabled(false, dumpUnformattedAndCallNext.bind(null, next));
 177         },
 178
 179         function testUnformattedEnableEnd(next)
 180         {
 181             unformattedStyle.allProperties[2].setDisabled(false, dumpUnformattedAndCallNext.bind(null, next));
 182         },
 183
 184         function testUnformattedEnableMiddle(next)
 185         {
 186             unformattedStyle.allProperties[1].setDisabled(false, dumpUnformattedAndCallNext.bind(null, next));
 187         }
 188     ]);
 189
 190     // Data dumping
 191
 192     function dumpFormattedAndCallNext(next, style)
 193     {
 194         if (!style) {
 195             InspectorTest.addResult("error: empty style");
 196             InspectorTest.completeTest();
 197         }
 198
 199         formattedStyle = style;
 200         dumpStyle(style);
 201         if (next)
 202             next();
 203     }
 204
 205     function dumpUnformattedAndCallNext(next, style)
 206     {
 207         if (!style) {
 208             InspectorTest.addResult("error: empty style");
 209             InspectorTest.completeTest();
 210         }
 211
 212         unformattedStyle = style;
 213         dumpStyle(style);
 214         if (next)
 215             next();
 216     }
 217
 218     function dumpStyle(style)
 219     {
 220         if (!style)
 221             return;
 222         InspectorTest.addResult("raw cssText:");
 223         InspectorTest.addResult("{" + style.cssText + "}");
 224     }
 225 }
 226 </script>
 227
 228 <style>
 229
 230 #formatted {
 231     property1: value1;
 232     property2: value2;
 233     property3: value3;
 234 }
 235
 236 #unformatted {property1:value1;property2:value2;property3:value3;}
 237
 238 </style>
 239 </head>
 240
 241 <body id="mainBody" onload="runTest()">
 242 <p>
 243 Tests that InspectorCSSAgent formats the CSS style text based on the CSS model modifications.
 244 </p>
 245 <div id="formatted">Formatted</div>
 246 <div id="unformatted">Unformatted</div>
 247 </body>
 248 </html>