US157225 - Enhance rect calculations

[svanherk]

Problem

The original vdiff-target calculation was a bit too limited for what we need. It didn't handle these two cases:

1. You have two elements in your Shadow DOM that represent your full size. For example, count-badge has a div and a d2l-tooltip. With no vdiff-target set it would only include the div in the screenshot, and if vdiff-target is added to tooltip it would only include the tooltip.
2. You have a vdiff test with multiple components you want included, but one or more is absolute or fixed positioned. For example, a vdiff of:
   <d2l-button id="button">Always visible</d2l-button><d2l-tooltip for="button" force-show >Visible</d2l-tooltip>

Solution

The code below now:

1. Accepts multiple vdiff-targets being set, and creates the largest rect needed to accommodate all of them.
2. Allows someone to add the vdiff-include class to fixture templates to specify elements that should also be included in the above calculation.

Example

Let's say I want a vdiff test of this:

<div style="display: inline-block;">
	<d2l-dialog-confirm id="confirm" title-text="Title" text="Are you sure?" opened>
		<d2l-button slot="footer" primary>Yes</d2l-button>
		<d2l-button slot="footer" id="cancel">No</d2l-button>
	</d2l-dialog-confirm>
	<d2l-button id="tooltip-force-show">Always visible</d2l-button>
	<d2l-tooltip for="tooltip-force-show" force-show >
		Always visible message
	</d2l-tooltip>
	<d2l-count-badge style="position: absolute; right: 80px;" has-tooltip number="10" text="10 new notifications"></d2l-count-badge>
</div>

As is, that would look like this:

We could try to make the div some arbitrary size to capture everything, but that's no good. Instead, we can add vdiff-include to the elements not automatically captured because they have position: absolute or position: fixed:

<div style="display: inline-block;">
	<d2l-dialog-confirm class="vdiff-include" id="confirm" title-text="Title" text="Are you sure?" opened>
		<d2l-button slot="footer" primary>Yes</d2l-button>
		<d2l-button slot="footer" id="cancel">No</d2l-button>
	</d2l-dialog-confirm>
	<d2l-button id="tooltip-force-show">Always visible</d2l-button>
	<d2l-tooltip class="vdiff-include" for="tooltip-force-show" force-show >
		Always visible message
	</d2l-tooltip>
	<d2l-count-badge class="vdiff-include" style="position: absolute; right: 80px;" has-tooltip number="10" text="10 new notifications"></d2l-count-badge>
</div>

Now we get:

Much better! But as you can see, count-badge is still getting cut off because it's not incorporating the tooltip size. If we set vdiff-target on the div here AND on the d2l-tooltip here we get:

Magic!

[dlockhart]

Seems really straightforward to me, nice job!

[ghost]

🎉 This PR is included in version 0.32.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