Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-pseudo] Should ::first-line include markers? #4506

Open
Loirooriol opened this issue Nov 11, 2019 · 10 comments
Open

[css-pseudo] Should ::first-line include markers? #4506

Loirooriol opened this issue Nov 11, 2019 · 10 comments
Labels
css-pseudo-4 Current Work

Comments

@Loirooriol
Copy link
Contributor

For ::first-letter https://drafts.csswg.org/css-pseudo-4/#application-in-css says

In CSS the first letter of a table-cell or inline-block cannot be the first letter of an ancestor element. [...] If an element is a list item (display: list-item), the ::first-letter applies to the first letter in the principal box after the marker.

But for ::first-line https://drafts.csswg.org/css-pseudo-4/#first-text-line only has the first part

The first line of a table-cell or inline-block cannot be the first formatted line of an ancestor element.

Should markers be excluded too? testcase

.inside {
  list-style-position: inside;
}
li::first-line {
  color: magenta;
}
li::first-letter {
  color: blue;
}
<ol>
  <li class="inside">inside</li>
  <li>outside</li>
</ol>

Chromium always excludes markers, Firefox includes them when they have inside positioning.

CC @MatsPalmgren

@Loirooriol Loirooriol added the css-pseudo-4 Current Work label Nov 11, 2019
@MatsPalmgren
Copy link

There's a difference in how ::first-letter/line boxes are created though. A ::first-letter box is created "on the inside" wrapping just the text and becomes a descendant of any existing boxes on the line, whereas a ::first-line box is "on the outside" wrapping all boxes on the line. So for that reason I'm leaning towards Gecko's behavior making more sense here.

Also, if there are any display: inline list-item children there may be multiple ::marker boxes on the first line, so it would be a bit tricky to fragment the ::first-line to avoid those. I guess we could make a special rule to just skip over an inside marker of the block itself to avoid that complexity, but that seems a bit arbitrary to me and it also makes the assumption that an inside marker box is the first box on the line which may not be true if we add new pseudos in the future.

Excluding the ::marker also gives surprising results in some cases. For example, with ::first-line { font-size: 400% } I would expect an inside marker to also use that font-size. Maybe I'm just used to how Firefox handles it, but I'm not convinced Chrome's behavior is necessarily better.

@Loirooriol
Copy link
Contributor Author

Loirooriol commented Nov 11, 2019

it would be a bit tricky to fragment the ::first-line

Note that Chromium already does so for atomic inlines: testcase.

@MatsPalmgren
Copy link

Interesting, but that behavior doesn't make much sense to me. It's also not compliant with the spec which is very clear that the ::first-line should wrap all children on the line. I tend to think it's just a bug in Chrome that you should fix.

@bfgeek
Copy link

bfgeek commented Nov 11, 2019

Its not exactly clear what the spec intends, e.g. there is also this paragraph:

The first line of a table-cell or inline-block cannot be the first formatted line of an ancestor element. Thus, in <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> the first formatted line of the DIV is not the line "Hello".

Which could be interpreted in different ways. E.g. skip new formatting contexts, or add logic such that "Goodbye" only matches.

There is also this paragraph:

In CSS, the ::first-line pseudo-element can only have an effect when attached to a block container. The first formatted line of an element must occur inside a block-level descendant in the same flow (i.e., a block-level descendant that is not out-of-flow due to floating or positioning).

"same flow" could be interpreted a few different ways.
https://drafts.csswg.org/css-pseudo-4/#first-text-line

@Loirooriol
Copy link
Contributor Author

It seems Chromium doesn't include markers when applying ::first-line's color, but ::first-line's background includes inside markers! testcase

Firefox: . Chromium:

chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Jun 23, 2020
The marker-list-style-position.html WPT test was created by Mozilla, and
it relies on inside list markers being affected by ::first-line.

