Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 04:30:10 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Implement image-rendering per CSS-IMAGES-3 § 5.3 and

Browse source 
`background-size` per CSS-BACKGROUNDS § 3.9.

Nearest neighbor interpolation is used for `crisp-edges`, like Firefox.
A note has been added that we could do better if we wanted to.

Multiple backgrounds are not yet supported.
This commit is contained in:
Patrick Walton 2014-12-13 19:09:06 -08:00 • committed by Simon Sapin
parent 6fcc02e92f
commit 09c53f461d
16 changed files with 521 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
tests/ref/2x4.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 171 B

BIN
tests/ref/4x2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 180 B

BIN
tests/ref/background_size.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 510 B

62
tests/ref/background_size_a.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<style>
section {
position: absolute;
top: 0;
width: 40px;
}
#tall {
left: 0;
}
#wide {
left: 40px;
}
div {
width: 40px;
height: 40px;
image-rendering: -moz-crisp-edges; /* for comparison with Firefox */
image-rendering: pixelated;
}
#tall div {
background-image: url(2x4.png);
}
#wide div {
background-image: url(4x2.png);
}
.a {
background-size: 40px 20px;
}
.b {
background-size: 40px 40px;
}
.c {
background-size: 40px;
}
.d {
background-size: cover;
}
.e {
background-size: contain;
}
</style>
</head>
<body>
<section id=tall>
<div class=a></div>
<div class=b></div>
<div class=c></div>
<div class=d></div>
<div class=e></div>
</section>
<section id=wide>
<div class=a></div>
<div class=b></div>
<div class=c></div>
<div class=d></div>
<div class=e></div>
</section>
</body>
</html>

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

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<style>
img {
image-rendering: -moz-crisp-edges; /* for comparison with Firefox */
image-rendering: pixelated;
}
html, body {
margin: 0;
}
</style>
</head>
<body>
<img src=background_size.png>
</body>
</html>

28
tests/ref/background_size_shorthand_a.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that the `background-size` shorthand works. -->
<style>
section {
width: 100px;
height: 100px;
border: solid black 1px;
}
#a {
background: 10px 10px / 80px 80px url(rust_logo.png) no-repeat;
}
#b {
background: url(rust_logo.png) 10px 10px / 80px 80px no-repeat;
}
#c {
background: no-repeat url(rust_logo.png) 10px 10px / 80px 80px;
}
</style>
</head>
<body>
<section id=a>&nbsp;</section>
<section id=b>&nbsp;</section>
<section id=c>&nbsp;</section>
</body>
</html>

23
tests/ref/background_size_shorthand_ref.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that the `background-size` shorthand works. -->
<style>
section {
width: 100px;
height: 100px;
border: solid black 1px;
background-image: url(rust_logo.png);
background-position: 10px 10px;
background-size: 80px 80px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<section>&nbsp;</section>
<section>&nbsp;</section>
<section>&nbsp;</section>
</body>
</html>

4
tests/ref/basic.list
View file

@ -259,3 +259,7 @@ fragment=top != ../html/acid2.html acid2_ref.html
== text_shadow_simple_a.html text_shadow_simple_ref.html
== text_shadow_decorations_a.html text_shadow_decorations_ref.html
== text_shadow_blur_a.html text_shadow_blur_ref.html
!= image_rendering_auto_a.html image_rendering_pixelated_a.html
== image_rendering_pixelated_a.html image_rendering_pixelated_ref.html
== background_size_a.html background_size_ref.html
== background_size_shorthand_a.html background_size_shorthand_ref.html

11
tests/ref/image_rendering_auto_a.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `image-rendering: auto` uses bilinear filtering. -->
</head>
<body>
<img width=100 height=50 src=4x2.png>
</body>
</html>

20
tests/ref/image_rendering_pixelated_a.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `image-rendering: pixelated` causes nearest-neighbor interpolation to be used. -->
<style>
img {
position: absolute;
top: 0;
left: 0;
image-rendering: -moz-crisp-edges; /* for testing in Firefox */
image-rendering: pixelated;
}
</style>
</head>
<body>
<img width=100 height=50 src=4x2.png>
</body>
</html>

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

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `image-rendering: pixelated` causes nearest-neighbor interpolation to be used. -->
<style>
section {
position: absolute;
width: 50px;
height: 25px;
}
#a, #d {
background: red;
}
#b, #c {
background: blue;
}
#a, #b {
top: 0;
}
#c, #d {
top: 25px;
}
#a, #c {
left: 0;
}
#b, #d {
left: 50px;
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
<section id=c></section>
<section id=d></section>
</body>
</html>