Commit 4831816e authored by robert@webkit.org's avatar robert@webkit.org

Border drawing incorrect when using both border-collapse: collapse and overflow: hidden on a table

https://bugs.webkit.org/show_bug.cgi?id=18305

Reviewed by David Hyatt.

Source/WebCore:

overflowClipRect() clips out the table's half of a collapsed border when there is an overflow clip
on the table. This prevents the table's half of the border ever getting painted.

To fix this, clip to the border box of tables when we're in the paint phase that gets the sections to draw the collapsed borders
or when we're self painting. This will allow the table's half of the border to get painted. In the case where the table is self
painting we ensure that content gets clipped to cell's side of the collapsed border by ensuring the clip passed to child layers
from the table clips to the inside of the collapsed border.

It's worth noting that a table's collapsed borders are painted by the table's layer using functions in
RenderTableSection and RenderTableCell. So if a table section has a self-painting layer this patch still works, because
the borders aren't painted by the section's layer.

Tests: fast/table/overflow-table-collapsed-borders-cell-painting-table-self-painting-layer.html
       fast/table/overflow-table-collapsed-borders-cell-painting.html
       fast/table/overflow-table-collapsed-borders-section-layer-painting.html
       fast/table/overflow-table-collapsed-borders-section-layer-table-self-painting-layer.html
       fast/table/overflow-table-collapsed-borders-section-self-painting-layer-painting.html
       fast/table/overflow-table-collapsed-borders-section-self-painting-layer-table-self-painting-layer.html
       fast/table/table-overflow.html

* rendering/RenderBox.cpp:
(WebCore::RenderBox::pushContentsClip):
(WebCore::RenderBox::overflowClipRect):
* rendering/RenderBox.h:
(WebCore::RenderBox::overflowClipRectForChildLayers):
* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::calculateClipRects):
* rendering/RenderTable.cpp:
(WebCore::RenderTable::overflowClipRect):
* rendering/RenderTable.h:
(WebCore::RenderTable::overflowClipRectForChildLayers):

LayoutTests:

