#34 Insertion order of CSS attributes not recognised

[Brad Baker]

I have an issue with the way ComponentStyle and Style
used HashSets and HashMaps to store attributes.

W3C CSS attributes are in fact dependant on order. For
example setting border-color before setting
border-left-color is different to setting
border-left-color and then setting border-color.

However the order of "insertion" is being lost during
the rendering of the HTML and the Style CSS.

Throughout the Echo HTML rendering code, HashMap and
HashSets are used to contain "attributes".

However as the documentation states :

...This class makes no guarantees as to the order of
the map; in particular, it does not guarantee that the
order will remain constant over time.

What we need to use is something like the JDK 1.4
LinkedHashMap that, as its doco states it is a :

...Hash table and linked list implementation of the Map
interface, with predictable iteration order. This
implementation differs from HashMap in that it
maintains a doubly-linked list running through all of
its entries. This linked list defines the iteration
ordering, which is normally the order in which keys
were inserted into the map (insertion-order).

Now I know LinkedHashMap is not available in JDK 1.3
and Echo is aimed at 1.3 so we might will want to write
out own HashMap that maintains an insertion order
linked list.

I think its imperative that the "insertion order" of
CSS attributes (along with other things like JavaScript
Service insertion) be mainatined otherwise Echo is not
following standard HTML/CSS paradigms.

All of this came about because I extended the
Borderable interface to have left, top, bottom, right
as well as overall border properties. The intention is
to act like CSS and have the more specific property
values "cascade" over the generic ones. But this will
not work with ComponentStyle and Style like there are now.

Here is the CSS currently produced by Echo 1.0 and 1.1

div.E-S-4 {
border-style: solid;
font-size: 10pt;
width: 420px;
border-bottom-style: solid;
border-top-style: solid;
border-color: #000000;
border-right-color: #000000;
border-right-style: solid;
cursor: auto;
height: 440px;
border-width: 1;
vertical-align: top;
border-left-color: #000000;
border-bottom-color: #000000;
border-top-color: #000000;
border-top-width: 1;
text-align: left;
border-right-width: 1;
border-left-style: solid;
background-color: #f7f7f7;
border-bottom-width: 1;
font-family: Sans-Serif;
color: #000000;
border-left-width: 1;
overflow: visible;
}

Notice how its all over the place and it actually is
not was was intended in CSS terms.

Here is how it should look :

div.E-S-4 {
font-size: 10pt;
width: 420px;
cursor: auto;
height: 440px;
vertical-align: top;
text-align: left;
background-color: #f7f7f7;
font-family: Sans-Serif;
color: #000000;
overflow: visible;

border-style: solid;
border-width: 1;
border-color: #000000;

border-left-style: solid;
border-left-width: 1;
border-left-color: #000000;

border-top-style: solid;
border-top-width: 1;
border-top-color: #000000;

border-right-style: solid;
border-right-width: 1;
border-right-color: #000000;

border-bottom-style: solid;
border-bottom-width: 1;
border-bottom-color: #000000;
}