@itwin/core-backend 5.1.0-dev.60 → 5.1.0-dev.62

package/lib/esm/test/annotations/TextBlock.test.js

@@ -3,15 +3,15 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 import { expect } from "chai";
-import { computeGraphemeOffsets, layoutTextBlock } from "../../annotations/TextBlockLayout";
+import { computeGraphemeOffsets, layoutTextBlock, TextStyleResolver } from "../../annotations/TextBlockLayout";
 import { Geometry } from "@itwin/core-geometry";
-import { ColorDef, FontType, FractionRun, LineBreakRun, TabRun, TextAnnotation, TextBlock, TextRun, TextStyleSettings } from "@itwin/core-common";
+import { ColorDef, FontType, FractionRun, LineBreakRun, Paragraph, TabRun, TextAnnotation, TextBlock, TextRun, TextStyleSettings } from "@itwin/core-common";
 import { IModelTestUtils } from "../IModelTestUtils";
 import { ProcessDetector } from "@itwin/core-bentley";
 import { produceTextBlockGeometry } from "../../core-backend";
 import { computeTextRangeAsStringLength, doLayout } from "../AnnotationTestUtils";
-function makeTextRun(content, styleName = "") {
-    return TextRun.create({ content, styleName });
+function makeTextRun(content) {
+    return TextRun.create({ content });
 }
 function isIntlSupported() {
     // Node in the mobile add-on does not include Intl, so this test fails. Right now, mobile
@@ -19,53 +19,156 @@ function isIntlSupported() {
     // solution.
     return !ProcessDetector.isMobileAppBackend;
 }
+function findTextStyleImpl(id) {
+    if (id === "0x42") {
+        return TextStyleSettings.fromJSON({ lineSpacingFactor: 12, fontName: "block", isBold: true });
+    }
+    return TextStyleSettings.fromJSON({ lineSpacingFactor: 1, fontName: "other" });
+}
 describe("layoutTextBlock", () => {
-    it("resolves TextStyleSettings from combination of TextBlock and Run", () => {
-        const textBlock = TextBlock.create({ styleName: "block", styleOverrides: { widthFactor: 34, color: 0x00ff00 } });
-        const run0 = TextRun.create({ content: "run0", styleName: "run", styleOverrides: { lineHeight: 56, color: 0xff0000 } });
-        const run1 = TextRun.create({ content: "run1", styleName: "run", styleOverrides: { widthFactor: 78, fontName: "run1" } });
-        textBlock.appendRun(run0);
-        textBlock.appendRun(run1);
-        const tb = doLayout(textBlock, {
-            findTextStyle: (name) => TextStyleSettings.fromJSON(name === "block" ? { lineSpacingFactor: 12, fontName: "block" } : { lineSpacingFactor: 99, fontName: "run" }),
+    describe("resolves TextStyleSettings", () => {
+        it("inherits styling from TextBlock when Paragraph and Run have no style overrides", () => {
+            const textBlock = TextBlock.create({ styleId: "0x42" });
+            const run = TextRun.create({ content: "test" });
+            textBlock.appendParagraph();
+            textBlock.appendRun(run);
+            const tb = doLayout(textBlock, {
+                findTextStyle: findTextStyleImpl,
+            });
+            expect(tb.lines.length).to.equal(1);
+            expect(tb.lines[0].runs.length).to.equal(1);
+            const runStyle = tb.lines[0].runs[0].style;
+            expect(runStyle.fontName).to.equal("block");
+            expect(runStyle.lineSpacingFactor).to.equal(12);
+            expect(runStyle.isBold).to.be.true;
+        });
+        it("inherits style overrides from Paragraph when Run has no style overrides", () => {
+            const textBlock = TextBlock.create({ styleId: "0x42" });
+            const paragraph = Paragraph.create({ styleOverrides: { fontName: "paragraph" } });
+            const run = TextRun.create({ content: "test" });
+            textBlock.paragraphs.push(paragraph);
+            textBlock.appendRun(run);
+            const tb = doLayout(textBlock, {
+                findTextStyle: findTextStyleImpl,
+            });
+            expect(tb.lines.length).to.equal(1);
+            expect(tb.lines[0].runs.length).to.equal(1);
+            const runStyle = tb.lines[0].runs[0].style;
+            expect(runStyle.fontName).to.equal("paragraph");
+            expect(runStyle.isBold).to.be.true;
+        });
+        it("uses Run style overrides when Run has overrides", () => {
+            const textBlock = TextBlock.create({ styleId: "0x42" });
+            const paragraph = Paragraph.create({ styleOverrides: { lineSpacingFactor: 55, fontName: "paragraph" } });
+            const run = TextRun.create({ content: "test", styleOverrides: { lineSpacingFactor: 99, fontName: "run" } });
+            textBlock.paragraphs.push(paragraph);
+            textBlock.appendRun(run);
+            const tb = doLayout(textBlock, {
+                findTextStyle: findTextStyleImpl,
+            });
+            expect(tb.lines.length).to.equal(1);
+            expect(tb.lines[0].runs.length).to.equal(1);
+            const runStyle = tb.lines[0].runs[0].style;
+            expect(runStyle.fontName).to.equal("run");
+            expect(runStyle.isBold).to.be.true;
+        });
+        it("still uses TextBlock specific styles when Run has style overrides", () => {
+            // Some style settings only make sense on a TextBlock, so they are always applied from the TextBlock, even if the Run has a style override.
+            const textBlock = TextBlock.create({ styleId: "0x42" });
+            const run = TextRun.create({ content: "test", styleOverrides: { lineSpacingFactor: 99, fontName: "run" } });
+            textBlock.appendParagraph();
+            textBlock.appendRun(run);
+            const tb = doLayout(textBlock, {
+                findTextStyle: findTextStyleImpl,
+            });
+            expect(tb.lines.length).to.equal(1);
+            expect(tb.lines[0].runs.length).to.equal(1);
+            const runStyle = tb.lines[0].runs[0].style;
+            expect(runStyle.lineSpacingFactor).to.equal(12);
+        });
+        it("inherits overrides from TextBlock, Paragraph and Run when there is no styleId", () => {
+            const textBlock = TextBlock.create({ styleId: "", styleOverrides: { widthFactor: 34, lineHeight: 3, lineSpacingFactor: 12, isBold: true } });
+            const paragraph = Paragraph.create({ styleOverrides: { lineHeight: 56, color: 0xff0000, frame: { shape: "octagon" } } });
+            const run = TextRun.create({ content: "test", styleOverrides: { widthFactor: 78, fontName: "override", leader: { wantElbow: true } } });
+            textBlock.paragraphs.push(paragraph);
+            textBlock.appendRun(run);
+            const tb = doLayout(textBlock, {
+                findTextStyle: findTextStyleImpl,
+            });
+            expect(tb.lines.length).to.equal(1);
+            expect(tb.lines[0].runs.length).to.equal(1);
+            const runStyle = tb.lines[0].runs[0].style;
+            // widthFactor is always taken from the TextBlock, even if the Run has overrides
+            expect(runStyle.widthFactor).to.equal(34);
+            // lineHeight is always taken from the TextBlock, even if the Run has overrides
+            expect(runStyle.lineHeight).to.equal(3);
+            // lineSpacingFactor is always taken from the TextBlock, even if the Run has overrides
+            expect(runStyle.lineSpacingFactor).to.equal(12);
+            // frame settings are always taken from the TextBlock, even if the Paragraph or Run has overrides
+            expect(runStyle.frame.shape).to.equal("none");
+            // leader settings are always taken from the TextBlock, even if the Paragraph or Run has overrides
+            expect(runStyle.leader.wantElbow).to.be.false;
+            expect(runStyle.fontName).to.equal("override");
+            expect(runStyle.color).to.equal(0xff0000);
+            expect(runStyle.isBold).to.be.true;
+        });
+        it("does not inherit overrides in TextBlock or Paragraph when Run has same propertied overriden - unless they are TextBlock specific settings", () => {
+            const textBlock = TextBlock.create({ styleId: "0x42", styleOverrides: { widthFactor: 34, lineHeight: 3, lineSpacingFactor: 12, isBold: true } });
+            const paragraph = Paragraph.create({ styleOverrides: { lineHeight: 56, color: 0xff0000 } });
+            const run = TextRun.create({ content: "test", styleOverrides: { widthFactor: 78, lineHeight: 6, lineSpacingFactor: 24, fontName: "override", isBold: false } });
+            textBlock.paragraphs.push(paragraph);
+            textBlock.appendRun(run);
+            const tb = doLayout(textBlock, {
+                findTextStyle: findTextStyleImpl,
+            });
+            expect(tb.lines.length).to.equal(1);
+            expect(tb.lines[0].runs.length).to.equal(1);
+            const runStyle = tb.lines[0].runs[0].style;
+            // widthFactor is always taken from the TextBlock, even if the Run has a styleId or overrides
+            expect(runStyle.widthFactor).to.equal(34);
+            // lineHeight is always taken from the TextBlock, even if the Run has a styleId or overrides
+            expect(runStyle.lineHeight).to.equal(3);
+            // lineSpacingFactor is always taken from the TextBlock, even if the Run has a styleId or overrides
+            expect(runStyle.lineSpacingFactor).to.equal(12);
+            expect(runStyle.fontName).to.equal("override");
+            expect(runStyle.color).to.equal(0xff0000);
+            expect(runStyle.isBold).to.be.false;
+        });
+        it("takes child overrides over parent overrides", () => {
+            //...unless they are TextBlock specific as covered in other tests
+            const textBlock = TextBlock.create({ styleId: "", styleOverrides: { fontName: "grandparent" } });
+            const paragraph = Paragraph.create({ styleOverrides: { fontName: "parent" } });
+            const run = TextRun.create({ content: "test", styleOverrides: { fontName: "child" } });
+            textBlock.paragraphs.push(paragraph);
+            textBlock.appendRun(run);
+            const tb = doLayout(textBlock, {
+                findTextStyle: findTextStyleImpl,
+            });
+            expect(tb.lines.length).to.equal(1);
+            expect(tb.lines[0].runs.length).to.equal(1);
+            const runStyle = tb.lines[0].runs[0].style;
+            expect(runStyle.fontName).to.equal("child");
         });
-        expect(tb.lines.length).to.equal(1);
-        expect(tb.lines[0].runs.length).to.equal(2);
-        const s0 = tb.lines[0].runs[0].style;
-        expect(s0.lineHeight).to.equal(1);
-        expect(s0.lineSpacingFactor).to.equal(12);
-        expect(s0.widthFactor).to.equal(34);
-        expect(s0.fontName).to.equal("run");
-        expect(s0.color).to.equal(0xff0000);
-        const s1 = tb.lines[0].runs[1].style;
-        expect(s1.widthFactor).to.equal(34);
-        expect(s1.lineSpacingFactor).to.equal(12);
-        expect(s1.lineHeight).to.equal(1);
-        expect(s1.fontName).to.equal("run1");
-        expect(s1.color).to.equal("subcategory");
     });
     it("has consistent data when converted to a layout result", function () {
         if (!isIntlSupported()) {
             this.skip();
         }
         // Initialize a new TextBlockLayout object
-        const textBlock = TextBlock.create({ width: 50, styleName: "", styleOverrides: { widthFactor: 34, color: 0x00ff00, fontName: "arial" } });
+        const textBlock = TextBlock.create({ width: 50, styleId: "", styleOverrides: { widthFactor: 34, color: 0x00ff00, fontName: "arial" } });
         const run0 = TextRun.create({
             content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium mi sit amet magna malesuada, at venenatis ante eleifend.",
-            styleName: "",
             styleOverrides: { lineHeight: 56, color: 0xff0000 },
         });
         const run1 = TextRun.create({
             content: "Donec sit amet semper sapien. Nullam commodo, libero a accumsan lacinia, metus enim pharetra lacus, eu facilisis sem nisi eu dui.",
-            styleName: "",
             styleOverrides: { widthFactor: 78, fontName: "run1" },
         });
         const run2 = TextRun.create({
             content: "Duis dui quam, suscipit quis feugiat id, fermentum ut augue. Mauris iaculis odio rhoncus lorem eleifend, posuere viverra turpis elementum.",
-            styleName: "",
             styleOverrides: {},
         });
-        const fractionRun = FractionRun.create({ numerator: "num", denominator: "denom", styleName: "", styleOverrides: {} });
+        const fractionRun = FractionRun.create({ numerator: "num", denominator: "denom", styleOverrides: {} });
         textBlock.appendRun(run0);
         textBlock.appendRun(fractionRun);
         textBlock.appendParagraph();
@@ -159,7 +262,7 @@ describe("layoutTextBlock", () => {
             expect(marginRange.high.y).to.equal(layoutRange.high.y + (margins.top ?? 0));
         };
         const makeTextBlock = (margins) => {
-            const textBlock = TextBlock.create({ styleName: "", styleOverrides: { lineSpacingFactor: 0 }, margins });
+            const textBlock = TextBlock.create({ styleId: "", styleOverrides: { lineSpacingFactor: 0 }, margins });
             textBlock.appendRun(makeTextRun("abc"));
             textBlock.appendRun(makeTextRun("defg"));
             return textBlock;
@@ -184,9 +287,9 @@ describe("layoutTextBlock", () => {
     });
     describe("range", () => {
         it("aligns text to center based on height of stacked fraction", () => {
-            const textBlock = TextBlock.create({ styleName: "" });
-            const fractionRun = FractionRun.create({ numerator: "1", denominator: "2", styleName: "fraction" });
-            const textRun = TextRun.create({ content: "text", styleName: "text" });
+            const textBlock = TextBlock.create({ styleId: "" });
+            const fractionRun = FractionRun.create({ numerator: "1", denominator: "2" });
+            const textRun = TextRun.create({ content: "text" });
             textBlock.appendRun(fractionRun);
             textBlock.appendRun(textRun);
             const layout = doLayout(textBlock);
@@ -202,7 +305,7 @@ describe("layoutTextBlock", () => {
             expect(round(textLayout.offsetFromLine.y, 3)).to.equal(.375);
         });
         it("produces one line per paragraph if document width <= 0", () => {
-            const textBlock = TextBlock.create({ styleName: "" });
+            const textBlock = TextBlock.create({ styleId: "" });
             for (let i = 0; i < 4; i++) {
                 const layout = doLayout(textBlock);
                 if (i === 0) {
@@ -233,20 +336,20 @@ describe("layoutTextBlock", () => {
                 }
                 const p = textBlock.appendParagraph();
                 for (let j = 0; j <= i; j++) {
-                    p.runs.push(TextRun.create({ styleName: "", content: "Run" }));
+                    p.runs.push(TextRun.create({ content: "Run" }));
                 }
             }
         });
         it("produces a new line for each LineBreakRun", () => {
             const lineSpacingFactor = 0.5;
             const lineHeight = 1;
-            const textBlock = TextBlock.create({ styleName: "", styleOverrides: { lineSpacingFactor, lineHeight } });
-            textBlock.appendRun(TextRun.create({ styleName: "", content: "abc" }));
-            textBlock.appendRun(LineBreakRun.create({ styleName: "" }));
-            textBlock.appendRun(TextRun.create({ styleName: "", content: "def" }));
-            textBlock.appendRun(TextRun.create({ styleName: "", content: "ghi" }));
-            textBlock.appendRun(LineBreakRun.create({ styleName: "" }));
-            textBlock.appendRun(TextRun.create({ styleName: "", content: "jkl" }));
+            const textBlock = TextBlock.create({ styleId: "", styleOverrides: { lineSpacingFactor, lineHeight } });
+            textBlock.appendRun(TextRun.create({ content: "abc" }));
+            textBlock.appendRun(LineBreakRun.create());
+            textBlock.appendRun(TextRun.create({ content: "def" }));
+            textBlock.appendRun(TextRun.create({ content: "ghi" }));
+            textBlock.appendRun(LineBreakRun.create());
+            textBlock.appendRun(TextRun.create({ content: "jkl" }));
             const tb = doLayout(textBlock);
             expect(tb.lines.length).to.equal(3);
             expect(tb.lines[0].runs.length).to.equal(2);
@@ -260,17 +363,16 @@ describe("layoutTextBlock", () => {
         it("applies tab shifts", () => {
             const lineHeight = 1;
             const tabInterval = 6;
-            const styleName = "";
-            const textBlock = TextBlock.create({ styleName, styleOverrides: { lineHeight, tabInterval } });
+            const textBlock = TextBlock.create({ styleId: "", styleOverrides: { lineHeight, tabInterval } });
             // Appends a line that looks like `stringOne` TAB `stringTwo` LINEBREAK
             const appendLine = (stringOne, stringTwo, wantLineBreak = true) => {
                 if (stringOne.length > 0)
-                    textBlock.appendRun(TextRun.create({ styleName, content: stringOne }));
-                textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval } }));
+                    textBlock.appendRun(TextRun.create({ content: stringOne }));
+                textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval } }));
                 if (stringTwo.length > 0)
-                    textBlock.appendRun(TextRun.create({ styleName, content: stringTwo }));
+                    textBlock.appendRun(TextRun.create({ content: stringTwo }));
                 if (wantLineBreak)
-                    textBlock.appendRun(LineBreakRun.create({ styleName }));
+                    textBlock.appendRun(LineBreakRun.create());
             };
             // The extra whitespace is intentional to show where the tab stops should be.
             appendLine("", "a");
@@ -293,32 +395,31 @@ describe("layoutTextBlock", () => {
         it("applies consecutive tab shifts", () => {
             const lineHeight = 1;
             const tabInterval = 6;
-            const styleName = "";
-            const textBlock = TextBlock.create({ styleName, styleOverrides: { lineHeight, tabInterval } });
+            const textBlock = TextBlock.create({ styleId: "", styleOverrides: { lineHeight, tabInterval } });
             // line 0: ----->----->----->LINEBREAK
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval } }));
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval } }));
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval } }));
-            textBlock.appendRun(LineBreakRun.create({ styleName }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval } }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval } }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval } }));
+            textBlock.appendRun(LineBreakRun.create());
             // line 1: abc-->----->LINEBREAK
-            textBlock.appendRun(TextRun.create({ styleName, content: "abc" }));
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval } }));
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval } }));
-            textBlock.appendRun(LineBreakRun.create({ styleName }));
+            textBlock.appendRun(TextRun.create({ content: "abc" }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval } }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval } }));
+            textBlock.appendRun(LineBreakRun.create());
             // line 2: abc--->->------>LINEBREAK
