layout: support tiled gradients

Use background-size, background-position properties to render
CSS gradients.

Some cleanup in display_list_builder.rs related to gradient
calculations.

Adds two wpt tests for tiled gradients.

Note: For now even gradients with background-repeat: no-repeat
are repeated. Sometimes the gradient is not repeated everywhere.

Enable vars-background-shorthand-001.html CSS test.
This commit is contained in:
Pyfisch 2017-12-13 20:02:49 +01:00
parent 80341b291b
commit 9502e9f42a
9 changed files with 353 additions and 164 deletions

View file

@ -0,0 +1,29 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.bar {
width: 400px;
height: 100px;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
border: 0px;
background-image: linear-gradient(to bottom left, red 50%, transparent 50%);
}
</style>
</head>
<body>
<div class="bar">
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>
<div class="bar">
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>
</body>
</html>