zumerlab
diff --git a/‎__tests__/utils.transforms.helpers.test.js‎
Lines changed: 20 additions & 0 deletions b/‎__tests__/utils.transforms.helpers.test.js‎
Lines changed: 20 additions & 0 deletions
diff --git a/‎src/utils/transforms.helpers.js‎
Lines changed: 6 additions & 2 deletions b/‎src/utils/transforms.helpers.js‎
Lines changed: 6 additions & 2 deletions
@@ -67,6 +67,26 @@ describe('parseOutline', () => {
  const cs = getComputedStyle(div)
  expect(parseOutline(cs)).toEqual({ top: 0, right: 0, bottom: 0, left: 0 })
  })
+
+ it('returns outline width for solid outline with no offset', () => {
+ const cs = { outlineStyle: 'solid', outlineWidth: '3px', outlineOffset: '0px' }
+ const res = parseOutline(cs)
+ expect(res).toEqual({ top: 3, right: 3, bottom: 3, left: 3 })
+ })
+
+ it('adds positive outline-offset to bleed (NEW-3)', () => {
+ const cs = { outlineStyle: 'solid', outlineWidth: '2px', outlineOffset: '4px' }
+ const res = parseOutline(cs)
+ // total = ceil(2) + max(0, ceil(4)) = 2 + 4 = 6
+ expect(res).toEqual({ top: 6, right: 6, bottom: 6, left: 6 })
+ })
+
+ it('does not subtract for negative outline-offset (NEW-3)', () => {
+ const cs = { outlineStyle: 'solid', outlineWidth: '3px', outlineOffset: '-2px' }
+ const res = parseOutline(cs)
+ // negative offset never reduces bleed below outline width
+ expect(res).toEqual({ top: 3, right: 3, bottom: 3, left: 3 })
+ })
 })
 
 describe('parseFilterDropShadows', () => {
 
@@ -47,8 +47,12 @@ export function parseFilterBlur(cs) {
  */
 export function parseOutline(cs) {
  if ((cs.outlineStyle || 'none') === 'none') return { top: 0, right: 0, bottom: 0, left: 0 }
- const w2 = Math.ceil(parseFloat(cs.outlineWidth || '0') || 0)
- return { top: w2, right: w2, bottom: w2, left: w2 }
+ const w = Math.ceil(parseFloat(cs.outlineWidth || '0') || 0)
+ // outline-offset > 0 pushes the outline further out, increasing bleed.
+ // Negative offset moves it inward — it never reduces bleed below the outline width itself.
+ const offset = parseFloat(cs.outlineOffset || '0') || 0
+ const total = w + Math.max(0, Math.ceil(offset))
+ return { top: total, right: total, bottom: total, left: total }
 }
 
 /**