- From: Glenn Adams <glenn@skynav.com>
- Date: Tue, 31 Jan 2012 21:40:29 -0700
- To: W3C Style <www-style@w3.org>
- Message-ID: <CACQ=j+cSx=LgHcXAQPr8nfEnrK_h3J8-=wF20_TD=fvoWb58xw@mail.gmail.com>
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