third_party/WebKit/LayoutTests/inspector-protocol/css/css-set-effective-property-value.html

   1 <html>
   2 <head>
   3 <link rel="stylesheet" href="resources/set-active-property-value.css"/>
   4 <script type="text/javascript" src="../../http/tests/inspector-protocol/inspector-protocol-test.js"></script>
   5 <script type="text/javascript" src="../../http/tests/inspector-protocol/css-protocol-test.js"></script>
   6 <script type="text/javascript" src="../../http/tests/inspector-protocol/dom-protocol-test.js"></script>
   7 <script type="text/javascript">
   8
   9 function test()
  10 {
  11     InspectorTest.sendCommandOrDie("DOM.enable", {});
  12     InspectorTest.sendCommandOrDie("CSS.enable", {}, onCSSEnabled);
  13
  14     var documentNodeId;
  15
  16     function onCSSEnabled()
  17     {
  18         InspectorTest.requestDocumentNodeId(onDocumentNodeId);
  19     }
  20
  21     function onDocumentNodeId(nodeId)
  22     {
  23         documentNodeId = nodeId;
  24         InspectorTest.requestNodeId(documentNodeId, "#inspected", onInspectedNodeId);
  25     }
  26
  27     var updateProperty;
  28
  29     function onInspectedNodeId(nodeId)
  30     {
  31         updateProperty = updateActiveProperty.bind(null, nodeId);
  32         InspectorTest.loadAndDumpInlineAndMatchingRules(documentNodeId, "#inspected", InspectorTest.runTestSuite.bind(InspectorTest, testSuite));
  33     }
  34
  35     function updateActiveProperty(nodeId, property, value, onSuccess)
  36     {
  37         InspectorTest.sendCommandOrDie("CSS.setEffectivePropertyValueForNode", {"nodeId" : nodeId, "propertyName" : property, "value" : value}, onSuccess);
  38     }
  39
  40     function dumpUndoAndNext(next, id)
  41     {
  42         return InspectorTest.loadAndDumpInlineAndMatchingRules.bind(InspectorTest, documentNodeId, id || "#inspected", InspectorTest.undoAndNext(next));
  43     }
  44
  45     var testSuite = [
  46         function testBasicPropertyChange(next)
  47         {
  48             updateProperty("padding-left", "101px", dumpUndoAndNext(next));
  49         },
  50
  51         function testChangePropertyInShortHand(next)
  52         {
  53             updateProperty("padding-bottom", "101px", dumpUndoAndNext(next));
  54         },
  55
  56         function testChangeImportantProperty(next)
  57         {
  58             updateProperty("margin-left", "101px", dumpUndoAndNext(next));
  59         },
  60
  61         function testChangeInlineProperty(next)
  62         {
  63             updateProperty("padding-top", "101px", dumpUndoAndNext(next));
  64         },
  65
  66         function testChangeInlineImportantProperty(next)
  67         {
  68             updateProperty("margin-top", "101px", dumpUndoAndNext(next));
  69         },
  70
  71         function testChangeMissingProperty(next)
  72         {
  73             updateProperty("margin-bottom", "101px", dumpUndoAndNext(next));
  74         },
  75
  76         function testAppendWithSeparator(next)
  77         {
  78
  79             InspectorTest.loadAndDumpInlineAndMatchingRules(documentNodeId, "#append-test", InspectorTest.requestNodeId.bind(null, documentNodeId, "#append-test", modify));
  80
  81             function modify(nodeId)
  82             {
  83                 InspectorTest.log("Resulting styles");
  84                 InspectorTest.sendCommandOrDie("CSS.setEffectivePropertyValueForNode", {"nodeId" : nodeId, "propertyName" : "padding-right", "value" : "101px"}, dumpUndoAndNext(next, "#append-test"));
  85             }
  86         }
  87     ]
  88 }
  89
  90 </script>
  91 </head>
  92 <body onload="runTest();">
  93 <p>The test verifies functionality of protocol method CSS.setStyleText.</p>
  94 <div id="inspected" style="padding-top: 55px; margin-top: 33px !important;"></div>
  95 <div id="append-test" style="padding-left: 10px"/>
  96 </body>
  97 </html>