style: Implement basic column spans.

This patch provides some of the groundwork for column spans greater than
1. It implements the column-span CSS property (prefixed so as not to be
exposed to content) as well as the corresponding colspan attribute;
although the former is not well-specified outside of CSS multi-column
layout, INTRINSIC refers to it. Although width is distributed to
spanning columns, they do not yet contribute minimum and preferred
widths; this will be implemented in a follow-up.

Additionally, this patch cleans up some miscellaneous formatting issues
and improves the handling of table rowgroups.
This commit is contained in:
Patrick Walton 2014-12-07 23:01:35 -08:00
parent 14bafb11be
commit 56b78de5bc
13 changed files with 269 additions and 129 deletions

View file

@ -209,5 +209,6 @@ fragment=top != ../html/acid2.html acid2_ref.html
== box_shadow_inset_parsing_a.html box_shadow_inset_parsing_ref.html
!= list_style_type_a.html list_style_type_ref.html
== list_style_position_a.html list_style_position_ref.html
== table_colspan_simple_a.html table_colspan_simple_ref.html
== legacy_td_bgcolor_attribute_a.html legacy_td_bgcolor_attribute_ref.html
== legacy_table_border_attribute_a.html legacy_table_border_attribute_ref.html

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<style>
td[colspan="2"] {
background-color: blue;
color: white;
}
td[colspan="3"] {
background-color: green;
color: white;
}
</style>
<body>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td width=100>&nbsp;</td><td width=100>&nbsp;</td><td width=100>&nbsp;</td></tr>
<tr><td colspan=2>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;<td colspan=2>&nbsp;</td></tr>
<tr><td colspan=3>&nbsp;</td></tr>
</table>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<style>
td.two {
background-color: blue;
color: white;
}
td.three {
background-color: green;
color: white;
}
</style>
<body>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td width=100>&nbsp;</td><td width=100>&nbsp;</td><td width=100>&nbsp;</td></tr>
<tr><td class=two>&nbsp;</td><td class=two></td><td>&nbsp;</td></tr>
<tr><td>&nbsp;<td class=two>&nbsp;</td><td class=two></td></tr>
<tr><td class=three>&nbsp;</td><td class=three></td><td class=three></td></tr>
</table>
</body>
</html>