1989292 - Use the "scrollable containing block" "where applicable" for position-area

Status: NEW

(Core :: Layout: Positioned, task)

Description

[Jonathan Watt [:jwatt]]

https://drafts.csswg.org/css-anchor-position-1/#ref-for-valdef-position-area-none%E2%91%A0 says:

Values other than none have the following additional effects:

• The scrollable containing block is used in place of the local containing block where applicable, so that the entire scrollable overflow area (typically) is available for positioning.
• Any auto inset properties resolve to 0.
• The normal value for the self-alignment properties resolves to a corresponding value, see § 4.1 Area-specific Default Alignment.

We should look into doing the scrollable containing block thing from the first bullet point at some point.

Probably none of the interop tests we're currently aiming to pass are affected. Likely follow-up work post-release.

Comment 1

[Jonathan Watt [:jwatt]]

Introduced in: https://github.com/w3c/csswg-drafts/issues/10861
Also note: https://github.com/w3c/csswg-drafts/issues/12607

Comment 2

[David Shin[:dshin]]

Attachment: Demonstrative case

FWIW, given the attached testcase:

ScrollContainer(div)(0)@7de14a8efba0 parent=7de14a8efa88 (x=0, y=0, w=6000, h=6000) normal-position=(0,0) [content=7de1463044c0][displayport][cs=7de14a82ec08] <
  ScrollbarFrame(scrollbar)(-1)@7de14a8efe48 parent=7de14a8efba0 next=7de14a8f00c8 (x=0, y=5280, w=6000, h=720) [content=7de146304670][cs=7de17198b208] <
    SliderFrame(slider)(-1)@7de14a8eff50 parent=7de14a8efe48 (x=0, y=0, w=6000, h=720) [content=7de146304820][cs=7de14a8d2308] <
      Frame(thumb)(0)@7de14a8f0050 parent=7de14a8eff50 (x=0, y=0, w=6000, h=720) [content=7de146303240][cs=7de14a8d2f08]
    >
  >
  ScrollbarFrame(scrollbar)(-1)@7de14a8f00c8 parent=7de14a8efba0 next=7de14a8f0348 (x=5280, y=0, w=720, h=6000) [content=7de146304700][cs=7de17198a808] <
    SliderFrame(slider)(-1)@7de14a8f01d0 parent=7de14a8f00c8 (x=0, y=0, w=720, h=6000) [content=7de1463048b0][cs=7de17198b308] <
      Frame(thumb)(0)@7de14a8f02d0 parent=7de14a8f01d0 (x=0, y=0, w=720, h=2520) [content=7de1463032f0][cs=7de14a8d1208]
    >
  >
  Frame(scrollcorner)(-1)@7de14a8f0348 parent=7de14a8efba0 next=7de14a8f03c0 (x=6000, y=6000, w=0, h=0) [content=7de146304790][cs=7de14a82d908]
  Block(div)(0)@7de14a8f03c0 parent=7de14a8efba0 (x=0, y=0, w=6000, h=6000) ink-overflow=(x=0, y=0, w=6000, h=12600) scr-overflow=(x=0, y=0, w=6000, h=12600) [content=7de1463044c0][cs=7de14a82d308][:-moz-scrolled-content] <
    line@7de14a8f0698 count=1 state=block,clean,prevmarginclean,not-impacted,not-wrapped,no-break,clear-before:none,clear-after:none bm=4500 (x=0, y=7500, w=600, h=600) in-flow-scr-overflow=(x=0, y=0, w=600, h=12600) <
      Block(div)(1)@7de14a8f0488 parent=7de14a8f03c0 next=7de14a8f0618 (x=0, y=7500, w=600, h=600) [content=7de146304550][cs=7de14a82e908] <
      >
    >
    line@7de14a8f06e8 count=1 state=inline,clean,prevmarginclean,not-impacted,not-wrapped,no-break,clear-before:none,clear-after:none (x=0, y=12600, w=0, h=0) <
      Placeholder(div id=dut)(3)@7de14a8f0618 parent=7de14a8f03c0 (x=0, y=12600, w=0, h=0) [content=7de1463045e0][cs=7de14a82ea08][:-moz-oof-placeholder] outOfFlowFrame=Block(div id=dut)(3)@7de14a8f0550
    >
    AbsoluteList@7de14dec7260 <
      Block(div id=dut)(3)@7de14a8f0550 parent=7de14a8f03c0 (x=600, y=8100, w=600, h=600) [content=7de1463045e0][cs=7de14a82e508] <
      >
    >
  >
>

So the positioned frame parents to the :-moz-scrolled-content.