observe-css-generated-text.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /largest-contentful-paint/observe-css-generated-text.html - WPT Dashboard Interop Dashboard

<!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>