transparent-text-with-text-stroke.html

<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!--
  Transparent text with text stroke decoration should be eligible for LCP.
-->
<style>
  .large-transparent {
    font-size: 200px;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
    color: transparent;
    z-index: -999;
    -webkit-text-stroke: 1px blue;
  }
</style>

<body>
  <img src='/images/lcp-133x106.png' id='image' />
  <p id='larger_text' class='large-transparent'>fake LCP</p>

  <script>
    const LcpEntryPromise = (entry_id) => {
      return new Promise(resolve => {
        new PerformanceObserver((entryList, observer) => {
          if (entryList.getEntries().filter(e => e.id == entry_id).length > 0) {
            resolve(entryList.getEntries());
            observer.disconnect();
          }
        }).observe({ type: 'largest-contentful-paint', buffered: true });
      });
    }

    promise_test(async t => {
      assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");

      lcpEntries = await LcpEntryPromise('larger_text');

      assert_equals(lcpEntries.length, 1,
        "Transparent texts with text stroke decoration are should not be excluded from LCP.");
    }, "Transparent text with text stroke decoration should not be excluded from LCP.")
  </script>
</body>
chromium/third_party/blink/web_tests/external/wpt/largest-contentful-paint/transparent-text-with-text-stroke.html
