From 39ca0e345bfe232cb5d245c424b629cde1d60934 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 7 Mar 2023 15:57:22 +0900 Subject: [PATCH 01/15] Add margin-top to paragraph below ul or ol Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 14c7107439d..62770578dd4 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -643,6 +643,13 @@ $left-gutter: 64px; list-style-type: disc; } + .mx_EventTile & { + /* Apply to paragraph below ul or ol */ + :is(ul, ol) + p { + margin-top: $spacing-16; + } + } + /* Remove top and bottom margin for better display in rich text editor output */ :is(blockquote > p, ol, ul) { margin-top: 0; From b96df9621065fc932b92cc626bd8a5db7e43f9bb Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 7 Mar 2023 16:06:32 +0900 Subject: [PATCH 02/15] Add margin to the list on compact modern layout Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 30 +++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 62770578dd4..b4c71c6ce2a 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -655,6 +655,24 @@ $left-gutter: 64px; margin-top: 0; margin-bottom: 0; } + + /* Apply to compact modern layout */ + .mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] & { + p, + ul, + ol, + dl, + blockquote, + pre, + table { + margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */ + } + + /* Apply to paragraph below ul or ol */ + :is(ul, ol) + p { + margin-block: $spacing-4; + } + } } } @@ -1323,18 +1341,6 @@ $left-gutter: 64px; inset-block-start: -2rem; } } - - .mx_EventTile_content .markdown-body { - p, - ul, - ol, - dl, - blockquote, - pre, - table { - margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */ - } - } } &[data-shape="ThreadsList"][data-notification]::before, From 613040f1c578dcce41dfbb3ee979e6b43e6ca47d Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 7 Mar 2023 16:07:43 +0900 Subject: [PATCH 03/15] Sort style blocks Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index b4c71c6ce2a..de56c43699f 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -643,6 +643,13 @@ $left-gutter: 64px; list-style-type: disc; } + /* Remove top and bottom margin for better display in rich text editor output */ + :is(blockquote > p, ol, ul) { + margin-top: 0; + margin-bottom: 0; + } + + /* Apply to every layout */ .mx_EventTile & { /* Apply to paragraph below ul or ol */ :is(ul, ol) + p { @@ -650,12 +657,6 @@ $left-gutter: 64px; } } - /* Remove top and bottom margin for better display in rich text editor output */ - :is(blockquote > p, ol, ul) { - margin-top: 0; - margin-bottom: 0; - } - /* Apply to compact modern layout */ .mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] & { p, From 252535097effe62aa84ef029808b8326b65a22fc Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 7 Mar 2023 16:08:43 +0900 Subject: [PATCH 04/15] Ensure the same value is applied to both top and bottom margin Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index de56c43699f..6551015786d 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -653,7 +653,7 @@ $left-gutter: 64px; .mx_EventTile & { /* Apply to paragraph below ul or ol */ :is(ul, ol) + p { - margin-top: $spacing-16; + margin-block: $spacing-16; } } From d9ebe6e0810d2c262dfd178a58638ffb57537969 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 7 Mar 2023 16:11:12 +0900 Subject: [PATCH 05/15] Edit comments Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 6551015786d..ed17a6a88d4 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -649,15 +649,15 @@ $left-gutter: 64px; margin-bottom: 0; } - /* Apply to every layout */ + /* EventTile on every layout */ .mx_EventTile & { - /* Apply to paragraph below ul or ol */ + /* Paragraph below ul or ol */ :is(ul, ol) + p { margin-block: $spacing-16; } } - /* Apply to compact modern layout */ + /* EventTile on compact modern layout only */ .mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] & { p, ul, @@ -669,7 +669,7 @@ $left-gutter: 64px; margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */ } - /* Apply to paragraph below ul or ol */ + /* Paragraph below ul or ol */ :is(ul, ol) + p { margin-block: $spacing-4; } From 0578f2c3417c38e603ccafecbf8140464c0f9be9 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 7 Mar 2023 19:12:21 +0900 Subject: [PATCH 06/15] Add a test - Send lists with paragraphs as a message Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 34 +++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 3876e457b56..3e53a6bef3b 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -301,6 +301,40 @@ describe("Timeline", () => { ); }); + it("should render lists with paragraphs", () => { + cy.visit("/#/room/" + roomId); + + // Wait until configuration is finished + cy.contains( + ".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary", + "created and configured the room.", + ).should("exist"); + + // Send unordered & ordered lists with paragraphs + cy.sendEvent(roomId, null, "m.room.message" as EventType, { + msgtype: "m.text" as MsgType, + body: + "Paragraph above lists\n\n" + + "- item 1\n- item 2\n- item 3\n\n" + + "Paragraph between lists\n\n" + + "1. item 1\n2. item 2\n3. item 3\n\n" + + "Paragraph below lists", + format: "org.matrix.custom.html", + formatted_body: + "

Paragraph above lists

\n" + + "
    \n
  • item 1
    • \n
  • item 2
    • \n
  • item 3
    • \n
\n" + + "

Paragraph between lists

\n" + + "
    \n
  1. item 1
    2. \n
  2. item 2
    3. \n
  3. item 3
    4. \n
\n" + + "

Paragraph below lists

\n", + }); + + // Confirm the paragraph below the lists was rendered + cy.get(".mx_EventTile[data-layout=group] .markdown-body p:last-of-type").should( + "have.text", + "Paragraph below lists", + ); + }); + it("should set inline start padding to a hidden event line", () => { sendEvent(roomId); cy.visit("/#/room/" + roomId); From 2e8156a62896c1684fc3824d9446cf55b1a2247d Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 7 Mar 2023 19:54:44 +0900 Subject: [PATCH 07/15] Check block margin on modern (compact) layout Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 3e53a6bef3b..171f1174c99 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -333,6 +333,26 @@ describe("Timeline", () => { "have.text", "Paragraph below lists", ); + + // Check block margin values of paragraphs and lists on modern layout + cy.get(".mx_EventTile[data-layout=group] .markdown-body").within(() => { + cy.get("ul").should("have.css", "margin-block", "0px"); + cy.get("ol").should("have.css", "margin-block", "0px"); + cy.get("p:first-of-type").should("have.css", "margin-block", "0px 16px"); // Paragraph above lists + cy.get("p:nth-of-type(2)").should("have.css", "margin-block", "16px"); // Paragraph between lists + cy.get("p:last-of-type").should("have.css", "margin-block", "16px 0px"); // Paragraph below lists + }); + + // Check block margin values of paragraphs and lists on compact modern layout + cy.setSettingValue("useCompactLayout", null, SettingLevel.DEVICE, true); + cy.get(".mx_EventTile[data-layout=group] .markdown-body").within(() => { + cy.get("ul").should("have.css", "margin-block", "0px 4px"); + cy.get("ol").should("have.css", "margin-block", "0px 4px"); + cy.get("p:first-of-type").should("have.css", "margin-block", "0px 4px"); // Paragraph above lists + cy.get("p:nth-of-type(2)").should("have.css", "margin-block", "4px"); // Paragraph between lists + cy.get("p:last-of-type").should("have.css", "margin-block", "4px 0px"); // Paragraph below lists + }); + cy.setSettingValue("useCompactLayout", null, SettingLevel.DEVICE, false); }); it("should set inline start padding to a hidden event line", () => { From b34692f1963a9e5f42bf0b63648d675000d0b311 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 7 Mar 2023 20:11:20 +0900 Subject: [PATCH 08/15] Check block margin on IRC layout Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 171f1174c99..adc5e97ca5b 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -353,6 +353,16 @@ describe("Timeline", () => { cy.get("p:last-of-type").should("have.css", "margin-block", "4px 0px"); // Paragraph below lists }); cy.setSettingValue("useCompactLayout", null, SettingLevel.DEVICE, false); + + // Check block margin values of paragraphs and lists on IRC layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); + cy.get(".mx_EventTile[data-layout=irc] .markdown-body").within(() => { + cy.get("ul").should("have.css", "margin-block", "0px"); + cy.get("ol").should("have.css", "margin-block", "0px"); + cy.get("p:first-of-type").should("have.css", "margin-block", "0px 16px"); // Paragraph above lists + cy.get("p:nth-of-type(2)").should("have.css", "margin-block", "16px"); // Paragraph between lists + cy.get("p:last-of-type").should("have.css", "margin-block", "16px 0px"); // Paragraph below lists + }); }); it("should set inline start padding to a hidden event line", () => { From c4d13ef441fd76fe2823fa3f57a79f588f0efaf8 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 7 Mar 2023 20:12:58 +0900 Subject: [PATCH 09/15] Check block margin on bubble layout Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index adc5e97ca5b..c962e194aea 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -363,6 +363,16 @@ describe("Timeline", () => { cy.get("p:nth-of-type(2)").should("have.css", "margin-block", "16px"); // Paragraph between lists cy.get("p:last-of-type").should("have.css", "margin-block", "16px 0px"); // Paragraph below lists }); + + // Check block margin values of paragraphs and lists on bubble layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); + cy.get(".mx_EventTile[data-layout=bubble] .markdown-body").within(() => { + cy.get("ul").should("have.css", "margin-block", "0px"); + cy.get("ol").should("have.css", "margin-block", "0px"); + cy.get("p:first-of-type").should("have.css", "margin-block", "0px 16px"); // Paragraph above lists + cy.get("p:nth-of-type(2)").should("have.css", "margin-block", "16px"); // Paragraph between lists + cy.get("p:last-of-type").should("have.css", "margin-block", "16px 0px"); // Paragraph below lists + }); }); it("should set inline start padding to a hidden event line", () => { From 951a2106c5a50d817594fee9c6e327e6d8a77b66 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 7 Mar 2023 20:20:11 +0900 Subject: [PATCH 10/15] Use functions Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 28 +++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index c962e194aea..9f5ae8e80e7 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -334,13 +334,23 @@ describe("Timeline", () => { "Paragraph below lists", ); - // Check block margin values of paragraphs and lists on modern layout - cy.get(".mx_EventTile[data-layout=group] .markdown-body").within(() => { + // This is to check block margin of unordered & ordered lists + const checkMarginList = () => { cy.get("ul").should("have.css", "margin-block", "0px"); cy.get("ol").should("have.css", "margin-block", "0px"); + }; + + // This is to check block margin of paragraphs around the lists + const checkMarginParagraphsWide = () => { cy.get("p:first-of-type").should("have.css", "margin-block", "0px 16px"); // Paragraph above lists cy.get("p:nth-of-type(2)").should("have.css", "margin-block", "16px"); // Paragraph between lists cy.get("p:last-of-type").should("have.css", "margin-block", "16px 0px"); // Paragraph below lists + }; + + // Check block margin values of paragraphs and lists on modern layout + cy.get(".mx_EventTile[data-layout=group] .markdown-body").within(() => { + checkMarginList(); + checkMarginParagraphsWide(); }); // Check block margin values of paragraphs and lists on compact modern layout @@ -357,21 +367,15 @@ describe("Timeline", () => { // Check block margin values of paragraphs and lists on IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); cy.get(".mx_EventTile[data-layout=irc] .markdown-body").within(() => { - cy.get("ul").should("have.css", "margin-block", "0px"); - cy.get("ol").should("have.css", "margin-block", "0px"); - cy.get("p:first-of-type").should("have.css", "margin-block", "0px 16px"); // Paragraph above lists - cy.get("p:nth-of-type(2)").should("have.css", "margin-block", "16px"); // Paragraph between lists - cy.get("p:last-of-type").should("have.css", "margin-block", "16px 0px"); // Paragraph below lists + checkMarginList(); + checkMarginParagraphsWide(); }); // Check block margin values of paragraphs and lists on bubble layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); cy.get(".mx_EventTile[data-layout=bubble] .markdown-body").within(() => { - cy.get("ul").should("have.css", "margin-block", "0px"); - cy.get("ol").should("have.css", "margin-block", "0px"); - cy.get("p:first-of-type").should("have.css", "margin-block", "0px 16px"); // Paragraph above lists - cy.get("p:nth-of-type(2)").should("have.css", "margin-block", "16px"); // Paragraph between lists - cy.get("p:last-of-type").should("have.css", "margin-block", "16px 0px"); // Paragraph below lists + checkMarginList(); + checkMarginParagraphsWide(); }); }); From 09f5cfd41b044b3fd0db6a42ef16e5368c5ddb17 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 7 Mar 2023 20:32:48 +0900 Subject: [PATCH 11/15] Add percySnapshotElement Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 9f5ae8e80e7..47d6f36bb9b 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -353,6 +353,10 @@ describe("Timeline", () => { checkMarginParagraphsWide(); }); + // Exclude timestamp and read marker from snapshot + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + cy.get(".mx_MainSplit").percySnapshotElement("Lists with paragraphs on modern layout", { percyCSS }); + // Check block margin values of paragraphs and lists on compact modern layout cy.setSettingValue("useCompactLayout", null, SettingLevel.DEVICE, true); cy.get(".mx_EventTile[data-layout=group] .markdown-body").within(() => { @@ -364,6 +368,10 @@ describe("Timeline", () => { }); cy.setSettingValue("useCompactLayout", null, SettingLevel.DEVICE, false); + cy.get(".mx_MainSplit").percySnapshotElement("Lists with paragraphs on compact modern layout", { + percyCSS, + }); + // Check block margin values of paragraphs and lists on IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); cy.get(".mx_EventTile[data-layout=irc] .markdown-body").within(() => { @@ -371,12 +379,16 @@ describe("Timeline", () => { checkMarginParagraphsWide(); }); + cy.get(".mx_MainSplit").percySnapshotElement("Lists with paragraphs on IRC layout", { percyCSS }); + // Check block margin values of paragraphs and lists on bubble layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); cy.get(".mx_EventTile[data-layout=bubble] .markdown-body").within(() => { checkMarginList(); checkMarginParagraphsWide(); }); + + cy.get(".mx_MainSplit").percySnapshotElement("Lists with paragraphs on bubble layout", { percyCSS }); }); it("should set inline start padding to a hidden event line", () => { From dbe57d6726785a855a4f730d4a0060147622a3a7 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 7 Mar 2023 20:55:52 +0900 Subject: [PATCH 12/15] Edit a comment Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 47d6f36bb9b..f4f1193bee2 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -340,7 +340,7 @@ describe("Timeline", () => { cy.get("ol").should("have.css", "margin-block", "0px"); }; - // This is to check block margin of paragraphs around the lists + // This is to check block margin of paragraphs around the lists except on compact modern layout const checkMarginParagraphsWide = () => { cy.get("p:first-of-type").should("have.css", "margin-block", "0px 16px"); // Paragraph above lists cy.get("p:nth-of-type(2)").should("have.css", "margin-block", "16px"); // Paragraph between lists From 934e752ba2b8cee9f758645da13af89b932e59f0 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 8 Mar 2023 13:42:31 +0000 Subject: [PATCH 13/15] Update cypress/e2e/timeline/timeline.spec.ts Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> --- cypress/e2e/timeline/timeline.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index aae54fb98e9..f462002b06e 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -335,7 +335,7 @@ describe("Timeline", () => { "Paragraph below lists", ); - // This is to check block margin of unordered & ordered lists + // Cypress `within` callback function to check block margins const checkMarginList = () => { cy.get("ul").should("have.css", "margin-block", "0px"); cy.get("ol").should("have.css", "margin-block", "0px"); From 98adc1154ab92f830045d2bf80965f0d955df3c0 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 8 Mar 2023 23:24:40 +0900 Subject: [PATCH 14/15] Revert SCSS nesting Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 44 +++++++++++++---------------- 1 file changed, 20 insertions(+), 24 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index acca815db51..e6d18d46d60 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -649,30 +649,9 @@ $left-gutter: 64px; margin-bottom: 0; } - /* EventTile on every layout */ - .mx_EventTile & { - /* Paragraph below ul or ol */ - :is(ul, ol) + p { - margin-block: $spacing-16; - } - } - - /* EventTile on compact modern layout only */ - .mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] & { - p, - ul, - ol, - dl, - blockquote, - pre, - table { - margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */ - } - - /* Paragraph below ul or ol */ - :is(ul, ol) + p { - margin-block: $spacing-4; - } + /* Paragraph below ul or ol */ + :is(ul, ol) + p { + margin-block: $spacing-16; } } } @@ -1323,6 +1302,23 @@ $left-gutter: 64px; inset-block-start: -2rem; } } + + .mx_EventTile_content .markdown-body { + p, + ul, + ol, + dl, + blockquote, + pre, + table { + margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */ + } + + /* Apply to paragraph below ul or ol */ + :is(ul, ol) + p { + margin-block: $spacing-4; + } + } } &[data-shape="ThreadsList"][data-notification]::before, From 3aef9408b4e1b9718a1428d917d19ac034b061dd Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 8 Mar 2023 23:31:10 +0900 Subject: [PATCH 15/15] Merge the functions Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index f462002b06e..a5364a27788 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -336,13 +336,10 @@ describe("Timeline", () => { ); // Cypress `within` callback function to check block margins - const checkMarginList = () => { + // Note this cannot be used for compact modern layout + const checkBlockMargin = () => { cy.get("ul").should("have.css", "margin-block", "0px"); cy.get("ol").should("have.css", "margin-block", "0px"); - }; - - // This is to check block margin of paragraphs around the lists except on compact modern layout - const checkMarginParagraphsWide = () => { cy.get("p:first-of-type").should("have.css", "margin-block", "0px 16px"); // Paragraph above lists cy.get("p:nth-of-type(2)").should("have.css", "margin-block", "16px"); // Paragraph between lists cy.get("p:last-of-type").should("have.css", "margin-block", "16px 0px"); // Paragraph below lists @@ -350,8 +347,7 @@ describe("Timeline", () => { // Check block margin values of paragraphs and lists on modern layout cy.get(".mx_EventTile[data-layout=group] .markdown-body").within(() => { - checkMarginList(); - checkMarginParagraphsWide(); + checkBlockMargin(); }); // Exclude timestamp and read marker from snapshot @@ -376,8 +372,7 @@ describe("Timeline", () => { // Check block margin values of paragraphs and lists on IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); cy.get(".mx_EventTile[data-layout=irc] .markdown-body").within(() => { - checkMarginList(); - checkMarginParagraphsWide(); + checkBlockMargin(); }); cy.get(".mx_MainSplit").percySnapshotElement("Lists with paragraphs on IRC layout", { percyCSS }); @@ -385,8 +380,7 @@ describe("Timeline", () => { // Check block margin values of paragraphs and lists on bubble layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); cy.get(".mx_EventTile[data-layout=bubble] .markdown-body").within(() => { - checkMarginList(); - checkMarginParagraphsWide(); + checkBlockMargin(); }); cy.get(".mx_MainSplit").percySnapshotElement("Lists with paragraphs on bubble layout", { percyCSS });