From 09b6f0f82fcb6f369ef7a42dd46a9d072c60a2d4 Mon Sep 17 00:00:00 2001 From: chaijianxiang <308260361@qq.com> Date: Wed, 30 Mar 2022 21:33:37 +0800 Subject: [PATCH] fix: correctly calculate the background repeat path --- src/render/background.ts | 16 ++++---- tests/reftests/background/clip-2.html | 59 +++++++++++++++++++++++++++ 2 files changed, 67 insertions(+), 8 deletions(-) create mode 100644 tests/reftests/background/clip-2.html diff --git a/src/render/background.ts b/src/render/background.ts index 6e0e877..70f7820 100644 --- a/src/render/background.ts +++ b/src/render/background.ts @@ -226,34 +226,34 @@ export const calculateBackgroundRepeatPath = ( switch (repeat) { case BACKGROUND_REPEAT.REPEAT_X: return [ - new Vector(Math.round(backgroundPositioningArea.left), Math.round(backgroundPositioningArea.top + y)), + new Vector(Math.round(backgroundPaintingArea.left), Math.round(backgroundPositioningArea.top + y)), new Vector( - Math.round(backgroundPositioningArea.left + backgroundPositioningArea.width), + Math.round(backgroundPaintingArea.left + backgroundPaintingArea.width), Math.round(backgroundPositioningArea.top + y) ), new Vector( - Math.round(backgroundPositioningArea.left + backgroundPositioningArea.width), + Math.round(backgroundPaintingArea.left + backgroundPaintingArea.width), Math.round(height + backgroundPositioningArea.top + y) ), new Vector( - Math.round(backgroundPositioningArea.left), + Math.round(backgroundPaintingArea.left), Math.round(height + backgroundPositioningArea.top + y) ) ]; case BACKGROUND_REPEAT.REPEAT_Y: return [ - new Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top)), + new Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPaintingArea.top)), new Vector( Math.round(backgroundPositioningArea.left + x + width), - Math.round(backgroundPositioningArea.top) + Math.round(backgroundPaintingArea.top) ), new Vector( Math.round(backgroundPositioningArea.left + x + width), - Math.round(backgroundPositioningArea.height + backgroundPositioningArea.top) + Math.round(backgroundPaintingArea.height + backgroundPaintingArea.top) ), new Vector( Math.round(backgroundPositioningArea.left + x), - Math.round(backgroundPositioningArea.height + backgroundPositioningArea.top) + Math.round(backgroundPaintingArea.height + backgroundPaintingArea.top) ) ]; case BACKGROUND_REPEAT.NO_REPEAT: diff --git a/tests/reftests/background/clip-2.html b/tests/reftests/background/clip-2.html new file mode 100644 index 0000000..448082b --- /dev/null +++ b/tests/reftests/background/clip-2.html @@ -0,0 +1,59 @@ + + + + Background attribute tests + + + + + + +
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+ + +