Bug 256850 - The bordercolor attribute (on its own) creates a visible border in WebKit
Summary: The bordercolor attribute (on its own) creates a visible border in WebKit
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Tables (show other bugs)
Version: Safari 16
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Karl Dubost
URL:
Keywords: BrowserCompat, InRadar
: 19681 (view as bug list)
Depends on:
Blocks:
 
Reported: 2023-05-16 10:32 PDT by Daniel Holbert
Modified: 2023-07-15 13:07 PDT (History)
5 users (show)

See Also:


Attachments
testcase 1 (631 bytes, text/html)
2023-05-16 10:32 PDT, Daniel Holbert
no flags Details
rendering in safari, firefox, chrome (136.64 KB, image/png)
2023-05-16 19:01 PDT, Karl Dubost
no flags Details
Firefox's test results from WebKit test LayoutTests/fast/table/border-changes.html (8.24 KB, text/plain)
2023-05-19 10:59 PDT, Daniel Holbert
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Daniel Holbert 2023-05-16 10:32:24 PDT
Created attachment 466364 [details]
testcase 1

This issue affects both Chromium and WebKit. The Chromium version of this bug report is https://bugs.chromium.org/p/chromium/issues/detail?id=1446014

STR:
1. View attached testcase.

EXPECTED RESULTS:
The first table should have no border (just like the second one).

ACTUAL RESULTS:
The first table does have a blue border.


The first and second tables both set the color of the border, but don't explicitly activate the border using the `border` attribute or the `border-style` property, which is why the border should not render.

The problematic first table here is just <table bordercolor="blue">.  Per the html spec at https://html.spec.whatwg.org/multipage/rendering.html#tables-2 , the browser is supposed to "treat the [bordercolor] attribute as a presentational hint setting the element's 'border-top-color', 'border-right-color', 'border-bottom-color', and 'border-left-color' properties to the resulting color."

If that were what WebKit were doing, then it would render that table the same as the second one, with no border.

Firefox gives expected results here.  So does EdgeHTML (pre-Chromium Edge).
Chromium and WebKit give "actual results".  I suspect this is a webkit-ism that predated the Blink fork.
Comment 1 Karl Dubost 2023-05-16 19:01:24 PDT
Created attachment 466373 [details]
rendering in safari, firefox, chrome

Tested on macOS 13.4
---
Safari Technology Preview  169           18616.1.12.2
Firefox Nightly            115.0a1       11523.5.10
Google Chrome Canary       115.0.5762.0  5762.0
Comment 2 Karl Dubost 2023-05-16 19:01:59 PDT
Thanks Daniel!
Comment 3 Radar WebKit Bug Importer 2023-05-16 19:02:13 PDT
<rdar://problem/109436009>
Comment 4 Karl Dubost 2023-05-16 19:24:21 PDT
In the case of bordercolor="blue"
WebKit assigns:

border-right-color: rgb(0, 0, 255);
border-right-style: solid;
border-right-width: 3px;



In the case of style="border-color: blue"
WebKit assigns:

border-right-color: rgb(0, 0, 255);
border-right-style: none;
border-right-width: 0px;
Comment 5 Daniel Holbert 2023-05-18 17:55:38 PDT
Hi Karl - thanks for taking a look!

I've got a patch posted on https://phabricator.services.mozilla.com/D178487 to add a WPT to test this, tentatively at this path in the WPT directory (once it gets merged around):
`html/rendering/non-replaced-elements/tables/table-bordercolor-001.html`
Comment 7 Karl Dubost 2023-05-18 23:00:36 PDT
Pull request: https://github.com/WebKit/WebKit/pull/14060
Comment 9 Karl Dubost 2023-05-19 05:55:02 PDT
PR for the new test on WPT
https://github.com/web-platform-tests/wpt/pull/40088

(not landed yet)
Comment 10 Daniel Holbert 2023-05-19 10:59:54 PDT
Created attachment 466423 [details]
Firefox's test results from WebKit test LayoutTests/fast/table/border-changes.html

(In reply to Karl Dubost from comment #8)
> Daniel, could you test with Firefox

Sure -- for what it's worth, I'm testing with `python3 -m http.server 8888` run in a git checkout of WebKit, and then I'm loading e.g. http://localhost:8888/LayoutTests/fast/table/border-changes.html

> https://github.com/WebKit/WebKit/blob/main/LayoutTests/fast/table/border-changes.html

Results attached.

> https://github.com/WebKit/WebKit/blob/main/LayoutTests/tables/mozilla/bugs/bug1163-1.html
> https://github.com/WebKit/WebKit/blob/main/LayoutTests/tables/mozilla/bugs/bug131020.html
> https://github.com/WebKit/WebKit/blob/main/LayoutTests/tables/mozilla/bugs/bug131020_iframe.html

Firefox does render the specified bordercolor in all of these cases, because `border` is specified on the table (though we do so with a beveled look which changes the color's darkness a bit).
Comment 11 EWS 2023-06-30 14:29:57 PDT
Committed 265670@main (9311f46770ba): <https://commits.webkit.org/265670@main>

Reviewed commits have been landed. Closing PR #14060 and removing active labels.
Comment 12 Karl Dubost 2023-07-15 13:07:46 PDT
*** Bug 19681 has been marked as a duplicate of this bug. ***