However, that doesn't happen in Chromium and WebKit, and the relevant
issue (w3c/csswg-drafts#4506) is still open.

Therefore I'm adding a 2nd expectation in order to allow both behaviors.

Bug: 457718
Change-Id: Id61fbdd07940d541eb7a9638a0fc1aefc13bb545
Loirooriol added a commit to web-platform-tests/wpt that referenced this issue Jun 24, 2020
The marker-list-style-position.html WPT test was created by Mozilla, and
it relies on inside list markers being affected by ::first-line.

However, that doesn't happen in Chromium and WebKit, and the relevant
issue (w3c/csswg-drafts#4506) is still open.

Therefore I'm adding a 2nd expectation in order to allow both behaviors.

Bug: 457718
Change-Id: Id61fbdd07940d541eb7a9638a0fc1aefc13bb545
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Jun 24, 2020
The marker-list-style-position.html WPT test was created by Mozilla, and
it relies on inside list markers being affected by ::first-line.

However, that doesn't happen in Chromium and WebKit, and the relevant
issue (w3c/csswg-drafts#4506) is still open.

Therefore I'm adding a 2nd expectation in order to allow both behaviors.

Bug: 457718
Change-Id: Id61fbdd07940d541eb7a9638a0fc1aefc13bb545
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2260618
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Oriol Brufau <[email protected]>
Cr-Commit-Position: refs/heads/master@{#781817}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Jun 24, 2020
The marker-list-style-position.html WPT test was created by Mozilla, and
it relies on inside list markers being affected by ::first-line.

However, that doesn't happen in Chromium and WebKit, and the relevant
issue (w3c/csswg-drafts#4506) is still open.

Therefore I'm adding a 2nd expectation in order to allow both behaviors.

Bug: 457718
Change-Id: Id61fbdd07940d541eb7a9638a0fc1aefc13bb545
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2260618
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Oriol Brufau <[email protected]>
Cr-Commit-Position: refs/heads/master@{#781817}
blueboxd pushed a commit to blueboxd/chromium-legacy that referenced this issue Jun 24, 2020
The marker-list-style-position.html WPT test was created by Mozilla, and
it relies on inside list markers being affected by ::first-line.

However, that doesn't happen in Chromium and WebKit, and the relevant
issue (w3c/csswg-drafts#4506) is still open.

Therefore I'm adding a 2nd expectation in order to allow both behaviors.

Bug: 457718
Change-Id: Id61fbdd07940d541eb7a9638a0fc1aefc13bb545
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2260618
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Oriol Brufau <[email protected]>
Cr-Commit-Position: refs/heads/master@{#781817}
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Jul 1, 2020
…list-style-position.html WPT, a=testonly

Automatic update from web-platform-tests
[css-pseudo] Add expectation for marker-list-style-position.html WPT

The marker-list-style-position.html WPT test was created by Mozilla, and
it relies on inside list markers being affected by ::first-line.

However, that doesn't happen in Chromium and WebKit, and the relevant
issue (w3c/csswg-drafts#4506) is still open.

Therefore I'm adding a 2nd expectation in order to allow both behaviors.

Bug: 457718
Change-Id: Id61fbdd07940d541eb7a9638a0fc1aefc13bb545
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2260618
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Oriol Brufau <[email protected]>
Cr-Commit-Position: refs/heads/master@{#781817}

--

wpt-commits: 57dde864942fec658ea66cdc0b5f9756fef468d2
wpt-pr: 24315
hsivonen pushed a commit to hsivonen/gecko that referenced this issue Jul 3, 2020
…list-style-position.html WPT, a=testonly

Automatic update from web-platform-tests
[css-pseudo] Add expectation for marker-list-style-position.html WPT

The marker-list-style-position.html WPT test was created by Mozilla, and
it relies on inside list markers being affected by ::first-line.

However, that doesn't happen in Chromium and WebKit, and the relevant
issue (w3c/csswg-drafts#4506) is still open.

Therefore I'm adding a 2nd expectation in order to allow both behaviors.

Bug: 457718
Change-Id: Id61fbdd07940d541eb7a9638a0fc1aefc13bb545
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2260618
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Oriol Brufau <[email protected]>
Cr-Commit-Position: refs/heads/master@{#781817}

--

wpt-commits: 57dde864942fec658ea66cdc0b5f9756fef468d2
wpt-pr: 24315
@fantasai
Copy link
Collaborator

@bfgeek That text is describing how to find the first line. It's not saying how deep declarations applied to the first line inherit, which is a separate question. For a two-line inline-block on the first line, definitely we wouldn't pick out only the first line to style. But I think it makes sense for the ::first-line styles to inherit through.

Wrt markers specifically, I can see arguments both ways and would be interested to hear what @dauwhe / @MurakamiShinyu / @faceless2 think about it.

@MurakamiShinyu
Copy link
Collaborator

MurakamiShinyu commented Dec 28, 2021

I tested several CSS Paged Media implementations, with the PrintCSS Playground, Test: https://printcss.live/l4zbqQ3bpr, and got the following 5 different results:

  • Vivliostyle and Antenna House Formatter
    • ::first-line excludes markers
    • ::first-letter excludes markers
  • Paged.js
    • ::first-line excludes markers, but the background includes the inside marker
    • ::first-letter excludes markers
  • Prince and DocRaptor
    • ::first-line includes the inside marker and excludes the outside marker
    • ::first-letter includes the inside marker and excludes the outside marker
  • PDFreactor and typeset.sh
    • ::first-line is not supported
    • ::first-letter excludes markers
  • WeasyPrint
    • ::first-line is not supported
    • ::first-letter includes the inside marker and excludes the outside marker

I think that the ::first-letter should always exclude markers and the ::first-line should exclude the outside marker, but for the ::first-line and the inside marker both excluding and including would make sense.

@faceless2
Copy link

We match Prince, or will when we fix an issue combining first-letter and first-line.

I agree with @MurakamiShinyu, and also with @MatsPalmgren above:

if there are any display: inline list-item children there may be multiple ::marker boxes on the first line
...
the ::first-line should wrap all children on the line

So while I think outside markers must be excluded, inline markers really must be considered part of the first line, for the reasons Mats raised. Here's a testcase demonstrating those reasons (which needs Firefox to display properly). If the markers weren't styled with first-line styling, it would look quite odd.

(I should add I had a good look and can't find any examples in print where first line (or first phrase) formatting is used and the paragraph begins with a numbered list. I suspect it's going to be a very unusual combination in print, at least for English. So outside of testcases for this condition I don't think it's going to come up much.)

mjfroman pushed a commit to mjfroman/moz-libwebrtc-third-party that referenced this issue Oct 14, 2022
The marker-list-style-position.html WPT test was created by Mozilla, and
it relies on inside list markers being affected by ::first-line.

However, that doesn't happen in Chromium and WebKit, and the relevant
issue (w3c/csswg-drafts#4506) is still open.

Therefore I'm adding a 2nd expectation in order to allow both behaviors.

Bug: 457718
Change-Id: Id61fbdd07940d541eb7a9638a0fc1aefc13bb545
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2260618
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Oriol Brufau <[email protected]>
Cr-Original-Commit-Position: refs/heads/master@{#781817}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: cbc19370a775ae19d318b4a5d4a230f3a90f8052
@fantasai
Copy link
Collaborator

Agenda+ Proposed to resolve that ::first-line includes markers when list-style-position: inside and excludes them when list-style-position: outside.

(Note that for ::first-letter we already define that ::marker is excluded. This issue is only about ::first-line.)

@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed Should ::first-line include markers?, and agreed to the following:

  • RESOLVED: ::first-line applies to markers when `list-style-position` is `inside` but excludes them when it’s `outside`
The full IRC log of that discussion <emeyer> Topic: Should ::first-line include markers?
<emeyer> github: https://github.com//issues/4506
<fantasai> -> https://github.com//issues/4506#issuecomment-1367490644
<fantasai> -> https://github.com//issues/4506#issuecomment-1001846929
<emeyer> fantasai: Does ::marker part of a ::first-line or not?
<fantasai> -> https://github.com//issues/4506#issuecomment-558592436
<emeyer> …A lot of tests were done on implementations
<emeyer> …Proposed resolution is ::first-line includes markers when `list-style-position` is `inside` but excludes them when it’s `outside`
<emeyer> oriol: I think that’s fine
<TabAtkins> No strong opinion from me, but the proposed resolution seems good
<fantasai> emeyer: So this would mean that if list-style-position is outside, and color is set by ::first-line, the marker would not pick up that color
<fantasai> Rossen_: correct
<emeyer> TabAtkins: With outside positioning, it’s positioned, so we’re considering it outside the line
<Rossen_> s/ Rossen_: correct/ TabAtkins: correct/
<emeyer> fantasai: This is important if you set a background color on the first line and it wouldn’t match well with the marker, we don]t want it to apply to that outside marker
<emeyer> s/don]t/don’t/
<emeyer> RESOLVED: ::first-line applies to markers when `list-style-position` is `inside` but excludes them when it’s `outside`

i3roly pushed a commit to i3roly/firefox-dynasty that referenced this issue Jun 1, 2024
…list-style-position.html WPT, a=testonly

Automatic update from web-platform-tests
[css-pseudo] Add expectation for marker-list-style-position.html WPT

The marker-list-style-position.html WPT test was created by Mozilla, and
it relies on inside list markers being affected by ::first-line.

However, that doesn't happen in Chromium and WebKit, and the relevant
issue (w3c/csswg-drafts#4506) is still open.

Therefore I'm adding a 2nd expectation in order to allow both behaviors.

Bug: 457718
Change-Id: Id61fbdd07940d541eb7a9638a0fc1aefc13bb545
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2260618
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Oriol Brufau <[email protected]>
Cr-Commit-Position: refs/heads/master@{#781817}

--

wpt-commits: 57dde864942fec658ea66cdc0b5f9756fef468d2
wpt-pr: 24315
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-pseudo-4 Current Work
Projects
None yet
Development

No branches or pull requests

7 participants