-            textBlock.appendRun(TextRun.create({ styleName, content: "abc" }));
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval: 7 } }));
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval: 2 } }));
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval: 7 } }));
-            textBlock.appendRun(LineBreakRun.create({ styleName }));
+            textBlock.appendRun(TextRun.create({ content: "abc" }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval: 7 } }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval: 2 } }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval: 7 } }));
+            textBlock.appendRun(LineBreakRun.create());
             // line 3: abc--->1/23->abcde->LINEBREAK
-            textBlock.appendRun(TextRun.create({ styleName, content: "abc" }));
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval: 7 } }));
-            textBlock.appendRun(FractionRun.create({ styleName, numerator: "1", denominator: "23" }));
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval: 3 } }));
-            textBlock.appendRun(TextRun.create({ styleName, content: "abcde" }));
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval: 7 } }));
-            textBlock.appendRun(LineBreakRun.create({ styleName }));
+            textBlock.appendRun(TextRun.create({ content: "abc" }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval: 7 } }));
+            textBlock.appendRun(FractionRun.create({ numerator: "1", denominator: "23" }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval: 3 } }));
+            textBlock.appendRun(TextRun.create({ content: "abcde" }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval: 7 } }));
+            textBlock.appendRun(LineBreakRun.create());
             const tb = doLayout(textBlock);
             const line0 = tb.lines[0];
             const line1 = tb.lines[1];
