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