w-component-vue 2.4.60 → 2.4.62

package/src/components/WDrawer.vue

@@ -1,5 +1,6 @@
 <template>
     <div
+        :state="state"
         :changeValue="changeValue"
         :changeDrawerWidth="changeDrawerWidth"
         :changeAfloat="changeAfloat"
@@ -46,16 +47,16 @@
             <!-- overlay半透明灰色層 -->
             <div
                 class="ts"
-                :style="`position:${useOverlayPosition}; ${useDrawerDetectLoction} top:0px; bottom:0px; z-index:${useDrawerZIndex+1}; width:${useDrawerDetectWidth}; height:100%; opacity:${useOverlayOpacity}; background:${useOverlayColor};`"
-                v-if="showOverlay1Basic"
+                :style="`position:${useAniPosition}; ${useDrawerDetectLoction} top:0px; bottom:0px; z-index:${useDrawerZIndex+1}; width:${useDrawerDetectWidth}; height:100%; opacity:${useAniOpacity}; background:${useAniColor};`"
+                v-if="showAni1Basic"
             >
             </div>
 
             <!-- overlay關閉事件監聽層, 與隱藏內層之向外陰影 -->
             <div
-                :style="`position:${useOverlayPosition}; ${useDrawerDetectLoction} top:0px; bottom:0px; z-index:${useDrawerZIndex+2}; width:${useDrawerDetectWidth}; height:100%;`"
+                :style="`position:${useAniPosition}; ${useDrawerDetectLoction} top:0px; bottom:0px; z-index:${useDrawerZIndex+2}; width:${useDrawerDetectWidth}; height:100%;`"
                 @click="(ev)=>{ckToggle(ev,false)}"
-                v-show="showOverlay2Detect"
+                v-show="showAni2Detect"
             >
 
                 <!-- drawer平移層 -->
@@ -67,6 +68,8 @@
                         ref="divDrawer"
                         :class="`ts ${useDrawerClassShadow}`"
                         :style="`${useNoTransStyle} width:${useDrawerWidthTrans}px; height:100%; transform:translateX(${useDrawerTranslateX}%);`"
+                        v-domstable
+                        @domstable="getStableDrawer"
                     >
 
                         <div
@@ -96,7 +99,7 @@
                             <!-- 寬度內要含border, 故須box-sizing:border-box -->
                             <div
                                 ref="divBar"
-                                :style="`position:${useOverlayPosition}; top:0px; ${isAtLeft?'left':'right'}:${useDrawerWidthTrans-useDrawerBarWidth/2}px; width:${useDrawerBarWidth}px; height:100%; border-left:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; border-right:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; box-sizing:border-box; opacity:${showOverlay5DragDrawerBar?1:0}; cursor:col-resize; user-select:none;`"
+                                :style="`position:${useAniPosition}; top:0px; ${isAtLeft?'left':'right'}:${useDrawerWidthTrans-useDrawerBarWidth/2}px; width:${useDrawerBarWidth}px; height:100%; border-left:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; border-right:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; box-sizing:border-box; opacity:${showAni5DragDrawerBar?1:0}; cursor:col-resize; user-select:none;`"
                                 v-show="valueTrans && dragDrawerWidth"
                             >
                                 <div :style="`width:${useDrawerBarSize}px; height:100%; background:${useDrawerBarColor};`"></div>
@@ -118,13 +121,16 @@
 <script>
 import get from 'lodash-es/get.js'
 import isNumber from 'lodash-es/isNumber.js'
+import genID from 'wsemi/src/genID.mjs'
 import isnum from 'wsemi/src/isnum.mjs'
 import isfun from 'wsemi/src/isfun.mjs'
 import cdbl from 'wsemi/src/cdbl.mjs'
 import domIsClientXYIn from 'wsemi/src/domIsClientXYIn.mjs'
 import domGetWindowSize from 'wsemi/src/domGetWindowSize.mjs'
 import domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'
+import waitFun from 'wsemi/src/waitFun.mjs'
 import domResize from '../js/domResize.mjs'
+import domStable from '../js/domStable.mjs'
 import convertColor from '../js/convertColor.mjs'
 
 