@@ -336,13 +437,13 @@ describe("layoutTextBlock", () => {
         it("computes ranges based on custom line spacing and line height", () => {
             const lineSpacingFactor = 2;
             const lineHeight = 3;
-            const textBlock = TextBlock.create({ styleName: "", styleOverrides: { lineSpacingFactor, lineHeight } });
-            textBlock.appendRun(TextRun.create({ styleName: "", content: "abc" }));
-            textBlock.appendRun(LineBreakRun.create({ styleName: "" }));
-            textBlock.appendRun(TextRun.create({ styleName: "", content: "def" }));
-            textBlock.appendRun(TextRun.create({ styleName: "", content: "ghi" }));
-            textBlock.appendRun(LineBreakRun.create({ styleName: "" }));
-            textBlock.appendRun(TextRun.create({ styleName: "", content: "jkl" }));
+            const textBlock = TextBlock.create({ styleId: "", styleOverrides: { lineSpacingFactor, lineHeight } });
+            textBlock.appendRun(TextRun.create({ content: "abc" }));
+            textBlock.appendRun(LineBreakRun.create());
+            textBlock.appendRun(TextRun.create({ content: "def" }));
+            textBlock.appendRun(TextRun.create({ content: "ghi" }));
+            textBlock.appendRun(LineBreakRun.create());
+            textBlock.appendRun(TextRun.create({ content: "jkl" }));
             const tb = doLayout(textBlock);
             expect(tb.lines.length).to.equal(3);
             expect(tb.lines[0].runs.length).to.equal(2);
@@ -366,7 +467,7 @@ describe("layoutTextBlock", () => {
             if (!isIntlSupported()) {
                 this.skip();
             }
-            const block = TextBlock.create({ styleName: "", width: 3, styleOverrides: { lineHeight: 1, lineSpacingFactor: 0 } });
+            const block = TextBlock.create({ styleId: "", width: 3, styleOverrides: { lineHeight: 1, lineSpacingFactor: 0 } });
             function expectBlockRange(width, height) {
                 const layout = doLayout(block);
                 expectRange(width, height, layout.range);
@@ -390,7 +491,7 @@ describe("layoutTextBlock", () => {
             if (!isIntlSupported()) {
                 this.skip();
             }
-            const block = TextBlock.create({ styleName: "", styleOverrides: { lineHeight: 1, lineSpacingFactor: 0 } });
+            const block = TextBlock.create({ styleId: "", styleOverrides: { lineHeight: 1, lineSpacingFactor: 0 } });
             function expectBlockRange(width, height) {
                 const layout = doLayout(block);
                 expectRange(width, height, layout.range);
@@ -407,7 +508,7 @@ describe("layoutTextBlock", () => {
             if (!isIntlSupported()) {
                 this.skip();
             }
-            const block = TextBlock.create({ styleName: "", styleOverrides: { lineSpacingFactor: 0 } });
+            const block = TextBlock.create({ styleId: "", styleOverrides: { lineSpacingFactor: 0 } });
             function expectBlockRange(width, height) {
                 const layout = doLayout(block);
                 expectRange(width, height, layout.range);
@@ -481,7 +582,7 @@ describe("layoutTextBlock", () => {
     });
     describe("word-wrapping", () => {
         function expectLines(input, width, expectedLines) {
-            const textBlock = TextBlock.create({ styleName: "" });
+            const textBlock = TextBlock.create({ styleId: "" });
             textBlock.width = width;
             const run = makeTextRun(input);
             textBlock.appendRun(run);
@@ -495,7 +596,7 @@ describe("layoutTextBlock", () => {
             if (!isIntlSupported()) {
                 this.skip();
             }
-            const textBlock = TextBlock.create({ styleName: "" });
+            const textBlock = TextBlock.create({ styleId: "" });
             textBlock.width = 6;
             textBlock.appendRun(makeTextRun("ab"));
             expect(doLayout(textBlock).lines.length).to.equal(1);
@@ -584,29 +685,28 @@ describe("layoutTextBlock", () => {
                 this.skip();
             }
             const lineHeight = 1;
-            const styleName = "";
-            const textBlock = TextBlock.create({ styleName, styleOverrides: { lineHeight } });
+            const textBlock = TextBlock.create({ styleId: "", styleOverrides: { lineHeight } });
             // line 0:  -->-->------> LINEBREAK
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval: 3 } }));
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval: 3 } }));
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval: 7 } }));
-            textBlock.appendRun(LineBreakRun.create({ styleName }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval: 3 } }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval: 3 } }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval: 7 } }));
+            textBlock.appendRun(LineBreakRun.create());
             // line 1:  a->b->cd-----> LINEBREAK
-            textBlock.appendRun(TextRun.create({ styleName, content: "a" }));
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval: 3 } }));
-            textBlock.appendRun(TextRun.create({ styleName, content: "b" }));
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval: 3 } }));
-            textBlock.appendRun(TextRun.create({ styleName, content: "cd" }));
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval: 7 } }));
-            textBlock.appendRun(LineBreakRun.create({ styleName }));
+            textBlock.appendRun(TextRun.create({ content: "a" }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval: 3 } }));
+            textBlock.appendRun(TextRun.create({ content: "b" }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval: 3 } }));
+            textBlock.appendRun(TextRun.create({ content: "cd" }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval: 7 } }));
+            textBlock.appendRun(LineBreakRun.create());
             // line 2:  -->a->b------>cd LINEBREAK
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval: 3 } }));
-            textBlock.appendRun(TextRun.create({ styleName, content: "a" }));
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval: 3 } }));
-            textBlock.appendRun(TextRun.create({ styleName, content: "b" }));
-            textBlock.appendRun(TabRun.create({ styleName, styleOverrides: { tabInterval: 7 } }));
-            textBlock.appendRun(TextRun.create({ styleName, content: "cd" }));
-            textBlock.appendRun(LineBreakRun.create({ styleName }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval: 3 } }));
+            textBlock.appendRun(TextRun.create({ content: "a" }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval: 3 } }));
+            textBlock.appendRun(TextRun.create({ content: "b" }));
+            textBlock.appendRun(TabRun.create({ styleOverrides: { tabInterval: 7 } }));
+            textBlock.appendRun(TextRun.create({ content: "cd" }));
+            textBlock.appendRun(LineBreakRun.create());
             /* Full Width:
               * -->-->------>
               * a->b->cd---->
@@ -655,7 +755,7 @@ describe("layoutTextBlock", () => {
             if (!isIntlSupported()) {
                 this.skip();
             }
-            const textBlock = TextBlock.create({ styleName: "" });
+            const textBlock = TextBlock.create({ styleId: "" });
             for (const str of ["The ", "quick brown", " fox jumped over ", "the lazy ", "dog"]) {
                 textBlock.appendRun(makeTextRun(str));
             }
@@ -699,7 +799,7 @@ describe("layoutTextBlock", () => {
             if (!isIntlSupported()) {
                 this.skip();
             }
-            const block = TextBlock.create({ styleName: "" });
+            const block = TextBlock.create({ styleId: "" });
             block.appendRun(makeTextRun("aa")); // 2 chars wide
             block.appendRun(makeTextRun("bb ccc d ee")); // 11 chars wide
             block.appendRun(makeTextRun("ff ggg h")); // 8 chars wide
@@ -739,7 +839,7 @@ describe("layoutTextBlock", () => {
             if (!isIntlSupported()) {
                 this.skip();
             }
-            const block = TextBlock.create({ styleName: "", styleOverrides: { lineHeight: 1, lineSpacingFactor: 0 } });
+            const block = TextBlock.create({ styleId: "", styleOverrides: { lineHeight: 1, lineSpacingFactor: 0 } });
             block.appendRun(makeTextRun("abc defg"));
             const layout1 = doLayout(block);
             let width = layout1.range.xLength();
@@ -751,16 +851,26 @@ describe("layoutTextBlock", () => {
         });
     });
     describe("grapheme offsets", () => {
-        it("should return an empty array if source type is not text", function () {
-            const textBlock = TextBlock.create({ styleName: "" });
-            const fractionRun = FractionRun.create({ numerator: "1", denominator: "2", styleName: "fraction" });
-            textBlock.appendRun(fractionRun);
+        function getLayoutResultAndStyleResolver(textBlock) {
             const layout = doLayout(textBlock);
             const result = layout.toResult();
+            const textStyleResolver = new TextStyleResolver({
+                textBlock,
+                iModel: {},
+                modelId: undefined,
+                findTextStyle: () => TextStyleSettings.defaults
+            });
+            return { textStyleResolver, result };
+        }
+        it("should return an empty array if source type is not text", function () {
+            const textBlock = TextBlock.create({ styleId: "" });
+            const fractionRun = FractionRun.create({ numerator: "1", denominator: "2" });
+            textBlock.appendRun(fractionRun);
+            const { textStyleResolver, result } = getLayoutResultAndStyleResolver(textBlock);
             const args = {
                 textBlock,
                 iModel: {},
-                findTextStyle: () => TextStyleSettings.defaults,
+                textStyleResolver,
                 findFontId: () => 0,
                 computeTextRange: computeTextRangeAsStringLength,
                 paragraphIndex: result.lines[0].sourceParagraphIndex,
@@ -771,15 +881,14 @@ describe("layoutTextBlock", () => {
             expect(graphemeRanges).to.be.an("array").that.is.empty;
         });
         it("should handle empty text content", function () {
-            const textBlock = TextBlock.create({ styleName: "" });
-            const textRun = TextRun.create({ content: "", styleName: "text" });
+            const textBlock = TextBlock.create({ styleId: "" });
+            const textRun = TextRun.create({ content: "" });
             textBlock.appendRun(textRun);
-            const layout = doLayout(textBlock);
-            const result = layout.toResult();
+            const { textStyleResolver, result } = getLayoutResultAndStyleResolver(textBlock);
             const args = {
                 textBlock,
                 iModel: {},
-                findTextStyle: () => TextStyleSettings.defaults,
+                textStyleResolver,
                 findFontId: () => 0,
                 computeTextRange: computeTextRangeAsStringLength,
                 paragraphIndex: result.lines[0].sourceParagraphIndex,
@@ -790,15 +899,14 @@ describe("layoutTextBlock", () => {
             expect(graphemeRanges).to.be.an("array").that.is.empty;
         });
         it("should compute grapheme offsets correctly for a given text", function () {
-            const textBlock = TextBlock.create({ styleName: "" });
-            const textRun = TextRun.create({ content: "hello", styleName: "text" });
+            const textBlock = TextBlock.create({ styleId: "" });
+            const textRun = TextRun.create({ content: "hello" });
             textBlock.appendRun(textRun);
-            const layout = doLayout(textBlock);
-            const result = layout.toResult();
+            const { textStyleResolver, result } = getLayoutResultAndStyleResolver(textBlock);
             const args = {
                 textBlock,
                 iModel: {},
-                findTextStyle: () => TextStyleSettings.defaults,
+                textStyleResolver,
                 findFontId: () => 0,
                 computeTextRange: computeTextRangeAsStringLength,
                 paragraphIndex: result.lines[0].sourceParagraphIndex,
@@ -811,16 +919,15 @@ describe("layoutTextBlock", () => {
             expect(graphemeRanges[4].high.x).to.equal(5);
         });
         it("should compute grapheme offsets correctly for non-English text", function () {
-            const textBlock = TextBlock.create({ styleName: "" });
+            const textBlock = TextBlock.create({ styleId: "" });
             // Hindi - "Paragraph"
-            const textRun = TextRun.create({ content: "अनुच्छेद", styleName: "text" });
+            const textRun = TextRun.create({ content: "अनुच्छेद" });
             textBlock.appendRun(textRun);
-            const layout = doLayout(textBlock);
-            const result = layout.toResult();
+            const { textStyleResolver, result } = getLayoutResultAndStyleResolver(textBlock);
             const args = {
                 textBlock,
                 iModel: {},
-                findTextStyle: () => TextStyleSettings.defaults,
+                textStyleResolver,
                 findFontId: () => 0,
                 computeTextRange: computeTextRangeAsStringLength,
                 paragraphIndex: result.lines[0].sourceParagraphIndex,
@@ -835,15 +942,14 @@ describe("layoutTextBlock", () => {
             expect(graphemeRanges[3].high.x).to.equal(8);
         });
         it("should compute grapheme offsets correctly for emoji content", function () {
-            const textBlock = TextBlock.create({ styleName: "" });
-            const textRun = TextRun.create({ content: "👨‍👦", styleName: "text" });
+            const textBlock = TextBlock.create({ styleId: "" });
+            const textRun = TextRun.create({ content: "👨‍👦" });
             textBlock.appendRun(textRun);
-            const layout = doLayout(textBlock);
-            const result = layout.toResult();
+            const { textStyleResolver, result } = getLayoutResultAndStyleResolver(textBlock);
             const args = {
                 textBlock,
                 iModel: {},
-                findTextStyle: () => TextStyleSettings.defaults,
+                textStyleResolver,
                 findFontId: () => 0,
                 computeTextRange: computeTextRangeAsStringLength,
                 paragraphIndex: result.lines[0].sourceParagraphIndex,
@@ -873,9 +979,10 @@ describe("layoutTextBlock", () => {
             expect(comic).to.equal(3);
             expect(iModel.fonts.findId({ name: "Consolas" })).to.be.undefined;
             function test(fontName, expectedFontId) {
-                const textBlock = TextBlock.create({ styleName: "" });
-                textBlock.appendRun(TextRun.create({ styleName: "", styleOverrides: { fontName } }));
-                const layout = layoutTextBlock({ textBlock, iModel });
+                const textBlock = TextBlock.create({ styleId: "" });
+                textBlock.appendRun(TextRun.create({ styleOverrides: { fontName } }));
+                const textStyleResolver = new TextStyleResolver({ textBlock, iModel });
+                const layout = layoutTextBlock({ textBlock, iModel, textStyleResolver });
                 const run = layout.lines[0].runs[0];
                 expect(run).not.to.be.undefined;
                 expect(run.fontId).to.equal(expectedFontId);
@@ -888,14 +995,13 @@ describe("layoutTextBlock", () => {
         });
         function computeDimensions(args) {
             const textBlock = TextBlock.create({
-                styleName: "",
+                styleId: "",
                 styleOverrides: {
                     lineHeight: args.height,
                     widthFactor: args.width,
                 },
             });
             textBlock.appendRun(TextRun.create({
-                styleName: "",
                 content: args.content ?? "This is a string of text.",
                 styleOverrides: {
                     isBold: args.bold,
@@ -903,7 +1009,8 @@ describe("layoutTextBlock", () => {
                     fontName: args.font ?? "Vera",
                 },
             }));
-            const range = layoutTextBlock({ textBlock, iModel }).range;
+            const textStyleResolver = new TextStyleResolver({ textBlock, iModel });
+            const range = layoutTextBlock({ textBlock, iModel, textStyleResolver }).range;
             return { x: range.high.x - range.low.x, y: range.high.y - range.low.y };
         }
         it("computes different ranges for different strings", () => {
@@ -967,18 +1074,18 @@ describe("layoutTextBlock", () => {
 describe("produceTextBlockGeometry", () => {
     function makeText(color) {
         const styleOverrides = undefined !== color ? { color: color instanceof ColorDef ? color.toJSON() : color } : undefined;
-        return TextRun.create({ styleName: "", styleOverrides, content: "text" });
+        return TextRun.create({ styleOverrides, content: "text" });
     }
     function makeFraction(color) {
         const styleOverrides = undefined !== color ? { color: color instanceof ColorDef ? color.toJSON() : color } : undefined;
-        return FractionRun.create({ numerator: "num", denominator: "denom", styleName: "", styleOverrides });
+        return FractionRun.create({ numerator: "num", denominator: "denom", styleOverrides });
     }
     function makeBreak(color) {
         const styleOverrides = undefined !== color ? { color: color instanceof ColorDef ? color.toJSON() : color } : undefined;
-        return LineBreakRun.create({ styleName: "", styleOverrides });
+        return LineBreakRun.create({ styleOverrides });
     }
     function makeTextBlock(runs) {
-        const block = TextBlock.create({ styleName: "" });
+        const block = TextBlock.create({ styleId: "" });
         for (const run of runs) {
             block.appendRun(run);
         }