observe-css-generated-text.html | Explore in Territory

<!doctype html>
<meta charset=utf-8>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  #css-generated-text::before {
    content: 'This is some text generated via css';
    font-size: 12px;
  }

  #css-generated-text-attr::before {
    content: attr(data-text);
    font-size: 12px;
  }

  #css-generated-text-inline-elem::before {
    content: 'This is some more text generated via css that should be displayed via a span tag';
    font-size: 12px;
  }
</style>
<body>
  <script>
    setup({"hide_test_state": true});
    const checkText = (entry, expectedSize, expectedID, beforeRender) => {
      assert_equals(entry.entryType, 'largest-contentful-paint',
        'Entry should be of type largest-contentful-paint');
      assert_greater_than_equal(entry.renderTime, beforeRender,
        'Render time should be greater than time just before rendering');
      assert_greater_than_equal(performance.now(), entry.renderTime,
        'renderTime should be less than current time');
      assert_approx_equals(entry.startTime, entry.renderTime, 0.001,
        'startTime should be equal to renderTime to the precision of 1 millisecond.');
      assert_equals(entry.duration, 0, 'duration should be 0');
      assert_greater_than_equal(entry.size, expectedSize,
        'Size should match expected size');
      assert_equals(entry.loadTime, 0, 'loadTime should be zero');
      assert_equals(entry.id, expectedID, 'ID should match expected ID');
      assert_equals(entry.url, '', 'URL should be empty');
      assert_equals(entry.element, document.getElementById(expectedID),
        'Entry element is expected element');
    }

    const runTest = (element, testName) => {
      const elementId = element.id;
      // The element should be atleast 12px in width
      // and 100px across based on font size and text length.
      const elemSizeLowerBound = 1200;
      promise_test(t => {
        return new Promise((resolve, reject) => {
          assert_implements(window.LargestContentfulPaint,
            "LargestContentfulPaint is not implemented");
          const observer = new PerformanceObserver(resolve);
          observer.observe({ type: 'largest-contentful-paint' });
          beforeRender = performance.now();
          document.body.appendChild(element);

          step_timeout(() => {
            reject(new Error('timeout, LCP candidate not detected'));
          }, 1000)
        }).then(entryList => {
          assert_equals(entryList.getEntries().length, 1);
          const entry = entryList.getEntries()[0];
          checkText(entry, elemSizeLowerBound, elementId, beforeRender);
        });
      }, testName);
    }

    const cssGeneratedTextElem = document.createElement('p');
    cssGeneratedTextElem.id = 'css-generated-text';
    runTest(cssGeneratedTextElem,
      "CSS generated text is observable as a LargestContentfulPaint candidate");

    const cssGeneratedTextAttrElem = document.createElement('p');
    cssGeneratedTextAttrElem.id = 'css-generated-text-attr';
    cssGeneratedTextAttrElem.setAttribute('data-text',
      'This is some text generated using content:attr() via css');
    runTest(cssGeneratedTextAttrElem,
      "Text generated with CSS using content:attr() is observable as a LargestContentfulPaint candidate");

    const cssGeneratedTextAttrInlineElemBlockWrapper = document.createElement('div');
    cssGeneratedTextAttrInlineElemBlockWrapper.id = 'css-generated-text-inline-elem-block-wrapper';
    const cssGeneratedTextInlineElem = document.createElement('span');
    cssGeneratedTextInlineElem.id = 'css-generated-text-inline-elem';
    cssGeneratedTextAttrInlineElemBlockWrapper.appendChild(cssGeneratedTextInlineElem);
    runTest(cssGeneratedTextAttrInlineElemBlockWrapper,
      "CSS generated text on a inline element is observable as a LargestContentfulPaint candidate");
  </script>
</body>
chromium/third_party/blink/web_tests/external/wpt/largest-contentful-paint/observe-css-generated-text.html
