New issue
Advanced search Search tips

Issue 417223 link

Starred by 28 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Feature

Blocking:
issue 702927



Sign in to add a comment

Implement relative positioning for table rows

Reported by jon.rim...@gmail.com, Sep 24 2014

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2167.4 Safari/537.36

Example URL:

Steps to reproduce the problem:
Since 2012, CSS Positioning Layout Module Level 3 has said that relative positioning should work on table rows and cells...

http://www.w3.org/TR/css3-positioning/#position-property

...but this has still not been implemented in Chrome.

Support for relative positioning of table rows and cells would enable simpler polyfilling of sticky positioning like behaviour, which can currently only be achieved for table rows and cells via hacks that involve measuring DOM elements and cloning them:

http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/

What is the expected behavior?

What went wrong?
Chrome's behaviour does not match the specification.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? N/A 

Chrome version: 39.0.2167.4  Channel: canary
OS Version: OS X 10.10.0
Flash Version: Shockwave Flash 15.0 r0
 

Comment 1 by tkent@chromium.org, Sep 26 2014

Labels: -Cr-Content Cr-Blink-Rendering-Table
Labels: -Type-Bug Type-Feature M-39

Comment 3 by amin...@google.com, Oct 10 2014

Labels: -M-39 MovedFrom-39 M-40
Moving all non essential bugs to the next Milestone.
Labels: -M-40 MovedFrom-40
This issue has already been moved once and is lower than Priority 1,therefore removing mstone.

Comment 5 by laforge@google.com, Jan 9 2015

Labels: -Cr-Blink-Rendering-Table Cr-Blink-Layout-Table
Migrate from Cr-Blink-Rendering-Table to Cr-Blink-Layout-Table
Cc: jchaffraix@chromium.org
Labels: -OS-Mac OS-All
Status: Untriaged
Summary: Implement relative positioning for table rows (was: Implement relative positioning for table rows and cells)
We support position relative on cells now but we still have a bug with rows: http://jsfiddle.net/ste4pohx/2/

Updating the description to match this.

Comment 7 by e...@chromium.org, Jan 22 2016

Cc: -jchaffraix@chromium.org dgro...@chromium.org
Labels: -Pri-2 Pri-3
Status: Available

Comment 8 by e...@chromium.org, Jan 4 2017

Perhaps something to consider for tha LayoutNG table implementation?
This is a requirement to fix Issue 702927.
See also https://codereview.chromium.org/2786743002/
Blocking: 702927
Project Member

Comment 11 by bugdroid1@chromium.org, Nov 14 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/842ea8f45240e700e448ae9bcd4ca65dc9596079

commit 842ea8f45240e700e448ae9bcd4ca65dc9596079
Author: Robert Hogan <robhogan@gmail.com>
Date: Tue Nov 14 10:16:22 2017

Implement relative positioning on table elements

