[css-display] Clarify element tree definition (original) (raw)

CSS Display says

CSS takes a source document, organized as a tree of elements and text nodes, and renders it onto a canvas

This is confusing because the source document is organized as a DOM tree of DOM nodes. Not just elements and text nodes.

As far as I know, the CSS element tree is derived from the DOM tree as follows:

• The root is the document element.
• All non-element and non-text nodes are removed.
• A ::before pseudo-element is inserted as the first child of each element node.
• An ::after pseudo-element is inserted as the last child of each element node.
• A ::marker pseudo-element is inserted at some places (to be exactly determined in [css-display][css-pseudo] Is ::marker created by display:list-item or does it always exist? #1793).

All of this should be properly defined in the spec.