Skip to content

GitLab

T
tangled
Commit 5dd534da authored by robhogan@gmail.com's avatar robhogan@gmail.com
Browse files
Options

Don't allow whitespace between elements with display:table-cell 

In https://codereview.chromium.org/1065563005 we started allowing whitespace
inside anonymous table cells. We're only interested in anonymous table cells
that were generated to contain non-table-part content. If the anonymous cell
was generated to contain a form element with display:table-cell, for example, then
that is not a situation where we want to treat any whitespace before and
after the form element as renderable.
 
BUG=515771

Review URL: https://codereview.chromium.org/1280123004

git-svn-id: svn://svn.chromium.org/blink/trunk@201329 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 45387b03
Hide whitespace changes
Inline Side-by-side
Showing with 152 additions and 28 deletions
third_party/WebKit/LayoutTests/TestExpectations
View file @ 5dd534da
......@@ -858,6 +858,9 @@ crbug.com/449197 virtual/gpu/fast/canvas/canvas-composite-video.html [ NeedsManu
crbug.com/449197 virtual/gpu/fast/canvas/canvas-drawImage-video.html [ NeedsManualRebaseline ]
crbug.com/449197 virtual/gpu/fast/canvas/yuv-video-on-accelerated-canvas.html [ NeedsManualRebaseline ]
crbug.com/515771 fast/table/table-row-before-after-content-around-table-cell.html [ NeedsRebaseline ]
crbug.com/515771 tables/mozilla/bugs/bug2479-1.html [ NeedsRebaseline ]
# When drawing subpixel smoothed glyphs, CoreGraphics will fake bold the glyphs.
# In this configuration, the pixel smoothed glyphs will be created from subpixel smoothed glyphs.
# This means that CoreGraphics may draw outside the reported glyph bounds, and in this case does.
......
third_party/WebKit/LayoutTests/fast/table/table-row-before-after-content-around-table-cell-expected.txt
View file @ 5dd534da
......@@ -11,12 +11,10 @@ layer at (0,0) size 800x116
LayoutInline {<pseudo:before>} at (0,0) size 100x100 [color=#0000FF]
LayoutTextFragment (anonymous) at (0,0) size 100x100
text run at (0,0) width 100: "A"
LayoutText {#text} at (0,0) size 0x0
LayoutTableCell {DIV} at (100,0) size 100x100 [color=#008000] [r=0 c=1 rs=1 cs=1]
LayoutText {#text} at (0,0) size 100x100
text run at (0,0) width 100: "B"
LayoutTableCell (anonymous) at (200,0) size 100x100 [r=0 c=2 rs=1 cs=1]
LayoutText {#text} at (0,0) size 0x0
LayoutInline {<pseudo:after>} at (0,0) size 100x100 [color=#FFA500]
LayoutTextFragment (anonymous) at (0,0) size 100x100
text run at (0,0) width 100: "C"
third_party/WebKit/LayoutTests/fast/table/whitespace-between-elements-with-table-cell-display-2-expected.html 0 → 100644
View file @ 5dd534da
<!DOCTYPE html>
<style>
#cell { width:200px; height: 50px; margin:0; border:none; background:green; }
</style>
<p>crbug.com/515771: Form elements with a table cell display should not allow whitespace between them. </p>
<p>There should only be green below.</p>
<div style="display:table;">
<div id="cell"></div>
</div>
third_party/WebKit/LayoutTests/fast/table/whitespace-between-elements-with-table-cell-display-2.html 0 → 100644
View file @ 5dd534da
<!DOCTYPE html>
<style>
input { display:table-cell; width:50px; height: 50px; margin:0; border:none; padding: 0; background:transparent; }
</style>
<p>crbug.com/515771: Form elements with a table cell display should not allow whitespace between them. </p>
<p>There should only be green below.</p>
<div style="display:table;">
<div style="display:table-column; background:green;"></div>
<div style="display:table-column; background:red;"></div>
<div style="display:table-column; background:salmon;"></div>
<div style="display:table-column; background:red;"></div>
<input>
<input>
<input>
<input>
</div>
third_party/WebKit/LayoutTests/fast/table/whitespace-between-elements-with-table-cell-display-3-expected.html 0 → 100644
View file @ 5dd534da
<!DOCTYPE html>
<style>
input {
display: table-cell;
width: 100px;
height: 100px;
background: blue;
border: none;
padding: 0;
vertical-align: bottom;
}
</style>
<p>crbug.com/515771: Form elements with a table cell display should not allow whitespace between them. </p>
<p>There should be a blue square below.</p>
<div style="display:table;">
<input>
</div>
third_party/WebKit/LayoutTests/fast/table/whitespace-between-elements-with-table-cell-display-3.html 0 → 100644
View file @ 5dd534da
<!DOCTYPE html>
<style>
input, button {
display: table-cell;
width: 50px;
height: 100px;
background: blue;
border: none;
padding: 0;
vertical-align: bottom;
}
</style>
<p>crbug.com/515771: Form elements with a table cell display should not allow whitespace between them. </p>
<p>There should be a blue square below.</p>
<div style="display:table;">
<div></div>
<input>
<button></button>
</div>
third_party/WebKit/LayoutTests/fast/table/whitespace-between-elements-with-table-cell-display-4-expected.txt 0 → 100644
View file @ 5dd534da
crbug.com/515771: Form elements with a table cell display should not interfere with allowing whitespace between adjacent siblings.
There should be two words (with space between them) below.
two words
third_party/WebKit/LayoutTests/fast/table/whitespace-between-elements-with-table-cell-display-4.html 0 → 100644
View file @ 5dd534da
<!DOCTYPE html>
<p>crbug.com/515771: Form elements with a table cell display should not interfere with allowing whitespace between adjacent siblings. </p>
<p>There should be two words (with space between them) below.</p>
<script>
if (window.testRunner)
testRunner.dumpAsText();
</script>
<div style="display:table;">
<input style="display:table-cell; background:transparent; border:none;">
<span>two</span>
<span>words</span>
</div>
third_party/WebKit/LayoutTests/fast/table/whitespace-between-elements-with-table-cell-display-expected.html 0 → 100644
View file @ 5dd534da
<!DOCTYPE html>
<style>
input,button{
display: table-cell;
height:24px;
}
input{
border-width:1px 0 1px 1px;
padding: 0 5px;
width:196px;
}
button{
width:27px;
}
.inner{
display: table;
}
</style>
<div class="container">
<div class="inner" data-expected-height=31>
<input type="text">
<button></button>
</div>
</div>
<p>crbug.com/515771: Form elements with a table cell display should not allow whitespace between them. </p>
third_party/WebKit/LayoutTests/fast/table/whitespace-between-elements-with-table-cell-display.html 0 → 100644
View file @ 5dd534da
<!DOCTYPE html>
<style>
input,button{
display: table-cell;
height:24px;
}
input{
border-width:1px 0 1px 1px;
padding: 0 5px;
width:196px;
}
button{
width:27px;
}
.container{
width:236px;
}
.inner{
display: table;
}
</style>
<div class="container">
<div class="inner" data-expected-height=31>
<input type="text">
<button></button>
</div>
</div>
<p>crbug.com/515771: Form elements with a table cell display should not allow whitespace between them. </p>
third_party/WebKit/LayoutTests/platform/linux/tables/mozilla/bugs/bug2479-1-expected.txt
View file @ 5dd534da
......@@ -237,14 +237,10 @@ layer at (0,0) size 785x989 backgroundClip at (0,0) size 785x600 clip at (0,0) s
LayoutBlockFlow {SPAN} at (0,0) size 139x20
LayoutText {#text} at (0,0) size 139x19
text run at (0,0) width 139: "Table 2, Row 2, Cell 1"
LayoutBlockFlow (anonymous) at (0,20) size 139x0
LayoutText {#text} at (0,0) size 0x0
LayoutTableCell {SPAN} at (139,20) size 139x20 [r=1 c=1 rs=1 cs=1]
LayoutText {#text} at (0,0) size 139x19
text run at (0,0) width 139: "Table 2, Row 2, Cell 2"
LayoutTableCell (anonymous) at (278,20) size 236x60 [r=1 c=2 rs=1 cs=1]
LayoutBlockFlow (anonymous) at (0,0) size 236x0
LayoutText {#text} at (0,0) size 0x0
LayoutBlockFlow {SPAN} at (0,0) size 236x20
LayoutText {#text} at (0,0) size 139x19
text run at (0,0) width 139: "Table 2, Row 2, Cell 3"
......@@ -259,33 +255,24 @@ layer at (0,0) size 785x989 backgroundClip at (0,0) size 785x600 clip at (0,0) s
LayoutTableCell {SPAN} at (514,20) size 139x20 [r=1 c=3 rs=1 cs=1]
LayoutText {#text} at (0,0) size 139x19
text run at (0,0) width 139: "Table 2, Row 2, Cell 4"
LayoutTableCell (anonymous) at (653,20) size 0x0 [r=1 c=4 rs=1 cs=1]
LayoutText {#text} at (0,0) size 0x0
LayoutTableRow {SPAN} at (0,80) size 653x20 [bgcolor=#00FFFF]
LayoutTableCell (anonymous) at (0,80) size 139x20 [r=2 c=0 rs=1 cs=1]
LayoutInline {SPAN} at (0,0) size 139x19
LayoutText {#text} at (0,0) size 139x19
text run at (0,0) width 139: "Table 2, Row 3, Cell 1"
LayoutText {#text} at (0,0) size 0x0
LayoutTableCell {SPAN} at (139,80) size 139x20 [r=2 c=1 rs=1 cs=1]
LayoutText {#text} at (0,0) size 139x19
text run at (0,0) width 139: "Table 2, Row 3, Cell 2"
LayoutTableCell (anonymous) at (278,80) size 236x20 [r=2 c=2 rs=1 cs=1]
LayoutBlockFlow (anonymous) at (0,0) size 236x0
LayoutText {#text} at (0,0) size 0x0
LayoutTable {SPAN} at (0,0) size 236x20 [bgcolor=#00FFFF]
LayoutTableSection (anonymous) at (0,0) size 236x20
LayoutTableRow (anonymous) at (0,0) size 236x20
LayoutTableCell (anonymous) at (0,0) size 236x20 [r=0 c=0 rs=1 cs=1]
LayoutText {#text} at (0,0) size 236x19
text run at (0,0) width 236: "Table 2, Row 3, Cell 3 (a nested table)"
LayoutBlockFlow (anonymous) at (0,20) size 236x0
LayoutText {#text} at (0,0) size 0x0
LayoutTableCell {SPAN} at (514,80) size 139x20 [r=2 c=3 rs=1 cs=1]
LayoutText {#text} at (0,0) size 139x19
text run at (0,0) width 139: "Table 2, Row 3, Cell 4"
LayoutTableCell (anonymous) at (653,80) size 0x0 [r=2 c=4 rs=1 cs=1]
LayoutText {#text} at (0,0) size 0x0
LayoutBlockFlow {HR} at (0,825.69) size 769x2 [border: (1px inset #EEEEEE)]
LayoutBlockFlow {P} at (0,843.69) size 769x36
LayoutInline {A} at (0,0) size 88x19 [color=#0000EE]
......
third_party/WebKit/Source/core/dom/Text.cpp
View file @ 5dd534da
......@@ -245,25 +245,25 @@ static inline bool hasGeneratedAnonymousTableCells(const LayoutObject& parent)
LayoutObject* child = parent.slowFirstChild();
if (!child || !child->isAnonymous())
return false;
if (child->isTableCell()) {
LayoutObject* firstChild = child->slowFirstChild();
// Ignore the anonymous table cell if it is wrapping a table cell element (e.g. because of <td style="display:block;">).
return !firstChild || !firstChild->node() || !isHTMLTableCellElement(firstChild->node());
}
if (child->isTableCell())
return true;
if (child->isTableSection() || child->isTableRow())
return hasGeneratedAnonymousTableCells(*child);
return false;
}
static inline bool canHaveWhitespaceChildren(const LayoutObject& parent)
static inline bool nodeAllowsAdjacentWhitespace(Node* node)
{
// <button> should allow whitespace even though LayoutFlexibleBox doesn't.
if (parent.isLayoutButton())
if (!node)
return true;
const ComputedStyle* style = node->ensureComputedStyle();
return style && style->originalDisplay() != TABLE_CELL && !isHTMLTableCellElement(node);
}
// Allow whitespace when the text is inside a table, section or row element that
// has generated anonymous table cells to hold its contents.
if (hasGeneratedAnonymousTableCells(parent))
static inline bool canHaveWhitespaceChildren(const LayoutObject& parent, Text* text)
{
// <button> should allow whitespace even though LayoutFlexibleBox doesn't.
if (parent.isLayoutButton())
return true;
if (parent.isTable() || parent.isTableRow() || parent.isTableSection()
......@@ -272,8 +272,13 @@ static inline bool canHaveWhitespaceChildren(const LayoutObject& parent)
|| parent.isSVGRoot()
|| parent.isSVGContainer()
|| parent.isSVGImage()
|| parent.isSVGShape())
|| parent.isSVGShape()) {
// Allow whitespace when the text is inside a table, section or row element that
// has generated anonymous table cells to hold its contents.
if (hasGeneratedAnonymousTableCells(parent))
return nodeAllowsAdjacentWhitespace(text->previousSibling()) && nodeAllowsAdjacentWhitespace(text->nextSibling());
return false;
}
return true;
}
......@@ -294,7 +299,7 @@ bool Text::textLayoutObjectIsNeeded(const ComputedStyle& style, const LayoutObje
if (!containsOnlyWhitespace())
return true;
if (!canHaveWhitespaceChildren(parent))
if (!canHaveWhitespaceChildren(parent, this))
return false;
// pre-wrap in SVG never makes layoutObject.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment