How to use prefixedHandler method in wpt

Best JavaScript code snippet using wpt

prefixed-animation-event-tests.js

Source:prefixed-animation-event-tests.js

1'use strict'2// Runs a set of tests for a given prefixed/unprefixed animation event (e.g.3// animationstart/webkitAnimationStart).4//5// The eventDetails object must have the following form:6// {7//   isTransition: false, <-- can be omitted, default false8//   unprefixedType: 'animationstart',9//   prefixedType: 'webkitAnimationStart',10//   animationCssStyle: '1ms',  <-- must NOT include animation name or11//                                  transition property12// }13function runAnimationEventTests(eventDetails) {14  const {15    isTransition,16    unprefixedType,17    prefixedType,18    animationCssStyle19  } = eventDetails;20  // Derive the DOM event handler names, e.g. onanimationstart.21  const unprefixedHandler = `on${unprefixedType}`;22  const prefixedHandler = `on${prefixedType.toLowerCase()}`;23  const style = document.createElement('style');24  document.head.appendChild(style);25  if (isTransition) {26    style.sheet.insertRule(27      `.baseStyle { width: 100px; transition: width ${animationCssStyle}; }`);28    style.sheet.insertRule('.transition { width: 200px !important; }');29  } else {30    style.sheet.insertRule('@keyframes anim {}');31  }32  function triggerAnimation(div) {33    if (isTransition) {34      div.classList.add('transition');35    } else {36      div.style.animation = `anim ${animationCssStyle}`;37    }38  }39  test(t => {40    const div = createDiv(t);41    assert_equals(div[unprefixedHandler], null,42        `${unprefixedHandler} should initially be null`);43    assert_equals(div[prefixedHandler], null,44        `${prefixedHandler} should initially be null`);45    // Setting one should not affect the other.46    div[unprefixedHandler] = () => { };47    assert_not_equals(div[unprefixedHandler], null,48        `setting ${unprefixedHandler} should make it non-null`);49    assert_equals(div[prefixedHandler], null,50        `setting ${unprefixedHandler} should not affect ${prefixedHandler}`);51    div[prefixedHandler] = () => { };52    assert_not_equals(div[prefixedHandler], null,53        `setting ${prefixedHandler} should make it non-null`);54    assert_not_equals(div[unprefixedHandler], div[prefixedHandler],55        'the setters should be different');56  }, `${unprefixedHandler} and ${prefixedHandler} are not aliases`);57  // The below tests primarily test the interactions of prefixed animation58  // events in the algorithm for invoking events:59  // https://dom.spec.whatwg.org/#concept-event-listener-invoke60  promise_test(async t => {61    const div = createDiv(t);62    let receivedEventCount = 0;63    addTestScopedEventHandler(t, div, prefixedHandler, () => {64      receivedEventCount++;65    });66    addTestScopedEventListener(t, div, prefixedType, () => {67      receivedEventCount++;68    });69    // The HTML spec[0] specifies that the prefixed event handlers have an70    // 'Event handler event type' of the appropriate prefixed event type. E.g.71    // onwebkitanimationend creates a listener for the event type72    // 'webkitAnimationEnd'.73    //74    // [0]: https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers-on-elements,-document-objects,-and-window-objects75    div.dispatchEvent(new AnimationEvent(prefixedType));76    assert_equals(receivedEventCount, 2,77                'prefixed listener and handler received event');78  }, `dispatchEvent of a ${prefixedType} event does trigger a ` +79      `prefixed event handler or listener`);80  promise_test(async t => {81    const div = createDiv(t);82    let receivedEvent = false;83    addTestScopedEventHandler(t, div, unprefixedHandler, () => {84      receivedEvent = true;85    });86    addTestScopedEventListener(t, div, unprefixedType, () => {87      receivedEvent = true;88    });89    div.dispatchEvent(new AnimationEvent(prefixedType));90    assert_false(receivedEvent,91                'prefixed listener or handler received event');92  }, `dispatchEvent of a ${prefixedType} event does not trigger an ` +93    `unprefixed event handler or listener`);94  promise_test(async t => {95    const div = createDiv(t);96    let receivedEvent = false;97    addTestScopedEventHandler(t, div, prefixedHandler, () => {98      receivedEvent = true;99    });100    addTestScopedEventListener(t, div, prefixedType, () => {101      receivedEvent = true;102    });103    // The rewrite rules from104    // https://dom.spec.whatwg.org/#concept-event-listener-invoke step 8 do not105    // apply because isTrusted will be false.106    div.dispatchEvent(new AnimationEvent(unprefixedType));107    assert_false(receivedEvent, 'prefixed listener or handler received event');108  }, `dispatchEvent of an ${unprefixedType} event does not trigger a ` +109      `prefixed event handler or listener`);110  promise_test(async t => {111    const div = createDiv(t);112    let receivedEvent = false;113    addTestScopedEventHandler(t, div, prefixedHandler, () => {114      receivedEvent = true;115    });116    triggerAnimation(div);117    await waitForEventThenAnimationFrame(t, unprefixedType);118    assert_true(receivedEvent, `received ${prefixedHandler} event`);119  }, `${prefixedHandler} event handler should trigger for an animation`);120  promise_test(async t => {121    const div = createDiv(t);122    let receivedPrefixedEvent = false;123    addTestScopedEventHandler(t, div, prefixedHandler, () => {124      receivedPrefixedEvent = true;125    });126    let receivedUnprefixedEvent = false;127    addTestScopedEventHandler(t, div, unprefixedHandler, () => {128      receivedUnprefixedEvent = true;129    });130    triggerAnimation(div);131    await waitForEventThenAnimationFrame(t, unprefixedType);132    assert_true(receivedUnprefixedEvent, `received ${unprefixedHandler} event`);133    assert_false(receivedPrefixedEvent, `received ${prefixedHandler} event`);134  }, `${prefixedHandler} event handler should not trigger if an unprefixed ` +135      `event handler also exists`);136  promise_test(async t => {137    const div = createDiv(t);138    let receivedPrefixedEvent = false;139    addTestScopedEventHandler(t, div, prefixedHandler, () => {140      receivedPrefixedEvent = true;141    });142    let receivedUnprefixedEvent = false;143    addTestScopedEventListener(t, div, unprefixedType, () => {144      receivedUnprefixedEvent = true;145    });146    triggerAnimation(div);147    await waitForEventThenAnimationFrame(t, unprefixedHandler);148    assert_true(receivedUnprefixedEvent, `received ${unprefixedHandler} event`);149    assert_false(receivedPrefixedEvent, `received ${prefixedHandler} event`);150  }, `${prefixedHandler} event handler should not trigger if an unprefixed ` +151      `listener also exists`);152  promise_test(async t => {153    // We use a parent/child relationship to be able to register both prefixed154    // and unprefixed event handlers without the deduplication logic kicking in.155    const parent = createDiv(t);156    const child = createDiv(t);157    parent.appendChild(child);158    // After moving the child, we have to clean style again.159    getComputedStyle(child).transition;160    getComputedStyle(child).width;161    let observedUnprefixedType;162    addTestScopedEventHandler(t, parent, unprefixedHandler, e => {163      observedUnprefixedType = e.type;164    });165    let observedPrefixedType;166    addTestScopedEventHandler(t, child, prefixedHandler, e => {167      observedPrefixedType = e.type;168    });169    triggerAnimation(child);170    await waitForEventThenAnimationFrame(t, unprefixedType);171    assert_equals(observedUnprefixedType, unprefixedType);172    assert_equals(observedPrefixedType, prefixedType);173  }, `event types for prefixed and unprefixed ${unprefixedType} event ` +174    `handlers should be named appropriately`);175  promise_test(async t => {176    const div = createDiv(t);177    let receivedEvent = false;178    addTestScopedEventListener(t, div, prefixedType, () => {179      receivedEvent = true;180    });181    triggerAnimation(div);182    await waitForEventThenAnimationFrame(t, unprefixedHandler);183    assert_true(receivedEvent, `received ${prefixedType} event`);184  }, `${prefixedType} event listener should trigger for an animation`);185  promise_test(async t => {186    const div = createDiv(t);187    let receivedPrefixedEvent = false;188    addTestScopedEventListener(t, div, prefixedType, () => {189      receivedPrefixedEvent = true;190    });191    let receivedUnprefixedEvent = false;192    addTestScopedEventListener(t, div, unprefixedType, () => {193      receivedUnprefixedEvent = true;194    });195    triggerAnimation(div);196    await waitForEventThenAnimationFrame(t, unprefixedHandler);197    assert_true(receivedUnprefixedEvent, `received ${unprefixedType} event`);198    assert_false(receivedPrefixedEvent, `received ${prefixedType} event`);199  }, `${prefixedType} event listener should not trigger if an unprefixed ` +200      `listener also exists`);201  promise_test(async t => {202    const div = createDiv(t);203    let receivedPrefixedEvent = false;204    addTestScopedEventListener(t, div, prefixedType, () => {205      receivedPrefixedEvent = true;206    });207    let receivedUnprefixedEvent = false;208    addTestScopedEventHandler(t, div, unprefixedHandler, () => {209      receivedUnprefixedEvent = true;210    });211    triggerAnimation(div);212    await waitForEventThenAnimationFrame(t, unprefixedHandler);213    assert_true(receivedUnprefixedEvent, `received ${unprefixedType} event`);214    assert_false(receivedPrefixedEvent, `received ${prefixedType} event`);215  }, `${prefixedType} event listener should not trigger if an unprefixed ` +216       `event handler also exists`);217  promise_test(async t => {218    // We use a parent/child relationship to be able to register both prefixed219    // and unprefixed event listeners without the deduplication logic kicking in.220    const parent = createDiv(t);221    const child = createDiv(t);222    parent.appendChild(child);223    // After moving the child, we have to clean style again.224    getComputedStyle(child).transition;225    getComputedStyle(child).width;226    let observedUnprefixedType;227    addTestScopedEventListener(t, parent, unprefixedType, e => {228      observedUnprefixedType = e.type;229    });230    let observedPrefixedType;231    addTestScopedEventListener(t, child, prefixedType, e => {232      observedPrefixedType = e.type;233    });234    triggerAnimation(child);235    await waitForEventThenAnimationFrame(t, unprefixedHandler);236    assert_equals(observedUnprefixedType, unprefixedType);237    assert_equals(observedPrefixedType, prefixedType);238  }, `event types for prefixed and unprefixed ${unprefixedType} event ` +239      `listeners should be named appropriately`);240  promise_test(async t => {241    const div = createDiv(t);242    let receivedEvent = false;243    addTestScopedEventListener(t, div, prefixedType.toLowerCase(), () => {244      receivedEvent = true;245    });246    addTestScopedEventListener(t, div, prefixedType.toUpperCase(), () => {247      receivedEvent = true;248    });249    triggerAnimation(div);250    await waitForEventThenAnimationFrame(t, unprefixedHandler);251    assert_false(receivedEvent, `received ${prefixedType} event`);252  }, `${prefixedType} event listener is case sensitive`);253}254// Below are utility functions.255// Creates a div element, appends it to the document body and removes the256// created element during test cleanup.257function createDiv(test) {258  const element = document.createElement('div');259  element.classList.add('baseStyle');260  document.body.appendChild(element);261  test.add_cleanup(() => {262    element.remove();263  });264  // Flush style before returning. Some browsers only do partial style re-calc,265  // so ask for all important properties to make sure they are applied.266  getComputedStyle(element).transition;267  getComputedStyle(element).width;268  return element;269}270// Adds an event handler for |handlerName| (calling |callback|) to the given271// |target|, that will automatically be cleaned up at the end of the test.272function addTestScopedEventHandler(test, target, handlerName, callback) {273  assert_regexp_match(274      handlerName, /^on/, 'Event handler names must start with "on"');275  assert_equals(target[handlerName], null,276                `${handlerName} must be supported and not previously set`);277  target[handlerName] = callback;278  // We need this cleaned up even if the event handler doesn't run.279  test.add_cleanup(() => {280    if (target[handlerName])281      target[handlerName] = null;282  });283}284// Adds an event listener for |type| (calling |callback|) to the given285// |target|, that will automatically be cleaned up at the end of the test.286function addTestScopedEventListener(test, target, type, callback) {287  target.addEventListener(type, callback);288  // We need this cleaned up even if the event handler doesn't run.289  test.add_cleanup(() => {290    target.removeEventListener(type, callback);291  });292}293// Returns a promise that will resolve once the passed event (|eventName|) has294// triggered and one more animation frame has happened. Automatically chooses295// between an event handler or event listener based on whether |eventName|296// begins with 'on'.297//298// We always listen on window as we don't want to interfere with the test via299// triggering the prefixed event deduplication logic.300function waitForEventThenAnimationFrame(test, eventName) {301  return new Promise((resolve, _) => {302    const eventFunc = eventName.startsWith('on')303        ? addTestScopedEventHandler : addTestScopedEventListener;304    eventFunc(test, window, eventName, () => {305      // rAF once to give the event under test time to come through.306      requestAnimationFrame(resolve);307    });308  });...

