bugs.webkit.org Open in urlscan Pro
54.190.50.174  Public Scan

URL: https://bugs.webkit.org/show_bug.cgi?id=195016
Submission: On January 17 via api from US — Scanned from DE

Form analysis 7 forms found in the DOM

GET buglist.cgi

<form action="buglist.cgi" method="get" onsubmit="if (this.quicksearch.value == '')
                  { alert('Please enter one or more search terms first.');
                    return false; } return true;">
  <input type="hidden" id="no_redirect_top" name="no_redirect" value="1">
  <script type="text/javascript">
    if (history && history.replaceState) {
      var no_redirect = document.getElementById("no_redirect_top");
      no_redirect.value = 1;
    }
  </script>
  <input class="txt" type="text" id="quicksearch_top" name="quicksearch" title="Quick Search" value="">
  <input class="btn" type="submit" value="Search" id="find_top">
</form>

POST show_bug.cgi?id=195016

<form action="show_bug.cgi?id=195016" method="POST" class="mini_login bz_default_hidden" id="mini_login_top">
  <input id="Bugzilla_login_top" required="" name="Bugzilla_login" class="bz_login" type="email" placeholder="Email Address">
  <input class="bz_password" name="Bugzilla_password" type="password" id="Bugzilla_password_top" required="" placeholder="Password">
  <input type="checkbox" id="Bugzilla_remember_top" name="Bugzilla_remember" value="on" class="bz_remember" checked="">
  <label for="Bugzilla_remember_top">Remember</label>
  <input type="hidden" name="Bugzilla_login_token" value="">
  <input type="submit" name="GoAheadAndLogIn" value="Log in" id="log_in_top">
  <a href="#" onclick="return hide_mini_login_form('_top')">[x]</a>
</form>

POST token.cgi

<form action="token.cgi" method="post" id="forgot_form_top" class="mini_forgot bz_default_hidden">
  <label for="login_top">Login:</label>
  <input name="loginname" size="20" id="login_top" required="" type="email" placeholder="Your Email Address">
  <input id="forgot_button_top" value="Reset Password" type="submit">
  <input type="hidden" name="a" value="reqpw">
  <input type="hidden" id="token_top" name="token" value="1673968768-4qdg46aQ_DD23w6pnmFgtv88zmlqRbzHYXBxnQZmsjk">
  <a href="#" onclick="return hide_forgot_form('_top')">[x]</a>
</form>

Name: changeformPOST process_bug.cgi

