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

layout: Implement text-indent per CSS 2.1 § 16.1.

Browse source 
I had to use a somewhat unconventional method of computing text
indentation (propagating from blocks down to inlines) because of the way
containing blocks are handled in Servo.

(As a side note, neither Gecko nor WebKit correctly handles percentages
in `text-align`, at least incrementally -- i.e. when the percentages are
relative to the viewport and the viewport is resized.)
This commit is contained in:
Patrick Walton 2014-12-10 23:17:05 -08:00
parent 071d320728
commit caee309ef4
11 changed files with 173 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

1
tests/ref/basic.list
View file

@ -197,3 +197,4 @@ fragment=top != ../html/acid2.html acid2_ref.html
!= border_black_groove.html border_black_solid.html
!= border_black_ridge.html border_black_solid.html
!= border_black_ridge.html border_black_groove.html
== text_indent_a.html text_indent_ref.html

40
tests/ref/text_indent_a.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<!-- Tests that `text-indent` works, in particular when combined with `text-align`. -->
<head>
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
section {
color: blue;
position: absolute;
width: 200px;
height: 200px;
}
#a {
left: 0;
top: 0;
text-indent: 100px;
}
#b {
left: 0;
top: 200px;
text-indent: 50%;
}
#b2 {
left: 0;
top: 0;
}
#c {
left: 200px;
top: 0;
text-align: right;
text-indent: 100px;
}
</style>
</head>
<body>
<section id=a>X X</section>
<section id=b><section id=b2>X X</section></section>
<section id=c>X X</section>
</body>
</html>

46
tests/ref/text_indent_ref.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<!-- Tests that `text-indent` works, in particular when combined with `text-align`. -->
<head>
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
section {
background: blue;
position: absolute;
width: 100px;
}
#a {
top: 0;
left: 100px;
height: 100px;
}
#b {
top: 100px;
left: 0;
height: 100px;
}
#c {
top: 200px;
left: 100px;
height: 100px;
}
#d {
top: 300px;
left: 0;
height: 100px;
}
#e {
top: 0;
left: 300px;
height: 200px;
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
<section id=c></section>
<section id=d></section>
<section id=e></section>
</body>
</html>