Re: [cssom][css-cascade][css-fonts] Serialization of multi-valued properties

fantasai <[email protected]> wrote:

> So, Alan Stearns has been asking for serialization rules for <position>. I
> was expecting to find them in CSSOM, but the CSSOM afaict (I'm not great
> at reading CSSOM) doesn't seem to handle properties composed of multiple
> potentially optional values. (It handles shorthands whose value is a
> composition of the longhands, but that's merely a subset of such
> properties.)

That leaves 'font' as the shorthand that isn't handled by CSSOM.

The 'font' shorthand is particularly problematic, mainly due to it being
what the Fonts spec describes as "almost a shorthand property". This is
putting it mildly, as it seems to be both a shorthand and not a shorthand at
the same time.

One complication with it is that the parsing rules regarding this property
are spread around multiple specifications and unfortunately, they have
become out of step with each other, specifically, both Cascade and Fonts
contain incorrect examples:

* in Fonts, section "Shorthand font property: the font property", second
example ("Example 6", currently) says "This has the same effect as:" and
then doesn't list all the sub-properties of font, so it doesn't have the
same effect.

* in Cascade, section "Shorthand properties" uses font as an example and
again fails to list all the sub-properties, but given that font differs from
every other shorthand, it may be better to use 'border' or 'outline' as the
example here?

The issue of parsing boils down to a question of what is stored in the
declaration block when parsing the font property.  I believe it is correct
to store the individual sub-properties only.  e.g. "background: red" results
in all of backgorund's sub-properties being stored, but nothing called
'background' itself - it's simply serialized on demand.  This doesn't work
with 'font', due to the system font keywords (menu, caption, icon etc.)   I
can see Firefox's work-around for this is to store it in a separate magic
-x-system-font property (which does not serialize, does not parse, and seems
to "disappear" if I touch it in Firebug in any way).  This solution seems
ugly?  Is there no better way?

What does "font: inherit" cause to be stored in the declaration block?
Specifically, Cascade says subproperties are set to inherit too, but what
happens to those properties that are not "official" subproperties but are
listed in Fonts section 3.7 as the set that are reset to their initial
values when parsing the value?  e.g. does it set font-kerning to inherit or
to auto?  I'm assuming 'inherit', but is that right?  I think including a
sentence clarifying that "The CSS-wide keywords also apply to these
additional sub-properties" would be useful.

Serializing font is just a headache.  It would be simple without the magic
keywords (because then it'd work like every other property, modulo the
font-variant restrictions)  If I write a declaration block containing all
the font sub-properties (i.e. excluding 'font' itself) and set them all to
inherit, should that serialize to "font: inherit"?

What about setting a declaration block's cssText property to: "font: menu;
font-weight: 900" - what does that mean if you come to serialize the font
property?

I think a starting point for documenting how to serialize font (and others,
but font is the worst case, I think) would be a set of examples.  It's
easy enough to write a simple test page that does something like:

  var el = document.createElement('div');
  el.setAttribute('style', test_input);
  test_assertion( el.getAttribute('style'), expected_output );

At the very least, I expect round-tripping a declaration block through the
serializer and parser should give me a declaration block containing the same
set of properties that I started with.  Is that reasonable?

Whilst I can sort of see what Gecko is doing, what WebKit & Opera 12 are
doing is a mystery I haven't solved, although somewhat bizarrely, I found I
could get Opera 12 to serialize font incorrectly, by doing:
 
  var el = document.createElement('div');
  el.style.font = "inherit";
  alert( el.style.font );

Opera 12 says: "inherit inherit inherit inherit/inherit inherit" !

-- 
Stewart Brodie
Senior Software Engineer
Team Leader ANT Galio Browser
Espial UK

Received on Tuesday, 28 January 2014 11:36:11 UTC