tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

content-visibility-vs-scrollIntoView-003.html (2550B)

      1 <!doctype HTML>
      2 <html>
      3 <meta charset="utf8">
      4 <title>CSS Content Visibility: auto + overflow clip + scrollIntoView, ContentVisibilityAutoStateChange fires trece</title>
      5 <link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com">
      6 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
      7 <meta name="assert"
      8    content="If content-visibility: auto element is not relevent to user after calling scrollIntoView of its descendant, contentvisibilityautostatechange trece">
      9 
     10 <script src="/resources/testharness.js"></script>
     11 <script src="/resources/testharnessreport.js"></script>
     12 <script src="/common/rendering-utils.js"></script>
     13 
     14 <style>
     15    .auto {
     16        content-visibility: auto;
     17        contain-intrinsic-size: auto 1px auto 10000px;
     18    }
     19 
     20    .child {
     21        height: 40000px;
     22        position: relative;
     23    }
     24 
     25    #target {
     26        position: absolute;
     27        bottom: 0;
     28    }
     29 
     30    .before_target {
     31        height: 40000px;
     32    }
     33 
     34    #overflow_clip {
     35        overflow: clip;
     36        height: 20000px;
     37    }
     38 </style>
     39 
     40 <div id=e1 class="auto before_target"></div>
     41 <div id=e2 class="auto before_target"></div>
     42 <div id=e3 class="auto">
     43    <div id="overflow_clip">
     44        <div class=child>
     45            <div id=target>PASS</div>
     46        </div>
     47    </div>
     48 </div>
     49 <div id=e4 class=auto>
     50    <div class=child></div>
     51 </div>
     52 
     53 <script>
     54 function waitForEvent() {
     55    return new Promise(resolve => e3.addEventListener('contentvisibilityautostatechange', resolve, { once: true }));
     56 }
     57 
     58 promise_test(async (t) => {
     59    var eventCounter = 0;
     60    function eventHandler(e) {
     61        eventCounter++;
     62        if (eventCounter == 1) {
     63            assert_equals(e.skipped, true, "the first event is the initial one");
     64        } else if (eventCounter == 2) {
     65            assert_equals(e.skipped, false, "the second event should be generated by visible");
     66        } else if (eventCounter == 3) {
     67            assert_equals(e.skipped, true, "the third event should be generated by hidden");
     68        }
     69    }
     70 
     71    e3.addEventListener("contentvisibilityautostatechange", eventHandler);
     72    // Make sure the first event has fired.
     73    await waitForEvent();
     74    target.scrollIntoView();
     75    await waitForEvent();
     76    await waitForEvent();
     77    await waitForAtLeastOneFrame();
     78    assert_equals(eventCounter, 3, "There should be three contentvisibilityautostatechange events.");
     79 }, "ContentVisibilityAutoStateChange fires trece when `scrollIntoView` a descendant of `content-visibility:auto` which is hidden after scrolling");
     80 </script>