Re: [css3-values] RE: CSSStyleDeclaration#length and shorthands.

Testing the following sample:

<script>
function getItems(d) { var items = ""; for (i=0;i<d.length;i++) { items +=
" " + d.item(i); }; return items; }
function onLoad() { var e = document.getElementsByTagName("div")[0];
alert("cssText: {"+e.style.cssText+"},\nlength:
"+e.style.length+",\nitems:"+getItems(e.style)); }
</script>
<body onload="onLoad();"><div style="border-width: 2px 4px"/></body>

yields three different results on 4 UAs, IE and Opera being the same:

Safari 5.1.2:
cssText: {border-top-width: 2px; border-right-width: 4px;
border-bottom-width: 2px; border-left-width: 4px; },
length: 4,
items: border-top-width border-right-width border-bottom-width
border-left-width

Opera 11.60:
cssText: {border-width: 2px 4px},
length: 4,
items: border-top-width border-right-width border-bottom-width
border-left-width

IE 9.0.8112: (with <meta http-equiv="X-UA-Compatible" content="IE=9"/>)
cssText: {border-width: 2px 4px; },
length: 4,
items: border-top-width border-right-width border-bottom-width
border-left-width

Firefox 9.0.1:
cssText: {border-width: 2px 4px;},
length: 8,
items: border-top-width border-right-width-value border-bottom-width
border-left-width-value border-left-width-ltr-source
border-left-width-rtl-source border-right-width-ltr-source
border-right-width-rtl-source

Three UAs retain the original cssText, excepting Safari which translates to
the longhand properties only. Three UAs also report 4 items, including
those that return only one shorthand property in cssText.

There are clearly some interoperability requirements here that need to be
resolved in both CSSOM and in the UAs.

Received on Wednesday, 1 February 2012 04:41:24 UTC