@@ -152,6 +158,7 @@ import convertColor from '../js/convertColor.mjs'
 export default {
     directives: {
         domresize: domResize(),
+        domstable: domStable(),
     },
     props: {
         value: {
@@ -239,6 +246,8 @@ export default {
 
             das: null,
 
+            state: 'hidden', //hidden, hiding, opened, opening
+
             valueTrans: false,
 
             dragging: false,
@@ -246,24 +255,29 @@ export default {
             drawerWidthTrans: 200,
             afloatTrans: false,
 
-            timerOverlay1Basic: null,
-            showOverlay1Basic: false,
-            effOverlay1Basic: false,
+            drawerStable: true,
+
+            timerAni1Basic: null,
+            showAni1Basic: false,
+            effAni1Basic: false,
+
+            timerAni2Detect: null,
+            showAni2Detect: false,
+            // effAni2Detect: false,
 
-            timerOverlay2Detect: null,
-            showOverlay2Detect: false,
-            // effOverlay2Detect: false,
+            timerAni3Shadow: null,
+            showAni3Shadow: false,
+            // effAni3Shadow: false,
 
-            timerOverlay3Shadow: null,
-            showOverlay3Shadow: false,
-            // effOverlay3Shadow: false,
+            timerAni4Translate: null,
+            // showAni4Translate: false,
+            effAni4Translate: false,
 
-            timerOverlay4Translate: null,
-            // showOverlay4Translate: false,
-            effOverlay4Translate: false,
+            timerAni5DragDrawerBar: null,
+            showAni5DragDrawerBar: false,
 
-            timerOverlay5DragDrawerBar: null,
-            showOverlay5DragDrawerBar: false,
+            timerAni6State: null,
+            tagStateNow: '',
 
         }
     },
@@ -397,26 +411,26 @@ export default {
             return i
         },
 
-        useOverlayColor: function() {
+        useAniColor: function() {
             if (!this.afloatTrans) {
                 return 'transparent'
             }
             return convertColor(this.overlayColor)
         },
 
-        useOverlayPosition: function() {
+        useAniPosition: function() {
             return this.afloatByFix ? 'fixed' : 'absolute'
         },
 
-        useOverlayOpacity: function() {
+        useAniOpacity: function() {
             if (!this.afloatTrans) {
                 return 0
             }
-            return this.effOverlay1Basic ? this.overlayOpacity : 0
+            return this.effAni1Basic ? this.overlayOpacity : 0
         },
 
         useDrawerTranslateX: function() {
-            if (this.effOverlay4Translate) {
+            if (this.effAni4Translate) {
                 return 0
             }
             let s0 = this.isAtLeft ? -100 : 100
@@ -438,7 +452,7 @@ export default {
         },
 
         useDrawerClassShadow: function() {
-            return this.afloatTrans && this.showOverlay3Shadow ? 'bs' : ''
+            return this.afloatTrans && this.showAni3Shadow ? 'bs' : ''
         },
 
         useDrawerBarWidth: function() {
@@ -604,11 +618,19 @@ export default {
             let vo = this
 
             //clearTimeout
-            clearTimeout(vo.timerOverlay1Basic)
-            clearTimeout(vo.timerOverlay2Detect)
-            clearTimeout(vo.timerOverlay3Shadow)
-            clearTimeout(vo.timerOverlay4Translate)
-            clearTimeout(vo.timerOverlay5DragDrawerBar)
+            clearTimeout(vo.timerAni1Basic)
+            clearTimeout(vo.timerAni2Detect)
+            clearTimeout(vo.timerAni3Shadow)
+            clearTimeout(vo.timerAni4Translate)
+            clearTimeout(vo.timerAni5DragDrawerBar)
+            clearTimeout(vo.timerAni6State)
+
+            //切換即標記為未穩定, 待divDrawer(及子樹)動畫真正結束(directive偵測)後才翻true; 避免waitFun讀到殘留true而過早落定(不位移時由waitFun逾時.catch強制落定兜底, 不會卡死)
+            vo.drawerStable = false
+
+            //此次切換的tag(genID唯一值), 供下方延遲落定的waitFun回呼比對, 避免快速切換時舊的waitFun誤落定
+            let tagStateNew = genID()
+            vo.tagStateNow = tagStateNew
 
             let sec
 
@@ -616,76 +638,119 @@ export default {
             if (value) {
                 //顯示
 
-                // vo.fsmShowOverlay.showOverlay()
-                // vo.fsmShowStateOverlay.showOverlay()
+                // vo.fsmShowAni.showAni()
+                // vo.fsmShowStateAni.showAni()
                 sec = 20
 
-                // showOverlay1Basic: false,
-                // effOverlay1Basic: false,
-                vo.showOverlay1Basic = true
-                vo.timerOverlay1Basic = setTimeout(() => {
-                    vo.effOverlay1Basic = true
+                //state
+                vo.state = 'opening'
+
+                // showAni1Basic: false,
+                // effAni1Basic: false,
+                vo.showAni1Basic = true
+                vo.timerAni1Basic = setTimeout(() => {
+                    vo.effAni1Basic = true
                 }, sec)
 
-                // showOverlay2Detect: false,
-                // effOverlay2Detect: false,
-                vo.showOverlay2Detect = true
+                // showAni2Detect: false,
+                // effAni2Detect: false,
+                vo.showAni2Detect = true
 
-                // showOverlay3Shadow: false,
-                // effOverlay3Shadow: false,
-                vo.showOverlay3Shadow = true
+                // showAni3Shadow: false,
+                // effAni3Shadow: false,
+                vo.showAni3Shadow = true
 
-                // showOverlay4Translate: false,
-                // effOverlay4Translate: false,
-                // vo.showOverlay4Translate = true
-                vo.timerOverlay4Translate = setTimeout(() => {
-                    vo.effOverlay4Translate = true
+                // showAni4Translate: false,
+                // effAni4Translate: false,
+                // vo.showAni4Translate = true
+                vo.timerAni4Translate = setTimeout(() => {
+                    vo.effAni4Translate = true
                 }, sec)
 
-                vo.timerOverlay5DragDrawerBar = setTimeout(() => {
-                    vo.showOverlay5DragDrawerBar = true
+                // showAni5DragDrawerBar: false,
+                // vo.showAni5DragDrawerBar = true
+                vo.timerAni5DragDrawerBar = setTimeout(() => {
+                    vo.showAni5DragDrawerBar = true
+                }, 300)
+
+                //延遲過場時長(300ms)後以waitFun輪詢drawerStable(attemptNum=6 timeInterval=50, 約300ms): 偵測到穩定即落定opened; 逾時.catch強制落定(涵蓋不位移等directive不emit情境, 避免卡死); tagStateNew比對避免快速切換時舊回呼誤落定
+                vo.timerAni6State = setTimeout(() => {
+                    let settle = () => {
+                        if (vo.tagStateNow === tagStateNew) {
+                            vo.state = 'opened'
+                        }
+                    }
+                    waitFun(() => vo.drawerStable === true, { attemptNum: 6, timeInterval: 50 })
+                        .then(settle)
+                        .catch(settle)
                 }, 300)
 
             }
             else {
                 //隱藏
 
-                // vo.fsmShowOverlay.hideOverlay()
-                // vo.fsmShowStateOverlay.hideOverlay()
+                // vo.fsmShowAni.hideAni()
+                // vo.fsmShowStateAni.hideAni()
                 sec = 300
 
-                // showOverlay1Basic: false,
-                // effOverlay1Basic: false,
-                vo.effOverlay1Basic = false
-                vo.timerOverlay1Basic = setTimeout(() => {
-                    vo.showOverlay1Basic = false
+                //state
+                vo.state = 'hiding'
+
+                // showAni1Basic: false,
+                // effAni1Basic: false,
+                vo.effAni1Basic = false
+                vo.timerAni1Basic = setTimeout(() => {
+                    vo.showAni1Basic = false
                 }, sec)
 
-                // showOverlay2Detect: false,
-                // effOverlay2Detect: false,
-                vo.timerOverlay2Detect = setTimeout(() => {
-                    vo.showOverlay2Detect = false
+                // showAni2Detect: false,
+                // effAni2Detect: false,
+                vo.timerAni2Detect = setTimeout(() => {
+                    vo.showAni2Detect = false
                 }, sec)
 
-                // showOverlay3Shadow: false,
-                // effOverlay3Shadow: false,
-                vo.timerOverlay3Shadow = setTimeout(() => {
-                    vo.showOverlay3Shadow = false
+                // showAni3Shadow: false,
+                // effAni3Shadow: false,
+                vo.timerAni3Shadow = setTimeout(() => {
+                    vo.showAni3Shadow = false
                 }, sec / 2) //提前隱藏陰影
 
-                // showOverlay4Translate: false,
-                // effOverlay4Translate: false,
-                vo.effOverlay4Translate = false
-                // vo.timerOverlay4Translate = setTimeout(() => {
-                //     vo.showOverlay4Translate = false
+                // showAni4Translate: false,
+                // effAni4Translate: false,
+                vo.effAni4Translate = false
+                // vo.timerAni4Translate = setTimeout(() => {
+                //     vo.showAni4Translate = false
                 // }, sec)
 
-                vo.showOverlay5DragDrawerBar = false
+                // showAni5DragDrawerBar: false,
+                vo.showAni5DragDrawerBar = false
+
+                //延遲過場時長(300ms)後以waitFun輪詢drawerStable(attemptNum=6 timeInterval=50, 約300ms): 偵測到穩定即落定hidden; 逾時.catch強制落定(涵蓋不位移等directive不emit情境, 避免卡死); tagStateNew比對避免快速切換時舊回呼誤落定
+                vo.timerAni6State = setTimeout(() => {
+                    let settle = () => {
+                        if (vo.tagStateNow === tagStateNew) {
+                            vo.state = 'hidden'
+                        }
+                    }
+                    waitFun(() => vo.drawerStable === true, { attemptNum: 6, timeInterval: 50 })
+                        .then(settle)
+                        .catch(settle)
+                }, 300)
 
             }
 
         },
 
+        getStableDrawer: function(b) {
+            // console.log('methods getStableDrawer', b)
+
+            let vo = this
+
+            //更新drawerStable: divDrawer(及子樹)動畫是否已穩定, 由v-domstable(domStable directive)偵測後回呼; 落定state改由toggleValue內的waitFun輪詢此值處理
+            vo.drawerStable = b
+
+        },
+
         getPanelBounding: function() {
             // console.log('methods getPanelBounding')
 

package/src/js/domResize.mjs

@@ -1,6 +1,5 @@
-
-import domDetect from 'wsemi/src/domDetect.mjs'
 import genID from 'wsemi/src/genID.mjs'
+import domDetect from 'wsemi/src/domDetect.mjs'
 
 
 function domResize() {

package/src/js/domRipple.mjs

@@ -1,10 +1,10 @@
-import get from 'lodash-es/get.js'
+import get from 'lodash-es/get.js'
 import isestr from 'wsemi/src/isestr.mjs'
 import isnum from 'wsemi/src/isnum.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
 import cdbl from 'wsemi/src/cdbl.mjs'
 import genID from 'wsemi/src/genID.mjs'
-import rp from 'wsemi/src/domRipple.mjs'
+import _domRipple from 'wsemi/src/domRipple.mjs'
 import convertColor from './convertColor.mjs'
 
 
@@ -78,7 +78,7 @@ function domRipple(opt = {}) {
             // console.log('binding.value', binding.value)
 
             //domRipple
-            rp(e.currentTarget, e, { color, timeDuration })
+            _domRipple(e.currentTarget, e, { color, timeDuration })
 
         }
 

package/src/js/domStable.mjs

@@ -0,0 +1,70 @@
+import genID from 'wsemi/src/genID.mjs'
+import domIsStable from 'wsemi/src/domIsStable.mjs'
+
+
+function domStable() {
+    let kpEv = {}
+
+    function emit(vnode, name, data) {
+        let handlers = (vnode.data && vnode.data.on) || (vnode.componentOptions && vnode.componentOptions.listeners)
+        if (handlers && handlers[name]) {
+            handlers[name].fns(data)
+        }
+    }
+
+    function bind(el, binding, vnode) {
+        //console.log('bind', 'el', el, 'binding', binding, 'vnode', vnode)
+
+        //id
+        let id = `r${genID()}`
+        el.setAttribute('ev-stable', id)
+
+        //domIsStable, event模式持續偵測, 穩定狀態轉變時emit('domstable', bool)
+        let ev = domIsStable(el, { mode: 'event' })
+        ev.on('stable', (b) => {
+            // console.log('domstable', b)
+
+            //emit
+            emit(vnode, 'domstable', b)
+
+        })
+        ev.create()
+
+        //save ev
+        kpEv[id] = ev
+
+    }
+
+    function unbind(el) {
+        //console.log('unbind', 'el', el)
+
+        //id
+        let id = el.getAttribute('ev-stable')
+
+        //remove attr
+        el.setAttribute('ev-stable', null)
+
+        //clear
+        if (kpEv[id]) {
+
+            //dispose
+            kpEv[id].dispose()
+
+            //set null
+            kpEv[id] = null
+
+            //delete
+            delete kpEv[id]
+
+        }
+
+    }
+
+    return {
+        bind,
+        unbind,
+    }
+}
+
+
+export default domStable

package/src/js/domVisible.mjs

@@ -1,6 +1,5 @@
-
-import domIsVisible from 'wsemi/src/domIsVisible.mjs'
 import genID from 'wsemi/src/genID.mjs'
+import domIsVisible from 'wsemi/src/domIsVisible.mjs'
 
 
 function domVisible() {

package/tmp/probe.mjs

@@ -0,0 +1,5 @@
+import def from 'w-screenctl'
+import * as ns from 'w-screenctl'
+console.log('typeof default:', typeof def)
+console.log('default keys:', def && typeof def === 'object' ? Object.keys(def) : 'n/a')
+console.log('namespace keys:', Object.keys(ns))

package/tmp/screenctl.log

@@ -0,0 +1,2 @@
+running at http://0.0.0.0:7000 (platform=win32)
+w-screenctl started at http://localhost:7000

package/tmp/screenctl.pid

@@ -0,0 +1 @@
+787

package/tmp/start-screenctl.mjs

@@ -0,0 +1,6 @@
+import pkg from 'w-screenctl'
+
+const WScreenctl = pkg.default
+
+await WScreenctl({ port: 7000 })
+console.log('w-screenctl started at http://localhost:7000')

package/tmp/test-stable.mjs

@@ -0,0 +1,38 @@
+let HOST = 'http://localhost:7000'
+
+async function post(path, body) {
+    let res = await fetch(HOST + path, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+    })
+    return res.json()
+}
+
+//測試script: 建一個sub-pixel佈局的靜止元素, 用tolerance=0的sameRect間隔100ms連續比對6輪
+let script = `(async () => {
+    let d = document.createElement('div')
+    d.style.cssText = 'position:absolute; left:33.33px; top:11.11px; width:101.7px; height:51.3px; background:red'
+    document.body.appendChild(d)
+    let getRect = () => { let r = d.getBoundingClientRect(); return { x: r.left, y: r.top, w: r.width, h: r.height } }
+    let same = (a, b) => Math.abs(a.x-b.x) <= 0 && Math.abs(a.y-b.y) <= 0 && Math.abs(a.w-b.w) <= 0 && Math.abs(a.h-b.h) <= 0
+    let rounds = []
+    for (let i = 0; i < 6; i++) {
+        let r1 = getRect()
+        await new Promise((r) => setTimeout(r, 100))
+        let r2 = getRect()
+        rounds.push({ r1x: r1.x, r2x: r2.x, r1w: r1.w, r2w: r2.w, bRect: same(r1, r2) })
+    }
+    return {
+        dpr: window.devicePixelRatio,
+        everStable: rounds.some((r) => r.bRect),
+        allStable: rounds.every((r) => r.bRect),
+        first: rounds[0],
+    }
+})()`
+
+for (let dpr of [1, 1.25, 1.5, 2]) {
+    let o = await post('/chrome/open', { url: 'about:blank', mode: 'replace', opt: { deviceScaleFactor: dpr } })
+    let r = await post('/chrome/evaluate', { script })
+    console.log(`requested dpr=${dpr} | openOk=${o.ok} | result=`, JSON.stringify(r.result || r))
+}

package/tmp/test-stuck.mjs

@@ -0,0 +1,89 @@
+let HOST = 'http://localhost:7000'
+
+async function post(path, body) {
+    let res = await fetch(HOST + path, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+    })
+    return res.json()
+}
+
+//共用: inline忠實複製wsemi domIsStable event核心(bLast初始false, 僅b變化才emit) + WDrawer的drawerStable/state/getStableDrawer/toggleValue
+//moveAfterToggle=true代表toggleValue後drawer真的位移(正常); false代表不位移(邊角)
+function makeScript(moveAfterToggle) {
+    return `(async () => {
+        let d = document.createElement('div')
+        d.style.cssText = 'position:absolute; left:50px; top:0px; width:100px; height:50px; background:red; transition:transform 0.3s; transform:translateX(0px)'
+        document.body.appendChild(d)
+
+        let getRect = () => { let r = d.getBoundingClientRect(); return { x: r.left, y: r.top, w: r.width, h: r.height } }
+        let same = (a, b) => Math.abs(a.x-b.x) <= 0 && Math.abs(a.y-b.y) <= 0 && Math.abs(a.w-b.w) <= 0 && Math.abs(a.h-b.h) <= 0
+        let getAnims = () => { try { return d.getAnimations({ subtree: true }) } catch (e) { return [] } }
+
+        //wsemi domIsStable event 的 core: 判當前是否穩定
+        let core = async () => {
+            let r1 = getRect()
+            await new Promise((r) => setTimeout(r, 100))
+            let r2 = getRect()
+            let bRect = same(r1, r2)
+            await Promise.allSettled(getAnims().map((a) => a.finished))
+            let bAnim = getAnims().length === 0
+            return bRect && bAnim
+        }
+
+        //WDrawer 狀態
+        let state = 'hidden'
+        let drawerStable = false
+        let bLast = false   //directive(wsemi domIsStable)內部, 初始false
+        let log = []
+
+        //WDrawer.getStableDrawer
+        let getStableDrawer = (b) => {
+            drawerStable = b
+            if (drawerStable) {
+                if (state === 'opening') state = 'opened'
+                else if (state === 'hiding') state = 'hidden'
+            }
+        }
+
+        //directive 一次輪詢: 僅 bLast!==bNow 才 emit→getStableDrawer
+        let tick = async () => {
+            let bNow = await core()
+            if (bLast !== bNow) {
+                bLast = bNow
+                getStableDrawer(bNow)
+                log.push('emit stable=' + bNow + ' -> state=' + state + ', drawerStable=' + drawerStable)
+            }
+            else {
+                log.push('no-emit (bNow=' + bNow + '===bLast) -> state=' + state + ', drawerStable=' + drawerStable)
+            }
+        }
+
+        //1) directive create 後第一次偵測(靜止→b=true→emit true)
+        await tick()
+
+        //2) 模擬 toggleValue(true): state=opening, drawerStable=false(手動)
+        state = 'opening'
+        drawerStable = false
+        log.push('toggleValue(true): state=opening, drawerStable=false(手動); directive bLast=' + bLast)
+        ${moveAfterToggle ? "d.style.transform = 'translateX(150px)'  //真位移" : "//不位移: drawer維持原位"}
+
+        //3) directive 後續輪詢
+        for (let i = 0; i < 6; i++) {
+            await tick()
+        }
+
+        return { finalState: state, finalDrawerStable: drawerStable, bLast, stuck: (state === 'opening'), log }
+    })()`
+}
+
+await post('/chrome/open', { url: 'about:blank', mode: 'replace', opt: { deviceScaleFactor: 1 } })
+let rA = await post('/chrome/evaluate', { script: makeScript(false) })
+console.log('=== case A 不位移 ===')
+console.log(JSON.stringify(rA.result || rA, null, 2))
+
+await post('/chrome/open', { url: 'about:blank', mode: 'replace', opt: { deviceScaleFactor: 1 } })
+let rB = await post('/chrome/evaluate', { script: makeScript(true) })
+console.log('=== case B 位移 ===')
+console.log(JSON.stringify(rB.result || rB, null, 2))

package/tmp/test-trans.mjs

@@ -0,0 +1,33 @@
+let HOST = 'http://localhost:7000'
+
+async function post(path, body) {
+    let res = await fetch(HOST + path, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+    })
+    return res.json()
+}
+
+//真正跑transform transition: 觸發位移後, 用tolerance=0間隔100ms比對8輪, 看動畫中bRect=false、結束後bRect=true
+let script = `(async () => {
+    let d = document.createElement('div')
+    d.style.cssText = 'position:absolute; left:0px; top:0px; width:100px; height:50px; background:blue; transition:transform 0.3s cubic-bezier(.25,.8,.5,1); transform:translateX(0px)'
+    document.body.appendChild(d)
+    let getRect = () => { let r = d.getBoundingClientRect(); return { x: r.left, y: r.top, w: r.width, h: r.height } }
+    let same = (a, b) => Math.abs(a.x-b.x) <= 0 && Math.abs(a.y-b.y) <= 0 && Math.abs(a.w-b.w) <= 0 && Math.abs(a.h-b.h) <= 0
+    await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)))
+    d.style.transform = 'translateX(133.33px)'
+    let rounds = []
+    for (let i = 0; i < 8; i++) {
+        let r1 = getRect()
+        await new Promise((r) => setTimeout(r, 100))
+        let r2 = getRect()
+        rounds.push({ ms: i*100, r1x: Math.round(r1.x*1000)/1000, r2x: Math.round(r2.x*1000)/1000, bRect: same(r1, r2) })
+    }
+    return { dpr: window.devicePixelRatio, rounds }
+})()`
+
+await post('/chrome/open', { url: 'about:blank', mode: 'replace', opt: { deviceScaleFactor: 1.25 } })
+let r = await post('/chrome/evaluate', { script })
+console.log(JSON.stringify(r.result || r, null, 2))