Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-24 06:45:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Implement border-spacing per CSS 2.1 § 17.6.1 and the legacy

Browse source 
`cellspacing` attribute per HTML5 § 14.3.9.

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.

This commit also fixes two nasty issues in table layout:

* In fixed layout, extra space would not be divided among columns that
  had auto width but had nonzero minimum width.

* In automatic layout, extra space would be distributed to constrained
  columns as well even if unconstrained columns with percentage equal to
  zero were present.
This commit is contained in:
Patrick Walton 2014-12-17 16:44:37 -08:00
parent e8f1a046c6
commit 586c12ccc4
26 changed files with 690 additions and 208 deletions
Download patch file Download diff file Expand all files Collapse all files

4
tests/ref/basic.list
View file

@ -48,6 +48,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
@ -141,6 +144,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

33
tests/ref/border_spacing_a.html Normal file
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>

35
tests/ref/border_spacing_auto_layout_a.html Normal file
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>

36
tests/ref/border_spacing_fixed_layout_a.html Normal file
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>

39
tests/ref/border_spacing_ref.html Normal file
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>

1
tests/ref/float_table_a.html
View file

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

30
tests/ref/legacy_cellspacing_attribute_a.html Normal file
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>

1
tests/ref/table_colspan_fixed_a.html
View file

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

1
tests/ref/table_expansion_to_fit_a.html
View file

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

65
tests/ref/table_padding_a.html
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>