src/third_party/WebKit/LayoutTests/inspector/styles/edit-value-url-with-color.html

   1 <html>
   2 <head>
   3 <script src="../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../http/tests/inspector/elements-test.js"></script>
   5 <script>
   6
   7 function test()
   8 {
   9     WebInspector.showPanel("elements");
  10     var maxIndex = 11;
  11     var idIndex = 1;
  12
  13     WebInspector.StylesSidebarPane._colorFormat = function() {
  14         return WebInspector.Color.Format.RGB;
  15     };
  16
  17     selectDivAndEditValue();
  18
  19     function selectDivAndEditValue()
  20     {
  21         InspectorTest.selectNodeAndWaitForStyles("inspected" + idIndex++, editCallback);
  22     }
  23
  24     function editCallback()
  25     {
  26         var treeElement = InspectorTest.getMatchedStylePropertyTreeItem("background");
  27         treeElement.startEditing(treeElement.valueElement);
  28         InspectorTest.addResult(treeElement.valueElement.textContent);
  29         if (idIndex <= maxIndex)
  30             selectDivAndEditValue();
  31         else
  32             InspectorTest.completeTest();
  33     }
  34 }
  35
  36 </script>
  37 </head>
  38
  39 <body onload="runTest()">
  40 <p>
  41 Tests that colors are not re-formatted inside url(...) when editing property values.
  42 </p>
  43
  44 <div id="inspected1" style="background: white">"white" background</div>
  45 <div id="inspected2" style="background: url( white )">"url( white )" background</div>
  46 <div id="inspected3" style="background: url(white.png)">"url(white.png)" background</div>
  47 <div id="inspected4" style="background: url(../foo/white.png)">"url(../foo/white.png)" background</div>
  48 <div id="inspected5" style="background: green url(white)">"green url(white)" background</div>
  49 <div id="inspected6" style="background: url(white) green">"url(white) green" background</div>
  50 <div id="inspected7" style="background: url(white) green, url(green)">"url(white) green, url(green)" background</div>
  51 <div id="inspected8" style="background: url(white), url(green)">"url(white), url(green)" background</div>
  52 <div id="inspected9" style="background: hsl(0, 50%, 50%) url(white)">"hsl(0, 50%, 50%) url(white)" background</div>
  53 <div id="inspected10" style="background: url(white) hsl(0, 50%, 50%)">"url(white) hsl(0, 50%, 50%)" background</div>
  54 <div id="inspected11" style="background: url(../black/white.png)">"url(../black/white.png)" background</div>
  55
  56 </body>
  57 </html>