auto merge of #4417 : pcwalton/servo/border-spacing, r=larsbergstrom

Table layout code has been refactored to push the spacing down to
rowgroups and rows; this will aid the implementation of
`border-collapse` as well.

r? @SimonSapin
This commit is contained in:
bors-servo 2015-03-12 13:03:49 -06:00
commit 8e811229ba
26 changed files with 690 additions and 208 deletions

View file

@ -49,6 +49,9 @@ flaky_cpu == append_style_a.html append_style_b.html
== border_code_tag.html border_code_tag_ref.html
== border_radius_clip_a.html border_radius_clip_ref.html
== border_radius_overlapping_a.html border_radius_overlapping_ref.html
== border_spacing_a.html border_spacing_ref.html
== border_spacing_auto_layout_a.html border_spacing_ref.html
== border_spacing_fixed_layout_a.html border_spacing_ref.html
== border_style_none_a.html border_style_none_b.html
== borders_a.html borders_b.html
!= box_shadow_blur_a.html box_shadow_blur_ref.html
@ -142,6 +145,7 @@ flaky_cpu == append_style_a.html append_style_b.html
== issue-1324.html issue-1324-ref.html
== last_child_pseudo_a.html last_child_pseudo_b.html
== last_of_type_pseudo_a.html last_of_type_pseudo_b.html
== legacy_cellspacing_attribute_a.html border_spacing_ref.html
== legacy_input_size_attribute_override_a.html legacy_input_size_attribute_override_ref.html
== legacy_table_border_attribute_a.html legacy_table_border_attribute_ref.html
== legacy_td_bgcolor_attribute_a.html legacy_td_bgcolor_attribute_ref.html

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `border-spacing` works. -->
<style>
body, html {
margin: 0;
}
table {
border: none;
border-spacing: 6px;
padding: 0;
}
tr {
border-spacing: 64px; /* should have no effect */
padding: 0;
}
td {
border: none;
border-spacing: 100px; /* should have no effect */
padding: 0;
background: blue;
}
</style>
</head>
<body>
<table>
<tr><td width=32 style="height: 32px;"></td><td width=64></td></tr>
<tr><td width=32 style="height: 32px;"></td><td width=64></td></tr>
</table>
</body>
</html>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<!--
Tests that `border-spacing` with automatic table layout works when not all the column sizes
are specified.
-->
<style>
body, html {
margin: 0;
}
table {
border: none;
border-spacing: 6px;
padding: 0;
width: 114px;
}
tr {
padding: 0;
}
td {
border: none;
padding: 0;
background: blue;
}
</style>
</head>
<body>
<table>
<tr><td style="width: 32px; height: 32px;"></td><td>&nbsp;</td></tr>
<tr><td style="width: 32px; height: 32px;"></td><td>&nbsp;</td></tr>
</table>
</body>
</html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<!--
Tests that `border-spacing` with automatic table layout works when not all the column sizes
are specified.
-->
<style>
body, html {
margin: 0;
}
table {
border: none;
border-spacing: 6px;
padding: 0;
width: 114px;
table-layout: fixed;
}
tr {
padding: 0;
}
td {
border: none;
padding: 0;
background: blue;
}
</style>
</head>
<body>
<table>
<tr><td style="width: 32px; height: 32px;"></td><td>&nbsp;</td></tr>
<tr><td style="width: 32px; height: 32px;"></td><td>&nbsp;</td></tr>
</table>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `border-spacing` works. -->
<style>
div {
background: blue;
position: absolute;
height: 32px;
}
#a, #c {
width: 32px;
}
#b, #d {
width: 64px;
}
#a, #b {
top: 6px;
}
#c, #d {
top: 44px;
}
#a, #c {
left: 6px;
}
#b, #d {
left: 44px;
}
</style>
</head>
<body>
<div id=a></div>
<div id=b></div>
<div id=c></div>
<div id=d></div>
</body>
</html>

View file

@ -17,6 +17,7 @@
color: red;
float: right;
line-height: 1;
border-spacing: 0;
}
td {
padding: 0;

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that the legacy `cellspacing` attribute works. -->
<style>
body, html {
margin: 0;
}
table {
border: none;
padding: 0;
}
tr {
padding: 0;
}
td {
border: none;
padding: 0;
background: blue;
}
</style>
</head>
<body>
<table cellspacing=6>
<tr><td width=32 style="height: 32px;"></td><td width=64></td></tr>
<tr><td width=32 style="height: 32px;"></td><td width=64></td></tr>
</table>
</body>
</html>

View file

@ -4,6 +4,7 @@
table {
width: 300px;
table-layout: fixed;
border-spacing: 0;
}
td[colspan="2"] {
background-color: blue;

View file

@ -5,6 +5,7 @@
* {
margin: 0;
padding: 0;
border-spacing: 0;
}
</style>
</head>

View file

@ -1,35 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face {
font-family: 'ahem';
src: url(fonts/ahem/ahem.ttf);
}
body {
margin: 0;
font-family: 'ahem';
font-size: 100px;
line-height: 1;
}
table {
background:green;
padding: 150px;
box-sizing: content-box;
}
th {
color: yellow;
padding: 0;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>X</th>
</tr>
</tbody>
</table>
</body>
<head>
<style type="text/css">
@font-face {
font-family: 'ahem';
src: url(fonts/ahem/ahem.ttf);
}
body {
margin: 0;
font-family: 'ahem';
font-size: 100px;
line-height: 1;
}
table {
background:green;
padding: 150px;
box-sizing: content-box;
border-spacing: 0;
}
th {
color: yellow;
padding: 0;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>X</th>
</tr>
</tbody>
</table>
</body>
</html>