From 8b71db7fa746d7b1431dad7e56aa4c747b9997a2 Mon Sep 17 00:00:00 2001 From: Alex Rudenko Date: Tue, 16 Jan 2024 08:55:25 +0100 Subject: [PATCH] test: add tests for device pixel ratio (#11690) --- test/assets/picture.html | 6 +++ test/assets/resolution.html | 23 +++++++++ test/golden-chrome/device-pixel-ratio1.png | Bin 0 -> 3249 bytes test/golden-chrome/device-pixel-ratio2.png | Bin 0 -> 10259 bytes test/golden-chrome/device-pixel-ratio3.png | Bin 0 -> 20942 bytes test/golden-firefox/device-pixel-ratio1.png | Bin 0 -> 9701 bytes test/golden-firefox/device-pixel-ratio2.png | Bin 0 -> 36194 bytes test/golden-firefox/device-pixel-ratio3.png | Bin 0 -> 79723 bytes test/src/emulation.spec.ts | 52 ++++++++++++++++++++ 9 files changed, 81 insertions(+) create mode 100644 test/assets/picture.html create mode 100644 test/assets/resolution.html create mode 100644 test/golden-chrome/device-pixel-ratio1.png create mode 100644 test/golden-chrome/device-pixel-ratio2.png create mode 100644 test/golden-chrome/device-pixel-ratio3.png create mode 100644 test/golden-firefox/device-pixel-ratio1.png create mode 100644 test/golden-firefox/device-pixel-ratio2.png create mode 100644 test/golden-firefox/device-pixel-ratio3.png diff --git a/test/assets/picture.html b/test/assets/picture.html new file mode 100644 index 00000000000..18e3d70f5ea --- /dev/null +++ b/test/assets/picture.html @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/test/assets/resolution.html b/test/assets/resolution.html new file mode 100644 index 00000000000..6d9f59ef9fe --- /dev/null +++ b/test/assets/resolution.html @@ -0,0 +1,23 @@ + + +

Test

+ \ No newline at end of file diff --git a/test/golden-chrome/device-pixel-ratio1.png b/test/golden-chrome/device-pixel-ratio1.png new file mode 100644 index 0000000000000000000000000000000000000000..c53502031f31e98bf0d3e31e6fc1826ac7d56a65 GIT binary patch literal 3249 zcmeAS@N?(olHy`uVBq!ia0y~yU{+vYV2a>i1B%QlYbpRzjKx9jP7LeL$-HD>;K}xM zaSW-L^Y*$SBZC6Z0fPhkpFdnAqr&y8?ED!W28M- O2?kGBKbLh*2~7ZyoZj&O literal 0 HcmV?d00001 diff --git a/test/golden-chrome/device-pixel-ratio2.png b/test/golden-chrome/device-pixel-ratio2.png new file mode 100644 index 0000000000000000000000000000000000000000..9d3e9fcc31c90998778303807094c9796be1d14d GIT binary patch literal 10259 zcmeHNze~eF6#lM+HZ2A!ZlVyd?xHw}P(w6kut;%q=;p3i9D{=3;-)S-h?7H0L2zze zx+P=l-}bs%2_td5=6nFn=# zqZf5l4?MKvxevfa=x^+u+@`O+BHVI!>GxlM>GD|US*frxMetAfW)cPHa#gW9$3MbkzIH3+U)Jdb!w;C zE@Vr@yk_E3j`t@dX@eb@7#!e2tf^~K?Ezn3a|oo0@R>DP#dTX)CTJcr~x&g z2Grmn@QkeB-RYvc;miMf;Nb1VSZ3#{bET`jHJqJU_j^A`8+Zgv3=j|kLI`S55=Apk zuJGT~aFl%E98~tnVtTxj6bAgEg0z&)~A=ahhurxR~|7jre Nc&x1}nrw~F`~|yqsj&b6 literal 0 HcmV?d00001 diff --git a/test/golden-firefox/device-pixel-ratio1.png b/test/golden-firefox/device-pixel-ratio1.png new file mode 100644 index 0000000000000000000000000000000000000000..8c814cf3f40c53eb6289ef914a5ec4e8380a52c8 GIT binary patch literal 9701 zcmeAS@N?(olHy`uVBq!ia0y~yU{+vYV2a>i1B%QlYbs!1P+;(MaSW-5dwYE&CxZbG z%f^cT3m;EVTsKL)LLe{i-R{R60tyZd42(=HK!yNE4+G~EUnG$atSlYw2n7xb!U77C zTNS~oA=+3vNbe~gw7qva#KS{bb$M(am-17oy)9IYQm>&MahakPFM ztskMi#?kh{X!~HaeE=PR8EqepwvR^JN2Bed(e}}3`)IU%1Rhl%Z6A)d4@cXFqwPaT zl{h;8I6D72I{!@a{JVYFJ81?6)&-!o0Hbr&ki`z8eeKb{_Gn*ww68sg`r2Z~eUS}S UU(crlmv1q6y85}Sb4q9e0OEK-H~;_u literal 0 HcmV?d00001 diff --git a/test/golden-firefox/device-pixel-ratio2.png b/test/golden-firefox/device-pixel-ratio2.png new file mode 100644 index 0000000000000000000000000000000000000000..a52579a1afa7b038183b77c9f86b51202b1c5194 GIT binary patch literal 36194 zcmeI4O=uHQ6oub3F{UNah=Qe58H1oJ$wEa1by8ECxCm0}${!-G+?EO=B2h#uid035 z=)%8^2;vVeM1<~CTogeU;--r(id1(lL{KL)eY`u*8K}DkzFp~?X(s30d+t5wzRrcc z^?`g>PnS|EU#nIImCATZrJrOo{%`I(=f;(CRjpDUI(}&Ob2+a{xzy9^J7A`(oCDt4}(q(PI3){`yuYRoyVSbXn}*_SZ9o zRY^DHufD8quOvNnw>OfsRCwFj?G0Z!F&ccmm~U2U z&Ll0lW6Mj;>Ee&VKRC|a(NG_fmOOV|L%r+&y2joD{b3X8UMg{$>J#ef#gDs^)|*ac zal#I()3=+>+LaH_C$0M%yd(yOaNpSA=ytKe0uM4cnvZ0#zypeo5-t=i@Sp};6_*-p z`b3&6gGJB*(?uI0Ko@PW2qX?N$tXP!nWWWZ2nssb;DHV{SOg{oMu+ffFgk>=_d9ir z4uJ3{jcwlr0Vecy!j1GYZMh8ZR)pi+ikI`YUz~~VDMvFi&Ixsr^a~?d| zcyvpj1u&)v^_Y6h@L!V&rU#}6$9FU%GFj5RK*MDTH4flOal&NDG?am!WwK;sJ(DGa z1(PM4N0}@|oed^S0uLrjVv^!#4wEH;2a_eOQ$kR1vIHJXmaIa{5n3Zym@FAAm@J8Y zqeUQ0mW=5Ws9KKD8gY-&VX(mH5dB7rP%%0%I{05KU^U9R9Uz;@ zX0o|0vY8AHQx((0iUdp#BlH(^J+}6Z8Z3?>3Cp{{`78kpqeGo1At;Ov1s;qJC2!1U zbU5#~ooQze|2{bRX0UU`j&$PN$9mn(mP=^7klA#v`)bc3?wzZ>U`1>sB@3}Z zY!DkE0^|a@KrWCAb_~!@Y7>^&AU4oe!U6J?COTAGyznGE8AX78(ykYJ&LDYXQ}IPf zp9Qe5C#RwjC2<2QYB9A~A^_jooDj#i_BC)U92-S|JhF3yJkkgd8^lJ40KF)=KrWCA zb_~!@M!P9^5}vekM0Zof2C+eGP($q)poUUIqX@v0c8*X(H3Gy2u|W;BV}KeOtsw27 zHEv9ee^M&2o!j<=Wx-d1lUo=@@{2+K+$q-oZH<0eVZjuh7U)kBALo1KnZA j0Ck_bA4OpPJlQdI`PrZ0Z~J!p?*UM?{(9wcU*pVQ*2#@s literal 0 HcmV?d00001 diff --git a/test/golden-firefox/device-pixel-ratio3.png b/test/golden-firefox/device-pixel-ratio3.png new file mode 100644 index 0000000000000000000000000000000000000000..d43e08f4ad2632ca8187512be37a833736a25cd1 GIT binary patch literal 79723 zcmeI4PiS0K6vprTu})&gzJQfzyLdJrhPsHG#*O7grZsU9s+5wIP8aZVTT-D~qrXPirG<&FGyr4uGM z-#h1bzkBX^=g^MPXNuhqcN=4hBg3WVjp-^Ib8n%rruILlfBG|TOlU?*Lpu+?aOL9X zMH8;gKXK~%`S_Rkvk$gT{jvD{*I#bTWb=g}jAGN~AFto{zFE06pKJ4D?yF{E^IhQe z#X%U{lOOB(VT0#4=f}3RUu}IElaGbf_bQh?R}ofEd9I*P%4BxE_51d=nk8anjuf3L zZI%*t7fx{TS3Mq&xwg_M-jnl-iQwIA_C#TMs$J~ZKR^5U z2EP@=(E~ww+mo+(t|BNec&;G-acnl9o9Ockpjrs8Y4gO~10aNL?hwK@dkJBiy-?UO z1PWXHLt(oCVI=GZijlAm1|xxyaQj8Ffnp>u5)H>Dj08qPPrMijjD(hrFcKIEj6~By z9~B7~7#InR1V*CiH3Jn1DiRtPTy1c*p%=LwVO@1?ihc?DCA2q{>IBsZ-9S0cah&5g=lZdA1Lc~7YYund zN+N`Q3Hl{m%^-1B^h?k$;SQdOv!d~mibO++1|xxyz)0x96C;6<(1RyNBF#qP>PIgg zaJ>M{kIRzZ_+r92&EZT4Ghf1PKg^e~?wk=Rw*JeA6pKejq}XE{Q+}+SNx_t#>h7QK zf2lU9s`s612cB9tx4!b@##d_-kRCn$kX>WDy*)p+RWEwPxvu_bvOla&SN692Tz_Fu zzNV-Arstdb>OPIl%jb@HPgYv=ovd`UHd(1_pZ|!db*+~u?yZc#$)iPJYZi#$Btbxg zg&>Hq`woZz5mo^Zfr}6YK!loeTm*=a1i?js2oRwPfCvyF3V;Yr5M0E6i-?&+TZUXO zz&{rdqnOfVy*@&1`0q-IoI(jyBZK!iGeuJA#G zRRBcDiv+j`Tm&vc6#x++LKFZInjjoBK!hX+E&@b=2vqaX9Z3)YBE&U<2oM1xQ~?kHB18cYp$USE01=WP zxCjsdB2)no0U|^J5TOZj8!jR^Gd`R%raCZxc4eY>Ha@&m@fr?AL6Cx=^sDloyKU&c zjU-$>p-nS-748rif%TmM7z~49uqXf`K!hrAM~Ju(f4l5@0ak6r&3;2|--gF`BsKyw zNT41AwB6BmN86n!VA;r9!q)A92oNC<4_BPy-1fKm>>o1waIdPz6AQBnU17L}-HG zB0vO)5CuR4h)@MUgd_+q0z_zn;37Z-h!6!j4iTG&uI_ie07SDqOE$cYi)JF22o?p1 zU@V&|03swo*yKQjCJ3iG5CI}Y0T2NqQ~?kn34)6N5t<;l2oM1xL;(;1B2)noAqj$u z01=uXxCjsdB18cYk!nOlS1vwMG{(#gT%TRueL6cjJ=dcPzV&IQg>riaKU{FV0DHaW zWfcPUY!XuAJ1x;n1V;?lVseg7bzztb!(8mJfy9S^2oM1xQ~?kHB18cYp$USE01=WP zxCjsdB2)no0U|^J5TOZzivSUlAh-w+0U}fZ5CI}Y0T7`Hf{VB-h<_Ec6$W)M zs3Wq_01^KRB6ge^AI=$59hg76GSNF5A6}}obQvU}HC!A_Nka85I8B@;wJT8oM1TlY o07OWF;37bTCI~JfO^66L^{t&6Jec{UHl){#Y#S}jK3#tEFDjAO;{X5v literal 0 HcmV?d00001 diff --git a/test/src/emulation.spec.ts b/test/src/emulation.spec.ts index f29dc48844a..823061c450f 100644 --- a/test/src/emulation.spec.ts +++ b/test/src/emulation.spec.ts @@ -133,6 +133,58 @@ describe('Emulation', () => { }) ).toBe('portrait-primary'); }); + it('should update media queries when resoltion changes', async () => { + const {page, server} = await getTestState(); + + async function getFontSize() { + return await page.evaluate(() => { + return parseInt( + window.getComputedStyle(document.querySelector('p')!).fontSize, + 10 + ); + }); + } + + for (const dpr of [1, 2, 3]) { + await page.setViewport({ + width: 800, + height: 600, + deviceScaleFactor: dpr, + }); + + await page.goto(server.PREFIX + '/resolution.html'); + + await expect(getFontSize()).resolves.toEqual(dpr); + + const screenshot = await page.screenshot({ + fullPage: false, + }); + expect(screenshot).toBeGolden(`device-pixel-ratio${dpr}.png`); + } + }); + it('should load correct pictures when emulation dpr', async () => { + const {page, server} = await getTestState(); + + async function getCurrentSrc() { + return await page.evaluate(() => { + return document.querySelector('img')!.currentSrc; + }); + } + + for (const dpr of [1, 2, 3]) { + await page.setViewport({ + width: 800, + height: 600, + deviceScaleFactor: dpr, + }); + + await page.goto(server.PREFIX + '/picture.html'); + + await expect(getCurrentSrc()).resolves.toMatch( + new RegExp(`logo-${dpr}x.png`) + ); + } + }); }); describe('Page.emulate', function () {