Skip to content

Fix borderFormatHandler to strip 'initial' color value #3350

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BryanValverdeU wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Fix borderFormatHandler to strip 'initial' color value #3350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
35baf53
Fix borderFormatHandler to strip 'initial' color value
BryanValverdeU May 25, 2026
a0ab9ce
remove comment
BryanValverdeU May 25, 2026
a9ae931
Merge branch 'master' into u/bvalverde/fixBorderBug
BryanValverdeU May 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion packages/roosterjs-content-model-dom/lib/formatHandlers/common/borderFormatHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,16 @@ export const borderFormatHandler: FormatHandler<BorderFormat> = {
}

if (value && width != defaultWidth) {
format[key] = value == 'none' ? '' : value;
// Remove 'initial' from the last part (color) of the border value
// since browsers ignore it when setting the inline style property
const parts = value.split(' ');

if (parts[parts.length - 1] == 'initial') {
Copy link
Copy Markdown
Collaborator

@JiuqingSong JiuqingSong May 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The order of border style parts is not enforced, so the color value can appear in any place, which means:

  • solid 1px initial
  • solid initial 1px
  • initial solid 1px

They are all valid.

Copy link
Copy Markdown
Collaborator

@JiuqingSong JiuqingSong May 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can use extractBorderValues at packages/roosterjs-content-model-dom/lib/domUtils/style/borderValues.ts:22 to parse the style

Copy link
Copy Markdown
Collaborator

@JiuqingSong JiuqingSong May 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To make it faster, you can first do string search, if not found, just fail fast.

parts.pop();
}

const result = parts.join(' ');
format[key] = result == 'none' ? '' : result;
}
});

Expand Down
30 changes: 30 additions & 0 deletions packages/roosterjs-content-model-dom/test/formatHandlers/common/borderFormatHandlerTest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,36 @@ describe('borderFormatHandler.parse', () => {
expect(format).toEqual({});
});

it('Has multi-value border-style shorthand', () => {
div.style.borderStyle = 'solid dotted double dashed';
div.style.borderWidth = '1px';
div.style.borderColor = 'red';

borderFormatHandler.parse(format, div, context, {});

expect(format).toEqual({
borderTop: '1px solid red',
borderRight: '1px dotted red',
borderBottom: '1px double red',
borderLeft: '1px dashed red',
});
});

it('Has multi-value border-style shorthand with 3 values', () => {
div.style.borderStyle = 'solid dotted double';
div.style.borderWidth = '1px';
div.style.borderColor = 'red';

borderFormatHandler.parse(format, div, context, {});

expect(format).toEqual({
borderTop: '1px solid red',
borderRight: '1px dotted red',
borderBottom: '1px double red',
borderLeft: '1px dotted red',
});
});

it('Has 0 width border', () => {
div.style.border = '0px sold black';

Expand Down
4 changes: 4 additions & 0 deletions packages/roosterjs-content-model-plugins/test/paste/e2e/cmPasteTest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,10 @@ describe(ID, () => {
format: {
textAlign: 'center',
whiteSpace: 'nowrap',
borderTop: '0.5pt solid',
borderRight: '0.5pt solid',
borderBottom: '0.5pt solid',
borderLeft: '0.5pt solid',
backgroundColor: 'white',
paddingTop: '1px',
paddingRight: '1px',
Expand Down
16 changes: 8 additions & 8 deletions packages/roosterjs-content-model-plugins/test/paste/word/processPastedContentFromWacTest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3537,9 +3537,9 @@ describe('wordOnlineHandler', () => {
direction: 'ltr',
textAlign: 'start',
textIndent: '0px',
borderTop: '1px solid initial',
borderTop: '1px solid',
borderBottom: '1px solid rgb(0, 0, 0)',
borderLeft: '1px solid initial',
borderLeft: '1px solid',
backgroundColor: 'rgb(21, 96, 130)',
verticalAlign: 'middle',
width: '312px',
Expand Down Expand Up @@ -3631,8 +3631,8 @@ describe('wordOnlineHandler', () => {
direction: 'ltr',
textAlign: 'start',
textIndent: '0px',
borderTop: '1px solid initial',
borderRight: '1px solid initial',
borderTop: '1px solid',
borderRight: '1px solid',
borderBottom: '1px solid rgb(0, 0, 0)',
backgroundColor: 'rgb(21, 96, 130)',
verticalAlign: 'middle',
Expand Down Expand Up @@ -3731,9 +3731,9 @@ describe('wordOnlineHandler', () => {
textAlign: 'start',
textIndent: '0px',
borderTop: '1px solid rgb(0, 0, 0)',
borderRight: '1px solid initial',
borderRight: '1px solid',
borderBottom: '1px solid rgb(0, 0, 0)',
borderLeft: '1px solid initial',
borderLeft: '1px solid',
backgroundColor: 'rgb(0, 0, 0)',
verticalAlign: 'middle',
width: '624px',
Expand All @@ -3751,9 +3751,9 @@ describe('wordOnlineHandler', () => {
textAlign: 'start',
textIndent: '0px',
borderTop: '1px solid rgb(0, 0, 0)',
borderRight: '1px solid initial',
borderRight: '1px solid',
borderBottom: '1px solid rgb(0, 0, 0)',
borderLeft: '1px solid initial',
borderLeft: '1px solid',
backgroundColor: 'rgb(0, 0, 0)',
verticalAlign: 'middle',
width: '624px',
Expand Down
Loading