rename Paragraph.backgroundBoxes to fragments

that's what they are, fragmented inline areas! `items` are also
fragments, so perhaps it should be `itemFragments` and
`areaFragments`, but `items` and `fragments` seems easy enough to
figure out

Author: chearon

src/layout-flow.ts

@@ -1345,13 +1345,13 @@ export class IfcInline extends Inline {
       }
     }
 
-    for (const [inline, backgrounds] of this.paragraph.backgroundBoxes) {
+    for (const [inline, fragments] of this.paragraph.fragments) {
       const {dx, dy} = inlineShifts.get(inline)!;
 
-      for (const background of backgrounds) {
-        background.blockOffset += this.containingBlock.y + dy;
-        background.start += this.containingBlock.x + dx;
-        background.end += this.containingBlock.x + dx;
+      for (const fragment of fragments) {
+        fragment.blockOffset += this.containingBlock.y + dy;
+        fragment.start += this.containingBlock.x + dx;
+        fragment.end += this.containingBlock.x + dx;
       }
     }
   }

src/layout-text.ts

@@ -1517,7 +1517,7 @@ export class Linebox extends LineItemLinkedList {
   }
 }
 
-export interface BackgroundBox {
+export interface InlineFragment {
   inline: Inline;
   start: number;
   end: number;
@@ -1529,41 +1529,41 @@ export interface BackgroundBox {
 }
 
 class ContiguousBoxBuilder {
-  opened: Map<Inline, BackgroundBox>;
-  closed: Map<Inline, BackgroundBox[]>;
+  opened: Map<Inline, InlineFragment>;
+  closed: Map<Inline, InlineFragment[]>;
 
   constructor() {
     this.opened = new Map();
     this.closed = new Map();
   }
 
   open(inline: Inline, naturalStart: boolean, start: number, blockOffset: number) {
-    const box = this.opened.get(inline);
+    const fragment = this.opened.get(inline);
 
-    if (box) {
-      box.end = start;
+    if (fragment) {
+      fragment.end = start;
     } else {
       const end = start;
       const naturalEnd = false;
       const {ascender, descender} = inline.metrics;
-      const box: BackgroundBox = {
+      const fragment: InlineFragment = {
         start, end, inline, blockOffset, ascender, descender, naturalStart, naturalEnd
       };
-      this.opened.set(inline, box);
+      this.opened.set(inline, fragment);
       // Make sure closed is in open order
       if (!this.closed.has(inline)) this.closed.set(inline, []);
     }
   }
 
   close(inline: Inline, naturalEnd: boolean, end: number) {
-    const box = this.opened.get(inline);
+    const fragment = this.opened.get(inline);
 
-    if (box) {
+    if (fragment) {
       const list = this.closed.get(inline);
-      box.end = end;
-      box.naturalEnd = naturalEnd;
+      fragment.end = end;
+      fragment.naturalEnd = naturalEnd;
       this.opened.delete(inline);
-      list ? list.push(box) : this.closed.set(inline, [box]);
+      list ? list.push(fragment) : this.closed.set(inline, [fragment]);
     }
   }
 
@@ -1651,15 +1651,15 @@ export class Paragraph {
   buffer: AllocatedUint16Array;
   items: ShapedItem[];
   lineboxes: Linebox[];
-  backgroundBoxes: Map<Inline, BackgroundBox[]>;
+  fragments: Map<Inline, InlineFragment[]>;
 
   constructor(ifc: IfcInline, buffer: AllocatedUint16Array) {
     this.ifc = ifc;
     this.string = ifc.text;
     this.buffer = buffer;
     this.items = [];
     this.lineboxes = [];
-    this.backgroundBoxes = new Map();
+    this.fragments = new Map();
   }
 
   getHeight() {
@@ -2653,11 +2653,11 @@ export class Paragraph {
 
       if (boxBuilder) {
         for (const [inline, list] of boxBuilder.closed) {
-          const thisList = this.backgroundBoxes.get(inline);
+          const thisList = this.fragments.get(inline);
           if (thisList) {
-            for (const backgroundBox of list) thisList.push(backgroundBox);
+            for (const fragment of list) thisList.push(fragment);
           } else {
-            this.backgroundBoxes.set(inline, list);
+            this.fragments.set(inline, list);
           }
         }
       }

src/paint.ts

@@ -6,7 +6,7 @@ import {Box, FormattingBox} from './layout-box.ts';
 import {binarySearchOf} from './util.ts';
 
 import type {InlineLevel, BlockLevel} from './layout-flow.ts';
-import type {BackgroundBox} from './layout-text.ts';
+import type {InlineFragment} from './layout-text.ts';
 import type {Color} from './style.ts';
 import type {LoadedFontFace} from './text-font.ts';
 
@@ -214,21 +214,21 @@ function snap(ox: number, oy: number, ow: number, oh: number) {
 }
 
 function paintInlineBackground(
-  background: BackgroundBox,
+  fragment: InlineFragment,
   paragraph: Paragraph,
   b: PaintBackend
 ) {
   const ifc = paragraph.ifc;
   const direction = ifc.style.direction;
-  const inline = background.inline;
+  const inline = fragment.inline;
   const bgc = inline.style.backgroundColor;
   const clip = inline.style.backgroundClip;
   const {borderTopColor, borderRightColor, borderBottomColor, borderLeftColor} = inline.style;
   const {a: ta} = borderTopColor;
   const {a: ra} = borderRightColor;
   const {a: ba} = borderBottomColor;
   const {a: la} = borderLeftColor;
-  const {start, end, blockOffset, ascender, descender, naturalStart, naturalEnd} = background;
+  const {start, end, blockOffset, ascender, descender, naturalStart, naturalEnd} = fragment;
   const paddingTop = inline.style.getPaddingBlockStart(ifc);
   const paddingRight = inline.style.getPaddingLineRight(ifc);
   const paddingBottom = inline.style.getPaddingBlockEnd(ifc);
@@ -350,9 +350,9 @@ function paintInline(
       const box = stack.pop()!;
       if (box.isInline()) {
         if (!box.isLayerRoot() || box === inlineRoot) {
-          const inlineBackgrounds = paragraph.backgroundBoxes.get(box);
-          if (inlineBackgrounds) {
-            for (const background of inlineBackgrounds) {
+          const fragments = paragraph.fragments.get(box);
+          if (fragments) {
+            for (const background of fragments) {
               paintInlineBackground(background, paragraph, b);
             }
           }

test/flow.spec.js

@@ -1680,18 +1680,18 @@ describe('Flow', function () {
       /** @type import('../src/layout-flow.ts').IfcInline[] */
       const [ifc] = this.get('div').children;
 
-      expect(ifc.paragraph.backgroundBoxes.get(this.get('#t1'))[0].start).to.equal(87.03125);
-      expect(ifc.paragraph.backgroundBoxes.get(this.get('#t1'))[0].end).to.equal(133.28125);
+      expect(ifc.paragraph.fragments.get(this.get('#t1'))[0].start).to.equal(87.03125);
+      expect(ifc.paragraph.fragments.get(this.get('#t1'))[0].end).to.equal(133.28125);
       expect(ifc.paragraph.items[1].x).to.equal(87.03125);
 
-      expect(ifc.paragraph.backgroundBoxes.get(this.get('#t2'))[0].start).to.equal(139.7265625);
-      expect(ifc.paragraph.backgroundBoxes.get(this.get('#t2'))[0].end).to.equal(211.7734375);
+      expect(ifc.paragraph.fragments.get(this.get('#t2'))[0].start).to.equal(139.7265625);
+      expect(ifc.paragraph.fragments.get(this.get('#t2'))[0].end).to.equal(211.7734375);
       expect(ifc.paragraph.items[3].x).to.equal(139.7265625);
 
-      expect(ifc.paragraph.backgroundBoxes.get(this.get('#t3'))[0].blockOffset).to.equal(13.74609375);
+      expect(ifc.paragraph.fragments.get(this.get('#t3'))[0].blockOffset).to.equal(13.74609375);
       expect(ifc.paragraph.items[5].y).to.equal(13.74609375);
 
-      expect(ifc.paragraph.backgroundBoxes.get(this.get('#t4'))[0].blockOffset).to.equal(15.74609375);
+      expect(ifc.paragraph.fragments.get(this.get('#t4'))[0].blockOffset).to.equal(15.74609375);
       expect(ifc.paragraph.items[7].y).to.equal(15.74609375);
     });
 
@@ -1714,18 +1714,18 @@ describe('Flow', function () {
       /** @type import('../src/layout-flow.ts').IfcInline[] */
       const [ifc] = this.get('div').children;
 
-      expect(ifc.paragraph.backgroundBoxes.get(this.get('#t1'))[0].start).to.equal(88.03125);
-      expect(ifc.paragraph.backgroundBoxes.get(this.get('#t1'))[0].end).to.equal(134.28125);
+      expect(ifc.paragraph.fragments.get(this.get('#t1'))[0].start).to.equal(88.03125);
+      expect(ifc.paragraph.fragments.get(this.get('#t1'))[0].end).to.equal(134.28125);
       expect(ifc.paragraph.items[1].x).to.equal(88.03125);
 
-      expect(ifc.paragraph.backgroundBoxes.get(this.get('#t2'))[0].start).to.equal(140.7265625);
-      expect(ifc.paragraph.backgroundBoxes.get(this.get('#t2'))[0].end).to.equal(212.7734375);
+      expect(ifc.paragraph.fragments.get(this.get('#t2'))[0].start).to.equal(140.7265625);
+      expect(ifc.paragraph.fragments.get(this.get('#t2'))[0].end).to.equal(212.7734375);
       expect(ifc.paragraph.items[3].x).to.equal(140.7265625);
 
-      expect(ifc.paragraph.backgroundBoxes.get(this.get('#t3'))[0].blockOffset).to.equal(14.74609375);
+      expect(ifc.paragraph.fragments.get(this.get('#t3'))[0].blockOffset).to.equal(14.74609375);
       expect(ifc.paragraph.items[5].y).to.equal(14.74609375);
 
-      expect(ifc.paragraph.backgroundBoxes.get(this.get('#t4'))[0].blockOffset).to.equal(16.74609375);
+      expect(ifc.paragraph.fragments.get(this.get('#t4'))[0].blockOffset).to.equal(16.74609375);
       expect(ifc.paragraph.items[8].y).to.equal(16.74609375);
     });
 

test/text.spec.js

@@ -2086,9 +2086,9 @@ describe('Inline Blocks', function () {
     const [ifc] = this.get('#t1').children;
     /** @type import('../src/layout-flow.ts').Inline */
     const span = this.get('#t2');
-    const box = ifc.paragraph.backgroundBoxes.get(span);
-    expect(box[0].start).to.equal(8.96);
-    expect(box[0].end).to.equal(90.44800000000001);
+    const fragment = ifc.paragraph.fragments.get(span);
+    expect(fragment[0].start).to.equal(8.96);
+    expect(fragment[0].end).to.equal(90.44800000000001);
   });
 
   it('occupies the right amount of space for floats', function () {