box-shadow-table-border-collapse-001.html (1895B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Box-shadow Test: an HTML <table> with 'border-collapse: collapse'</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#shadow-layers"> 9 <link rel="match" href="reference/box-shadow-table-border-collapse-001-ref.html"> 10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 11 12 <!-- 13 14 created: 2017 15 modified: May 23rd 2020 16 17 Bug 1050297: Box-shadow of a table disappears when its border-collapse is set to collapse 18 https://connect.microsoft.com/IE/Feedback/Details/1050297 19 20 Sky6t user page at wikipedia 21 https://en.wikipedia.org/wiki/User:Sky6t/sandbox#Tables 22 23 --> 24 25 <meta content="This test checks that 'box-shadow' applies to table element with 'border-collapse' set to 'collapse' as long as row borders do not have different border thicknesses. In this test, the left border of both table rows have the same thickness (30px) and the right border of both table rows have the same thickness (30px)." name="assert"> 26 27 <style> 28 table 29 { 30 border: red solid 29px; 31 border-collapse: collapse; 32 box-shadow: 20px 20px darkgray; 33 color: orange; 34 font-family: Ahem; 35 font-size: 50px; 36 line-height: 1; 37 table-layout: fixed; 38 width: 160px; 39 } 40 41 tr 42 { 43 border-color: blue; 44 border-style: solid; 45 } 46 47 tr#top-row 48 { 49 50 border-width: 30px 30px 0px; 51 } 52 53 tr#bottom-row 54 { 55 border-width: 0px 30px 30px; 56 } 57 58 td 59 { 60 padding: 0; 61 } 62 </style> 63 64 <p>Test passes if there is a filled orange square with a thick blue border and if such square has a gray outer shadow at its bottom and at its right side. 65 66 <table> 67 68 <tr id="top-row"><td>1<td>2 69 70 <tr id="bottom-row"><td>3<td>4 71 72 </table>