* fast/table/overflow-table-collapsed-borders-cell-painting-expected.png: Added.
* fast/table/overflow-table-collapsed-borders-cell-painting-expected.txt: Added.
* fast/table/overflow-table-collapsed-borders-cell-painting-table-self-painting-layer-expected.png: Added.
* fast/table/overflow-table-collapsed-borders-cell-painting-table-self-painting-layer-expected.txt: Added.
* fast/table/overflow-table-collapsed-borders-cell-painting-table-self-painting-layer.html: Added.
* fast/table/overflow-table-collapsed-borders-cell-painting.html: Added.
* fast/table/overflow-table-collapsed-borders-section-layer-painting-expected.png: Added.
* fast/table/overflow-table-collapsed-borders-section-layer-painting-expected.txt: Added.
* fast/table/overflow-table-collapsed-borders-section-layer-painting.html: Added.
* fast/table/overflow-table-collapsed-borders-section-layer-table-self-painting-layer-expected.png: Added.
* fast/table/overflow-table-collapsed-borders-section-layer-table-self-painting-layer-expected.txt: Added.
* fast/table/overflow-table-collapsed-borders-section-layer-table-self-painting-layer.html: Added.
* fast/table/overflow-table-collapsed-borders-section-self-painting-layer-painting-expected.png: Added.
* fast/table/overflow-table-collapsed-borders-section-self-painting-layer-painting-expected.txt: Added.
* fast/table/overflow-table-collapsed-borders-section-self-painting-layer-painting.html: Added.
* fast/table/overflow-table-collapsed-borders-section-self-painting-layer-table-self-painting-layer-expected.png: Added.
* fast/table/overflow-table-collapsed-borders-section-self-painting-layer-table-self-painting-layer-expected.txt: Added.
* fast/table/overflow-table-collapsed-borders-section-self-painting-layer-table-self-painting-layer.html: Added.
* fast/table/table-overflow-expected.html: Added.
* fast/table/table-overflow.html: Added.
* platform/qt/fast/table/overflowHidden-expected.txt:


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@153089 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent da2bc021
2013-07-24 Robert Hogan <robert@webkit.org>
Border drawing incorrect when using both border-collapse: collapse and overflow: hidden on a table
https://bugs.webkit.org/show_bug.cgi?id=18305
Reviewed by David Hyatt.
* fast/table/overflow-table-collapsed-borders-cell-painting-expected.png: Added.
* fast/table/overflow-table-collapsed-borders-cell-painting-expected.txt: Added.
* fast/table/overflow-table-collapsed-borders-cell-painting-table-self-painting-layer-expected.png: Added.
* fast/table/overflow-table-collapsed-borders-cell-painting-table-self-painting-layer-expected.txt: Added.
* fast/table/overflow-table-collapsed-borders-cell-painting-table-self-painting-layer.html: Added.
* fast/table/overflow-table-collapsed-borders-cell-painting.html: Added.
* fast/table/overflow-table-collapsed-borders-section-layer-painting-expected.png: Added.
* fast/table/overflow-table-collapsed-borders-section-layer-painting-expected.txt: Added.
* fast/table/overflow-table-collapsed-borders-section-layer-painting.html: Added.
* fast/table/overflow-table-collapsed-borders-section-layer-table-self-painting-layer-expected.png: Added.
* fast/table/overflow-table-collapsed-borders-section-layer-table-self-painting-layer-expected.txt: Added.
* fast/table/overflow-table-collapsed-borders-section-layer-table-self-painting-layer.html: Added.
* fast/table/overflow-table-collapsed-borders-section-self-painting-layer-painting-expected.png: Added.
* fast/table/overflow-table-collapsed-borders-section-self-painting-layer-painting-expected.txt: Added.
* fast/table/overflow-table-collapsed-borders-section-self-painting-layer-painting.html: Added.
* fast/table/overflow-table-collapsed-borders-section-self-painting-layer-table-self-painting-layer-expected.png: Added.
* fast/table/overflow-table-collapsed-borders-section-self-painting-layer-table-self-painting-layer-expected.txt: Added.
* fast/table/overflow-table-collapsed-borders-section-self-painting-layer-table-self-painting-layer.html: Added.
* fast/table/table-overflow-expected.html: Added.
* fast/table/table-overflow.html: Added.
* platform/qt/fast/table/overflowHidden-expected.txt:
2013-07-24 Frédéric Wang <fred.wang@free.fr>
Graphical elements inside mphantom should not be visible.
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x556
RenderBlock {HTML} at (0,0) size 800x556
RenderBody {BODY} at (8,8) size 784x540
layer at (8,8) size 70x60 clip at (18,18) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,0) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (8,68) size 70x60 clip at (18,78) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,60) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (8,128) size 70x60 clip at (18,138) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,120) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (8,188) size 70x60 clip at (18,198) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,180) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (8,248) size 70x60 clip at (18,258) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,240) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (8,308) size 70x60 clip at (18,318) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,300) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (8,368) size 70x60 clip at (18,378) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,360) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (8,428) size 70x60 clip at (18,438) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,420) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (8,488) size 70x60 clip at (18,498) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,480) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (18,78) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (18,138) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (18,198) size 70x10 backgroundClip at (18,198) size 50x40 clip at (18,198) size 50x40 outlineClip at (18,198) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (18,258) size 70x10 backgroundClip at (18,258) size 50x40 clip at (18,258) size 50x40 outlineClip at (18,258) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (18,318) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (18,318) size 70x10 backgroundClip at (18,318) size 50x40 clip at (18,318) size 50x40 outlineClip at (18,318) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (18,378) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (18,378) size 70x10 backgroundClip at (18,378) size 50x40 clip at (18,378) size 50x40 outlineClip at (18,378) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (18,438) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (18,438) size 70x10 backgroundClip at (18,438) size 50x40 clip at (18,438) size 50x40 outlineClip at (18,438) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (18,498) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (18,498) size 70x10 backgroundClip at (18,498) size 50x40 clip at (18,498) size 50x40 outlineClip at (18,498) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x556
RenderBlock {HTML} at (0,0) size 800x556
RenderBody {BODY} at (8,8) size 784x540
layer at (8,8) size 70x60 scrollWidth 80
RenderTable {DIV} at (0,0) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (8,68) size 70x60 scrollWidth 80
RenderTable {DIV} at (0,60) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (18,78) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (8,128) size 70x60 scrollWidth 80
RenderTable {DIV} at (0,120) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (18,138) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (8,188) size 70x60 scrollWidth 80
RenderTable {DIV} at (0,180) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (18,198) size 70x10 backgroundClip at (18,198) size 50x40 clip at (18,198) size 50x40 outlineClip at (18,198) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (8,248) size 70x60 scrollWidth 80
RenderTable {DIV} at (0,240) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (18,258) size 70x10 backgroundClip at (18,258) size 50x40 clip at (18,258) size 50x40 outlineClip at (18,258) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (8,308) size 70x60 scrollWidth 80
RenderTable {DIV} at (0,300) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (18,318) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (18,318) size 70x10 backgroundClip at (18,318) size 50x40 clip at (18,318) size 50x40 outlineClip at (18,318) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (8,368) size 70x60 scrollWidth 80
RenderTable {DIV} at (0,360) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (18,378) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (18,378) size 70x10 backgroundClip at (18,378) size 50x40 clip at (18,378) size 50x40 outlineClip at (18,378) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (8,428) size 70x60 scrollWidth 80
RenderTable {DIV} at (0,420) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (18,438) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (18,438) size 70x10 backgroundClip at (18,438) size 50x40 clip at (18,438) size 50x40 outlineClip at (18,438) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (8,488) size 70x60 scrollWidth 80
RenderTable {DIV} at (0,480) size 70x60 [color=#008000] [border: (10px solid #000000)]
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (18,498) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (18,498) size 70x10 backgroundClip at (18,498) size 50x40 clip at (18,498) size 50x40 outlineClip at (18,498) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
<!DOCTYPE html>
<html>
<head>
<style>
.table
{
border: 20px solid black;
color: green;
display: table;
font: 10px/1em Ahem;
height: 4em;
overflow: hidden;
table-layout: fixed;
width: 5em;
border-collapse: collapse;
}
.row
{
display: table-row;
}
.tbody
{
display: table-row-group;
}
.cell
{
display: table-cell;
white-space: nowrap;
}
.span2
{
color: blue;
}
.layer
{
opacity: 0.9;
}
.self-painting-layer
{
-webkit-mask:-webkit-gradient(linear, left top, left bottom, from(#E7E7E7), to(#CFCFCF));
}
</style>
</head>
<body>
<!-- webkit.org/b/18305: The blue bar should intrude halfway into the right-hand border. This tests that overflow:hidden on a table
still allows overflowing content to spill onto the cell's half of a collapsed border.-->
<div class="table self-painting-layer">
<div class="tbody">
<div class="row">
<div class="cell"><span class="span2">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table self-painting-layer">
<div class="tbody">
<div class="row">
<div class="cell self-painting-layer"><span class="span2">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table self-painting-layer">
<div class="tbody">
<div class="row">
<div class="cell layer"><span class="span2">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table self-painting-layer">
<div class="tbody">
<div class="row">
<div class="cell"><span class="span2 self-painting-layer">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table self-painting-layer">
<div class="tbody">
<div class="row">
<div class="cell"><span class="span2 layer">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table self-painting-layer">
<div class="tbody">
<div class="row">
<div class="cell self-painting-layer"><span class="span2 layer">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table self-painting-layer">
<div class="tbody">
<div class="row">
<div class="cell self-painting-layer"><span class="span2 self-painting-layer">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table self-painting-layer">
<div class="tbody">
<div class="row">
<div class="cell layer"><span class="span2 self-painting-layer">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table self-painting-layer">
<div class="tbody">
<div class="row">
<div class="cell layer"><span class="span2 layer">XXXXXXX</span></div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.table
{
border: 20px solid black;
color: green;
display: table;
font: 10px/1em Ahem;
height: 4em;
overflow: hidden;
table-layout: fixed;
width: 5em;
border-collapse: collapse;
}
.row
{
display: table-row;
}
.tbody
{
display: table-row-group;
}
.cell
{
display: table-cell;
white-space: nowrap;
}
.span2
{
color: blue;
}
.layer
{
opacity: 0.9;
}
.self-painting-layer
{
-webkit-mask:-webkit-gradient(linear, left top, left bottom, from(#E7E7E7), to(#CFCFCF));
}
</style>
</head>
<body>
<!-- webkit.org/b/18305: The blue bar should intrude halfway into the right-hand border. This tests that overflow:hidden on a table
still allows overflowing content to spill onto the cell's half of a collapsed border.-->
<div class="table">
<div class="tbody">
<div class="row">
<div class="cell"><span class="span2">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table">
<div class="tbody">
<div class="row">
<div class="cell self-painting-layer"><span class="span2">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table">
<div class="tbody">
<div class="row">
<div class="cell layer"><span class="span2">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table">
<div class="tbody">
<div class="row">
<div class="cell"><span class="span2 self-painting-layer">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table">
<div class="tbody">
<div class="row">
<div class="cell"><span class="span2 layer">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table">
<div class="tbody">
<div class="row">
<div class="cell self-painting-layer"><span class="span2 layer">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table">
<div class="tbody">
<div class="row">
<div class="cell self-painting-layer"><span class="span2 self-painting-layer">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table">
<div class="tbody">
<div class="row">
<div class="cell layer"><span class="span2 self-painting-layer">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table">
<div class="tbody">
<div class="row">
<div class="cell layer"><span class="span2 layer">XXXXXXX</span></div>
</div>
</div>
</div>
</body>
</html>
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x556
RenderBlock {HTML} at (0,0) size 800x556
RenderBody {BODY} at (8,8) size 784x540
layer at (8,8) size 70x60 clip at (18,18) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,0) size 70x60 [color=#008000] [border: (10px solid #000000)]
layer at (8,68) size 70x60 clip at (18,78) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,60) size 70x60 [color=#008000] [border: (10px solid #000000)]
layer at (8,128) size 70x60 clip at (18,138) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,120) size 70x60 [color=#008000] [border: (10px solid #000000)]
layer at (8,188) size 70x60 clip at (18,198) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,180) size 70x60 [color=#008000] [border: (10px solid #000000)]
layer at (8,248) size 70x60 clip at (18,258) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,240) size 70x60 [color=#008000] [border: (10px solid #000000)]
layer at (8,308) size 70x60 clip at (18,318) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,300) size 70x60 [color=#008000] [border: (10px solid #000000)]
layer at (8,368) size 70x60 clip at (18,378) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,360) size 70x60 [color=#008000] [border: (10px solid #000000)]
layer at (8,428) size 70x60 clip at (18,438) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,420) size 70x60 [color=#008000] [border: (10px solid #000000)]
layer at (8,488) size 70x60 clip at (18,498) size 50x40 scrollWidth 80
RenderTable {DIV} at (0,480) size 70x60 [color=#008000] [border: (10px solid #000000)]
layer at (18,18) size 50x40
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (18,78) size 50x40
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (18,78) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (18,138) size 50x40
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (18,138) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (18,198) size 50x40
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (18,198) size 70x10 backgroundClip at (18,198) size 50x40 clip at (18,198) size 50x40 outlineClip at (18,198) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (18,258) size 50x40
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (18,258) size 70x10 backgroundClip at (18,258) size 50x40 clip at (18,258) size 50x40 outlineClip at (18,258) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (18,318) size 50x40
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (18,318) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (18,318) size 70x10 backgroundClip at (18,318) size 50x40 clip at (18,318) size 50x40 outlineClip at (18,318) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (18,378) size 50x40
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (18,378) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (18,378) size 70x10 backgroundClip at (18,378) size 50x40 clip at (18,378) size 50x40 outlineClip at (18,378) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (18,438) size 50x40
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (18,438) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (18,438) size 70x10 backgroundClip at (18,438) size 50x40 clip at (18,438) size 50x40 outlineClip at (18,438) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
layer at (18,498) size 50x40
RenderTableSection {DIV} at (10,10) size 50x40
RenderTableRow {DIV} at (0,0) size 50x40
layer at (18,498) size 50x40
RenderTableCell {DIV} at (0,0) size 50x30 [border: (10px none #008000)] [r=0 c=0 rs=1 cs=1]
layer at (18,498) size 70x10 backgroundClip at (18,498) size 50x40 clip at (18,498) size 50x40 outlineClip at (18,498) size 50x40
RenderInline {SPAN} at (0,0) size 70x10 [color=#0000FF]
RenderText {#text} at (10,10) size 70x10
text run at (10,10) width 70: "XXXXXXX"
<!DOCTYPE html>
<html>
<head>
<style>
.table
{
border: 20px solid black;
color: green;
display: table;
font: 10px/1em Ahem;
height: 4em;
overflow: hidden;
table-layout: fixed;
width: 5em;
border-collapse: collapse;
}
.row
{
display: table-row;
}
.tbody
{
display: table-row-group;
}
.cell
{
display: table-cell;
white-space: nowrap;
}
.span2
{
color: blue;
}
.layer
{
opacity: 0.9;
}
.self-painting-layer
{
-webkit-mask:-webkit-gradient(linear, left top, left bottom, from(#E7E7E7), to(#CFCFCF));
}
</style>
</head>
<body>
<!-- webkit.org/b/18305: In each table the blue bar should intrude halfway into the right-hand border. This tests that overflow:hidden on a table
still allows overflowing content to spill onto the cell's half of a collapsed border.-->
<div class="table">
<div class="tbody layer">
<div class="row">
<div class="cell"><span class="span2">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table">
<div class="tbody layer">
<div class="row">
<div class="cell self-painting-layer"><span class="span2">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table">
<div class="tbody layer">
<div class="row">
<div class="cell layer"><span class="span2">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table">
<div class="tbody layer">
<div class="row">
<div class="cell"><span class="span2 self-painting-layer">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table">
<div class="tbody layer">
<div class="row">
<div class="cell"><span class="span2 layer">XXXXXXX</span></div>
</div>
</div>
</div>
<div class="table">
<div class="tbody layer">
<div class="row">