Using AI Code Generation

1var wptHandler = require('./wptHandler');2var myHandler = new wptHandler();3myHandler.prefixedHandler('test');4var wptHandler = function() {5    this.prefixedHandler = function(value) {6        console.log('prefixedHandler value: ' + value);7    };8    this.wptHandler = function(value) {9        console.log('wptHandler value: ' + value);10    };11};12module.exports = wptHandler;

Using AI Code Generation

1var wpt = require('wpt');2wpt.prefixedHandler('Test', 'test', function(data, err) {3  console.log(data);4});5var wpt = require('wpt');6wpt.prefixedHandler('Test', 'test', 'test', function(data, err) {7  console.log(data);8});9var wpt = require('wpt');10wpt.prefixedHandler('Test', 'test', 'test', 'test', function(data, err) {11  console.log(data);12});13var wpt = require('wpt');14wpt.prefixedHandler('Test', 'test', 'test', 'test', 'test', function(data, err) {15  console.log(data);16});17var wpt = require('wpt');18wpt.prefixedHandler('Test', 'test', 'test', 'test', 'test', 'test', function(data, err) {19  console.log(data);20});21var wpt = require('wpt');22wpt.prefixedHandler('Test', 'test', 'test', 'test', 'test', 'test', 'test', function(data, err) {23  console.log(data);24});25var wpt = require('wpt');26wpt.prefixedHandler('Test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', function(data, err) {27  console.log(data);28});29var wpt = require('wpt');30wpt.prefixedHandler('Test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', function(data, err) {31  console.log(data);32});33var wpt = require('wpt');34wpt.prefixedHandler('Test', 'test', 'test

Using AI Code Generation

1function test () {2    wptouchPro.prefixedHandler('transitionend', function () {3        alert('transitionend');4    });5}6wptouchPro.prefixedHandler('transitionend', function () {7    alert('transitionend');8});

Using AI Code Generation

1var wptb = require('wptb');2var handler = wptb.prefixedHandler('wptb_');3handler('test', function() {4  console.log('Test callback');5});6var wptb = require('wptb');7var handler = wptb.prefixedHandler('wptb_');8handler('test', function() {9  console.log('Test callback');10});11var wptb = require('wptb');12var handler = wptb.prefixedHandler('wptb_');13handler('test', function() {14  console.log('Test callback');15});16var wptb = require('wptb');17var handler = wptb.prefixedHandler('wptb_');18var eventEmitter = new wptb.EventEmitter();19eventEmitter.on('test', function() {20  console.log('Test callback');21});22handler('test', function() {23  eventEmitter.emit('test');24});25handler('test', function() {26  eventEmitter.emit('test');27});28handler('test', function() {29  eventEmitter.emit('test');30});

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.