chromium/chrome/test/data/webui/cr_elements/cr_loading_gradient_test.ts

// Copyright 2023 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'chrome://resources/cr_elements/cr_loading_gradient/cr_loading_gradient.js';

import {getTrustedHTML} from 'chrome://resources/js/static_types.js';
import {assertEquals} from 'chrome://webui-test/chai_assert.js';
import {microtasksFinished} from 'chrome://webui-test/test_util.js';

suite('CrLoadingGradientElement', () => {
  test('AssignsUniqueIds', async () => {
    document.body.innerHTML = getTrustedHTML`
      <cr-loading-gradient>
        <svg width="100" height="100">
          <clipPath><circle cx="100" cy="100" r="100"></circle></clipPath>
        </svg>
      </cr-loading-gradient>
      <cr-loading-gradient>
        <svg width="100" height="100">
          <clipPath>
            <rect x="0" y="0" width="100%" height="100" rx="5"></rect>
          </clipPath>
        </svg>
      </cr-loading-gradient>
    `;
    await microtasksFinished();

    const gradients = document.querySelectorAll('cr-loading-gradient');
    assertEquals(
        'crLoadingGradient0', gradients[0]!.querySelector('clipPath')!.id);
    assertEquals(
        'url("#crLoadingGradient0")',
        gradients[0]!.style.getPropertyValue('clip-path'));
    assertEquals(
        'crLoadingGradient1', gradients[1]!.querySelector('clipPath')!.id);
    assertEquals(
        'url("#crLoadingGradient1")',
        gradients[1]!.style.getPropertyValue('clip-path'));
  });
});