<form name="changeform" id="changeform" method="post" action="process_bug.cgi">
  <input type="hidden" name="delta_ts" value="2022-10-28 22:02:54">
  <input type="hidden" name="id" value="195016">
  <input type="hidden" name="token" value="1673968768-3TUGf6XEOp0lRgHvVPI6TDyj0khOED89nyJwTQitg9k">
  <div class="bz_short_desc_container edit_form">
    <a href="show_bug.cgi?id=195016"><b>Bug&nbsp;195016</b></a> <span id="summary_container"> - <span id="short_desc_nonedit_display">WebKit has special UA stylesheet rule to give tables `border-color:grey`, which doesn't quite match spec &amp; may
        be historical cruft</span>
    </span>
    <div id="summary_input" class="bz_default_hidden"><span class="field_label " id="field_label_short_desc">
        <a title="The bug summary is a short sentence which succinctly describes what the bug is about." class="field_help_link" href="page.cgi?id=fields.html#short_desc">Summary:</a>
      </span><span title="WebKit has special UA stylesheet rule to give tables `border-color:grey`, which doesn't quite match spec &amp; may be historical cruft">WebKit has special UA stylesheet rule to give tables `border-color:grey`, whi... </span>
    </div>
  </div>
  <script type="text/javascript">
    hideEditableField('summary_container', 'summary_input', 'summary_edit_action', 'short_desc', 'WebKit has special UA stylesheet rule to give tables `border-color:grey`, which doesn\'t quite match spec & may be historical cruft');
  </script>
  <table id="bug_details" class="edit_form">
    <tbody>
      <tr>
        <td id="bz_show_bug_column_1" class="bz_show_bug_column">
          <table>
            <tbody>
              <tr>
                <th class="field_label">
                  <a href="page.cgi?id=fields.html#bug_status">Status</a>:
                </th>
                <td id="bz_field_status">
                  <span id="static_bug_status">NEW </span>
                </td>
              </tr>
              <tr>
                <td colspan="2" class="bz_section_spacer"></td>
              </tr>
              <tr>
                <th class="field_label " id="field_label_alias">
                  <a title="A short, unique name assigned to a bug in order to assist with looking it up and referring to it in other places in Bugzilla." class="field_help_link" href="page.cgi?id=fields.html#alias">Alias:</a>
                </th>
                <td> None </td>
              </tr>
              <tr>
                <td colspan="2" class="bz_section_spacer"></td>
              </tr>
              <tr>
                <th class="field_label " id="field_label_product">
                  <a title="Bugs are categorised into Products and Components." class="field_help_link" href="describecomponents.cgi">Product:</a>
                </th>
                <td class="field_value " id="field_container_product">WebKit </td>
              </tr>
              <tr class="bz_default_hidden">
                <th class="field_label " id="field_label_classification">
                  <a title="Bugs are categorised into Classifications, Products and Components. classifications is the top-level categorisation." class="field_help_link" href="page.cgi?id=fields.html#classification">Classification:</a>
                </th>
                <td class="field_value " id="field_container_classification">Unclassified </td>
              </tr>
              <tr>
                <th class="field_label " id="field_label_component">
                  <a title="Components are second-level categories; each belongs to a particular Product. Select a Product to narrow down this list." class="field_help_link" href="describecomponents.cgi?product=WebKit">Component:</a>
                </th>
                <td class="field_value " id="field_container_component">CSS (<a href="buglist.cgi?component=CSS&amp;product=WebKit&amp;bug_status=__open__" target="_blank">show other bugs</a>) </td>
              </tr>
              <tr>
                <th class="field_label " id="field_label_version">
                  <a title="The version field defines the version of the software the bug was found in." class="field_help_link" href="page.cgi?id=fields.html#version">Version:</a>
                </th>
                <td>Safari 12 </td>
              </tr>
              <tr>
                <th class="field_label " id="field_label_rep_platform">
                  <a title="The hardware platform the bug was observed on. Note: When searching, selecting the option &quot;All&quot; only finds bugs whose value for this field is literally the word &quot;All&quot;." class="field_help_link" href="page.cgi?id=fields.html#rep_platform">Hardware:</a>
                </th>
                <td class="field_value">Unspecified Unspecified </td>
              </tr>
              <tr>
                <td colspan="2" class="bz_section_spacer"></td>
              </tr>
              <tr>
                <th class="field_label">
                  <label accesskey="i">
                    <a href="page.cgi?id=fields.html#importance"><u>I</u>mportance</a></label>:
                </th>
                <td>P2 Normal </td>
              </tr>
              <tr>
                <th class="field_label " id="field_label_assigned_to">
                  <a title="The person in charge of resolving the bug." class="field_help_link" href="page.cgi?id=fields.html#assigned_to">Assignee:</a>
                </th>
                <td><span class="vcard"><span class="fn">Nobody</span>
                  </span>
                </td>
              </tr>
              <script type="text/javascript">
                assignToDefaultOnChange(['product'], 'webkit-unassigned\x40lists.webkit.org', '');
              </script>
              <tr>
                <td colspan="2" class="bz_section_spacer"></td>
              </tr>
              <tr>
                <th class="field_label " id="field_label_bug_file_loc">
                  <a title="Bugs can have a URL associated with them - for example, a pointer to a web site where the problem is seen." class="field_help_link" href="page.cgi?id=fields.html#bug_file_loc">URL:</a>
                </th>
                <td>
                  <span id="bz_url_input_area">
                  </span>
                </td>
              </tr>
              <tr>
                <th class="field_label " id="field_label_keywords">
                  <a title="You can add keywords from a defined list to bugs, in order to easily identify and group them." class="field_help_link" href="describekeywords.cgi">Keywords:</a>
                </th>
                <td class="field_value " id="field_container_keywords">BrowserCompat, InRadar, WPTImpact </td>
              </tr>
              <tr>
                <td colspan="2" class="bz_section_spacer"></td>
              </tr>
              <tr>
                <th class="field_label " id="field_label_dependson">
                  <a title="The bugs listed here must be resolved before this bug can be resolved." class="field_help_link" href="page.cgi?id=fields.html#dependson">Depends on:</a>
                </th>
                <td>
                  <span id="dependson_input_area">
                  </span>
                </td>
              </tr>
              <tr>
                <th class="field_label " id="field_label_blocked">
                  <a title="This bug must be resolved before the bugs listed in this field can be resolved." class="field_help_link" href="page.cgi?id=fields.html#blocked">Blocks:</a>
                </th>
                <td>
                  <span id="blocked_input_area">
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <div class="bz_column_spacer">&nbsp;</div>
        </td>
        <td id="bz_show_bug_column_2" class="bz_show_bug_column">
          <table>
            <tbody>
              <tr>
                <th class="field_label"> Reported: </th>
                <td>2019-02-25 14:19 PST by <span class="vcard"><span class="fn">Daniel Holbert</span>
                  </span>
                </td>
              </tr>
              <tr>
                <th class="field_label"> Modified: </th>
                <td>2022-10-28 22:02 PDT (<a href="show_activity.cgi?id=195016">History</a>) </td>
              </tr>
              <tr>
                <th class="field_label">
                  <label accesskey="a"> CC List: </label>
                </th>
                <td>9 users <span id="cc_edit_area_showhide_container"> (<a href="#" id="cc_edit_area_showhide">show</a>) </span>
                  <div id="cc_edit_area" class="bz_default_hidden">
                    <br>
                    <select id="cc" multiple="multiple" size="5">
                      <option value="ahmad.saleem792">ahmad.saleem792</option>
                      <option value="ap">ap</option>
                      <option value="bfulgham">bfulgham</option>
                      <option value="karlcow">karlcow</option>
                      <option value="koivisto">koivisto</option>
                      <option value="rniwa">rniwa</option>
                      <option value="simon.fraser">simon.fraser</option>
                      <option value="webkit-bug-importer">webkit-bug-importer</option>
                      <option value="zalan">zalan</option>
                    </select>
                  </div>
                  <script type="text/javascript">
                    hideEditableField('cc_edit_area_showhide_container', 'cc_edit_area', 'cc_edit_area_showhide', '', '');
                  </script>
                </td>
              </tr>
              <tr>
                <td colspan="2" class="bz_section_spacer"></td>
              </tr>
              <tr>
                <th class="field_label " id="field_label_see_also">
                  <a title="This allows you to refer to bugs in other installations. You can enter a URL to a bug in the 'Add Bug URLs' field to note that that bug is related to this one. You can enter multiple URLs at once by separating them with whitespace. You should normally use this field to refer to bugs in other installations. For bugs in this installation, it is better to use the Depends on and Blocks fields." class="field_help_link" href="page.cgi?id=fields.html#see_also">See Also:</a>
                </th>
                <td class="field_value " id="field_container_see_also">
                  <ul class="bug_urls">
                    <li><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=935729">https://bugs.chromium.org/p/chromium/issues/detail?id=935729</a>
                    </li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td colspan="2" class="bz_section_spacer"></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <hr id="bz_top_half_spacer">
        </td>
      </tr>
    </tbody>
  </table>
  <table id="bz_big_form_parts">
    <tbody>
      <tr>
        <td>
          <script src="js/status-bubble.js?1655312639"></script>
          <script type="text/javascript">
            <!--
            window.addEventListener('message', handleStatusBubbleMessage, false);

            function toggle_display(link) {
              var table = document.getElementById("attachment_table");
              var view_all = document.getElementById("view_all");
              var hide_obsolete_url_parameter = "&hide_obsolete=1";
              // Store current height for scrolling later
              var originalHeight = table.offsetHeight;
              var rows = YAHOO.util.Dom.getElementsByClassName('bz_tr_obsolete', 'tr', table);
              for (var i = 0; i < rows.length; i++) {
                bz_toggleClass(rows[i], 'bz_default_hidden');
              }
              if (YAHOO.util.Dom.hasClass(rows[0], 'bz_default_hidden')) {
                link.innerHTML = "Show Obsolete";
                view_all.href = view_all.href + hide_obsolete_url_parameter
              } else {
                link.innerHTML = "Hide Obsolete";
                view_all.href = view_all.href.replace(hide_obsolete_url_parameter, "");
              }
              var newHeight = table.offsetHeight;
              // This scrolling makes the window appear to not move at all.
              window.scrollBy(0, newHeight - originalHeight);
              return false;
            }
            //
            -->
          </script>
          <br>
          <table id="attachment_table">
            <tbody>
              <tr id="a0">
                <th colspan="3" class="left"> Attachments </th>
              </tr>
              <tr class="bz_attach_footer">
                <td colspan="3">
                  <a href="attachment.cgi?bugid=195016&amp;action=enter">Add an attachment</a> (proposed patch, testcase, etc.)
                </td>
              </tr>
            </tbody>
          </table>
          <br>
          <div id="add_comment" class="bz_section_additional_comments">
            <table>
              <tbody>
                <tr>
                  <td>
                    <fieldset>
                      <legend>Note</legend> You need to <a href="show_bug.cgi?id=195016&amp;GoAheadAndLogIn=1">log in</a> before you can comment on or make changes to this bug.
                    </fieldset>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
        <td>
        </td>
      </tr>
    </tbody>
  </table>
  <div id="comments">
    <script src="js/comments.js?1655312639" type="text/javascript">
    </script>
    <script type="text/javascript">
      <!--
      /* Adds the reply text to the 'comment' textarea */
      function replyToComment(id, real_id, name) {
        var prefix = "(In reply to " + name + " from comment #" + id + ")\n";
        var replytext = "";
        /* pre id="comment_name_N" */
        var text_elem = document.getElementById('comment_text_' + id);
        var text = getText(text_elem);
        replytext = prefix + wrapReplyText(text);
        /* <textarea id="comment"> */
        var textarea = document.getElementById('comment');
        if (textarea.value != replytext) {
          textarea.value += replytext;
        }
        textarea.focus();
      }
      //
      -->
    </script>
    <!-- This auto-sizes the comments and positions the collapse/expand links 
     to the right. -->
    <table class="bz_comment_table">
      <tbody>
        <tr>
          <td>
            <div id="c0" class="bz_comment bz_first_comment">
              <div class="bz_first_comment_head">
                <span class="bz_comment_number">
                  <a href="show_bug.cgi?id=195016#c0">Description</a>
                </span>
                <span class="bz_comment_user">
                  <span class="vcard"><span class="fn">Daniel Holbert</span>
                  </span>
                </span>
                <span class="bz_comment_user_images">
                </span>
                <span class="bz_comment_time"> 2019-02-25 14:19:55 PST </span>
              </div>
              <pre
                class="bz_comment_text">(This bug covers some behavior that's common between Blink &amp; WebKit. I've filed <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=935729">https://bugs.chromium.org/p/chromium/issues/detail?id=935729</a> on Blink.)

STR:
(1) Load <a href="https://jsfiddle.net/a6n0cb9j/">https://jsfiddle.net/a6n0cb9j/</a>

EXPECTED RESULTS:
The borders should all be the same color.

ACTUAL RESULTS:
Safari 12 uses a grey border for the table, but a black border for the td and th.


Firefox 65 [1], Edge 18, and IE11 all give EXPECTED RESULTS, rendering both borders as black (via `currentColor`).

Technically the WHATWG HTML spec says all three borders should be grey, via this rule:
<span class="quote">&gt;  table, td, th { border-color: gray; }</span>
<a href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2">https://html.spec.whatwg.org/multipage/rendering.html#tables-2</a>

...but I think we should remove that entirely because code-archeology seems to indicate that this was for compatibility with IE at the time[2], and IE itself doesn't have this behavior anymore.  I've filed <a href="https://github.com/whatwg/html/issues/4391">https://github.com/whatwg/html/issues/4391</a> on making this spec change.

[1] Firefox renders both borders black if the testcase is in standards-mode, or both gray in quirks mode. But I'd like to remove the quirks-mode behavior.

[2] Reference for code-archeology on the ancient-IE compat note: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=84307#c20">https://bugzilla.mozilla.org/show_bug.cgi?id=84307#c20</a> ("IE and Opera, which always use gray" back in 2006. Nowadays IE uses currentColor, i.e. black by default.)</pre>
            </div>
            <div id="c1" class="bz_comment">
              <div class="bz_comment_head">
                <span class="bz_comment_number">
                  <a href="show_bug.cgi?id=195016#c1">Comment 1</a>
                </span>
                <span class="bz_comment_user">
                  <span class="vcard"><span class="fn">Radar WebKit Bug Importer</span>
                  </span>
                </span>
                <span class="bz_comment_user_images">
                </span>
                <span class="bz_comment_time"> 2019-02-25 16:27:24 PST </span>
              </div>
              <pre class="bz_comment_text">&lt;<a href="rdar://problem/48382483">rdar://problem/48382483</a>&gt;</pre>
            </div>
            <div id="c2" class="bz_comment">
              <div class="bz_comment_head">
                <span class="bz_comment_number">
                  <a href="show_bug.cgi?id=195016#c2">Comment 2</a>
                </span>
                <span class="bz_comment_user">
                  <span class="vcard"><span class="fn">Ahmad Saleem</span>
                  </span>
                </span>
                <span class="bz_comment_user_images">
                </span>
                <span class="bz_comment_time"> 2022-08-20 17:28:15 PDT </span>
              </div>
              <pre
                class="bz_comment_text">I am able to reproduce this bug in Safari 15.6.1 and Safari Technology Preview 151 using JSFiddle from <a href="show_bug.cgi?id=195016#c0">Comment 0</a> and it show "Grey" outer border but "black" for TD and TH. It matches with Chrome Canary 106 but differ from Firefox Nightly 105, which shows "Black" for both cases. Just wanted to share updated testing results. Thanks!</pre>
            </div>
            <div id="c3" class="bz_comment">
              <div class="bz_comment_head">
                <span class="bz_comment_number">
                  <a href="show_bug.cgi?id=195016#c3">Comment 3</a>
                </span>
                <span class="bz_comment_user">
                  <span class="vcard"><span class="fn">Ahmad Saleem</span>
                  </span>
                </span>
                <span class="bz_comment_user_images">
                </span>
                <span class="bz_comment_time"> 2022-10-28 16:22:38 PDT </span>
              </div>
              <pre
                class="bz_comment_text">These are causing us to fail:

Standard Mode:
<a href="https://wpt.fyi/results/html/rendering/non-replaced-elements/tables/table-border-3s.html?label=experimental&amp;label=master&amp;aligned">https://wpt.fyi/results/html/rendering/non-replaced-elements/tables/table-border-3s.html?label=experimental&amp;label=master&amp;aligned</a>

Quirk Mode:
<a href="https://wpt.fyi/results/html/rendering/non-replaced-elements/tables/table-border-3q.html?label=experimental&amp;label=master&amp;aligned">https://wpt.fyi/results/html/rendering/non-replaced-elements/tables/table-border-3q.html?label=experimental&amp;label=master&amp;aligned</a>

_____

We need to get rid of this:

<a href="https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/html.css#L235">https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/html.css#L235</a>

I think from <a href="show_bug.cgi?id=195016#c0">Comment 0</a>, it seems that Webkit does not have any special quirk mode and I cannot find anything here as well:

<a href="https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/quirks.css">https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/quirks.css</a>

____

I am happy to do PR and change it to "currentColor". Although, I will wait for Karl to land his "hr" fix to html.css because it will lead to conflict for him otherwise. If it is something, we should avoid right now, happy to get broader view from others as well (for my learning).</pre>
            </div>
            <div id="c4" class="bz_comment">
              <div class="bz_comment_head">
                <span class="bz_comment_number">
                  <a href="show_bug.cgi?id=195016#c4">Comment 4</a>
                </span>
                <span class="bz_comment_user">
                  <span class="vcard"><span class="fn">Ryosuke Niwa</span>
                  </span>
                </span>
                <span class="bz_comment_user_images">
                </span>
                <span class="bz_comment_time"> 2022-10-28 22:02:54 PDT </span>
              </div>
              <pre class="bz_comment_text">Seems sensible to match the spec.</pre>
            </div>
          </td>
          <td>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</form>

GET buglist.cgi

<form action="buglist.cgi" method="get" onsubmit="if (this.quicksearch.value == '')
                  { alert('Please enter one or more search terms first.');
                    return false; } return true;">
  <input type="hidden" id="no_redirect_bottom" name="no_redirect" value="1">
  <script type="text/javascript">
    if (history && history.replaceState) {
      var no_redirect = document.getElementById("no_redirect_bottom");
      no_redirect.value = 1;
    }
  </script>
  <input class="txt" type="text" id="quicksearch_bottom" name="quicksearch" title="Quick Search" value="">
  <input class="btn" type="submit" value="Search" id="find_bottom">
</form>

POST show_bug.cgi?id=195016

<form action="show_bug.cgi?id=195016" method="POST" class="mini_login bz_default_hidden" id="mini_login_bottom">
  <input id="Bugzilla_login_bottom" required="" name="Bugzilla_login" class="bz_login" type="email" placeholder="Email Address">
  <input class="bz_password" name="Bugzilla_password" type="password" id="Bugzilla_password_bottom" required="" placeholder="Password">
  <input type="checkbox" id="Bugzilla_remember_bottom" name="Bugzilla_remember" value="on" class="bz_remember" checked="">
  <label for="Bugzilla_remember_bottom">Remember</label>
  <input type="hidden" name="Bugzilla_login_token" value="">
  <input type="submit" name="GoAheadAndLogIn" value="Log in" id="log_in_bottom">
  <a href="#" onclick="return hide_mini_login_form('_bottom')">[x]</a>
</form>

POST token.cgi

<form action="token.cgi" method="post" id="forgot_form_bottom" class="mini_forgot bz_default_hidden">
  <label for="login_bottom">Login:</label>
  <input name="loginname" size="20" id="login_bottom" required="" type="email" placeholder="Your Email Address">
  <input id="forgot_button_bottom" value="Reset Password" type="submit">
  <input type="hidden" name="a" value="reqpw">
  <input type="hidden" id="token_bottom" name="token" value="1673968768-4qdg46aQ_DD23w6pnmFgtv88zmlqRbzHYXBxnQZmsjk">
  <a href="#" onclick="return hide_forgot_form('_bottom')">[x]</a>
</form>

Text Content

WebKit Bugzilla
Bug 195016: WebKit has special UA stylesheet rule to give tables
`border-color:grey`, which doesn't quite match spec & may be historical cruft
 * Home
 * | New
 * | Browse
 * | Search
 * |
   
   [?]
 * | Reports
 * | Requests
 * | Help
 * | New Account
 * | Log In
   Remember [x]
 * | Forgot Password
   Login: [x]

Bug 195016 - WebKit has special UA stylesheet rule to give tables
`border-color:grey`, which doesn't quite match spec & may be historical cruft
Summary: WebKit has special UA stylesheet rule to give tables
`border-color:grey`, whi...

Status: NEW Alias: None Product: WebKit Classification: Unclassified Component:
CSS (show other bugs) Version: Safari 12 Hardware: Unspecified Unspecified
Importance: P2 Normal Assignee: Nobody URL: Keywords: BrowserCompat, InRadar,
WPTImpact Depends on: Blocks:

 

Reported: 2019-02-25 14:19 PST by Daniel Holbert Modified: 2022-10-28 22:02 PDT
(History) CC List: 9 users (show)

ahmad.saleem792 ap bfulgham karlcow koivisto rniwa simon.fraser
webkit-bug-importer zalan
See Also:
 * https://bugs.chromium.org/p/chromium/issues/detail?id=935729

--------------------------------------------------------------------------------




Attachments Add an attachment (proposed patch, testcase, etc.)


Note You need to log in before you can comment on or make changes to this bug.

Description Daniel Holbert 2019-02-25 14:19:55 PST

(This bug covers some behavior that's common between Blink & WebKit. I've filed https://bugs.chromium.org/p/chromium/issues/detail?id=935729 on Blink.)

STR:
(1) Load https://jsfiddle.net/a6n0cb9j/

EXPECTED RESULTS:
The borders should all be the same color.

ACTUAL RESULTS:
Safari 12 uses a grey border for the table, but a black border for the td and th.


Firefox 65 [1], Edge 18, and IE11 all give EXPECTED RESULTS, rendering both borders as black (via `currentColor`).

Technically the WHATWG HTML spec says all three borders should be grey, via this rule:
>  table, td, th { border-color: gray; }
https://html.spec.whatwg.org/multipage/rendering.html#tables-2

...but I think we should remove that entirely because code-archeology seems to indicate that this was for compatibility with IE at the time[2], and IE itself doesn't have this behavior anymore.  I've filed https://github.com/whatwg/html/issues/4391 on making this spec change.

[1] Firefox renders both borders black if the testcase is in standards-mode, or both gray in quirks mode. But I'd like to remove the quirks-mode behavior.

[2] Reference for code-archeology on the ancient-IE compat note: https://bugzilla.mozilla.org/show_bug.cgi?id=84307#c20 ("IE and Opera, which always use gray" back in 2006. Nowadays IE uses currentColor, i.e. black by default.)

Comment 1 Radar WebKit Bug Importer 2019-02-25 16:27:24 PST

<rdar://problem/48382483>

Comment 2 Ahmad Saleem 2022-08-20 17:28:15 PDT

I am able to reproduce this bug in Safari 15.6.1 and Safari Technology Preview 151 using JSFiddle from Comment 0 and it show "Grey" outer border but "black" for TD and TH. It matches with Chrome Canary 106 but differ from Firefox Nightly 105, which shows "Black" for both cases. Just wanted to share updated testing results. Thanks!

Comment 3 Ahmad Saleem 2022-10-28 16:22:38 PDT

These are causing us to fail:

Standard Mode:
https://wpt.fyi/results/html/rendering/non-replaced-elements/tables/table-border-3s.html?label=experimental&label=master&aligned

Quirk Mode:
https://wpt.fyi/results/html/rendering/non-replaced-elements/tables/table-border-3q.html?label=experimental&label=master&aligned

_____

We need to get rid of this:

https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/html.css#L235

I think from Comment 0, it seems that Webkit does not have any special quirk mode and I cannot find anything here as well:

https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/quirks.css

____

I am happy to do PR and change it to "currentColor". Although, I will wait for Karl to land his "hr" fix to html.css because it will lead to conflict for him otherwise. If it is something, we should avoid right now, happy to get broader view from others as well (for my learning).

Comment 4 Ryosuke Niwa 2022-10-28 22:02:54 PDT

Seems sensible to match the spec.

--------------------------------------------------------------------------------

 * Format For Printing
 *  - XML
 *  - Clone This Bug
 *  - Top of page


 * * Home
   * | New
   * | Browse
   * | Search
   * |
     
     [?]
   * | Reports
   * | Requests
   * | Help
   * | New Account
   * | Log In
     Remember [x]
   * | Forgot Password
     Login: [x]