Adding a new CSS property

  • Revision slug: Adding_a_new_style_property
  • Revision title: Adding a new style property
  • Revision id: 455521
  • Created:
  • Creator: DBaron
  • Is current revision? No
  • Comment

Revision Content

This page describes how to add a new CSS property to the style system.  The style system is the part of the code in Gecko that is responsible for producing a computed value for every property for every element.  See the Gecko Overview for more information about the style system.

This document assumes that you have a specifcation for the property available.  Issues about how to write such a specification (including things such as whether it is appropriate to use prefixes or when properties should be inherited by default) are not covered here.

If you need more details on any of the points mentioned here, a good place to find them is by looking at other changes in the version control history of the files mentioned.

Getting started

First, you'll want to add an appropriate test entry to property_database.js.  See the documentation at the top of the file and the other entries for examples.  This will cause tests of your new property to be added to many of the mochitests in layout/style/test, which can be run with the command "TEST_PATH=layout/style make mochitest-plain".

Then you need to decide which style struct the computed value of the proerty should go in.  (Again, see the Gecko Overview for more information.)  It should generally be grouped with related properties.  Remember that each style struct contains only properties that inherit by default or only properties that do not.  Also note that some of the style structs intentionally contain only properties reset by a particular common shorthand property; this improves the effectiveness of some of the performance and memory optimizations done with the rule tree, and thus we should avoid adding a property not reset by that shorthand to such a struct.

Once you know which struct you're going to use, you can add appropriate entry to nsCSSPropList.h.  Again, see the documentation at the top of the file and the other entries for examples, and also see the next section for details about parsing.

Parsing

new keywords if needed

subproperty table for shorthands

parsing (3 ways, and which to choose).  Common mistakes: paren matching, UngetToken().

Computed Style

add member variables to style structs, fix constructor and copy constructor

change hints and CalcDifference

rule node

nsComputedDOMStyle

Revision Source

<p>This page describes how to add a new CSS property to the style system.&nbsp; The style system is the part of the code in Gecko that is responsible for producing a computed value for every property for every element.&nbsp; See <a href="https://wiki.mozilla.org/Gecko:Overview#Style_System" title="https://wiki.mozilla.org/Gecko:Overview#Style_System">the Gecko Overview</a> for more information about the style system.</p>
<p>This document assumes that you have a specifcation for the property available.&nbsp; Issues about how to write such a specification (including things such as whether it is appropriate to use prefixes or when properties should be inherited by default) are not covered here.</p>
<p>If you need more details on any of the points mentioned here, a good place to find them is by looking at other changes in the version control history of the files mentioned.</p>
<h2 id="Getting_started">Getting started</h2>
<p>First, you'll want to add an appropriate test entry to <a href="http://mxr.mozilla.org/mozilla-central/source/layout/style/test/property_database.js" title="http://mxr.mozilla.org/mozilla-central/source/layout/style/test/property_database.js">property_database.js</a>.&nbsp; See the documentation at the top of the file and the other entries for examples.&nbsp; This will cause tests of your new property to be added to many of the mochitests in layout/style/test, which can be run with the command "TEST_PATH=layout/style make mochitest-plain".</p>
<p>Then you need to decide which style struct the computed value of the proerty should go in.&nbsp; (Again, see <a href="https://wiki.mozilla.org/Gecko:Overview#Style_System" title="https://wiki.mozilla.org/Gecko:Overview#Style_System">the Gecko Overview</a> for more information.)&nbsp; It should generally be grouped with related properties.&nbsp; Remember that each style struct contains only properties that inherit by default or only properties that do not.&nbsp; Also note that some of the style structs intentionally contain only properties reset by a particular common shorthand property; this improves the effectiveness of some of the performance and memory optimizations done with the rule tree, and thus we should avoid adding a property not reset by that shorthand to such a struct.</p>
<p>Once you know which struct you're going to use, you can add appropriate entry to <a href="http://mxr.mozilla.org/mozilla-central/source/layout/style/nsCSSPropList.h" title="http://mxr.mozilla.org/mozilla-central/source/layout/style/nsCSSPropList.h">nsCSSPropList.h</a>.&nbsp; Again, see the documentation at the top of the file and the other entries for examples, and also see the next section for details about parsing.</p>
<h2 id="Parsing">Parsing</h2>
<p>new keywords if needed</p>
<p>subproperty table for shorthands</p>
<p>parsing (3 ways, and which to choose).&nbsp; Common mistakes: paren matching, UngetToken().</p>
<h2 id="Computed_Style">Computed Style</h2>
<p>add member variables to style structs, fix constructor and copy constructor</p>
<p>change hints and CalcDifference</p>
<p>rule node</p>
<p>nsComputedDOMStyle</p>
Revert to this revision