third_party/WebKit/LayoutTests/fast/css/remove-shorthand.html

   1 <html>
   2 <head>
   3     <title></title>
   4     <script type="text/javascript">
   5         function log(message)
   6         {
   7             var console = document.getElementById("console");
   8             console.appendChild(document.createElement("li")).innerHTML = message;
   9         }
  10
  11         function testShorthand(shorthand)
  12         {
  13             var element = document.createElement("div");
  14             element.setAttribute("style",
  15                 "border: thin dotted purple; \
  16                  background: red url(/background.png) repeat-y scroll right bottom; \
  17                  list-style: square outside url(/marker.png); \
  18                  margin: 5%; \
  19                  -webkit-margin-collapse: collapse; \
  20                  padding: 2em; \
  21                  -webkit-text-stroke: orange 1pt; \
  22                  -webkit-columns: 100px 3; \
  23                  -webkit-column-rule: thick dashed silver; \
  24                  border-spacing: 10px 20px; \
  25                  -webkit-border-radius: 6px 8px; \
  26                  overflow: scroll; \
  27                  -webkit-mask: url(/mask.png) repeat-x center top;");
  28             var allProperties = element.style.cssText.concat(" ").split("; ");
  29             element.style.removeProperty(shorthand);
  30             var remainingProperties = element.style.cssText.concat(" ").split("; ");
  31             var removedProperties = [];
  32             var addedProperties = [];
  33
  34             for (var i = 0; i < allProperties.length; i++) {
  35                 if (remainingProperties.indexOf(allProperties[i]) < 0)
  36                     removedProperties.push("<tt>" + allProperties[i].replace(/\:.*/,"") + "</tt>");
  37             }
  38             for (var i = 0; i < remainingProperties.length; i++) {
  39                 if (allProperties.indexOf(remainingProperties[i]) < 0)
  40                     addedProperties.push("<tt>" + remainingProperties[i].replace(/\:.*/,"") + "</tt>");
  41             }
  42
  43             log("Removing <tt>" + shorthand + '</tt><br>removes "' + removedProperties.join(", ")
  44                 + '"<br>and adds "' + addedProperties.join(", ") + '".');
  45         }
  46
  47         function test()
  48         {
  49             if (window.testRunner)
  50                 testRunner.dumpAsText();
  51
  52             var shorthands = [
  53                 "background",
  54                 "background-position",
  55                 "border",
  56                 "border-top", "border-right", "border-bottom", "border-left",
  57                 "border-color", "border-style", "border-width",
  58                 "border-radius",
  59                 "-webkit-border-radius",
  60                 "border-spacing",
  61                 "-webkit-columns",
  62                 "-webkit-column-rule",
  63                 "list-style",
  64                 "margin",
  65                 "-webkit-margin-collapse",
  66                 "-webkit-mask",
  67                 "-webkit-mask-position",
  68                 "overflow",
  69                 "padding",
  70                 "-webkit-text-stroke"
  71             ];
  72
  73             for (i in shorthands)
  74                 testShorthand(shorthands[i]);
  75         }
  76     </script>
  77 </head>
  78 <body onload="test()">
  79     <p>
  80         Test for <i><a href="http://bugs.webkit.org/show_bug.cgi?id=9284">http://bugs.webkit.org/show_bug.cgi?id=9284</a>
  81         Quirksmode (CSS1): Removing inline border styles is impossible</i>.
  82     </p>
  83     <p>
  84         Starting with a declaration containing all properties that are constituents of shortcuts, see what is removed
  85         when a shortcut property is removed. The shortcut&rsquo;s constituents and only them should be removed.
  86     </p>
  87     <ul id="console"></ul>
  88 </body>
  89 </html>