[csswg-drafts] [cssom-view] [css-writing-modes] [css-flexbox] reverse flex-direction should affect overflow directions (#5610)

fred-wang has just created a new issue for https://github.com/w3c/csswg-drafts:

== [cssom-view] [css-writing-modes] [css-flexbox] reverse flex-direction should affect overflow directions ==
cc @cathiechen @smfr @emilio @Loirooriol @majido 

Overflow directions are defined here:
https://drafts.csswg.org/cssom-view/#overflow-directions

This is basically done from the flow-relative block/inline directions (which only depend on the direction and writing-mode properties): https://drafts.csswg.org/css-writing-modes-4/#logical-directions

However, if the scroller has `display: flex` and a reverse `flex-direction` then WebKit and Firefox also reverts the overflow directions accordingly (note: Firefox had a bug that prevent such a scroller to actually be scrollable, but that seemed fixed in nightly builds). As a consequence of fixing #2704 and #1354 in Chromium, the same inversion as WebKit/Firefox happens for flexboxes (*). It seems the definition of overflow directions should also take this case into account, but it's not immediately obvious to me whether the spec says so. Below is a testcase. 

    <!DOCTYPE>
    <style>
      .scroller {
          width: 100px;
          height: 100px;
          background: gray;
          display: flex;
          overflow: auto;
      }
      .scroller div {
          font-family: monospace;
          font-size: 20px;
          margin: 5px;
      }
    </style>
    <div class="scroller" style="flex-direction: column-reverse;">
      <div>Bottom</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>Top</div>
    </div>
    <div class="scroller" style="flex-direction: row-reverse;">
      <div>Right</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>Left</div>
    </div>

(*) Original chromium bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=1126867 ; Chromium follows the same behavior as WebKit/Firefox in beta/canary. Since version 85, the stable version has the new behavior under a finch flag (which means it only enables that behavior with a certain probability). https://www.chromestatus.com/feature/5759578031521792

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5610 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 13 October 2020 11:46:37 UTC