function runActiveRegionTests({ tag, phoneUtilLoadedAfterInit }) {
  describe('Computation of readonly accessor `.activeRegion`', () => {
    /** @type {(v:any) => void|undefined} */
    let resolvePhoneUtilLoaded;
    if (phoneUtilLoadedAfterInit) {
      beforeEach(() => {
        ({ resolveLoaded: resolvePhoneUtilLoaded } = mockPhoneUtilManager());
      });

      afterEach(() => {
        restorePhoneUtilManager();
      });
    }
    // 1. **allowed regions**: try to get the region from preconfigured allowed region (first entry)
    it('takes .allowedRegions[0] when only one allowed region configured', async () => {
      const el = await fixture(
        html` <${tag} .allowedRegions="${['DE']}" .modelValue="${'+31612345678'}" ></${tag}> `,
      );
      if (resolvePhoneUtilLoaded) {
        resolvePhoneUtilLoaded(undefined);
        await el.updateComplete;
      }
      await el.updateComplete;
      expect(el.activeRegion).to.equal('DE');
    });

    it('returns undefined when multiple .allowedRegions, but no modelValue match', async () => {
      // involve locale, so we are sure it does not fall back on locale
      const currentCode = getRegionCodeBasedOnLocale();
      const allowedRegions = ['BE', 'DE', 'CN'];
      const el = await fixture(
        html` <${tag} .modelValue="${'+31612345678'}" .allowedRegions="${allowedRegions.filter(
          ar => ar !== currentCode,
        )}"></${tag}> `,
      );
      if (resolvePhoneUtilLoaded) {
        resolvePhoneUtilLoaded(undefined);
        await el.updateComplete;
      }
      expect(el.activeRegion).to.equal(undefined);
    });

    // 2. **user input**: try to derive active region from user input
    it('deducts it from modelValue when provided', async () => {
      const el = await fixture(html` <${tag} .modelValue="${'+31612345678'}"></${tag}> `);
      if (resolvePhoneUtilLoaded) {
        resolvePhoneUtilLoaded(undefined);
        await el.updateComplete;
      }
      // Region code for country code '31' is 'NL'
      expect(el.activeRegion).to.equal('NL');
    });

    it('.modelValue takes precedence over .allowedRegions when both preconfigured and .modelValue updated', async () => {
      const el = await fixture(
        html` <${tag} .allowedRegions="${[
          'DE',
          'BE',
          'NL',
        ]}" .modelValue="${'+31612345678'}" ></${tag}> `,
      );
      if (resolvePhoneUtilLoaded) {
        resolvePhoneUtilLoaded(undefined);
        await el.updateComplete;
      }
      expect(el.activeRegion).to.equal('NL');
    });

    it('deducts it from value when modelValue is unparseable', async () => {
      const modelValue = new Unparseable('+316');
      const el = await fixture(html` <${tag} .modelValue=${modelValue}></${tag}> `);
      if (resolvePhoneUtilLoaded) {
        resolvePhoneUtilLoaded(undefined);
        await el.updateComplete;
      }
      // Region code for country code '31' is 'NL'
      expect(el.activeRegion).to.equal('NL');
    });

    it('deducts it from value when modelValue is unparseable and contains parentheses', async () => {
      const modelValue = new Unparseable('(+31)6');
      const el = await fixture(html` <${tag} .modelValue=${modelValue}></${tag}> `);
      if (resolvePhoneUtilLoaded) {
        resolvePhoneUtilLoaded(undefined);
        await el.updateComplete;
      }
      // Region code for country code '31' is 'NL'
      expect(el.activeRegion).to.equal('NL');
    });

    // 3. **locale**: try to get the region from locale (`html[lang]` attribute)
    it('automatically bases it on current locale when nothing preconfigured', async () => {
      const el = await fixture(html` <${tag}></${tag}> `);
      if (resolvePhoneUtilLoaded) {
        resolvePhoneUtilLoaded(undefined);
        await el.updateComplete;
      }
      const currentCode = getRegionCodeBasedOnLocale();
      expect(el.activeRegion).to.equal(currentCode);
    });

    it('returns undefined when locale not within allowed regions', async () => {
      const currentCode = getRegionCodeBasedOnLocale();
      const allowedRegions = ['NL', 'BE', 'DE'];
      const el = await fixture(
        html` <${tag} .allowedRegions="${allowedRegions.filter(
          ar => ar !== currentCode,
        )}"></${tag}> `,
      );
      if (resolvePhoneUtilLoaded) {
        resolvePhoneUtilLoaded(undefined);
        await el.updateComplete;
      }
      expect(el.activeRegion).to.equal(undefined);
    });
  });
}
@param {{tag:{ '_$litStatic$': string;}; phoneUtilLoadedAfterInit?: boolean ;}} opts