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

Auto merge of #5870 - SimonSapin:border-collapse, r=SimonSapin

Browse source 
Fixes #5300, which it is a rebase of.

Known issues:

* Collapsed borders do not correctly affect the border-box of the table
  itself.

* The content widths of all cells in a column and the content height of
  all cells in a row is the same in this patch, but not in Gecko and
  WebKit.

* Corners are not painted well. The spec does not say what to do here.

* Column spans are not handled well. The spec does not say what to do
  here either.

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/5870)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2015-04-27 12:29:15 -05:00
commit 8a4555cc53
23 changed files with 2013 additions and 518 deletions
Download patch file Download diff file Expand all files Collapse all files

54
tests/html/border_collapse_test.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
border: 5px solid yellow;
}
td {
border: 1px solid red;
padding: 16px;
width: 32px;
height: 32px;
}
td.cell5 {
border: 30px solid blue;
}
td.cell6 {
border: 5px solid green;
}
</style>
</head>
<body>
<table>
<tr id="row1">
<td> 1
<td> 2
<td> 3
</tr>
<tr id="row2">
<td> 4
<td class="cell5"> 5
<td class="cell6"> 6
</tr>
<tr id="row3">
<td> 7
<td> 8
<td> 9
</tr>
<tr id="row4">
<td> 10
<td> 11
<td> 12
</tr>
<tr id="row5">
<td> 13
<td> 14
<td> 15
</tr>
</table>
</body>
</html>

1
tests/ref/basic.list
View file

@ -81,6 +81,7 @@ flaky_cpu == append_style_a.html append_style_b.html
!= border_black_ridge.html border_black_groove.html
!= border_black_ridge.html border_black_solid.html
== border_code_tag.html border_code_tag_ref.html
== border_collapse_simple_a.html border_collapse_simple_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

72
tests/ref/border_collapse_simple_a.html Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html>
<head>
<!--
Tests that border collapse override and border collapse positioning works. All border widths
are even numbers to avoid subpixel rounding issues (the handling of which is not spec'd).
FIXME(pcwalton): This is currently offset by -2px in block and inline directions because we
don't correctly handle collapsed borders when calculating `table_border_padding` in
`table_wrapper.rs`.
-->
<style>
html, body {
margin: 0;
}
html {
padding: 0;
}
body {
/* See `FIXME` above. */
padding: 2px;
}
table {
border-collapse: collapse;
border: 4px solid black;
}
td {
border: 2px solid black;
padding: 16px;
width: 32px;
height: 32px;
}
td.cell5 {
border: 30px solid black;
}
td.cell6 {
border: 4px solid black;
}
</style>
</head>
<body>
<table>
<tr id="row1">
<td>
<td>
<td>
</tr>
<tr id="row2">
<td>
<td class="cell5">
<td class="cell6">
</tr>
<tr id="row3">
<td>
<td>
<td>
</tr>
<tr id="row4">
<td>
<td>
<td>
</tr>
<tr id="row5">
<td>
<td>
<td>
</tr>
</table>
</body>
</html>

136
tests/ref/border_collapse_simple_ref.html Normal file
View file

@ -0,0 +1,136 @@
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
border-style: solid;
border-color: black;
position: absolute;
}
#c00 {
border-width: 4px 2px 2px 4px;
left: 0px;
top: 0px;
width: 82px;
height: 82px;
}
#c01 {
border-width: 4px 2px 0 0;
left: 82px;
top: 0px;
width: 94px;
height: 66px;
}
#c02 {
border-width: 4px 4px 0 0;
left: 176px;
top: 0px;
width: 82px;
height: 79px;
}
#c10 {
border-width: 0 0 2px 4px;
left: 0px;
top: 82px;
width: 66px;
height: 94px;
}
#c11 {
border-width: 30px;
left: 66px;
top: 66px;
width: 124px;
height: 124px;
}
#c12 {
border-width: 4px 4px 4px 0;
left: 190px;
top: 79px;
width: 68px;
height: 98px;
}
#c20 {
border-width: 0 2px 2px 4px;
left: 0px;
top: 176px;
width: 82px;
height: 80px;
}
#c21 {
border-width: 0 2px 2px 0;
left: 82px;
top: 190px;
width: 94px;
height: 66px;
}
#c22 {
border-width: 0 4px 2px 0;
left: 176px;
top: 177px;
width: 82px;
height: 79px;
}
#c30 {
border-width: 0 2px 2px 4px;
left: 0px;
top: 256px;
width: 82px;
height: 66px;
}
#c31 {
border-width: 0 2px 2px 0;
left: 82px;
top: 256px;
width: 94px;
height: 66px;
}
#c32 {
border-width: 0 4px 2px 0;
left: 176px;
top: 256px;
width: 82px;
height: 66px;
}
#c40 {
border-width: 0 2px 4px 4px;
left: 0px;
top: 322px;
width: 82px;
height: 68px;
}
#c41 {
border-width: 0 2px 4px 0;
left: 82px;
top: 322px;
width: 94px;
height: 68px;
}
#c42 {
border-width: 0 4px 4px 0;
left: 176px;
top: 322px;
width: 82px;
height: 68px;
}
</style>
</head>
<body>
<div id=c00></div><div id=c01></div><div id=c02></div>
<div id=c10></div><div id=c11></div><div id=c12></div>
<div id=c20></div><div id=c21></div><div id=c22></div>
<div id=c30></div><div id=c31></div><div id=c32></div>
<div id=c40></div><div id=c41></div><div id=c42></div>
</body>
</html>

6
tests/ref/inline_block_img_a.html
View file

@ -32,5 +32,9 @@
}
</style>
</head>
<body><div class="bg"><span class="red">X</span><img src="400x400_green.png"><span class="green ib">X</span></div></body>
<body>
<div class="bg">
<span class="red">X</span><img src="400x400_green.png"><span class="green ib">X</span>
</div>
</body>
</html>