Bug 78215 - Inset box-shadow on a table cell with collapsed borders has a 1px gap
Summary: Inset box-shadow on a table cell with collapsed borders has a 1px gap
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 525.x (Safari 3.2)
Hardware: PC Windows 7
: P2 Minor
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2012-02-09 01:42 PST by hostit
Modified: 2023-01-24 03:33 PST (History)
3 users (show)

See Also:


Attachments
Test Case - from Comment 0 (1.11 KB, text/html)
2023-01-24 03:32 PST, Ahmad Saleem
no flags Details
Screenshot - Reference (817.78 KB, image/png)
2023-01-24 03:33 PST, Ahmad Saleem
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description hostit 2012-02-09 01:42:15 PST
Browsers affected: Chrome 16, 17.0.963.46; Safari 5.1.1 (all running on Windows 7)

Issue: When an inset box-shadow is added to a <TD> with 'border-collapse: collapse' an 1 pixel gap between box shadow and right and bottom borders appears.

In tables without border-collapse or without borders there's no gap between the border and the box shadow.

Test file:
================
<html>
 <head>
  <title>BOX-SHADOW + BORDER-COLLAPSE TEST</title>
  <style>
   table { margin-bottom: 10px;  }
   table.collapse { border-collapse: collapse; }
   table td { border: 1px solid blue; }
   table.outset td { box-shadow: 0 0 6px red; }
   table.inset td, table.inset-div div { box-shadow: inset 0 0 6px red; }
   table.no-border td { border: none; }
   table.inset-div td { padding: 0; }
  </style>
 </head>
 <body>

   <table class="collapse inset">
    <tr><td>Webkit 535.11</td><td>inset box-shadow + border-collapse = unexpected gap</td></tr>
   </table>

   <table class="inset">
    <tr><td>Webkit 535.11</td><td>inset box-shadow + no border-collapse = ok</td></tr>
   </table>

   <table class="collapse outset">
    <tr><td>Webkit 535.11</td><td>[outset] box-shadow + border-collapse = ok</td></tr>
   </table>

   <table class="collapse inset no-border">
    <tr><td>Webkit 535.11</td><td>inset box-shadow + no border = ok</td></tr>
   </table>

  <table class="collapse inset-div">
    <tr><td><div>Webkit 535.11</div></td><td><div>inset box-shadow on inner DIV = ok</div></td></tr>
   </table>

 </body>
</html>
================
Comment 1 Ahmad Saleem 2023-01-24 03:32:41 PST
Created attachment 464627 [details]
Test Case - from Comment 0

I am able to reproduce this on Safari 16.3, STP161 while Chrome Canary 111 and Firefox Nightly 111 match each other.
Comment 2 Ahmad Saleem 2023-01-24 03:33:14 PST
Created attachment 464628 [details]
Screenshot - Reference

This is screenshot across all browsers for reference.