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                  -webkit-marquee: ahead small infinite slide slow; \
  21                  padding: 2em; \
  22                  -webkit-text-stroke: orange 1pt; \
  23                  -webkit-columns: 100px 3; \
  24                  -webkit-column-rule: thick dashed silver; \
  25                  border-spacing: 10px 20px; \
  26                  -webkit-border-radius: 6px 8px; \
  27                  overflow: scroll; \
  28                  -webkit-mask: url(/mask.png) repeat-x scroll center top;");
  29             var allProperties = element.style.cssText.split("; ");
  30             element.style.removeProperty(shorthand);
  31             var remainingProperties = element.style.cssText.split("; ");
  32             var removedProperties = [];
  33             var p;
  34             while (p = allProperties.shift()) {
  35                 if (remainingProperties[0] == p)
  36                     remainingProperties.shift();
  37                 else
  38                     removedProperties.push("<tt>" + p.replace(/\:.*/,"") + "</tt>");
  39             }
  40             log("Removing <tt>" + shorthand + "</tt> removes " + removedProperties.join(", ") +".");
  41         }
  42
  43         function test()
  44         {
  45             if (window.layoutTestController)
  46                 layoutTestController.dumpAsText();
  47
  48             var shorthands = [
  49                 "background",
  50                 "background-position",
  51                 "border",
  52                 "border-top", "border-right", "border-bottom", "border-left",
  53                 "border-color", "border-style", "border-width",
  54                 "border-radius",
  55                 "-webkit-border-radius",
  56                 "border-spacing",
  57                 "-webkit-columns",
  58                 "-webkit-column-rule",
  59                 "list-style",
  60                 "margin",
  61                 "-webkit-margin-collapse",
  62                 "-webkit-marquee",
  63                 "-webkit-mask",
  64                 "-webkit-mask-position",
  65                 "overflow",
  66                 "padding",
  67                 "-webkit-text-stroke"
  68             ];
  69
  70             for (i in shorthands)
  71                 testShorthand(shorthands[i]);
  72         }
  73     </script>
  74 </head>
  75 <body onload="test()">
  76     <p>
  77         Test for <i><a href="http://bugs.webkit.org/show_bug.cgi?id=9284">http://bugs.webkit.org/show_bug.cgi?id=9284</a>
  78         Quirksmode (CSS1): Removing inline border styles is impossible</i>.
  79     </p>
  80     <p>
  81         Starting with a declaration containing all properties that are constituents of shortcuts, see what is removed
  82         when a shortcut property is removed. The shortcut&rsquo;s constituents and only them should be removed.
  83     </p>
  84     <ul id="console"></ul>
  85 </body>
  86 </html>