Bug: 417223
Change-Id: I4decce9019f69a35b1c5fefcdbb19d14e480ec36
Reviewed-on: https://chromium-review.googlesource.com/755714
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Commit-Queue: Robert Hogan <robhogan@gmail.com>
Cr-Commit-Position: refs/heads/master@{#516250}
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-left-ref.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-tbody-left-absolute-child.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-tbody-left.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-tbody-top-absolute-child.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-tbody-top.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-td-left.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-td-top.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-tfoot-left-absolute-child.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-tfoot-left.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-tfoot-top-absolute-child.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-tfoot-top-ref.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-tfoot-top.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-thead-left-absolute-child.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-thead-left.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-thead-top-absolute-child.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-thead-top.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-top-ref.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-tr-left-absolute-child.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-tr-left.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-tr-top-absolute-child.html
[add] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-relative-table-tr-top.html
[modify] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/Source/core/css/resolver/StyleAdjuster.cpp
[modify] https://crrev.com/842ea8f45240e700e448ae9bcd4ca65dc9596079/third_party/WebKit/Source/core/layout/LayoutTableRow.h

Comment 12 by robho...@gmail.com, Nov 15 2017

Status: Fixed (was: Available)

Comment 13 by yio...@gmail.com, Nov 17 2017

When there is border-collapse: collapse, there's a problem:

actual.png
20.8 KB View Download
expect.png
20.6 KB View Download
relative-position-table-rows.html
1.0 KB View Download
yiorsi, thanks for the report -- but why do you think the expected image is correct? Is that what the other browsers do?

Comment 16 by yio...@gmail.com, Nov 30 2017

There are no other browsers except Firefox and Chrome.

The behavior of table-header-group and table-row should be considered to be consistent.
Status: Available (was: Fixed)
Project Member

Comment 19 by bugdroid1@chromium.org, Jan 22 2018

Labels: merge-merged-3325
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/45b8832bc8dbabde7ef524cc4d8344db64a8ad68

commit 45b8832bc8dbabde7ef524cc4d8344db64a8ad68
Author: David Grogan <dgrogan@chromium.org>
Date: Mon Jan 22 19:37:02 2018

[css] Revert relpos and sticky table elements

This reverts the logic, but not tests, from:

7f7beb7dc8691f39a273aaa3f0915fabe3ceee50
ca3ed70409f9945d3f215fb296fd3628e1989a7c
842ea8f45240e700e448ae9bcd4ca65dc9596079

The bottom caused netflix to render wrong, the top 2 were built on the
bottom.

Bug: 417223,702927,798164
Change-Id: Icb350aa0ea385937294040ce681345e3314da0e2
Reviewed-on: https://chromium-review.googlesource.com/875015
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Commit-Queue: David Grogan <dgrogan@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#530620}(cherry picked from commit 26531bbaff4aac1b026b4f908085d5d5014d9ec0)
Reviewed-on: https://chromium-review.googlesource.com/879381
Reviewed-by: David Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/branch-heads/3325@{#20}
Cr-Branched-From: bc084a8b5afa3744a74927344e304c02ae54189f-refs/heads/master@{#530369}
[modify] https://crrev.com/45b8832bc8dbabde7ef524cc4d8344db64a8ad68/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/45b8832bc8dbabde7ef524cc4d8344db64a8ad68/third_party/WebKit/Source/core/css/resolver/StyleAdjuster.cpp
[modify] https://crrev.com/45b8832bc8dbabde7ef524cc4d8344db64a8ad68/third_party/WebKit/Source/core/layout/LayoutBoxModelObject.cpp
[modify] https://crrev.com/45b8832bc8dbabde7ef524cc4d8344db64a8ad68/third_party/WebKit/Source/core/layout/LayoutTableRow.h

Project Member

Comment 20 by bugdroid1@chromium.org, Jan 22 2018

Labels: merge-merged-3282
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/33966f17f033002013ff0bec1c77847c52a64405

commit 33966f17f033002013ff0bec1c77847c52a64405
Author: David Grogan <dgrogan@chromium.org>
Date: Mon Jan 22 20:04:11 2018

[css] Revert relpos and sticky table elements

This reverts the logic, but not tests, from:

7f7beb7dc8691f39a273aaa3f0915fabe3ceee50
ca3ed70409f9945d3f215fb296fd3628e1989a7c
842ea8f45240e700e448ae9bcd4ca65dc9596079

The bottom caused netflix to render wrong, the top 2 were built on the
bottom.

TBR=dgrogan@chromium.org

(cherry picked from commit 26531bbaff4aac1b026b4f908085d5d5014d9ec0)

Bug: 417223,702927,798164
Change-Id: Icb350aa0ea385937294040ce681345e3314da0e2
Reviewed-on: https://chromium-review.googlesource.com/875015
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Commit-Queue: David Grogan <dgrogan@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#530620}
Reviewed-on: https://chromium-review.googlesource.com/879347
Reviewed-by: David Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/branch-heads/3282@{#570}
Cr-Branched-From: 5fdc0fab22ce7efd32532ee989b223fa12f8171e-refs/heads/master@{#520840}
[modify] https://crrev.com/33966f17f033002013ff0bec1c77847c52a64405/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/33966f17f033002013ff0bec1c77847c52a64405/third_party/WebKit/Source/core/css/resolver/StyleAdjuster.cpp
[modify] https://crrev.com/33966f17f033002013ff0bec1c77847c52a64405/third_party/WebKit/Source/core/layout/LayoutBoxModelObject.cpp
[modify] https://crrev.com/33966f17f033002013ff0bec1c77847c52a64405/third_party/WebKit/Source/core/layout/LayoutTableRow.h

This change sounds like it needs an intent to ship to take into account
interop and other API change risks.
The netflix bug was due to incorrectly-positioned abspos blocks whose containing blocks are relpos rows.

http://jsfiddle.net/dgrogan/f443Lfjh/4/
Cc: chrishtr@chromium.org
chrishtr, are you referring to any specific APIs?
I've viewed http://jsfiddle.net/dgrogan/f443Lfjh/4/ in Firefox. A few remarks:

1) Firefox prints this message to the console: "Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.";

2) Firefox 58 renders the fiddle exactly as Chrome 64;

3) in order for tr {position: relative;} to make a difference, I need to add a constraint to div.abspos, e.g. div.abspos {top: 10px;}, then the two browsers differ.
Re comment 23: I'm referring to a change to start supporting relative position
for table rows. It's not a "new" API, but is still a material change to the
platform that can affect developers and needs consideration.
Project Member

Comment 26 by bugdroid1@chromium.org, Feb 9 2018

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/0c6077d82026a41a3a7dad82fb9e48de7a9afebc

commit 0c6077d82026a41a3a7dad82fb9e48de7a9afebc
Author: David Grogan <dgrogan@chromium.org>
Date: Fri Feb 09 23:58:35 2018

[css-tables] Test for relpos row establishing a cb

Blink's recent attempt to implement relative positioning for table rows
broke position of absolute position descendents. This is a test to
ensure it doesn't happen again.

Bug: 417223
Change-Id: I9c8d0d54c48d4f4426d3ad71dff562b67396f68e
Reviewed-on: https://chromium-review.googlesource.com/907754
Commit-Queue: David Grogan <dgrogan@chromium.org>
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#535891}
[modify] https://crrev.com/0c6077d82026a41a3a7dad82fb9e48de7a9afebc/third_party/WebKit/LayoutTests/external/wpt/css/css-tables/OWNERS
[add] https://crrev.com/0c6077d82026a41a3a7dad82fb9e48de7a9afebc/third_party/WebKit/LayoutTests/external/wpt/css/css-tables/internal-containing-block-001.html

Do we know if Netflix has since changed their site to not incorrectly use relpos on tr that have children using abspos?

Or are there any new ideas on when/how to get this implemented and furthermore stickypos on tr/thead unblocked? Because webkit/firefox already have full support here for their sticky schemes. 
I don't know if netflix changed their site. But they were not doing anything incorrectly. The bug was in Blink.

As far as I know, there has been no recent work toward pos:sticky on table parts.

Sign in to add a comment