Range.myGetExtensionRect: Region content starting with a comment-node results in an empty boundingRect

[RonaldTreur]

Note: This was only tested on Chrome v86

Some background

After adding content into a region, the polyfill's extractOverflowingContent method is being invoked if the content overflows the region. This method then will determine where to cut off the overflowing part, so that the remainder can then be rendered in the subsequent region.

It tries to be smart about it, by asking the browser to create a range near the end of the region. This can fail for a variety of reasons however (e.g. unsupported by Firefox, or text outside viewport).

It it does fail, it will follow a non-optimized route by creating a collapsed Range that is positioned at the very beginning of the region's content:

css-regions-polyfill/src/css-regions/polyfill.js

Lines 320 to 324 in f508484

	// move back into the region
	r = r || document.createRange();
	r.setStart(region, 0);
	r.setEnd(region, 0);
	dontOptimize=true;

The plan next is to move the range "to the right" bit by bit, until if falls outside of the region after which it knows where to cut the content off.

Before it performs this (iterative) process however, it begins with determining the bounding DOMRect of the previously created Range by invoking r.myGetExtensionRect():

css-regions-polyfill/src/css-regions/polyfill.js

Line 333 in f508484

var rect = r.myGetExtensionRect(); fixNullRect();

Unfortunately collapsed ranges lead to an "empty" (all values equal to 0) DOMRect in some browsers (e.g. Chrome). This is taken into account by the polyfill:

css-regions-polyfill/src/css-regions/lib/range-extensions.js

Lines 322 to 323 in f508484

	// if the value seems wrong... (some browsers don't like collapsed selections)
	if(this.collapsed && rect.top===0 && rect.bottom===0) {

In that case (and since we are at the very beginning of the range) it will attempt to remedy this by first moving the range to the "right":

css-regions-polyfill/src/css-regions/lib/range-extensions.js

Lines 331 to 333 in f508484

	// let's move on char to the right
	clone.myMoveTowardRight();
	collapseToLeft=true;

This clone.myMoveTowardRight() results again a collapsed range (since this code is multi-purpose), but now the startOffset (and/or startContainer) will have changed. By invoking the following code, it then potentially "stretches" the range (back to where we started) which could result in a non-collapsed range:

css-regions-polyfill/src/css-regions/lib/range-extensions.js

Lines 335 to 339 in f508484

	// note: some browsers don't like selections
	// that spans multiple containers, so we will
	// iterate this process until we have one true
	// char selected
	clone.setStart(clone.endContainer, 0);

By performing a recursive call to r.myGetExtensionRect() next, a new bounding DOMRect will be determined. If it is still "empty" and still collapsed, it will move the range once more to the right and again stretch the range. This will continue until the DOMRect is no longer empty or the range is no longer collapsed.

What goes wrong

If this region's content starts with a comment-node, then moving the range to the right will put it to the right of the comment-node (as intended):

css-regions-polyfill/src/css-regions/lib/range-extensions.js

Line 332 in f508484

clone.myMoveTowardRight();

Next the resulting collapsed range will be updated to encompass this comment node by moving the start of the range back:

css-regions-polyfill/src/css-regions/lib/range-extensions.js

Line 339 in f508484

clone.setStart(clone.endContainer, 0);

Afterwards the recursive call will find (in Chrome at least) that this again results in an empty DOMRect (despite containing a comment node). Unfortunately it is no longer considered to be collapsed, resulting in this if-condition to fail:

css-regions-polyfill/src/css-regions/lib/range-extensions.js

Line 323 in f508484

if(this.collapsed && rect.top===0 && rect.bottom===0) {

This unfortunately leads to no more attempts being made to rectify this situation and the empty DOMRect is returned (in the end) to the extractOverflowingContent method.

Possible fix(es)

I have two rough ideas, though I am not 100% sure these do not break something else:

1. Change the myMoveTowardRight method to always skip over comment-nodes, since they take up no space anyway
2. Verify that the range contains only comment-nodes right after this line
   

   css-regions-polyfill/src/css-regions/lib/range-extensions.js

   Line 332 in f508484

   clone.myMoveTowardRight();

   
   And keep executing that line until this is no longer the case

Final (important) note

Fortunately the polyfill has a failsafe built in, that will make sure the polyfill can (in most cases) still do its job:

css-regions-polyfill/src/css-regions/polyfill.js

Line 333 in f508484

var rect = r.myGetExtensionRect(); fixNullRect();

The fixNullRect function, that immediately follows the r.myGetExtensionRect()-call, will try to fix an empty boundingRect by creating a fake one with a less precise approximation of some of the properties needed by the code that follows.

So though I would not consider this "bug" to be a major issue, it might shed some light on one of the reasons why this fixNullRect function is needed to begin with.