Workweek generated content

• jack: CSS counters are an example. What are the others? What do we need and what is used?
• simonsapin; with default elements you can have a content property that says something. That adds content which is not in the DOM tree, but is displayed as if it where.
• jack: So if I have

  tag and say p before, where does it go?

• simonsapin: pseudoelement so it behaves the same for the purposes of layout. But it is inside, so it is before the firstChild. That is what is called generated content.
• jack: So with :before and :after selectors, do we have generated nodes in the tree, or does it depent on the properties?
• simonsapin: depends on the content property. For each element, you do cascade for before and after. if the computed property is normal or none, then for content:none, you generate nothing. if it is something else (including empty string!) you do generate borders, etc. ACID2 has empty string. So anything you can do with normal elements you can do on pseudo elements.
• jack: Other kinds of generated content besides css counters and these?
• simonsapin: In content property, different types. plain strings (just text), url token (image, but cannot be sized), counters (so like on a title you could have a h1 with before and the section). If you have a q element, you can use this to set the quote character. So, start with just string elements in the content property.
• jack: What is the implementation in the PR? Did they create DOM elements in the tree? Or just flow elements?
• simonsapin: I haven't looked there because I'm not familiar with layout in servo yet
• jack: Should not be adding to the DOm because should not be visible from script.
• jdm: There is a shadow DOM tree
• pcwalton: bz wanted us to have flow construction generic over DOM and generated DOM nodes so that there isn't duplicated logic in flow between the two. So probably want flow construction generic over real and generated DOM nodes.
• jack: where do the generated comes from? we don't know the css style yet...
• pcwalton: You do by flow construction. Flow construction is bottom-up, so when you do that, you traverse not only over your kids but also your generated kids. Pretend there are more as far as flow construction goes.
• jack: selector matching can annotate DOM nodes with 'there will be a fake kid'
• simonsapin: not matching; result of cascade
• pcwalton: let's call it style resolution
• jack: do style resolution, annotate befores and afters...
• pcwalton: just look at the computedvalue property
• simonsapin: exposed to script does NOT include generated content. node.firstChild should give you the first actual one, not the generated content.
• pcwalton: Good because it's bad for parallelism anyway; don't want layout mutating the DOM.
• simonsapin: when we travers the tree or iterate the children of the node, ideally the code should not know the difference between pseudoelements.
• pcwalton: probably not an iterator, but a bottom-up traversal, and that just has to know about also walking over generated content.
• jack: so, just have to track knowing to add generated nodes to the leaf set
• pcwalton: leaf set is for floats... but I guess you will need a leaf set of DOM nodes, and it should contain those pseudoelements.
• jack: Now, we just scan down the tree and come back up
• pcwalton: Yes, it's not very smart.
• jack: So we just need to handle this in flow tree construction. This seems pretty straightforward - are we missing anything?
• simonsapin: before and after are one kind. list markers are another kind.
• jack: can list markers be implemented with before?
• simonsapin: no, list items can have a before. in the CSS3, there is a list element that behaves like pseudoelement before that comes beforebefore
• jack: so maybe implement that? So anything with a list style that is not none?
• simonsapin: markers are special because they are generated automatically on items with display:list-item
• jack: so lists should do the same thing but should make the marker before before
• simonsapin: easiest to have a marker element that is before before. Then, maybe we don't need to expose the actual marker pseudoelements to CSS
• jack: hang a flag in DOM for is there a before/after/marker, and then nothing else has to know?
• simonsapin: that sounds OK. for listmarker, another special thing is if you have list-style position:inside, then it's an inline box and it's just like before. when you have list-style position:outside, the marker is not in the flow and kind of like absolute positioning
• jack: list style position outside you used to get rid of by adjusting to a negative margin...
• simonsapin: doesn't work - size of the list marker is not always the same. has to work like absolute positioning so the marker is out of the flow.
• jack: do list items usually have a left indent and a marker style...
• simonsapin: depends if you have more than one item in your list
• jack: do we need absolutely positioned markers for anything right now? or do we need them even to do basic stuff?
• jack: so, we can just style markers with position:absolute, right? should we implement this by annotating those styles and then it will start working the right way when we get position:absolute support?
• simonsapin: I think using position:absolute or something like it is the best way eventually. If we need it anyway, might as well use it instead of having more specific code.
• jack: We can set whatever style properties we want on the generated node. Servo won't do anything with it right now.
• simonsapin: without position:absolute, we can just have magic layout code that says the right of the marker is the same as the left of the list item.
• jack: why be wrong
• simonsapin: Not exactly wrong. gecko does not use position:absolute internally...
• jack: my preference is to use position:absolute for now but have it work when position:absolute lands.
• simonsapin: The other problem is that the containing block is the nearest parent, but the list marker's containing block is the list item itself. The marker pseudoelement is another case like the web animation spec. before, we had magic for them; after, we tried to explain it using other primitives.
• jack: It definitely seems like we should implement it the right way and reuse that. So this is what you were talking about in the Issue? That you wanted it to do that?
• simonsapin: And using CSS counters.
• jack: So we need to land before and after before we land the list item markers?
• simonsapin: don't need to, but if you want the marker to be a pseudoelement, it would be easier if you had pseudoelement support.
• jack: So I wonder what we need to do to land before and after...
• jack: What about hover?
• simonsapin: it can't be applied to the before/after. hover must appear in the list of styles before the before/after, so it applies only to the element. hover is a pseudoclass, not pseudoelement. Pseudoelements now have :: instead of :, except for before, after, first-letter and first-line because they were previously specified. Pseudoclasses are just booleans.