diff --git a/src/Renderer.js b/src/Renderer.js
index 923e095..dd65acd 100644
--- a/src/Renderer.js
+++ b/src/Renderer.js
@@ -27,6 +27,7 @@ import {
calculatePaddingBox,
calculatePaddingBoxPath
} from './Bounds';
+import {PADDING_SIDES} from './parsing/padding';
import {FontMetrics} from './Font';
import {parseGradient} from './Gradient';
import TextContainer from './TextContainer';
@@ -223,14 +224,35 @@ export default class Renderer {
if (image) {
const bounds = container.bounds;
const paddingBox = calculatePaddingBox(bounds, container.style.border);
- const backgroundImageSize = calculateBackgroundSize(background, image, bounds);
- // TODO support CONTENT_BOX
- const backgroundPositioningArea =
- container.style.background.backgroundOrigin === BACKGROUND_ORIGIN.BORDER_BOX
- ? bounds
- : paddingBox;
+ let backgroundPositioningArea;
+ switch (container.style.background.backgroundOrigin) {
+ case BACKGROUND_ORIGIN.BORDER_BOX:
+ backgroundPositioningArea = bounds;
+ break;
+ case BACKGROUND_ORIGIN.CONTENT_BOX:
+ const paddingLeft = container.style.padding[PADDING_SIDES.LEFT].value;
+ const paddingRight = container.style.padding[PADDING_SIDES.RIGHT].value;
+ const paddingTop = container.style.padding[PADDING_SIDES.TOP].value;
+ const paddingBottom = container.style.padding[PADDING_SIDES.BOTTOM].value;
+ backgroundPositioningArea = new Bounds(
+ paddingBox.left + paddingLeft,
+ paddingBox.top + paddingTop,
+ paddingBox.width - paddingLeft - paddingRight,
+ paddingBox.height - paddingTop - paddingBottom
+ );
+ break;
+ case BACKGROUND_ORIGIN.PADDING_BOX:
+ default:
+ backgroundPositioningArea = paddingBox;
+ break;
+ }
+ const backgroundImageSize = calculateBackgroundSize(
+ background,
+ image,
+ backgroundPositioningArea
+ );
const position = calculateBackgroundPosition(
background.position,
backgroundImageSize,
@@ -244,8 +266,8 @@ export default class Renderer {
bounds
);
- const offsetX = Math.round(paddingBox.left + position.x);
- const offsetY = Math.round(paddingBox.top + position.y);
+ const offsetX = Math.round(backgroundPositioningArea.left + position.x);
+ const offsetY = Math.round(backgroundPositioningArea.top + position.y);
this.target.renderRepeat(path, image, backgroundImageSize, offsetX, offsetY);
}
}
diff --git a/src/parsing/padding.js b/src/parsing/padding.js
index b6e46d5..8616f74 100644
--- a/src/parsing/padding.js
+++ b/src/parsing/padding.js
@@ -2,6 +2,13 @@
'use strict';
import Length from '../Length';
+export const PADDING_SIDES = {
+ TOP: 0,
+ RIGHT: 1,
+ BOTTOM: 2,
+ LEFT: 3
+};
+
const SIDES = ['top', 'right', 'bottom', 'left'];
export type Padding = Array<Length>;
diff --git a/tests/reftests/background/origin.html b/tests/reftests/background/origin.html
new file mode 100644
index 0000000..d7dcb34
--- /dev/null
+++ b/tests/reftests/background/origin.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+ <head>
+ <style>
+ div {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ border: 15px solid blue;
+ padding: 10px;
+ margin: 5px;
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAqxQTFRFAAAAAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAADAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAAA01YBTwAAAOJ0Uk5TAABuRlv++VX6/GY083kXJemLAZRLGN2MhdsMWeUpZ7IDArTsKAaKywommQm29TskpOCujfda8YDSL0ntQ7hPIPiPGT2p++8EUmt7fG0Shtifg3es6xxx9P0tvWq5Yxbf9mE4yGIe2soHLsVlIcZpU0K+MLqgGyfmVJfE1+LNnoh2QSsx0V3j0xOo5zdXCM8OOkwjosxFtRXyStxWvMmSaGDOX2ynIh01w+q/t1ixBVytQHAywZybXirku342mj7ZjpAacg3wnQuBENQ/wA/Wlcc8eh9NgoSr1aazeEcRf+FzUNOe+4wAAAABYktHRACIBR1IAAAACXBIWXMAAAmoAAAJqAHjvc2aAAAEtElEQVRYw71W+19URRSfBe/KKsZKoAaBrPJSUAIJY7HAByxQqIgEyq6YroBKG0UiZqyWaJiKb9FEwwIr6WGmhVr2UgsNsoe9n+cvaR73fefqbvbp/LA7c875fufMmTPnDkL/j4SE3hl+hGAdeSf40DAA26h/jx8dDliEMUED72J/EXZgMjYySIK7o8hv9DiQZHyQBBPuicG/sTL+3jimDziQeJiYgJBjkoifnEi1SckpqQESTAGYihnS0il+2nSqzEgBuC/AGCyZAFlpeM0ZAkA2K6X7cwjZzABDSMa+D+TigdOeN4soEh9kuxEeCowgHxcQFMzGe58zBydj7rxCKZ9F0eYoV2JxSenDj0SV4fF8tt6CheWLkisWg0rMTrTy0fQq0aU6awlKWAomUsNNmtNtUztle9CyWi58+WM8/IqVej/Bi1bVcfD1uRx4w3ib0dO6GkWv0Svtax0cfGMKN9bHLcgRkqPW1PnSuNl7wiRZTdgW43myiIzD6ipCnnIgvlia+QRPi+Z1cXGNrlsWTYuVS7BenabWDc9sfHZcm7/JwmPYJGHC0jc/9/wWbzubxcgxbrXLtOmVHIKYbdT2Qk0Hmydtp/NVotkxVR3Yizs4DDuxoTlUuam7OonrbnG2QVdK0zl5XNq8R6PYS5YSt+vRJ2fxPiPDLt2cEOxnw/wq1eK19FDXmB2oLK4D2O0gC+6QUodbGxDqij8MEH8bvIPsuo3t4IiMf0lM6lG8u4Zb4nO7iX8x42qX8EXSzi3HALhXcsbx0pc9PTWzT1B/NzuTV+QAjsqOr+JLySPoVWe6iNVL6jZJMVFx7MO3nVdOJerL7GS6cklx+KTiGImPwschOCkoF1esitfkVlqi9qyXz1grr0veb4htp3G9pDml+Z70A7TTQVmxhuBNOYLqt/a+jZLekZtxTp/G8TS+drSWVrRp9C51E7RmKhVoc2pDJbVF791cyNcYivmdRSjR4hHplS1k8C6c0VoqeHh7rA5vycPa0WT0HpzVmrrcFefez9ooIuu9Xu8HO/cYOmkfMdI8V4Kti3ccEayhVJXR9QzmRcQ4QEYNAB4eAbKwL2MpGY/S3920TGJbR8fn4QKXQLxDteT065fobBeJqYDRukFo4TOspSF8iOu24COt5VIBsXzMJp8AfMon+IwSfI7QZbBtURsGJlNLP5vh3nClg58F+sK8itAXeCfLFL3zCjuhL9l0sNA0BNr8cIYsywGuDUhx+avFI74uar7CNZvBww/Rq7kSj4bx/7SvD+7rWB17OlvurlJP8+HJjSQOQSv1O4B0fUaS7ZLfbtxi4bixViLZi+OUuIZBvpE96VfnnCGGb5lfLx7mC0Z8p7Lkd3Rbw99rgkiYKYJuklm3keCIynksUw2PGZCazuURciunfeC6Ad+rXm3wvKTOu+CfcHP+whtyqqGKfeCv6vDXhjTbbaoGM/Ezj9RjGu2wvqX/YIa3RkhRulXaHwcNR+Y3IbiouPT8xFSF/bM4RZPwMxf/i+ZllTHyzK81v/3Or/vIPzhnfZb/KDSRqD/1+O6hYPD41m4KV8MLy13B4Umq/+qUDjR8f1zQcCpDl1p9vp6/p9z2CfQfyT/GmLpixQvIqwAAAGJ0RVh0Y29tbWVudABib3JkZXIgYnM6MCBiYzojMDAwMDAwIHBzOjAgcGM6I2VlZWVlZSBlczowIGVjOiMwMDAwMDAgY2s6NTAwZDAyYTRmMWYxZDc0OTczNDBjYzU4Njg5NmJmMTGEn9AAAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA0LTE4VDA5OjU0OjU4KzAwOjAwhlt+sgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNC0xOFQwOTo1NDo1OCswMDowMPcGxg4AAAAydEVYdExpY2Vuc2UAaHR0cDovL2VuLndpa2lwZWRpYS5vcmcvd2lraS9QdWJsaWNfZG9tYWluP/3qzwAAAE10RVh0c29mdHdhcmUASW1hZ2VNYWdpY2sgNy4wLjEtNiBRMTYgeDg2XzY0IDIwMTYtMDktMTcgaHR0cDovL3d3dy5pbWFnZW1hZ2ljay5vcmfd2aVOAAAAGHRFWHRTb3VyY2UAV2lraW1lZGlhIENvbW1vbnPSwlOaAAAANnRFWHRTb3VyY2VfVVJMAGh0dHA6Ly9jb21tb25zLndpa2ltZWRpYS5vcmcvd2lraS9NYWluX1BhZ2US/BctAAAAGHRFWHRUaHVtYjo6RG9jdW1lbnQ6OlBhZ2VzADGn/7svAAAAGHRFWHRUaHVtYjo6SW1hZ2U6OkhlaWdodAAyNTbpw0QZAAAAF3RFWHRUaHVtYjo6SW1hZ2U6OldpZHRoADI1NnoyFEQAAAAZdEVYdFRodW1iOjpNaW1ldHlwZQBpbWFnZS9wbmc/slZOAAAAF3RFWHRUaHVtYjo6TVRpbWUAMTMwNDA2NDg0MNaK6HQAAAASdEVYdFRodW1iOjpTaXplADEwLjhLQr49AxAAAABddEVYdFRodW1iOjpVUkkAZmlsZTovLy9ob21lL3d3d3Jvb3Qvc2l0ZS93d3cuZWFzeWljb24ubmV0L2Nkbi1pbWcuZWFzeWljb24uY24vc3JjLzU0MzEvNTQzMTAxLnBuZ/nLz6kAAAAASUVORK5CYII=');
+ }
+ </style>
+ </head>
+ <body>
+ <div style="background-repeat: no-repeat; background-origin: content-box"></div>
+ <div style="background-repeat: no-repeat; background-origin: padding-box"></div>
+ <div style="background-repeat: no-repeat; background-origin: border-box"></div>
+ <div style="background-repeat: no-repeat; background-origin: content-box; background-size: cover"></div>
+ <div style="background-repeat: no-repeat; background-origin: padding-box; background-size: cover"></div>
+ <div style="background-repeat: no-repeat; background-origin: border-box; background-size: cover"></div>
+ <div style="background-repeat: no-repeat; background-origin: content-box; background-size: contain"></div>
+ <div style="background-repeat: no-repeat; background-origin: padding-box; background-size: contain"></div>
+ <div style="background-repeat: no-repeat; background-origin: border-box; background-size: contain"></div>
+ <div style="background-repeat: no-repeat; background-origin: content-box; background-position: 15px 20px"></div>
+ <div style="background-repeat: no-repeat; background-origin: padding-box; background-position: 15px 20px"></div>
+ <div style="background-repeat: no-repeat; background-origin: border-box; background-position: 15px 20px"></div>
+ <div style="background-repeat: repeat; background-origin: content-box"></div>
+ <div style="background-repeat: repeat; background-origin: padding-box"></div>
+ <div style="background-repeat: repeat; background-origin: border-box"></div>
+ </body>
+</html>
\ No newline at end of file