New issue
Advanced search Search tips
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
link

Issue 417223: 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

Comment 2 by ligim...@chromium.org, Sep 26 2014

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.

Comment 4 by matthewyuan@google.com, Nov 17 2014

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

Comment 6 by jchaffraix@chromium.org, Nov 2 2015

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?

Comment 9 by hartman....@gmail.com, Apr 13 2017

This is a requirement to fix Issue 702927.
See also https://codereview.chromium.org/2786743002/

Comment 10 by smcgruer@chromium.org, Apr 13 2017

Blocking: 702927

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

Project Member
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

Comment 14 by dgro...@chromium.org, Nov 17 2017

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.

Comment 18 by dgro...@chromium.org, Jan 19 2018

Status: Available (was: Fixed)

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

Project Member
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

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

Project Member
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

Comment 21 by chrishtr@chromium.org, Jan 23 2018

This change sounds like it needs an intent to ship to take into account
interop and other API change risks.

Comment 22 by dgro...@chromium.org, Jan 29 2018

The netflix bug was due to incorrectly-positioned abspos blocks whose containing blocks are relpos rows.

http://jsfiddle.net/dgrogan/f443Lfjh/4/

Comment 23 by dgro...@chromium.org, Jan 29 2018

Cc: chrishtr@chromium.org
chrishtr, are you referring to any specific APIs?

Comment 24 by francesc...@gmail.com, Jan 30 2018

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.

Comment 25 by chrishtr@chromium.org, Jan 30 2018

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.

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

Project Member
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

Comment 27 by h...@jonjohnjohnson.com, Nov 29

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.

Comment 28 by dgro...@chromium.org, Nov 29

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