Re: [csswg-drafts] [css-list-3] List-item outside markers

Hi @FremyCompany, sorry for the slow reply.  I studied the invalidation strategy of Chrome last week. 

Yes, in this design, the bullet might not need re-layout when layout tree changed. In chrome, the bullet is marked to invalidate and repaint in this way:
1. Layout list-item begin
2. Determine the width of list-item
3. Layout list-item's children include the bullet which might not be layout at this point.
4. Reposition the bullet
  4.1 While repositioning the bullet, we compute the offset that the bullet needs to be moved. Because the bullet is inline, so it has a line box wrapped. We don't change the position of the bullet directly. Instead, we change the position of this line box. In chrome, while a line box is moved, it'll mark its object(the bullet) needs-full-repaint. With this mark, the bullet could be invalidated and repainted after layout.
5. layout list-item finish
In this way, list item will invalidate the bullet every time it changed.

About these two issues. I'm sorry this's a little confusing here. This new design is partly applied in Chrome. It uses this design when the first line is inside an `overflow:hidden` element, grid, table, etc. E.g.:
```
<ul>
  <li>
    <div style="overflow:hidden">using the new design</div>
  </li>
</ul>

<ul>
  <li>
    <div>using the old design</div>
  </li>
</ul>
```

For the first issue: [https://wptest.center/#/0l4nb9](https://wptest.center/#/0l4nb9)
Both of these designs aren't right. :( However, it's not the basic design problem. It could be fixed.

For the old design(similar to Edge, add the bullet inside the first line): After DOM tree changed by JS, the position of the bullet in layout tree didn't update, because there's a special treatment for an anonymous block with bullet as its only child, they won't be updated in layout tree. This's not right when the anonymous block isn't the first child of list-item. Maybe this's too detail...

For the new design, needs to change this case a bit to apply it. I added an `overflow: hidden` div surround the content. See: [https://wptest.center/#/7651o5](https://wptest.center/#/7651o5) 
The position of the bullet doesn't change after DOM tree changed. This happens because we didn't re-align the position of bullet's line box if we found the content is empty. It's not right in this case. We move the line box to a new position at the first layout pass, now we should restore the line box to its original position. Anyway, I'll start to fix this.

The second issue:
Old design version: [https://wptest.center/#/wwl793](https://wptest.center/#/wwl793)
New design version: [https://wptest.center/#/t65ly4](https://wptest.center/#/t65ly4)
This's related to the overflow rect computation of list-item. Good news is it has been fixed. (Checked at canary 65.0.3285.0) I believe it's [this patch](https://chromium.googlesource.com/chromium/src/+/6bbbf5324e65d016636f23489691b87e7c753c13).

@FremyCompany, how do you think about this invalidate method? 
Would it be workable at Edge?

-- 
GitHub Notification of comment by cathiechentx
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1934#issuecomment-353078376 using your GitHub account

Received on Wednesday, 20 December 2017 14:33:33 UTC