From 9673adfd599746a22cea0b838966ef7b0c1baba5 Mon Sep 17 00:00:00 2001
From: MoyuScript <i@moyu.moe>
Date: Sat, 9 Dec 2017 00:12:29 +0100
Subject: [PATCH] added support for background-origin: content-box, fixed
 background-origin related background sizes

---
 src/Renderer.js                       | 38 +++++++++++++++++++++------
 src/parsing/padding.js                |  7 +++++
 tests/reftests/background/origin.html | 33 +++++++++++++++++++++++
 3 files changed, 70 insertions(+), 8 deletions(-)
 create mode 100644 tests/reftests/background/origin.html

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