Skip to content

[css-inline][css-text][css-pseudo] Define more details of the "first formatted line" #10990

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

Open
kojiishi opened this issue Oct 2, 2024 · 9 comments
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. css-inline-3 Current Work css-pseudo-4 Current Work

Comments

@kojiishi
Copy link
Contributor

kojiishi commented Oct 2, 2024

Discussing on wpt tests for text-box-trim with @fantasai raised questions about the first formatted line.

Currently, the ::first-line pseudo-element and the text-indent property use this definition.

This test@jsbin indicates that browsers use different criteria for the "first formatted line".

TestGeckoWebKitBlink
Content in a nested div text-indent YesYesYes
::first-line NoYesYes
An empty div before content text-indent NoNoNo
::first-line NoNoNo
An empty div before nested content text-indent YesYesYes
::first-line NoNoNo
An empty div with an empty line before nested content text-indent YesYesYes
::first-line NoNoNo
An empty anonymous block with an empty line before nested content text-indent YesYesYes
::first-line NoYesNo

Can we define the desired behavior for these cases?

@fantasai @nt1m @vitorroriz @Clqsin45 @bfgeek @lilles @jfkthame

@fantasai
Copy link
Collaborator

fantasai commented Oct 2, 2024

Note that for text-indent, the property is inherited, and the value applying to a given line is the value specified by its containing block. The spec's reference to "first formatted line" is to say that, among the lines to which it applies, first-line behavior only applies to lines that are also the first formatted line of an element (not an anonymous block).

For ::first-line and nested content (testcase) this seems like a very clear Gecko bug. The specs have been very clear about this since CSS2 and there were tests although it seems Gecko never passed them.

For ::first-line and "empty anonymous block before nested content"; that anonymous block isn't empty (or else it wouldn't exist); but since it contains only an empty unstyled inline, the phantom line box clause applies. See CSS2 and CSS Inline Layout L3.

I think the specs are clear here, but lmk if anything seems wrong.

@fantasai fantasai added css-inline-3 Current Work css-pseudo-4 Current Work Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. labels Oct 2, 2024
@kojiishi
Copy link
Contributor Author

kojiishi commented Oct 4, 2024

(Sorry I misunderstood parts of your reply, so rewriting)

I think my question is primarily on what an empty block should do.

According to your changes to wpt and your reply, text-box-trim-half-leading-block-box-003.html should propagate:

<div class="div-parent">
  <span>    </span>
  <div>Testline1</div>

because it has an anonymous block, but the block has an empty line, and the existence of the anonymous block box doesn't matter? WebKit propagates, while Blink/Gecko don't.

In text-box-trim-half-leading-block-box-001.html:

<div class="div-parent">
  <div></div>
  <div>Testline1</div>

It has a block without an empty line. In this case, the block box matters even without a line, it should block the propagation?

Added another test:

<div class="div-parent">
  <div><span></span></div>
  <div>Testline1</div>

All browsers treat this the same as <div></div> (blocks the first line). Should this propagate or block?

If the answer is "propagate", I think the spec means "an empty block should block the propagation, but if it has an empty line, it should propagate". If the answer is "block", I think the spec means "an anonymous block should be ignored for this purpose".

@Loirooriol
Copy link
Contributor

Firefox not propagating ::first-line to nested blocks is https://bugzilla.mozilla.org/show_bug.cgi?id=317081

@bfgeek
Copy link

bfgeek commented Oct 4, 2024

Blink I think currently has issues with ::first-line propagating into elements which establish independent formatting contexts, when arguably it shouldn't, when I last read the spec here somewhat questionable.

E.g.
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=13169

@Loirooriol
Copy link
Contributor

@bfgeek CSS2 didn't prevent propagating ::first-line to nested blocks with overflow: hidden, so it should be the same for display: flow-root.

That said, Firefox never propagating it can mean that it's web-compatible to change the behavior, it may make more sense indeed to only propagate within the same BFC, and this would be consistent with not propagating it to table captions (see #1192).

@kojiishi
Copy link
Contributor Author

kojiishi commented Oct 6, 2024

Blink I think currently has issues with ::first-line propagating into elements which establish independent formatting contexts, when arguably it shouldn't, when I last read the spec here somewhat questionable.

E.g. https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=13169

Thank you, this is another interesting incompatibility, WebKit blocks the propagation. So two questions we found so far?

  1. Should an empty block (anonymous/non-anonymous, with/without an empty line) propagate or block?
  2. Should it propagate into a different BFC or not?

@kojiishi
Copy link
Contributor Author

kojiishi commented Oct 15, 2024

  1. Should it propagate into a different BFC or not?

#8842 looks related with this.

@fantasai
Copy link
Collaborator

Chatting with @jensimmons, she pointed out we need to make sure that out-of-flow elements (including floats) are ignored.

@kojiishi
Copy link
Contributor Author

The question 2 (BFC) is split into #11038.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. css-inline-3 Current Work css-pseudo-4 Current Work
Projects
None yet
Development

No branches or pull requests

4 participants