How to use resolveTransitionProps method in Playwright Internal
Best JavaScript code snippet using playwright-internal
runtime-dom.cjs.js
Source:runtime-dom.cjs.js 
...419const TRANSITION = 'transition';420const ANIMATION = 'animation';421// DOM Transition is a higher-order-component based on the platform-agnostic422// base Transition component, with DOM-specific logic.423const Transition = (props, { slots }) => runtimeCore.h(runtimeCore.BaseTransition, resolveTransitionProps(props), slots);424Transition.displayName = 'Transition';425const DOMTransitionPropsValidators = {426 name: String,427 type: String,428 css: {429 type: Boolean,430 default: true431 },432 duration: [String, Number, Object],433 enterFromClass: String,434 enterActiveClass: String,435 enterToClass: String,436 appearFromClass: String,437 appearActiveClass: String,438 appearToClass: String,439 leaveFromClass: String,440 leaveActiveClass: String,441 leaveToClass: String442};443const TransitionPropsValidators = (Transition.props = /*#__PURE__*/ shared.extend({}, runtimeCore.BaseTransition.props, DOMTransitionPropsValidators));444function resolveTransitionProps(rawProps) {445 let { name = 'v', type, css = true, duration, enterFromClass = `${name}-enter-from`, enterActiveClass = `${name}-enter-active`, enterToClass = `${name}-enter-to`, appearFromClass = enterFromClass, appearActiveClass = enterActiveClass, appearToClass = enterToClass, leaveFromClass = `${name}-leave-from`, leaveActiveClass = `${name}-leave-active`, leaveToClass = `${name}-leave-to` } = rawProps;446 const baseProps = {};447 for (const key in rawProps) {448 if (!(key in DOMTransitionPropsValidators)) {449 baseProps[key] = rawProps[key];450 }451 }452 if (!css) {453 return baseProps;454 }455 const durations = normalizeDuration(duration);456 const enterDuration = durations && durations[0];457 const leaveDuration = durations && durations[1];458 const { onBeforeEnter, onEnter, onEnterCancelled, onLeave, onLeaveCancelled, onBeforeAppear = onBeforeEnter, onAppear = onEnter, onAppearCancelled = onEnterCancelled } = baseProps;459 const finishEnter = (el, isAppear, done) => {460 removeTransitionClass(el, isAppear ? appearToClass : enterToClass);461 removeTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass);462 done && done();463 };464 const finishLeave = (el, done) => {465 removeTransitionClass(el, leaveToClass);466 removeTransitionClass(el, leaveActiveClass);467 done && done();468 };469 const makeEnterHook = (isAppear) => {470 return (el, done) => {471 const hook = isAppear ? onAppear : onEnter;472 const resolve = () => finishEnter(el, isAppear, done);473 hook && hook(el, resolve);474 nextFrame(() => {475 removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass);476 addTransitionClass(el, isAppear ? appearToClass : enterToClass);477 if (!(hook && hook.length > 1)) {478 whenTransitionEnds(el, type, enterDuration, resolve);479 }480 });481 };482 };483 return shared.extend(baseProps, {484 onBeforeEnter(el) {485 onBeforeEnter && onBeforeEnter(el);486 addTransitionClass(el, enterFromClass);487 addTransitionClass(el, enterActiveClass);488 },489 onBeforeAppear(el) {490 onBeforeAppear && onBeforeAppear(el);491 addTransitionClass(el, appearFromClass);492 addTransitionClass(el, appearActiveClass);493 },494 onEnter: makeEnterHook(false),495 onAppear: makeEnterHook(true),496 onLeave(el, done) {497 const resolve = () => finishLeave(el, done);498 addTransitionClass(el, leaveFromClass);499 // force reflow so *-leave-from classes immediately take effect (#2593)500 forceReflow();501 addTransitionClass(el, leaveActiveClass);502 nextFrame(() => {503 removeTransitionClass(el, leaveFromClass);504 addTransitionClass(el, leaveToClass);505 if (!(onLeave && onLeave.length > 1)) {506 whenTransitionEnds(el, type, leaveDuration, resolve);507 }508 });509 onLeave && onLeave(el, resolve);510 },511 onEnterCancelled(el) {512 finishEnter(el, false);513 onEnterCancelled && onEnterCancelled(el);514 },515 onAppearCancelled(el) {516 finishEnter(el, true);517 onAppearCancelled && onAppearCancelled(el);518 },519 onLeaveCancelled(el) {520 finishLeave(el);521 onLeaveCancelled && onLeaveCancelled(el);522 }523 });524}525function normalizeDuration(duration) {526 if (duration == null) {527 return null;528 }529 else if (shared.isObject(duration)) {530 return [NumberOf(duration.enter), NumberOf(duration.leave)];531 }532 else {533 const n = NumberOf(duration);534 return [n, n];535 }536}537function NumberOf(val) {538 const res = shared.toNumber(val);539 validateDuration(res);540 return res;541}542function validateDuration(val) {543 if (typeof val !== 'number') {544 runtimeCore.warn(`<transition> explicit duration is not a valid number - ` +545 `got ${JSON.stringify(val)}.`);546 }547 else if (isNaN(val)) {548 runtimeCore.warn(`<transition> explicit duration is NaN - ` +549 'the duration expression might be incorrect.');550 }551}552function addTransitionClass(el, cls) {553 cls.split(/\s+/).forEach(c => c && el.classList.add(c));554 (el._vtc ||555 (el._vtc = new Set())).add(cls);556}557function removeTransitionClass(el, cls) {558 cls.split(/\s+/).forEach(c => c && el.classList.remove(c));559 const { _vtc } = el;560 if (_vtc) {561 _vtc.delete(cls);562 if (!_vtc.size) {563 el._vtc = undefined;564 }565 }566}567function nextFrame(cb) {568 requestAnimationFrame(() => {569 requestAnimationFrame(cb);570 });571}572let endId = 0;573function whenTransitionEnds(el, expectedType, explicitTimeout, resolve) {574 const id = (el._endId = ++endId);575 const resolveIfNotStale = () => {576 if (id === el._endId) {577 resolve();578 }579 };580 if (explicitTimeout) {581 return setTimeout(resolveIfNotStale, explicitTimeout);582 }583 const { type, timeout, propCount } = getTransitionInfo(el, expectedType);584 if (!type) {585 return resolve();586 }587 const endEvent = type + 'end';588 let ended = 0;589 const end = () => {590 el.removeEventListener(endEvent, onEnd);591 resolveIfNotStale();592 };593 const onEnd = (e) => {594 if (e.target === el && ++ended >= propCount) {595 end();596 }597 };598 setTimeout(() => {599 if (ended < propCount) {600 end();601 }602 }, timeout + 1);603 el.addEventListener(endEvent, onEnd);604}605function getTransitionInfo(el, expectedType) {606 const styles = window.getComputedStyle(el);607 // JSDOM may return undefined for transition properties608 const getStyleProperties = (key) => (styles[key] || '').split(', ');609 const transitionDelays = getStyleProperties(TRANSITION + 'Delay');610 const transitionDurations = getStyleProperties(TRANSITION + 'Duration');611 const transitionTimeout = getTimeout(transitionDelays, transitionDurations);612 const animationDelays = getStyleProperties(ANIMATION + 'Delay');613 const animationDurations = getStyleProperties(ANIMATION + 'Duration');614 const animationTimeout = getTimeout(animationDelays, animationDurations);615 let type = null;616 let timeout = 0;617 let propCount = 0;618 /* istanbul ignore if */619 if (expectedType === TRANSITION) {620 if (transitionTimeout > 0) {621 type = TRANSITION;622 timeout = transitionTimeout;623 propCount = transitionDurations.length;624 }625 }626 else if (expectedType === ANIMATION) {627 if (animationTimeout > 0) {628 type = ANIMATION;629 timeout = animationTimeout;630 propCount = animationDurations.length;631 }632 }633 else {634 timeout = Math.max(transitionTimeout, animationTimeout);635 type =636 timeout > 0637 ? transitionTimeout > animationTimeout638 ? TRANSITION639 : ANIMATION640 : null;641 propCount = type642 ? type === TRANSITION643 ? transitionDurations.length644 : animationDurations.length645 : 0;646 }647 const hasTransform = type === TRANSITION &&648 /\b(transform|all)(,|$)/.test(styles[TRANSITION + 'Property']);649 return {650 type,651 timeout,652 propCount,653 hasTransform654 };655}656function getTimeout(delays, durations) {657 while (delays.length < durations.length) {658 delays = delays.concat(delays);659 }660 return Math.max(...durations.map((d, i) => toMs(d) + toMs(delays[i])));661}662// Old versions of Chromium (below 61.0.3163.100) formats floating pointer663// numbers in a locale-dependent way, using a comma instead of a dot.664// If comma is not replaced with a dot, the input will be rounded down665// (i.e. acting as a floor function) causing unexpected behaviors666function toMs(s) {667 return Number(s.slice(0, -1).replace(',', '.')) * 1000;668}669// synchronously force layout to put elements into a certain state670function forceReflow() {671 return document.body.offsetHeight;672}673const positionMap = new WeakMap();674const newPositionMap = new WeakMap();675const TransitionGroupImpl = {676 name: 'TransitionGroup',677 props: /*#__PURE__*/ shared.extend({}, TransitionPropsValidators, {678 tag: String,679 moveClass: String680 }),681 setup(props, { slots }) {682 const instance = runtimeCore.getCurrentInstance();683 const state = runtimeCore.useTransitionState();684 let prevChildren;685 let children;686 runtimeCore.onUpdated(() => {687 // children is guaranteed to exist after initial render688 if (!prevChildren.length) {689 return;690 }691 const moveClass = props.moveClass || `${props.name || 'v'}-move`;692 if (!hasCSSTransform(prevChildren[0].el, instance.vnode.el, moveClass)) {693 return;694 }695 // we divide the work into three loops to avoid mixing DOM reads and writes696 // in each iteration - which helps prevent layout thrashing.697 prevChildren.forEach(callPendingCbs);698 prevChildren.forEach(recordPosition);699 const movedChildren = prevChildren.filter(applyTranslation);700 // force reflow to put everything in position701 forceReflow();702 movedChildren.forEach(c => {703 const el = c.el;704 const style = el.style;705 addTransitionClass(el, moveClass);706 style.transform = style.webkitTransform = style.transitionDuration = '';707 const cb = (el._moveCb = (e) => {708 if (e && e.target !== el) {709 return;710 }711 if (!e || /transform$/.test(e.propertyName)) {712 el.removeEventListener('transitionend', cb);713 el._moveCb = null;714 removeTransitionClass(el, moveClass);715 }716 });717 el.addEventListener('transitionend', cb);718 });719 });720 return () => {721 const rawProps = runtimeCore.toRaw(props);722 const cssTransitionProps = resolveTransitionProps(rawProps);723 const tag = rawProps.tag || runtimeCore.Fragment;724 prevChildren = children;725 children = slots.default ? runtimeCore.getTransitionRawChildren(slots.default()) : [];726 for (let i = 0; i < children.length; i++) {727 const child = children[i];728 if (child.key != null) {729 runtimeCore.setTransitionHooks(child, runtimeCore.resolveTransitionHooks(child, cssTransitionProps, state, instance));730 }731 else {732 runtimeCore.warn(`<TransitionGroup> children must be keyed.`);733 }734 }735 if (prevChildren) {736 for (let i = 0; i < prevChildren.length; i++) {...
runtime-dom.esm-bundler.js
Source:runtime-dom.esm-bundler.js
...339const TRANSITION = 'transition';340const ANIMATION = 'animation';341// DOM Transition is a higher-order-component based on the platform-agnostic342// base Transition component, with DOM-specific logic.343const Transition = (props, { slots }) => h(BaseTransition, resolveTransitionProps(props), slots);344const TransitionPropsValidators = (Transition.props = {345 ...BaseTransition.props,346 name: String,347 type: String,348 css: {349 type: Boolean,350 default: true351 },352 duration: [String, Number, Object],353 enterFromClass: String,354 enterActiveClass: String,355 enterToClass: String,356 appearFromClass: String,357 appearActiveClass: String,358 appearToClass: String,359 leaveFromClass: String,360 leaveActiveClass: String,361 leaveToClass: String362});363function resolveTransitionProps({ name = 'v', type, css = true, duration, enterFromClass = `${name}-enter-from`, enterActiveClass = `${name}-enter-active`, enterToClass = `${name}-enter-to`, appearFromClass = enterFromClass, appearActiveClass = enterActiveClass, appearToClass = enterToClass, leaveFromClass = `${name}-leave-from`, leaveActiveClass = `${name}-leave-active`, leaveToClass = `${name}-leave-to`, ...baseProps }) {364 if (!css) {365 return baseProps;366 }367 const instance = getCurrentInstance();368 const durations = normalizeDuration(duration);369 const enterDuration = durations && durations[0];370 const leaveDuration = durations && durations[1];371 const { appear, onBeforeEnter, onEnter, onLeave } = baseProps;372 // is appearing373 if (appear && !getCurrentInstance().isMounted) {374 enterFromClass = appearFromClass;375 enterActiveClass = appearActiveClass;376 enterToClass = appearToClass;377 }378 const finishEnter = (el, done) => {379 removeTransitionClass(el, enterToClass);380 removeTransitionClass(el, enterActiveClass);381 done && done();382 };383 const finishLeave = (el, done) => {384 removeTransitionClass(el, leaveToClass);385 removeTransitionClass(el, leaveActiveClass);386 done && done();387 };388 // only needed for user hooks called in nextFrame389 // sync errors are already handled by BaseTransition390 function callHookWithErrorHandling(hook, args) {391 callWithAsyncErrorHandling(hook, instance, 9 /* TRANSITION_HOOK */, args);392 }393 return {394 ...baseProps,395 onBeforeEnter(el) {396 onBeforeEnter && onBeforeEnter(el);397 addTransitionClass(el, enterActiveClass);398 addTransitionClass(el, enterFromClass);399 },400 onEnter(el, done) {401 nextFrame(() => {402 const resolve = () => finishEnter(el, done);403 onEnter && callHookWithErrorHandling(onEnter, [el, resolve]);404 removeTransitionClass(el, enterFromClass);405 addTransitionClass(el, enterToClass);406 if (!(onEnter && onEnter.length > 1)) {407 if (enterDuration) {408 setTimeout(resolve, enterDuration);409 }410 else {411 whenTransitionEnds(el, type, resolve);412 }413 }414 });415 },416 onLeave(el, done) {417 addTransitionClass(el, leaveActiveClass);418 addTransitionClass(el, leaveFromClass);419 nextFrame(() => {420 const resolve = () => finishLeave(el, done);421 onLeave && callHookWithErrorHandling(onLeave, [el, resolve]);422 removeTransitionClass(el, leaveFromClass);423 addTransitionClass(el, leaveToClass);424 if (!(onLeave && onLeave.length > 1)) {425 if (leaveDuration) {426 setTimeout(resolve, leaveDuration);427 }428 else {429 whenTransitionEnds(el, type, resolve);430 }431 }432 });433 },434 onEnterCancelled: finishEnter,435 onLeaveCancelled: finishLeave436 };437}438function normalizeDuration(duration) {439 if (duration == null) {440 return null;441 }442 else if (isObject(duration)) {443 return [toNumber(duration.enter), toNumber(duration.leave)];444 }445 else {446 const n = toNumber(duration);447 return [n, n];448 }449}450function toNumber(val) {451 const res = Number(val || 0);452 if ((process.env.NODE_ENV !== 'production'))453 validateDuration(res);454 return res;455}456function validateDuration(val) {457 if (typeof val !== 'number') {458 warn(`<transition> explicit duration is not a valid number - ` +459 `got ${JSON.stringify(val)}.`);460 }461 else if (isNaN(val)) {462 warn(`<transition> explicit duration is NaN - ` +463 'the duration expression might be incorrect.');464 }465}466function addTransitionClass(el, cls) {467 cls.split(/\s+/).forEach(c => c && el.classList.add(c));468 (el._vtc ||469 (el._vtc = new Set())).add(cls);470}471function removeTransitionClass(el, cls) {472 cls.split(/\s+/).forEach(c => c && el.classList.remove(c));473 const { _vtc } = el;474 if (_vtc) {475 _vtc.delete(cls);476 if (!_vtc.size) {477 el._vtc = undefined;478 }479 }480}481function nextFrame(cb) {482 requestAnimationFrame(() => {483 requestAnimationFrame(cb);484 });485}486function whenTransitionEnds(el, expectedType, cb) {487 const { type, timeout, propCount } = getTransitionInfo(el, expectedType);488 if (!type) {489 return cb();490 }491 const endEvent = type + 'end';492 let ended = 0;493 const end = () => {494 el.removeEventListener(endEvent, onEnd);495 cb();496 };497 const onEnd = (e) => {498 if (e.target === el) {499 if (++ended >= propCount) {500 end();501 }502 }503 };504 setTimeout(() => {505 if (ended < propCount) {506 end();507 }508 }, timeout + 1);509 el.addEventListener(endEvent, onEnd);510}511function getTransitionInfo(el, expectedType) {512 const styles = window.getComputedStyle(el);513 // JSDOM may return undefined for transition properties514 const getStyleProperties = (key) => (styles[key] || '').split(', ');515 const transitionDelays = getStyleProperties(TRANSITION + 'Delay');516 const transitionDurations = getStyleProperties(TRANSITION + 'Duration');517 const transitionTimeout = getTimeout(transitionDelays, transitionDurations);518 const animationDelays = getStyleProperties(ANIMATION + 'Delay');519 const animationDurations = getStyleProperties(ANIMATION + 'Duration');520 const animationTimeout = getTimeout(animationDelays, animationDurations);521 let type = null;522 let timeout = 0;523 let propCount = 0;524 /* istanbul ignore if */525 if (expectedType === TRANSITION) {526 if (transitionTimeout > 0) {527 type = TRANSITION;528 timeout = transitionTimeout;529 propCount = transitionDurations.length;530 }531 }532 else if (expectedType === ANIMATION) {533 if (animationTimeout > 0) {534 type = ANIMATION;535 timeout = animationTimeout;536 propCount = animationDurations.length;537 }538 }539 else {540 timeout = Math.max(transitionTimeout, animationTimeout);541 type =542 timeout > 0543 ? transitionTimeout > animationTimeout544 ? TRANSITION545 : ANIMATION546 : null;547 propCount = type548 ? type === TRANSITION549 ? transitionDurations.length550 : animationDurations.length551 : 0;552 }553 const hasTransform = type === TRANSITION &&554 /\b(transform|all)(,|$)/.test(styles[TRANSITION + 'Property']);555 return {556 type,557 timeout,558 propCount,559 hasTransform560 };561}562function getTimeout(delays, durations) {563 while (delays.length < durations.length) {564 delays = delays.concat(delays);565 }566 return Math.max(...durations.map((d, i) => toMs(d) + toMs(delays[i])));567}568// Old versions of Chromium (below 61.0.3163.100) formats floating pointer569// numbers in a locale-dependent way, using a comma instead of a dot.570// If comma is not replaced with a dot, the input will be rounded down571// (i.e. acting as a floor function) causing unexpected behaviors572function toMs(s) {573 return Number(s.slice(0, -1).replace(',', '.')) * 1000;574}575const reactiveToRaw = new WeakMap();576const readonlyToRaw = new WeakMap();577function toRaw(observed) {578 observed = readonlyToRaw.get(observed) || observed;579 return reactiveToRaw.get(observed) || observed;580}581const positionMap = new WeakMap();582const newPositionMap = new WeakMap();583const TransitionGroupImpl = {584 props: {585 ...TransitionPropsValidators,586 tag: String,587 moveClass: String588 },589 setup(props, { slots }) {590 const instance = getCurrentInstance();591 const state = useTransitionState();592 let prevChildren;593 let children;594 let hasMove = null;595 onUpdated(() => {596 // children is guaranteed to exist after initial render597 if (!prevChildren.length) {598 return;599 }600 const moveClass = props.moveClass || `${props.name || 'v'}-move`;601 // Check if move transition is needed. This check is cached per-instance.602 hasMove =603 hasMove === null604 ? (hasMove = hasCSSTransform(prevChildren[0].el, instance.vnode.el, moveClass))605 : hasMove;606 if (!hasMove) {607 return;608 }609 // we divide the work into three loops to avoid mixing DOM reads and writes610 // in each iteration - which helps prevent layout thrashing.611 prevChildren.forEach(callPendingCbs);612 prevChildren.forEach(recordPosition);613 const movedChildren = prevChildren.filter(applyTranslation);614 // force reflow to put everything in position615 forceReflow();616 movedChildren.forEach(c => {617 const el = c.el;618 const style = el.style;619 addTransitionClass(el, moveClass);620 style.transform = style.webkitTransform = style.transitionDuration = '';621 const cb = (el._moveCb = (e) => {622 if (e && e.target !== el) {623 return;624 }625 if (!e || /transform$/.test(e.propertyName)) {626 el.removeEventListener('transitionend', cb);627 el._moveCb = null;628 removeTransitionClass(el, moveClass);629 }630 });631 el.addEventListener('transitionend', cb);632 });633 });634 return () => {635 const rawProps = toRaw(props);636 const cssTransitionProps = resolveTransitionProps(rawProps);637 const tag = rawProps.tag || Fragment;638 prevChildren = children;639 children = getTransitionRawChildren(slots.default ? slots.default() : []);640 for (let i = 0; i < children.length; i++) {641 const child = children[i];642 if (child.key != null) {643 setTransitionHooks(child, resolveTransitionHooks(child, cssTransitionProps, state, instance));644 }645 else if ((process.env.NODE_ENV !== 'production') && child.type !== Comment) {646 warn(`<TransitionGroup> children must be keyed.`);647 }648 }649 if (prevChildren) {650 for (let i = 0; i < prevChildren.length; i++) {
...
runtime-dom.cjs.prod.js
Source:runtime-dom.cjs.prod.js
...689const TRANSITION = 'transition';690const ANIMATION = 'animation';691// DOM Transition is a higher-order-component based on the platform-agnostic692// base Transition component, with DOM-specific logic.693const Transition = (props, { slots }) => runtimeCore.h(runtimeCore.BaseTransition, resolveTransitionProps(props), slots);694const TransitionPropsValidators = {695 ...runtimeCore.BaseTransition.props,696 name: String,697 type: String,698 css: {699 type: Boolean,700 default: true701 },702 duration: Object,703 enterFromClass: String,704 enterActiveClass: String,705 enterToClass: String,706 appearFromClass: String,707 appearActiveClass: String,708 appearToClass: String,709 leaveFromClass: String,710 leaveActiveClass: String,711 leaveToClass: String712};713function resolveTransitionProps({ name = 'v', type, css = true, duration, enterFromClass = `${name}-enter-from`, enterActiveClass = `${name}-enter-active`, enterToClass = `${name}-enter-to`, appearFromClass = enterFromClass, appearActiveClass = enterActiveClass, appearToClass = enterToClass, leaveFromClass = `${name}-leave-from`, leaveActiveClass = `${name}-leave-active`, leaveToClass = `${name}-leave-to`, ...baseProps }) {714 if (!css) {715 return baseProps;716 }717 const instance = runtimeCore.getCurrentInstance();718 const durations = normalizeDuration(duration);719 const enterDuration = durations && durations[0];720 const leaveDuration = durations && durations[1];721 const { appear, onBeforeEnter, onEnter, onLeave } = baseProps;722 // is appearing723 if (appear && !runtimeCore.getCurrentInstance().isMounted) {724 enterFromClass = appearFromClass;725 enterActiveClass = appearActiveClass;726 enterToClass = appearToClass;727 }728 const finishEnter = (el, done) => {729 removeTransitionClass(el, enterToClass);730 removeTransitionClass(el, enterActiveClass);731 done && done();732 };733 const finishLeave = (el, done) => {734 removeTransitionClass(el, leaveToClass);735 removeTransitionClass(el, leaveActiveClass);736 done && done();737 };738 // only needed for user hooks called in nextFrame739 // sync errors are already handled by BaseTransition740 function callHookWithErrorHandling(hook, args) {741 runtimeCore.callWithAsyncErrorHandling(hook, instance, 8 /* TRANSITION_HOOK */, args);742 }743 return {744 ...baseProps,745 onBeforeEnter(el) {746 onBeforeEnter && onBeforeEnter(el);747 addTransitionClass(el, enterActiveClass);748 addTransitionClass(el, enterFromClass);749 },750 onEnter(el, done) {751 nextFrame(() => {752 const resolve = () => finishEnter(el, done);753 onEnter && callHookWithErrorHandling(onEnter, [el, resolve]);754 removeTransitionClass(el, enterFromClass);755 addTransitionClass(el, enterToClass);756 if (!(onEnter && onEnter.length > 1)) {757 if (enterDuration) {758 setTimeout(resolve, enterDuration);759 }760 else {761 whenTransitionEnds(el, type, resolve);762 }763 }764 });765 },766 onLeave(el, done) {767 addTransitionClass(el, leaveActiveClass);768 addTransitionClass(el, leaveFromClass);769 nextFrame(() => {770 const resolve = () => finishLeave(el, done);771 onLeave && callHookWithErrorHandling(onLeave, [el, resolve]);772 removeTransitionClass(el, leaveFromClass);773 addTransitionClass(el, leaveToClass);774 if (!(onLeave && onLeave.length > 1)) {775 if (leaveDuration) {776 setTimeout(resolve, leaveDuration);777 }778 else {779 whenTransitionEnds(el, type, resolve);780 }781 }782 });783 },784 onEnterCancelled: finishEnter,785 onLeaveCancelled: finishLeave786 };787}788function normalizeDuration(duration) {789 if (duration == null) {790 return null;791 }792 else if (isObject(duration)) {793 return [toNumber$1(duration.enter), toNumber$1(duration.leave)];794 }795 else {796 const n = toNumber$1(duration);797 return [n, n];798 }799}800function toNumber$1(val) {801 const res = Number(val || 0);802 return res;803}804function addTransitionClass(el, cls) {805 cls.split(/\s+/).forEach(c => c && el.classList.add(c));806 (el._vtc || (el._vtc = new Set())).add(cls);807}808function removeTransitionClass(el, cls) {809 cls.split(/\s+/).forEach(c => c && el.classList.remove(c));810 if (el._vtc) {811 el._vtc.delete(cls);812 if (!el._vtc.size) {813 el._vtc = undefined;814 }815 }816}817function nextFrame(cb) {818 requestAnimationFrame(() => {819 requestAnimationFrame(cb);820 });821}822function whenTransitionEnds(el, expectedType, cb) {823 const { type, timeout, propCount } = getTransitionInfo(el, expectedType);824 if (!type) {825 return cb();826 }827 const endEvent = type + 'end';828 let ended = 0;829 const end = () => {830 el.removeEventListener(endEvent, onEnd);831 cb();832 };833 const onEnd = (e) => {834 if (e.target === el) {835 if (++ended >= propCount) {836 end();837 }838 }839 };840 setTimeout(() => {841 if (ended < propCount) {842 end();843 }844 }, timeout + 1);845 el.addEventListener(endEvent, onEnd);846}847function getTransitionInfo(el, expectedType) {848 const styles = window.getComputedStyle(el);849 // JSDOM may return undefined for transition properties850 const getStyleProperties = (key) => (styles[key] || '').split(', ');851 const transitionDelays = getStyleProperties(TRANSITION + 'Delay');852 const transitionDurations = getStyleProperties(TRANSITION + 'Duration');853 const transitionTimeout = getTimeout(transitionDelays, transitionDurations);854 const animationDelays = getStyleProperties(ANIMATION + 'Delay');855 const animationDurations = getStyleProperties(ANIMATION + 'Duration');856 const animationTimeout = getTimeout(animationDelays, animationDurations);857 let type = null;858 let timeout = 0;859 let propCount = 0;860 /* istanbul ignore if */861 if (expectedType === TRANSITION) {862 if (transitionTimeout > 0) {863 type = TRANSITION;864 timeout = transitionTimeout;865 propCount = transitionDurations.length;866 }867 }868 else if (expectedType === ANIMATION) {869 if (animationTimeout > 0) {870 type = ANIMATION;871 timeout = animationTimeout;872 propCount = animationDurations.length;873 }874 }875 else {876 timeout = Math.max(transitionTimeout, animationTimeout);877 type =878 timeout > 0879 ? transitionTimeout > animationTimeout880 ? TRANSITION881 : ANIMATION882 : null;883 propCount = type884 ? type === TRANSITION885 ? transitionDurations.length886 : animationDurations.length887 : 0;888 }889 const hasTransform = type === TRANSITION &&890 /\b(transform|all)(,|$)/.test(styles[TRANSITION + 'Property']);891 return {892 type,893 timeout,894 propCount,895 hasTransform896 };897}898function getTimeout(delays, durations) {899 while (delays.length < durations.length) {900 delays = delays.concat(delays);901 }902 return Math.max(...durations.map((d, i) => toMs(d) + toMs(delays[i])));903}904// Old versions of Chromium (below 61.0.3163.100) formats floating pointer905// numbers in a locale-dependent way, using a comma instead of a dot.906// If comma is not replaced with a dot, the input will be rounded down907// (i.e. acting as a floor function) causing unexpected behaviors908function toMs(s) {909 return Number(s.slice(0, -1).replace(',', '.')) * 1000;910}911const positionMap = new WeakMap();912const newPositionMap = new WeakMap();913const TransitionGroupImpl = {914 setup(props, { slots }) {915 const instance = runtimeCore.getCurrentInstance();916 const state = runtimeCore.useTransitionState();917 let prevChildren;918 let children;919 let hasMove = null;920 runtimeCore.onUpdated(() => {921 // children is guaranteed to exist after initial render922 if (!prevChildren.length) {923 return;924 }925 const moveClass = props.moveClass || `${props.name || 'v'}-move`;926 // Check if move transition is needed. This check is cached per-instance.927 hasMove =928 hasMove === null929 ? (hasMove = hasCSSTransform(prevChildren[0].el, instance.vnode.el, moveClass))930 : hasMove;931 if (!hasMove) {932 return;933 }934 // we divide the work into three loops to avoid mixing DOM reads and writes935 // in each iteration - which helps prevent layout thrashing.936 prevChildren.forEach(callPendingCbs);937 prevChildren.forEach(recordPosition);938 const movedChildren = prevChildren.filter(applyTranslation);939 // force reflow to put everything in position940 forceReflow();941 movedChildren.forEach(c => {942 const el = c.el;943 const style = el.style;944 addTransitionClass(el, moveClass);945 style.transform = style.WebkitTransform = style.transitionDuration = '';946 const cb = (el._moveCb = (e) => {947 if (e && e.target !== el) {948 return;949 }950 if (!e || /transform$/.test(e.propertyName)) {951 el.removeEventListener('transitionend', cb);952 el._moveCb = null;953 removeTransitionClass(el, moveClass);954 }955 });956 el.addEventListener('transitionend', cb);957 });958 });959 return () => {960 const rawProps = runtimeCore.toRaw(props);961 const cssTransitionProps = resolveTransitionProps(rawProps);962 const tag = rawProps.tag || runtimeCore.Fragment;963 prevChildren = children;964 children = slots.default ? slots.default() : [];965 // handle fragment children case, e.g. v-for966 if (children.length === 1 && children[0].type === runtimeCore.Fragment) {967 children = children[0].children;968 }969 for (let i = 0; i < children.length; i++) {970 const child = children[i];971 if (child.key != null) {972 runtimeCore.setTransitionHooks(child, runtimeCore.resolveTransitionHooks(child, cssTransitionProps, state, instance));973 }974 }975 if (prevChildren) {
...
crVue.js
Source:crVue.js
...440const TRANSITION = 'transition';441const ANIMATION = 'animation';442// DOM Transition is a higher-order-component based on the platform-agnostic443// base Transition component, with DOM-specific logic.444const Transition = (props, { slots }) => h(BaseTransition, resolveTransitionProps(props), slots);445Transition.displayName = 'Transition';446const DOMTransitionPropsValidators = {447 name: String,448 type: String,449 css: {450 type: Boolean,451 default: true452 },453 duration: [String, Number, Object],454 enterFromClass: String,455 enterActiveClass: String,456 enterToClass: String,457 appearFromClass: String,458 appearActiveClass: String,459 appearToClass: String,460 leaveFromClass: String,461 leaveActiveClass: String,462 leaveToClass: String463};464Transition.props = { ...BaseTransition.props, ...DOMTransitionPropsValidators };465function resolveTransitionProps(rawProps) {466 const { name = 'v', type, css = true, duration, enterFromClass = `${name}-enter-from`, enterActiveClass = `${name}-enter-active`, enterToClass = `${name}-enter-to`, appearFromClass = enterFromClass, appearActiveClass = enterActiveClass, appearToClass = enterToClass, leaveFromClass = `${name}-leave-from`, leaveActiveClass = `${name}-leave-active`, leaveToClass = `${name}-leave-to` } = rawProps;467 const baseProps = {};468 for (const key in rawProps) {469 if (!(key in DOMTransitionPropsValidators)) {470 baseProps[key] = rawProps[key];471 }472 }473 if (!css) {474 return baseProps;475 }476 const durations = normalizeDuration(duration);477 const enterDuration = durations && durations[0];478 const leaveDuration = durations && durations[1];479 const { onBeforeEnter, onEnter, onEnterCancelled, onLeave, onLeaveCancelled, onBeforeAppear = onBeforeEnter, onAppear = onEnter, onAppearCancelled = onEnterCancelled } = baseProps;...
Transition.js
Source:Transition.js
...4const ANIMATION = 'animation'5// DOM Transition is a higher-order-component based on the platform-agnostic6// base Transition component, with DOM-specific logic.7export const Transition = (props, { slots }) =>8 h(BaseTransition, resolveTransitionProps(props), slots)9Transition.displayName = 'Transition'10const DOMTransitionPropsValidators = {11 name: String,12 type: String,13 css: {14 type: Boolean,15 default: true16 },17 duration: [String, Number, Object],18 enterFromClass: String,19 enterActiveClass: String,20 enterToClass: String,21 appearFromClass: String,22 appearActiveClass: String,...
audio-node.js
Source:audio-node.js
...90 componentWillUnmount() {91 this.node.disconnect();92 this.context.nodes.delete(this.props.identifier);93 }94 resolveTransitionProps(props, propName) {95 const transitionTime = typeof props.transitionTime === 'number'96 ? props.transitionTime97 : props.transitionTime ? props.transitionTime[propName] : null;98 const transitionCurve = typeof props.transitionCurve === 'string'99 ? props.transitionCurve100 : props.transitionCurve ? props.transitionCurve[propName] : null;101 return [ transitionTime, transitionCurve ];102 }103 // updates only Web Audio-related parameters104 // (both AudioParams and regular properties)105 updateParams(props) {106 if (!this.params) return;107 for (let p in this.params) {108 if (!(p in props)) continue;109 const [ transitionTime, transitionCurve ] = this.resolveTransitionProps(props, p);110 if (this.node[p] instanceof AudioParam) {111 this.setParam(this.node[p], props[p], transitionTime, transitionCurve);112 } else if (this.node.parameters && this.node.parameters.has(p)) {113 let param = this.node.parameters.get(p);114 this.setParam(param, props[p], transitionTime, transitionCurve);115 } else if (p in this.node) {116 // some browsers (e.g. Chrome) will try to set channelCount and throw an error117 // since we can't use Object.getOwnPropertyDescriptor on the AudioNodes118 // we simply wrap the action in a try-catch119 try {120 if (this.node[p] !== props[p]) this.node[p] = props[p];121 } catch(e) {122 console.warn(`Tried setting ${p} on node`, this.node); // eslint-disable-line no-console123 }...
TransitionGroup.js
Source:TransitionGroup.js
...66 })67 })68 return () => {69 const rawProps = toRaw(props)70 const cssTransitionProps = resolveTransitionProps(rawProps)71 let tag = rawProps.tag || Fragment72 prevChildren = children73 children = slots.default ? getTransitionRawChildren(slots.default()) : []74 for (let i = 0; i < children.length; i++) {75 const child = children[i]76 if (child.key != null) {77 setTransitionHooks(78 child,79 resolveTransitionHooks(child, cssTransitionProps, state, instance)80 )81 }82 }83 if (prevChildren) {84 for (let i = 0; i < prevChildren.length; i++) {...
transition2.js
Source:transition2.js
...18 leavingVNode.el._leaveCb()19 }20 callHook(hook, [el])21}22function resolveTransitionProps(rawProps) {23 let { name = 'v', type, css = true, duration, enterFromClass = `${name}-enter-from`, enterActiveClass = `${name}-enter-active`, enterToClass = `${name}-enter-to`, appearFromClass = enterFromClass, appearActiveClass = enterActiveClass, appearToClass = enterToClass, leaveFromClass = `${name}-leave-from`, leaveActiveClass = `${name}-leave-active`, leaveToClass = `${name}-leave-to` } = rawProps24 const baseProps = {}25 for (const key in rawProps) {26 if (!(key in DOMTransitionPropsValidators)) {27 baseProps[key] = rawProps[key]28 }29 }30 if (!css) {31 return baseProps32 }33 const durations = normalizeDuration(duration)34 const enterDuration = durations && durations[0]35 const leaveDuration = durations && durations[1]36 const { onBeforeEnter, onEnter, onEnterCancelled, onLeave, onLeaveCancelled, onBeforeAppear = onBeforeEnter, onAppear = onEnter, onAppearCancelled = onEnterCancelled } = baseProps...
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 const transitionProps = await page._delegate.resolveTransitionProps({7 });8 console.log(transitionProps);9 await browser.close();10})();11{ name: 'fade', duration: 2000, delay: 1000 }
Using AI Code Generation
1const { resolveTransitionProps } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');2const { Transition } = require('playwright/lib/server/supplements/recorder/transition.js');3const transition = new Transition({4 args: {},5 options: {},6 metadata: {},7});8const result = resolveTransitionProps(transition);9console.log('result', result);
Using AI Code Generation
1const { resolveTransitionProps } = require('playwright/lib/server/frames');2const { Frame } = require('playwright/lib/server/frames');3const { helper } = require('playwright/lib/helper');4const { assert } = require('playwright/lib/helper');5const { debugError } = require('playwright/lib/helper');6const { debug } = require('playwright/lib/helper');7const { debugProtocol } = require('playwright/lib/helper');8const { debugSnapshots } = require('playwright/lib/helper');9const { debugLog } = require('playwright/lib/helper');10const { debugAssert } = require('playwright/lib/helper');11const { debugErrorLog } = require('playwright/lib/helper');12const { debugErrorLogOnFailure } = require('playwright/lib/helper');13const { debugLogOnFailure } = require('playwright/lib/helper');14const { debugLogOnSuccess } = require('playwright/lib/helper');15const { debugLogOnSuccessOrFailure } = require('playwright/lib/helper');16const { debugLogOnPromise } = require('playwright/lib/helper');17const { debugErrorLogOnPromise } = require('playwright/lib/helper');18const { debugLogOnPromiseOrTimeout } = require('playwright/lib/helper');19const { debugErrorLogOnPromiseOrTimeout } = require('playwright/lib/helper');20const { debugLogOnPromiseOrTimeoutOnFailure } = require('playwright/lib/helper');21const { debugErrorLogOnPromiseOrTimeoutOnFailure } = require('playwright/lib/helper');22const { debugLogOnPromiseOrTimeoutOnSuccess } = require('playwright/lib/helper');23const { debugErrorLogOnPromiseOrTimeoutOnSuccess } = require('playwright/lib/helper');24const { debugLogOnPromiseOrTimeoutOnSuccessOrFailure } = require('playwright/lib/helper');25const { debugErrorLogOnPromiseOrTimeoutOnSuccessOrFailure } = require('playwright/lib/helper');26const { debugLogOnPromiseOnFailure } = require('playwright/lib/helper');27const { debugErrorLogOnPromiseOnFailure } = require('playwright/lib/helper');28const { debugLogOnPromiseOnSuccess } = require('playwright/lib/helper');29const { debugErrorLogOnPromiseOnSuccess } = require('playwright/lib/helper');30const { debugLogOnPromiseOnSuccessOrFailure } = require('playwright/lib/helper');31const { debugErrorLogOnPromiseOnSuccessOrFailure }
Using AI Code Generation
1const { resolveTransitionProps } = require('playwright/lib/server/supplements/recorder/recorderSupplement');2const { parseSelector } = require('playwright/lib/server/supplements/recorder/selectorParser');3const { parseExpression } = require('playwright/lib/server/supplements/recorder/selectorExpression');4const { parseModifiers } = require('playwright/lib/server/supplements/recorder/selectorModifiers');5const options = {6 selector: {7 },8 modifiers: {9 },10 position: {11 },12}13const result = resolveTransitionProps(options);14console.log(result);15console.log(selector);16console.log(expression);17const modifiers = parseModifiers({18});19console.log(modifiers);20const modifiers = parseModifiers({21});22console.log(modifiers);23const modifiers = parseModifiers({24});25console.log(modifiers);26const modifiers = parseModifiers({27});28console.log(modifiers);29const modifiers = parseModifiers({30});31console.log(modifiers);
Using AI Code Generation
1const { resolveTransitionProps } = require('playwright/lib/server/chromium/crPage.js');2const { browserType } = require('playwright/lib/server/chromium/crBrowser.js');3const { helper } = require('playwright/lib/helper.js');4const { assert } = require('playwright/lib/helper.js');5const page = new Page();6const frame = new Frame();7const loaderId = '1.1';8const frameId = '1';9const navigationRequest = new Request();10const sameDocumentNavigation = true;11const navigationResponse = new Response();12const errorText = 'error';13const error = new Error(errorText);14const sameDocument = true;15const responseHeaders = {'header1': 'value1'};16const statusCode = 200;17const statusText = 'OK';18const response = new Response();19const documentId = '1.2';20const documentWasRequested = true;21const documentLoaderId = '1.1';22const documentErrorText = 'error';23const documentError = new Error(errorText);24const documentSameDocument = true;25const documentResponseHeaders = {'header1': 'value1'};26const documentStatusCode = 200;27const documentStatusText = 'OK';28const documentResponse = new Response();29test('resolveTransitionProps should return correct value for sameDocumentNavigation', async({page, server}) => {30 const { sameDocumentNavigation } = resolveTransitionProps(page, frame, loaderId, frameId, navigationRequest, sameDocumentNavigation, navigationResponse, error, sameDocument, url, responseHeaders, statusCode, statusText, response, documentId, documentURL, baseURL, commitedURL, documentWasRequested, documentLoaderId, documentError, documentSameDocument, documentURL, documentResponseHeaders, documentStatusCode, documentStatusText, documentResponse);31 expect(sameDocumentNavigation).toBe(true);32});33test('resolveTransitionProps should return correct value for navigationResponse', async({page, server}) => {34 const { navigationResponse } = resolveTransitionProps(page, frame, loaderId, frameId, navigationRequest, sameDocumentNavigation, navigationResponse, error, same
Using AI Code Generation
1const { resolveTransitionProps } = require('playwright/lib/server/frames');2const frame = page.mainFrame();3const { transition } = await frame.evaluateHandle(() => {4 return {5 };6});7const transitionProps = await resolveTransitionProps(transition);8const { resolveTransitionProps } = require('playwright/lib/server/frames');9const frame = page.mainFrame();10const { transition } = await frame.evaluateHandle(() => {11 return {12 };13});14const transitionProps = await resolveTransitionProps(transition);15const { resolveTransitionProps } = require('playwright/lib/server/frames');16const frame = page.mainFrame();17const { transition } = await frame.evaluateHandle(() => {18 return {19 };20});21const transitionProps = await resolveTransitionProps(transition);22const { resolveTransitionProps } = require('playwright/lib/server/frames');23const frame = page.mainFrame();24const { transition } = await frame.evaluateHandle(() => {25 return {26 };27});28const transitionProps = await resolveTransitionProps(transition);29const { resolveTransitionProps } = require('playwright/lib/server/frames');30const frame = page.mainFrame();31const { transition } = await frame.evaluateHandle(() => {32 return {33 };34});35const transitionProps = await resolveTransitionProps(transition);
Using AI Code Generation
1const { resolveTransitionProps } = require('playwright/lib/server/frames');2const { assert } = require('console');3const { strictEqual } = require('assert');4const actualResult = resolveTransitionProps({5 transition: {6 },7});8assert.deepEqual(actualResult, {9});10const { resolveTransitionProps } = require('playwright');11const { assert } = require('console');12const { strictEqual } = require('assert');13const actualResult = resolveTransitionProps({14 transition: {15 },16});17assert.deepEqual(actualResult, {18});
Using AI Code Generation
1const { resolveTransitionProps } = require('playwright/lib/server/browserContext');2const transitionProps = resolveTransitionProps({3});4console.log(JSON.stringify(transitionProps, undefined, 2));5{6}
Playwright tutorial
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
