tor-browser

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

browser_animation_animation-target_highlight.js (4478B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test for following highlighting related.
      7 // * highlight when mouse over on a target node
      8 // * unhighlight when mouse out from the above element
      9 // * lock highlighting when click on the inspect icon in animation target component
     10 // * add 'highlighting' class to animation target component during locking
     11 // * mouseover locked target node
     12 // * unlock highlighting when click on the above icon
     13 // * lock highlighting when click on the other inspect icon
     14 // * if the locked node has multi animations,
     15 //   the class will add to those animation target as well
     16 
     17 add_task(async function () {
     18  await addTab(URL_ROOT + "doc_simple_animation.html");
     19  await removeAnimatedElementsExcept([".animated", ".multi"]);
     20  const { animationInspector, inspector, panel } =
     21    await openAnimationInspector();
     22  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
     23    getHighlighterTestHelpers(inspector);
     24 
     25  info("Check highlighting when mouse over on a target node");
     26  const onHighlight = waitForHighlighterTypeShown(
     27    inspector.highlighters.TYPES.BOXMODEL
     28  );
     29  mouseOverOnTargetNode(animationInspector, panel, 0);
     30  let data = await onHighlight;
     31  assertNodeFront(data.nodeFront, "DIV", "ball animated");
     32 
     33  info("Check unhighlighting when mouse out on a target node");
     34  const onUnhighlight = waitForHighlighterTypeHidden(
     35    inspector.highlighters.TYPES.BOXMODEL
     36  );
     37  mouseOutOnTargetNode(animationInspector, panel, 0);
     38  await onUnhighlight;
     39  ok(true, "Unhighlighted the targe node");
     40 
     41  info("Check node is highlighted when the inspect icon is clicked");
     42  const onHighlighterShown = waitForHighlighterTypeShown(
     43    inspector.highlighters.TYPES.SELECTOR
     44  );
     45  await clickOnInspectIcon(animationInspector, panel, 0);
     46  data = await onHighlighterShown;
     47  assertNodeFront(data.nodeFront, "DIV", "ball animated");
     48  await assertHighlight(panel, 0, true);
     49 
     50  info("Check if the animation target is still highlighted on mouse out");
     51  mouseOutOnTargetNode(animationInspector, panel, 0);
     52  await wait(500);
     53  await assertHighlight(panel, 0, true);
     54 
     55  info("Check no highlight event occur by mouse over locked target");
     56  let highlightEventCount = 0;
     57  function onHighlighterHidden({ type }) {
     58    if (type === inspector.highlighters.TYPES.BOXMODEL) {
     59      highlightEventCount += 1;
     60    }
     61  }
     62  inspector.highlighters.on("highlighter-hidden", onHighlighterHidden);
     63  mouseOverOnTargetNode(animationInspector, panel, 0);
     64  await wait(500);
     65  is(highlightEventCount, 0, "Highlight event should not occur");
     66  inspector.highlighters.off("highlighter-hidden", onHighlighterHidden);
     67 
     68  info("Show persistent highlighter on an animation target");
     69  const onPersistentHighlighterShown = waitForHighlighterTypeShown(
     70    inspector.highlighters.TYPES.SELECTOR
     71  );
     72  await clickOnInspectIcon(animationInspector, panel, 1);
     73  data = await onPersistentHighlighterShown;
     74  assertNodeFront(data.nodeFront, "DIV", "ball multi");
     75 
     76  info("Check the highlighted state of the animation targets");
     77  await assertHighlight(panel, 0, false);
     78  await assertHighlight(panel, 1, true);
     79  await assertHighlight(panel, 2, true);
     80 
     81  info("Hide persistent highlighter");
     82  const onPersistentHighlighterHidden = waitForHighlighterTypeHidden(
     83    inspector.highlighters.TYPES.SELECTOR
     84  );
     85  await clickOnInspectIcon(animationInspector, panel, 1);
     86  await onPersistentHighlighterHidden;
     87 
     88  info("Check the highlighted state of the animation targets");
     89  await assertHighlight(panel, 0, false);
     90  await assertHighlight(panel, 1, false);
     91  await assertHighlight(panel, 2, false);
     92 });
     93 
     94 async function assertHighlight(panel, index, isHighlightExpected) {
     95  const animationItemEl = await findAnimationItemByIndex(panel, index);
     96  const animationTargetEl = animationItemEl.querySelector(".animation-target");
     97 
     98  await waitUntil(
     99    () =>
    100      animationTargetEl.classList.contains("highlighting") ===
    101      isHighlightExpected
    102  );
    103  ok(true, `Highlighting class of animation target[${index}] is correct`);
    104 }
    105 
    106 function assertNodeFront(nodeFront, tagName, classValue) {
    107  is(nodeFront.tagName, "DIV", "The highlighted node has the correct tagName");
    108  is(
    109    nodeFront.attributes[0].name,
    110    "class",
    111    "The highlighted node has the correct attributes"
    112  );
    113  is(
    114    nodeFront.attributes[0].value,
    115    classValue,
    116    "The highlighted node has the correct class"
    117  );
    118 }