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

layout: Implement outline per CSS 2.1 § 18.4.

Browse source 
`invert` is not yet supported.

Objects that get layers will not yet display outlines properly. This is
because our overflow calculation doesn't take styles into account and
because layers are always anchored to the top left of the border box.
Since fixing this is work that is not related to outline *per se* I'm
leaving that to a followup and making a note in the code.
This commit is contained in:
Patrick Walton 2014-12-08 23:29:41 -08:00
parent 512d55ecef
commit 52b9951cad
10 changed files with 242 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
tests/ref/basic.list
View file

@ -191,3 +191,5 @@ fragment=top != ../html/acid2.html acid2_ref.html
== text_transform_uppercase_a.html text_transform_uppercase_ref.html
== text_transform_lowercase_a.html text_transform_lowercase_ref.html
== text_transform_capitalize_a.html text_transform_capitalize_ref.html
== outlines_simple_a.html outlines_simple_ref.html
== outlines_wrap_a.html outlines_wrap_ref.html

21
tests/ref/outlines_simple_a.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<style>
html, body {
margin: 0;
}
section {
position: relative;
width: 92px;
height: 92px;
border: solid red 2px;
outline: solid blue 2px;
top: 2px;
left: 2px;
}
</style>
<body>
<section></section>
</body>
</html>

27
tests/ref/outlines_simple_ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<style>
html, body {
margin: 0;
}
section {
position: relative;
width: 96px;
height: 96px;
border: solid blue 2px;
}
nav {
position: absolute;
width: 92px;
height: 92px;
border: solid red 2px;
top: 0;
left: 0;
}
</style>
<body>
<section><nav></nav></section>
</body>
</html>

18
tests/ref/outlines_wrap_a.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<!-- Tests that outlines draw on all four sides on word wrapped edges. -->
<style>
section {
width: 100px;
height: 100px;
border: solid black 2px;
font-size: 36px;
}
span {
outline: solid red 2px;
}
</style>
<body>
<section><span>I like truffles</span></section>
</body>
</html>

19
tests/ref/outlines_wrap_ref.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<!-- Tests that outlines draw on all four sides on word wrapped edges. -->
<style>
section {
width: 100px;
height: 100px;
border: solid black 2px;
font-size: 36px;
}
span {
outline: solid red 2px;
}
</style>
<body>
<section><span>I like </span><span>truffles</span></section>
</body>
</html>