From afc64258afeb1e2c2a7fed25aa742316b2e0ff23 Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Mon, 12 Nov 2018 15:56:16 +0100
Subject: [PATCH] Support for rotation

---
 .../linestring-style-rotation/expected.png    | Bin 0 -> 15757 bytes
 .../cases/linestring-style-rotation/main.js   |  70 ++++++++++++++++++
 src/ol/renderer/Composite.js                  |  18 +++--
 src/ol/renderer/canvas/Layer.js               |  21 ++++++
 src/ol/renderer/canvas/VectorLayer.js         |  19 ++---
 5 files changed, 110 insertions(+), 18 deletions(-)
 create mode 100644 rendering/cases/linestring-style-rotation/expected.png
 create mode 100644 rendering/cases/linestring-style-rotation/main.js

diff --git a/rendering/cases/linestring-style-rotation/expected.png b/rendering/cases/linestring-style-rotation/expected.png
new file mode 100644
index 0000000000000000000000000000000000000000..795e69ffb32a6878f4261a295e872f52c3351a86
GIT binary patch
literal 15757
zcmXwgcRbba`#-WmLXspan~)@X%a)M6%go+;kEHBFb`nAe*;ygk+p+gZ_TGH2^ZxvP
z{y9B5_j$eU`?{~|d9CLauA(e+1CIg^4GryvoUD{88X7wM6CDi~8$R?LznY<;(V)pm
ziL1M(Zq#X8>y7zbo$wz`>$K<3>*&2Bxf4#pV5O-rrK(#op<GGQ_IoC1R9PrUoI4<f
zz^JQJsOxI@<{sDcJwN+xY8r8WMIxGjjk{Mt;UB(E*|fRZsVXRK3_W{CdQ|wwWaH)0
z^y8bk`BD{MY~_^lWJgZWg8y{p>*l@_nAsC-*uZ7UmdffMqJLJ7^Qqq=Ka33RLr!Qv
z#;5)vE*&(UWQu3_{?F8!EztWctjHgtQ7GNW!V=5MGyZ{Q!Sm$(e~U}<h0&DC?E^5Z
zZhY^1BX08<>k}i3(L_U&0|y#e&IxP6fxv9RVIvRc-G^vT!Xg&*K53mdw7;IlrXlyf
z#*(|^ULQdgFfM^F)@}T1Vk@@$Qt&3#$M;e9D1}eo=;%hE>0nwB{P#;^=Y<{emW9Cn
z7eOZ;oaVik=_48kxDPSPgAUJ!D18YQh^Tt~dfVd&1>I`CsM>F)CWeH}sIgzZH`&P*
zs~^8M{1fvB+7L~S2SMj4S;E2np7io^T+}hGNIN}mMXd<Jn<(K;@5#_Vkoi-{M2Oj-
z4lDf$B@gr;xI?TUk=yV|1)pnubSk<a7NJ1cyg0u9a)|};*Bc;~^tWUI8&PCv-R7UA
zjlAFid({@iqxGnzw{<WpnBce1Kfn@@bob*-Sds}#x?qV2YRMf~f&)u>VM!tCDR(3y
z8b{y~mhrQsjn+P6iIvg9+GJR3O%7{OTe<fR)`q~^P}Gu7Sf4`g>i0PKh+If)7D^kv
zF}nOKBYOIx94FJ`<h4zr+p`64o^tsS*Rd(m(QPExdwtwFoKMAD0ud2`Ay`c<!E!Qf
zKIgs+B01G}d=yPx`Y=?o+zG^kW}3HtYrZwNd5H1k9Y}|9zLMM`Z;(y}bmOZ72!$7R
z0s=%SiCBbKA?#F5JVI;(PFF?<cZAyC0}#=D5D^vX!o}cB;X^gJRYeg*^VxL<Px>%E
zohVw#VOmdM8#y}0CMDg~LuPBSli*sPpG~pDfxS5<USd+VHF2p6>t(9YP(|$xW?aVa
zt@Q3qdu=%!ZR(@x=;&;pcpDxc@IF9^xz&{zorNJ!{hc01TX)LS_LV&zUS7K3*<T^}
zsiJ=AAt6}rTIs^20^w`6;-7)YwW)*&^oMB4xn>3L#4=SHD{OwZwN*PTU?+0u&reo6
z={5MKm6SX>Jv+-QC}?(|<S?vP6v;3=niTdr>>C&;o!fGH{Ansb+1x~?rR~bGG=kdj
z<KnzCiGNvbGVi$y`&xI$5vc8ZrxkW8Auc|*p3bqdhTQU(7d;Cn9NX@DKegDo1q3?&
z{$;MToubR=ef;DJ7W1BAU1Z1tA75md?R?_u>MAWsxb=F<gp>t7sEswRLL=AVY)v2n
zahtM@HnDSV??g6t@cg(<ba}eYtE;;^MwUKWl`i|+&(Qc-S$YX}vW1Px88dHh@2M>>
zFE4(d)BOsbE0q57kFnFu?qz>WOIsSq#-#QWY6+wEm9?|u%v8Zex+Enf89O>UPJJ<m
zSm1MZcJ7;;?CR?y!pFx)%!D)>_oVVm%E-vHYFAB-rf<pbsWRK)knpEO49fL<Xfgb=
z=B?pX(%O3T$LuO(b@i%asdJ^;ZHr2?NUw>DAh3x>UthnfNVi(kgAON1+|$#OoSghq
zadA{$9t$HA6SB^>MC(gd*0s*@dO=egbc=c-&H)mwl(%XXm}GbE+@++{H@{9mz)nnf
zCwjotmP1Ncm#Nlu<5wxW9@5m=Io@03xq<?IzeW6D?sKR8zb~de*B(Yviz>5|!4<0J
zk&am>n3TLF3RKHgc7U&isCq+xW^}(r*`C=0X)$>@?j(AI{39Wut`Ph?AJfxwDl6|a
zkG4)u;<;^2FDV$lE32|lmztezdPzZHE#|nE(B0UGPI2#EUU6}oi+)XQ?a4@GeQV4E
znb8J6(Ym@i%ph@Z5$aH56-~{y#zwUJ_wVl?9;&jF@jL$|5*8M|cV=wE9qc`@ESu%=
zjFH5{*V{Pu?aVx)r%z1=$FZ6+)R+r&WPP1|aB%Sb`}fh^W^(i-lmgCgMNi^HGpnnU
zT3e;3{jU6SOLp8Sg#~&h?7ZB!8$Z=k^`t)}ijvVbxa9WnxndJ^JA6fs9l7wWgkHoC
zsmo5*ZdMlDJjc23VU1O>wft;vz$2L`GoA$L@<{2HKbQ)KURC3tKez=21&Ys~ze+Y^
zP{gqZn<ELweE9GoCI&hq(^=BTk7%=nl~mh@6K^Dg_nh6Lh;hB&8t<dkcf1h}ublBs
z85z-_i^28r@j-j?=tSHOo#$RxT*bAbwbJk3#pq&;yuB$KW}<pmBypQ+x9U3!bt`2V
z5f<L#%m<!zKYsl9?zEzerZ~9RlSWrpcMTIGK*k$G&{dI$z)T_PV*PdI@bF78$*zXW
zwFYhxk)DgQBW)d>&(+m;8)mLdM7}5mR{&TlkC7aU`uRmgIo{2&HGCD8+X(iirl$5W
zr~Rnm$_KXBY7$dZQzN5s!3~$hObYg-l@Ma8y*^eJHa%@XK|#Uwenyp@SJbVvZ+@Om
zv)DjdzI|wj6rLfK^#bnO(!#<$AY)(|5YDVQDJ{*^%KH82(8K9k*RVIPgm#Z4vu32^
z!+Td2et)>PzrRm}7sBU#%mv1PE`}QrA8XI2$V0(EN$B*qj~3L3?a1&<Sjg|UQKpKK
zv9YoKN1{&!1rZiJHJKUhX3}7|)eic1z(6xHm?%D&Xp@0D7ibpm+Fc#mk%x*q(YC2`
zM_J<PAwRPi#q_R(w=IlTd_b<XZXFGdj64GvB`0u%7XfmP*1B;@;089$nr|*-Jhd6+
zQ7Y1_mS9EX>+QJ<1xsYwq+QmM0XmwSnVM$Dnv3%Dw}TdLY;1U+P0TP7;i}`A<Aq>|
zbkdORK0<WGv48bE%kggo3B|?5p=5UrhcH?>cXe~~Hy1&2a&kKV$+Cx(k%>v5ySLA-
zs*jIw7~%c#ioAvll(%zYA;p6m+1};?hygX{diqp`H^tP$<F1O=0f1d{O3L*Ri651f
zn%ryN2~Cl*{_Vq*+69DmUQ8ugI5svm2&DVLux7(HU&c$!oSYo@?OE|9{x_A><$)+i
zL>eLeCEmTx0B!d~=xYD@RZCYFK}1AEl*{Oc4<8;qc_QuP^cYMP?h}5Ci-~dj#qrkR
z{lz;A+7zz)M4JQ+M32ubr5hdUThGshsG`D5N^rmaZO&869l1W}DueHjts?yho>x`W
zd9a3jq!d@@bwm=;`e$Wtw4!@{-ejpHgE6BwPLYu<ZnZJsnzM_`3jl*m$uN7$Fj@Lv
zP4V4PoQjSQ4O*U(6zi}!WJWKa9$f!vU}xIZWE8!;ylj(pc4cX`l4eCko1{pWy|_75
z+tu6abarTykdW}ltc(;7>vEp+GEj^CnWUs7gX!TQmD3;(>?0?Kaejv{!IU<5_HTa{
zf>%eiqa)o@re%`!0+Zrig!k21?%n%7i2i;SGBPr7rRy^de$8#AN&Ofq55A=ZgJppK
z6FJ|O%*oA_%T{e!*y*4mSI>GsHl|%V#x9Z(rD@<1;&rqc)Bf6CKk@X`Q$RrA?XxU+
zOokEHAJ`^aab-o=bnbntl&rizGS04^f7jO+3k)x)tK94`GPd^0uq*HBpjA97S~Hp8
zg{y~?1QUUg&}1(zM2Rksm%sTkxZ1IRG@Bi(=$@)|I~hmThZ>UyOVEN{TG-i{+uKLO
zAqlC3-r7t6LYSxXrAT59xr*W5JUjBcgFLXFsJUXwR12u2?d<IQR#e2z!_xwejM`_P
zxZz^Mj)g1&(3k`llSsmTsRPk*c{J!QL<M*)=(_%?q$I|kud68thu?7#7w0AwJz0dY
zHkm>3Q8iPynI-G|QErJ1PLw&d#L!5xmhP5oiqpZrmvAFht{W8aw%282E++?NWo1K1
z<TZ7TeMQEgc#_W2?=~q331k9-f|fQmrm+3PL)Ty;cqyp(Q|~U$36f}4$HVojy|)Z~
zlk3sFK{Hq8LM%4!f}gRB@Igqb@^GV|wV=%qt(>g*U7C}Gx7^zMXKrRz<-S8#{Bsu%
z<zx2uzt_~rzk2lm;2LF)p`qCDXRlwW`fcyCM-tsEAK`-s4}KnuEIofo>?`)BK(55X
z*KDKFRT96EtjU2A&cRHIr&r?~4loOGli#7aUufGx)7rtn$jI-1|NgyV5)~6jE7HOQ
zdjMZr;&o(;je}ESlcK_`{)B0?lO#a5QlQEqE6QD{N7qhxooSmLOKRf!L$s8SV9*53
zM(*w(Pfk2Gr|UWaG^+I?^*F+iYo<m<{@}P#U<I*DPnzJ`rg1W(1g=R5Ih+c_WIge_
zl-<+IYjtB|ipR2;QwOty?z9O<<n*i--O2zWeru8rsx!w!eeR^i4g{O`b`uVLoScS+
z#z@GjSoU8I4i50Wj|hUmRzNs#O~K8^;}a8>mX^kF8TNd74wHym`n;VjhMf_l0dRJZ
zGO>jHnXCEIX_k_-l?=Q>J!W?<Zt3Ug+??^@=2U0B&lzrr#J6wXxP*oEAFYZ`F*kD&
zpghx?;yR7+wwY?Du%aRk9bH|1z<mf$jkv0^f9Z0{V+Io`Dk`dr^iEU?Doh2`@_QW~
z^$tHbD#*h6gcq-1Tx?J$FGRI+d2z<h&JOn#A`y_Dj#AExiwnIf`%G2)GO}W11h}g4
z@&d=tN`R?;r@4MLn>-VxNWX%TembKG-VE>E>)}!+X$%PE40@8)-=*W}wRwLup5Zs*
z|8|+`_$T<}N$ZDuPsu4L@)vuGm0Hk`7vr8EcWBm2=;}_?{JyiqrSIh>2;o#k1ux3X
zX0~!6CfNPB5#LrHLuaH-rlh1qKtRAHB&5fJVP$3YYvoK*h>9V;oDoBS_%9ah0JaSf
zF~_IO@FhVx_vED4uV;OIz2;X^Ifx!^5=0MLHDAL43okEyr`;EBD5vr@-Lw1IRHR=E
za57Qv(E5xKzr3=t43z9}Yo-_U!a+Zg(`QuyTtdTsR{K-@nuo{OFO+|@zviB-atK;l
zGJPf^v*THJK8qvzsj%=vbv6Ix=GJ8-1h!06FK>rS9q%SKbd8mngDQY&t49`3=P#c>
z+y42mtrI{9z&D%mmjmUO_|b~GqLW;kt9K?l=A(y_3ZEt&f0iE*Q1!Z1AQ-;;eEEhK
zU$?c@a3!Lkpny0W20gacaLFz#E;a}KhWH0uAD`zwGemC)FHm2|amvc#A|nZ1Hz(Uc
zaab{4YzFJDdB<#sjWs2Mzx@06s}u;Z_knKC2R?*5TPD^lON?r4?}`IuSWS(9SS!Ns
zbTGs5WY<(RZ|GI0sahT>ycxo2x!gjyn4xqxXXo#3TLu!DDyEzbX;Gg~>4b`L!2v?j
zB>e2zGmt0Xk<)z3bqKrxjlCCl%IPt5&_u4WFaX{|#vxzU`I=kK+?;9V`1jN8vkQpC
z)RX0XJ$Hlfgi-DiTr+%mcDS+NHFHK4Am$H&S6t^3E_M*-S)q+~x(uf6WK|P*Sa=+S
z^kUjrIE0k$^G;UMU^+sf5U*NKm|0l7ea)@S|Ks!I-Q3K~06h-PRkI05G6n_)YP^oU
zMc6y($RhfYNKKY6;P_Md96s;z37=%7nG**{WHt^Akc3NpcI@U+0@N(AIeToFOD6Sc
z8LQEOlCmxD^{kSj;&xodd9XTb>+UXhh{RmX3Q8*$+M)(0CKUYqMByBW$@88b<?-?H
z(UMm<5TZg%3!wan;2Ld9PFMZJJE1~cdXnql!zwqE*J{?MY7=vEdS^te-H5-+p#z9p
z^LFm<^PG66udZ66@*ytrZ^7H(tkaLroduLw5uiQR6U*Ck%@9?%Zj8UoEA3oz<Sa}s
z(l`+!X3mg2UX{w%Vm}<MyNVm_p;J-A;Ns_(6G&SgDb!_u_;6>o=^B96w!07*SKr{E
zBo9R)-wBlr7gR)cAg&^oAR-Loclk%E+Tqe$5aP7Ndo6<jqiAinUxr$k4(-N`8@-hJ
zV?}f-w=lTC<&BP#Lu4>op(K(~91J)(+|%9NKRg^_OpZEOObjs~yl+E>M5dUV+f#_~
zZVwuyDdcjW?~Bye2+3hW9s)|Xc6hqf)y{-a^dp;ifmwk-Tio-2Zy*qMc6A-->l0%|
z%+I$*5Zt&Stg58Rn5O&~lBo7LrV@6DU*%<Fa6nf8z)&V{Ys*L$@lxLMNlHXpc;lRa
z%i+xU^i|Q?z|2fTk-@z7s4d-hQ?-Cj+Dem>KgY*>U_PmWZjlO!9FKT-f{n=`gnDW6
z4_R#JXYx@QR~!(kMC(1o9{{r9ttQ?VYlgX%m5D_~MIDxpbo26yMvk4w?Q{NaPZekU
z1`jqm`Ug}<CW>llwkgPvxxi5{`-a_Szi<G+1O&D4Tqde0lsDHy7J|6a)c2M+{i+A5
zN{fnY^_jm;l9xfc3TI*`D_9&(ELiuKcNQyqqV?wb<nPbE?MwG&j<G`|GIy_xA1Ggr
zaU?Y6-0|N{pK?fjXJuZdeK|*ciE=EC)swF>o{Eb0f~ibRO@YVmo0;itjkp6R_)%Vt
za;N|ja$MwJva_*hrMeG-XNuybXRnTjpR6mA&|;dqJplu$%q%XuFJ+{L=WjFdWzZ58
zsL_+?)p;U7xlvFGp4y%gC!_bMrTr%OCnX`O+}hd{KoUY~k*>MsFt`f%O|B~C=dtwn
z1U_%8j^7mh5g>Wx(={{GbajkVY;(M3?Ls`tgP{^xx8leza<X^}6!T+pGF_6QDl;kh
zy?a?8>ZT@fNTMvPtV~Qy=3~wPVitDXN6XBgGe{##*(0fhYizHIn63^PQo6ZCMWbqK
zWV32py05BQhYpxmk1?+Hj_S+jiYpP)pR6#xyJ9Ib#-TzF!;62K{;Z!)oD03HvkDjZ
zaB2Vk`!^3ZSyiOKk@%`NT^IxfLTCer0ARm%I{Icsf8+a)A1%WLn#2;bkLgRIqw-ok
zY>R7B3+4m9d_R$z&BhZG$zY0WS2tPDRCx<o3K1?QITaOSjI7Xz+D%qdH-ILevqR!=
zDM;Y`T3O$=njrep2nQ{>le%i6i+j2GJS;>NV#x30=6ey`wdNppH-4Nw=}sHhjuJ0K
z9p@*gu)n1Rv%+RC%<njCeY);mXDOfkEZVDAuMqVIZ-^!OMn}Ps7E`|K9~)~oycjkt
z6l|mFi!*F)qxSpBF@LRZaHQ*M|G?+mFwv~QmyFh$3f@x2kkPx>Be;b+9;C{UJ6QA9
za$H+m?oLS+@u6s#d2VjLQu8ati0kcI4WI_mhi4EZW!KfE+4Fr<6f`^#73yAo<?EX+
zMOVUc#z{_43T{GR?VFMl4U07)@$oMV6~aM=IMzwPR)BpdfQ8)@Ii4-KSO<S_7ve$I
z%qmE1Vig%Jt*yT_G-QB=0sLB8S?M74)UrHCz(}Liuaa`)bahh%)`!B#0-gw!p+Uhf
z9)8n2I;v$F@;qA=z}@$_nHr<xp5ZjMknJu$t(KnNYh&YpG(k6b^YMb{<tsGT_0b*K
zkIK(|yH_BKh14TT-H3|M-hX8G{VS*YN`%9=1I*>I($mw;JUx@$W_%JO?r`p=%$$cp
zNM>ek4rwngEqFS_yBcu#@;C|HF|xrb%q@^|@j)yf6cmIg9h0S3ZT~$e$DeH8TFO4Z
z<DT6Xw7^Fm+60TJRxitvA{oQ}W#16pxs4x!0oEMrQ~C2}7pLEe!tdX|W$8(x3UhR{
zw2aKmLP3XS4?IB*bfkDOii~%mnpIwoKotqc#^h*-K4oUkwbngWQgU4U6C<Cu#gySK
zA(FAumnj+L^Q{7NL<?<6%`zb|vD)`SAS)~D{1n*$={4Nm&e_HL4<8)%mb;lMe();Y
zYMAMTfC$nwg!)9W_Y&LB%hR<~A&=ORk&$;9Vp(Id1FJj+#ff4xVl+fXD?MqT1K!L1
z7Uj0rwZKj7>^Puu6OTQ{Rp(?#>j3d17r?VL2VBF6Rt3KsIJ4zvjc0q}230A<ElVE}
zYV)2{ZS$VB$jan9;t+@)ZcIQRYCqo+E{{dy?Q2n$@DRN$H+Mzm>T>I<2UHS3!Nk|M
zp5)C_f*^?cA#;Ml=>t+c2S8GA6fQ0<vMi{wSJ+MJ<?g35i(N^No!#6tD{h1uTdbrl
zXLA7<ie4^=a&vS4f&wn86bt1I_{+t+i_B+0X~3)u1ke(h+p=Wo@v#8-fGqONq;x6W
zPzsr|{|KqWUU{+4hg(d__KSarAxVU=M4-)JZvYaL{{9!XQ#CJFksoF0zq3b3h7k(8
z^vFJZ=YR71p56K1K^*l!yg@|m!VrM-;U0ttDB(h=22O>|%VX+XRqbIg(N8czC{U;u
zA-n`AMZAxb=;R^PT{gTrFuVfz%by>OkfMW{ACw$>b{5)DE*iphM4eZ4OelZ|FaE7t
zw;*^AKp+qu<p9I=mj}g=?HqPZ^y!eGziErS51Ad5oI#yTAR&RY?cds3xD*}YHPr{R
zGHyY^P6)TyMDb}MG=Ku$iosWr4RW5~+3xz^y?*nLRc+cnJ>lYNyy<r=38ANjg+-%7
zsta{;`gwA<B4eB}RD$&vp0hB>L{id{MfhZTB}&gW7^MC}#3E9ag8UXV=dIrP4^K`i
zg1=w-mB6#H=fN!KNr_W2?*-k8$OZeW%L|u_2atpm78c%{kDeyp*=b0dZg(s?mSFTt
zvI_SvU(!6T=0EPXGcv&l6nDRHv9QK$_OIam&VEp5rpx{4kvKEyueAe{3D>2s2XRc#
zZATBw9~t$NyYJ9eTfJ=@;Y`m+3A)-foc)D$;ABWWG~6^xvwtM{hAmYfn>|=dF+9j7
zNLhBA3<axEZOyZ@G)_)VdbO?}06!qL%cwo_d*U%hN3$5W>sg5>DY>0-RaS~Il76UT
zaBz=;hE(;|<q(U7Em*D5mcd)8cokB-e>(zU#tNzit8wl0tIiY?6|4XL<sW{pC#tw$
zd)Jy_JaJR{e+AXPaZhY$9NnYC&^1IOxqiH1H+SywF<Dh&c28W0aOv@!-ko4Hmf?g?
zdDq`bmrL`x5`2DfJdPaN6A&;uvOO3T6BB-3#sXDJIw;*Acp?#Jws#CdajkvO{lg*~
zvKh3rR1zAu{EDTF+{tZcLWf^g`57u%)5fF4OE>XQ>s*JM@BCDGCz4vz#9{p-2~Ngy
z8_tfSKJ^a}6QAs@cpOc+t*)<s0rUY(>YJWcW+u%)+~$3M=OM;~BwD(Z$jyidtKp2K
zfQUPY-q}h1gR^RW@_T9+(Y<U6=tGNym_y|j>L(;W4a!4CtJT7x!X<B%oE*RRVsGH&
ztl`RwL%#;|>)&DUwjLJ;NRN$jWW~!H9grt)JVblrpkLmbsH%NkqH(EH9&>Xh?77Gb
z4T&+GKPw2kPl{tQMiYJ0glTE=l*(zU8cqFKRto*&`IH|_3#4@MID=E3+U;^)?Q*hn
zaA*{TNYMIj2T?;jWY`*0hf8UFb|3D+XyVF75?Wp|=;;Z&?`VRPtI+J~^Dt@SUWoSg
zHc!=Bd2L^wafuYQ%ndL+$<x$CpeZUfEq<w4;q*nH`%V&KO{Sc#PSzZGe><Bq@664G
zMIlqAFY@;d69)%}sl_`IeM3V(ZbVvf(wI`wO2~RpBhzs3_<C-9NxepI-b=>s)>FnI
zK=i?r=<}`4Q`YVMk>?w@jd4U0g|nX&&!!EYv^VVDcJZ-Ryxw&FbC>OPnf*rcxaw=}
z@1>uEX=7B5l9N>n{3L^R8Qkl({}sqP!zCUaofsiG4g?zvb+7lzLg)bXu8%p|tBMTS
zuffhBs@CvuejbF0Y4l);Ri(uxH`<ZX-XT??YLi`6dA`QYA5FDro=;ox*7C}Y!*z$d
z_n%aIkI_(+^EoX)9YRt!m)2tnUC?D=%{pk2#YaVPL<Gifr)_<07kQLfL7K?P7Gdm3
zA#$!FY-WY0$|9SKVD|S^9P778{%#&sW9}oI%75+QL;LMd@5Jci{?+uDdDB7V9-_RW
zhx%%2x1b#Jl5#kX8H3k~<oSao64f00)J`#yw(5}hSF)>gOZ2K{4pVfiKO|{r+Rd=s
zw#=AGXHQ+IlioM-7<*3|+4p6a4Q6L&>;2wBixSmZk+VQ|*9lfJym8|nzB*xmC2Pj7
zj(6|qe(n)=_2k<$Uz~MNxNoC5@-t8s6|~G}Ma5_BFp0j<Xk{yAzG|ATvp@bmu0hHF
z`5RWlRVG4pVI(j<mQAxr$Z=Z+_6iB;SH}%`VwOSNxn`HGg&H+n+V2~CvixCdk#l@c
zx!x107R}ZaK>7M}#KKq64FnsbD&Dha-iv$xdN13V$a0l$ul{qqjy*T58Ntp$F@#j0
zBNpc{CnBg1u}ojo*6{nvz%<)wRG8&pDW|j^Lu`spPqIDj#ro9PT2cFkNJc5?$ovr-
zwUpPjAa@`M+?Pdh0R;E=nG5FjEz3jxZfYb1TC#>^5k1j7gBHXwWE<^*TR+t-jTR0(
zp=rl6bH4o4Fz{xhc+xhuD#wE*JXMalnr5-0ADS5w9WV9V-j^~jI&%1mvUB2_nPG+m
z8o7_sB=Oi&YUz-)m~gPMVV8WAv@4FVR88KGHBvDlN2kG&;_ALHM$}9$^_Gx*%|&sK
zTnCMpE$RI@g?k+<W%YM7x6MWbn>;i<HR^HNUPL{-(k75pvX7GCC%cBe6n#FB7?1n&
zWV!jfsaNf(?>&5|H_SpL`txYo3(^qCgQ5C;zGQgG&=y5KGpor)XG%ybQMJje+LLwo
zcO}LV9eKaW!IoAEjpa^^<K4DL+WIc6eifOt_{fkqNOnq@`J?88HO98cF&>_;;TQi3
zcz3GA`PeP3Vr4Cjv}qeL=|dfeXn&DE;|wjqq5bu7*|_oAN8Elb&-F50Q602=Ic@+3
zs<1UA!UZaTtZv3u^8EM2Z8#}q!UNV=A2E|5ia+PdTzIX2EG2SX_rJwNh4<`LmS+zy
z2^P`?;!QXM#0nwEwd|~{p!)jyl`7pa+7%j8l0UOGdvJ^nez)7mv}YaKdPf{abfzQ|
zJ;vIM3JS4O60>~v3!!qEXaxn>ot=R>jES{wN`#d5qb1F)D{<@78+5^6iU`kr@sTcE
z-MA7w*BEm=aA}i?KVvoX1rr^R|F#Xbkm?|i7)t!DOLcSys<CDg@(4epi4MPLc@~G`
zsjc|d?YXcHfj>)B%iOYg^&=x9@rA*!+J?xWrh{l48o|DH?H`rFRsz0ULR47i%AR}O
zbce5KMz5&pOaq-N88Mxf<DZ8Z($;5ms=pnkYTq!P@Tf96=!ZFvH?3jO(j$wsNh7RE
z&ABn6aBQcz`JMm#UI{w&Y;Ou89Ap3SLpC{O_@h!8p?!?1QSuoPU9j=~11UR8X;Ex<
zB03e4YfYW@{g&vX>+w!F+;<u9Dhgv0o;_3NnGd=dkHsZg%#NjHcs6^$`a(<pCE;(M
zGxZ;HZw%Em#Gglz;HcdFkTTl-Q90M+>f$Iywe$^=<J?yiaE3f|hkPaDL%gL}{4dKm
zTw{}oJJF65NFV<-1Gd%)P5UW&2`%=A)nKiJ$l??}LdEAP^l=@uM{{9h<~^jV>(19P
zXSa=0oOM(TIj@IdRXp5wmk<-4HA$8s`b<nau3+XxJ~(+3(_cs;_{A-sR~q}~()f)U
zEfvFy`r0oN8vn6+pO=)9bLe}1tmJx>No78<#>Swec40?|jbI)^7QFp^dBI8o4!M+>
zj(F)SyWrD;E=c1~#(I4<O3-R*##gsyx-}b48AS~97vmM?Yo5wqO>^+iJHEN>j_u4N
z(q(0UmMu-joymHe??0{MRrv`#y%0n^JhF$IF3}_cg8FpC<#w89mqJ7>JYN0+1h3GV
z|4Jx1E=50nPZn$;&405~L*9k)Y@rY1d)l8R^?h2>z?7%M$S#8OHa})`_iZt08VvN?
znaoHL^3deJ)v2Y}uInnu`qP()T|Kfeb@}U3xBso<hY+mvUL|ClFJ5JpJd)!}m6i`u
z%Z2h2&kM~;{{=mnx2NwUmE|K4w{x9;OOFxbRN58P)%4=r;nYbL(*9EZa(+)vIio^b
zha|YUZ-~Cc=2~$j)snuOJYh9%C^4JIZ1cxu;*M!IS_+jO{!#Y0^D@}3K8q$h8D7Vj
z#RTj8_aFNzlqA;=?D%CeDc^G>DkY{xmVA`g__wJsBJNYyVM`E(FwD%e3`+i1CFE?M
z9nBpcA5pa_toO8S%lD`fGpG|Y$m4TAy@V_VIu5dY$DM%Wx|Sa4XvKIUQ(T~)^7ks{
zx6c>`2U&+I-Xun}Jy>0J*g0cxaUp>k`Wo4z_e7!n*zQQaMLP1|FM_`|bGgz<k+PIA
zgi%`O+`iC;me?EFJPkjDa!x(kw2$Tz<K)jgywCsEUaHe&_%Y)xz5XgIbzOoZ_g9R*
zK5O~Ou>%7}t!v)HXC=pXBcI)4!Dk4YRJR<?AvMu$agni~O7SmV42W8&iB=ZWB6Al4
zXT@%PFEs2S_uYd5&7zN#{3f^X<h(`rJO&tJh<KjJ>FDZz;n{ZoCr=%sJ02DG=zV&u
z8b_cd6_z*doZ&5#36U4^<v^PG8m_~hPyfa1DE<m6h=}57Mb;|`y3Be`L5j{13}y!l
zOOH{`xt8nYFZrCFF>r<ai>?)Hd=RZciS$vaX;rb@eZIhlRPkEGjEwum#h#F;KVa!{
zrdz4F>rtM}$%!vP+s>4sMJZ@j=9G(9vN5qTU(<2R(9q6kf+Q-Jik8kl!kF^eTgG4u
zR{j-`qi-;7;{1hiN6ArP&1X?IAn8QqQp#z8Q3Wh~t&fO{>xkNJXR`8oB%nib^QP=Q
zJem~o3Y|X|m`C43&c@MpWrewu#j)A-+%Q<wWRsXu%6CraiwX{xTR+c^Jd7KD8DK1H
zJ5xbU{+(E2b+9Rjx8kA28z)QK1ot|lWb`lWblEtA>jf=6H?nen$cP5um4pz}y-S|u
zJR;xheg}QwK{by0qzrMhMB;&<vmQ~JJ9adi(`}K;v(IcM?_(Uj4UtuNT^3+XqT-ME
z(dddP(b%1WUGb2d`l&1<mT$vi-H}kLh|OSs=HYT%)C7H8puN_>C^HKwrm7BU1Y;=e
zb!@|?1<NL`&*Z;LVoyYHhtOTyX;-on{=*ml<?B^n!(Sz&I<Pge7J1!cd7S^Q`>ymm
zo`Jfsu5bR8vOTWb9t^8IU0unf5%xz#?E|qL2`On${{FR>qmR$^nGw02zP{;tJ%s+?
zfMjqVVKu+T^`4Njt+^#QqracBV#C~;UGaG@jd_oEVnV`&82Xb{@#lx;lA717R32H~
z9@OyK#cFJH;Fzs(s@n9ST#;`#ei{{zFKZd2NJcDyMNnk;w8W;$sZF;dIxbaoYwp+~
zW!Wq-6uW(OP&y&;1_cFuVIfHy@v*mf{GZW}%a;T7Kg)hRwQJ;wqA~SfUdDpj_ds^R
z;vPO}M6HD-zaGWa_}`%P^WMM;G^^0v4(0$J)n)nV!$*y+F2#t_g=K|lH}r2N6D*2@
zCN9GaF)D=B6O~G;EaKcOkQCiI-P8}-v`w6<y)Q(?dKD@WYt+~1pr=?y*ldCMK31~G
z;R90mz2&CCEff4Kfe9hK{_J?@`axf{ZrWwFF?j{tXhn<olgw?zuQv++@|{Z5YXkz<
zrm-7cm;!F=AsORX<`1CPR^{5=Qi0{R`H`LkV^H1TC<rG_)spq+?mH!3HVaD!OB=*T
zM)x}OFY4Ey<-g6YS8uJjhx<yq?S<v{1M+8&tzt#18Rwu~_eGTjGI(euM73oxU0_4!
zwsRpNzvaE^y*!r2pangNj_Z1Ecx@+NUe~udOqm96m)87??#vUtNE2ke?`qp)WGP34
z+qmUxzBB%YSJ1V}y)O2F45cH#JRv_bX~(kH{aK@A9C_tRY{fnIc5hM4VE<nfVX2*i
zhu@%5hbmC~yt+JtreFm0pP-c%V5*I3llk|S9s=Yt*ee*4MYCsDn>nPWFt<(W>$!ay
zQnn&BozHDwdWX2ATUfvj33U9^x?qKM|L&vJO;=`8^_LTwlDv`E^z~yQps5iEH$GPR
zz<Tk~j9@s}<Y{P07O9D#LCr`Y(S7E%tjYL=2>wMN6db2CoZN#?G$^(}Bi*gxOdpEQ
z=ls1RLN~^*SFPGB$gu>dX8rL9-cF!&9F*mcTp*y8B0}mj^RElh$4TpHCM~n36CQ1O
zX+yA3J##tI+#bifvB9CF6nl%wI##ZBKAMdTOT-Y3_NQ1$EX@Nc{G1cKeEjYJ)q_;_
zq%DIXOuqqozsq*Rq7zQH3slnvC~<Gzu-$XnHZO!GD{K4*4)oX2-1@9?_r=To>qFv?
z6z-dazUXEp8Fi)T<Zd@(z{j8E3ydL-a|iL?EGxtA?&f&>7&|liwS8Y^-F;6l{mVf=
zR#ijJoiioMw%=SB&Mr@`QGtWbD85fCk<D7c725y7xMhTI5z}<<!n8}UnXAfi39oZ$
zVM?X2p?QuA8a1A~c0@X827DZ>${U;@ICT8B6LOXn1=@-N+_{Itc?GG*ij0Q;Fd3^o
z)J*?;cz+D|X<T_Ub7a5&Ri`OC7-`5EtH_ED$mgIRB-VJ-KVF*Pm0jL-X@U$p!}c>@
zg7UDVcs!$T1IXs~Z1zBI&SH9Z2ZxxGlM@#*|Cz0omhfBdm0Azty5E!e-;l=8{^BfO
zvMblfUXGw>b}@IDqHPR{XXESP4xM8_ILhV@OHti@B%6)d*=ex6g5}~8n@JmS=^LhB
zt6thw??dRfjU)Zbc=&dOR=m3qdNA(J_b|O{5<{<&i)o}J^PJ1?{wZY9_VEmx>@>5r
zjhvgCb3q0ZLGO)S;i__qd7tT|tBP4B5r;(+vV!jlt?UkZZluUMwGJg}$qr0av-Tyt
zV{fY&&!Zyo65OLrkMK6EP-BOscgc%6c_gn5JX&*V?~PCB*B{kkh)`!EdRdl!Cf5Es
zoIf~3bRB8>(@5|jG@MmvpSu5z*7dSqUQRuS3S)S9xJ=hMs^}lln$MHJ5l-gcEA@Gt
z%gbTv?w3?aT*KAHgzH~YTO2rc`+jENcz;plZT%cU)G?Ue+0^wutX2A26pruSy@*>(
z>Te56UO4W5?S4}%?EGhG@AK>WGxU4S<YI4SS#o?yXel0bH{%kE%jYge@4c|qyl}7R
zNgrD~;D*kDarfAJpi=z){p{DA{cV|wi#`nh#krPtgvPq_s%#E>kykFMi9&+LA-igk
zD!bXXJAt+C?ar|Zqt`9X^K?~3t)m~sbyGS#aGFY9@qYL~I5ovFbLpCX>Iu}dCYK0*
z>OpI1T+Yz`DC9l1q^&k$x?rL-^52oF7v3HiLOryVE{rGUG2LdU!VWNpr0AM}{RhM<
zsDYM_OHQ~BX;C%mgiQ*ma?k}g4Bd9cgYbJnk2Pf0EXEOgJ6d^#Si(e`)iOs#<)!sb
zl|aravf<G2+&#uZJ-of3c$_{CTS<unY`4OO2=|!imsE$hrSwf&DYhJsZ}C^Y-_<KQ
zi0IxCiKJH|&s>3t3;YmQ*92&-#<tT#tunKuqy%=MVeN$eht{+{o^KD$<!f`{z`J@a
zR(s+%l#W!6{E1SZ*P|b6YZHGN%ztdn_wDrO)2D1QsYJ1tzAlam^mKW}cSs{R5|-My
z)c<yI9U7AteqD|+4V$DQ$jTz!;&e+L`$<@x7;ZCxcziWdaoV%wczkhbb>q!MX)Bgd
zp(IB@d?&8)ET85`@Te^s&61R5h5>y__uS6c+ZUVq2%g6R`SKb!u1$OOLPeeT;2>54
z-N0v<G4YmE7DxZr4v(9d-e14mzcaWl{?;@2t#PuKirnM20MB4tBl1T>^hYlW*iHwb
zHP-vwclXxm=_!ibbhJ4IOsD%te&W`&=+R$eUuN-Cn-kIbFA&VtyprV)TJR=tkKv9K
zP?&nos79ZtR<c;~D9)K8A%VcmjKEu@J&f9Ov=*6J+}p%6H!F^V3<<?fOdylvV1o7z
zF0qtL$dsB+`L&PB1rVEx2V0=O!|e}toL+@!7uXe1BByT+&*$$zCJZf6;7FiKQr;(>
zh9h*_7^AP1#ln;M7+KTP#X2yGybAU&Aco-hcbrq3&7~JBK^uWANVU01C04>re*fTm
z)mI9g$)BrP1)bSi!PXj3|KiPz7ARVsnBgEI$bXeQ^g_izvFrxzIr+1jnJR89EgG(W
z%8kecV+J0!PR;Ga=|8_T2i7GpHK6f=!2AToLK3_XV7_tA&GwGJ8pQQqQ%2)0I=fzU
zhQ^ZneFOh%R>BH+OX?)WdS@xp$%f+m(VU#0?Cj*^p^Is5LX^V)h$5=t-=mL!r%0Kc
zOmAb8U#QOYR~q-GD%qoMUz+zs=!$#g1Mhq>Eihk0)FzX(d6Vhjv{m-`;Rhott9Q^=
zk}171@L0NCcLmpjhYrQB(Zk;F8*b5#gcHg}$z&B93BRnYqNt)KNbwk7y)vM<_p+y!
z2ryexH$}lPqj{{1RkEn4r?KLG@V1He4gV11bw(l!oPUrn$>!a6e$KL@|D>RA`K(h$
zzP+OZ?`Uhr(5()r5@Iy|CD)Z1$0MyV(3vqJNF%N|BO;u-dMMsUd1>pBl83ef1(?sZ
ziz96Sqb;fcGkHWK@z6CqKCnjMrd0?>LbA#btrTgo+xOVLBF4%PqO|OD*PCma`{m2o
zm%WFja=C**l~{;bgDwy>SB01FCVw!xh3g-(Fv*mt@JQHZd$X3RrdI!#u?yqG>LBlp
z8{m$kdliJJ441yVd^!8MLlq%ebbXLg>Mie3Q^XPhf7piS_h#3oQg$c`eMhDmlM`SA
z^=-ISlrvh1290EJQii4vI8?~dhM6XwI%Yrr2ve6#$7#3OgH0XH(tO2Z+b^WJFWTaI
zm5_0MWlmreF4+xe(9i=q$D6$?tkUb4jlhaGNzUCl6I5X;($N~pQyu7{CCIwLvJorE
zAy%#LlC<%WQ1{L8g)gWwbbXx#J`e>0p-K3}kSm4prdY>In$~8?`^gFo{mWhtp#t|Y
zHTAWrX$Vvhfp86!b5yHJ2h)Hi<rx}JdBj=`E-euhdI%#IqT63XLk=_Fp48(Z%s!~S
z1a6C^WjGM1ff-CJp<-xwb@F`38aJg8=Tn}G??Hj#BW`X9=+8l;=YPzOEVe5H3{R)*
zJXW}3b0Dw-2LU>ae14ZgSI1FTvK)y8hkaHUz{Jfjg$5*wPP$@JBJ1W>xp{UJ3sV$%
z6fo0(e~05+Eo1g;X#4%BsL-%fM@?WT4MPzQ2$U{ke$X51>FJSIBkGO-5^;_dw6KJD
z&+P2&i3W$NsX4Eq9uMb!+qM8CNsS`ygjVRX7x3keOTuc_{}EwuR95#N1b>2VzY6od
z_VZzDn(^WMJUj?tyy0BgKvUMOv?Y#e1O5UJ50AQ+#gmX8%pvs~!(;70^-gsb=w4i;
zx2rqQC=Yw72Dz$wh`SJUD1I&MsCzL#`7n)PVITmL5U9}$6k`!slEAKuuuMkv<KSVa
z2^xjg3LEI}-o1Bk0lJYe-Z222A>iRcSNCnvrC0l3X8+}E=r*4mFGK;i(_bE|9tIEC
z*w{RGHBqA;iO;I{>|llic`8WpVF1_@o5{;dpI{<q00^L4)57yR$2Dud4ThCh`6Q>e
zkUx32lL&w#xF+vYXTS-SOl0n*I#3vs6Mz5ug#lwCI&Mnxa!yWVwio&gFzI4|7rF4g
zs_OU;dIm6xP`yn{bqdt-K+9wx-_Vm}LdDw=tXMqvN`pA<`d1Ij_~#dC>FLXGnwA9z
z<qVPTbYU-NoKLK%F`)tGl}o|MAj@R<>fE=%6-|Q}9(D)F5ipz)3xf_2%YyVztG1K^
zD{6T-Q-Lhg>v!p-p{WV9Ht2!El*+Hw!Q2AjAIZQ{UJjY(BV1Tm_@bI8e^!j*=j+$H
zmH^2fYWn#?zs8@*p!0B&4)WZkrZxvs-jvHkh098Yl0V2D-_*qg5fT#Ovf~F-1}I3!
z$bNbEVDP`M%z#qRnaEi-f?VG_*<YNYhpYX`1?^>^I~;r0yC7lk1ZZV>17CUGz+{z2
zCW=|$ETDffR>}@7N-AP3C73$;<YBC+q+~pCSaadWN4X3^>FI2gQXt_qD+6+XB1%!;
z)Xh!X(6BIIiUWnfTO_0CVut>&qF6URQ<`#I`)i2qUvsyE^zw!2l~8wdN1{aQwTDL%
z@PoxRE;`H6lDmUI$9O5*98ksuIPw76>=CVhx3-u_@m7CjD22jFLl<f|fU^rNT69`W
zuo^L%MidhfsGK=BuZ>B;*{u11sH~{0OcxBpB6Kk{2zlU&{5bN9%Y6De`9`jH&y3Cy
zG$OO=>kZD(c<-JTXO5`=TRM@`@OQ<A3o@&p8Pz(WKrBPcqtBWdV!r=aM-odqK=mms
zRI0of2VV@|G&eU3xo;ayJ;~^8gI;?1p4~0fKv*VZwyJsROXh<-(5D<=y0TRT)#H5+
z<SkZ&iILH#fqxSYl!xnMlF%4M$mDuZ3fxjD%UpEi*F!ErhY6Gk#%w(Hx}Un7Y%u~F
zm`O&fYW(tDQZX#ig3*`$zP{~0;bO_%0Vr_*D7bIc9sT|L7e)tw)Xqg9*>>@iUw|WP
zj0ni`RrYfj&?-hvYe2d7*BqDO)hQC#T#WzCur2Tr0`mYEe_%#QilIP3h`cZOdvcO8
zEiG-B>htn-i!;T&5E#_*KAsB$l8M;KHG*auO2W1FhIUYu6A4)suwr1=eygRz3jrn$
z@Eo&aEYq>!dO3rMpvq|nlOOe)HKy7?<F;a&Wt6#c;W5OWsL<Bd&eUSpC`!s{hlCtv
zbBgEx@H`KK6WuWZd<G&}VJ%}Y4Os*+VORkVYxf{Xc5f1BMZ77}xB<N@1@vd@lhtw4
z)6=X`%6mM2xjrpdgH2iRbUbZ1Q3A%)U7!plDbDYm0L^5WDt(!yFUcSF6i-4cm5n_M
z!&uP0BOwd}Rubx4CzOKQ!te}mTxID4jmcre1T|~}k|IOR#q@@()lB~Mh|A2Rg_1YZ
z^YkzE_31zwo;oqd&%9DiUV(=3&Q2S((@M{MxJ78dY9+Ly=2w7nT_7yft@b$!EqMjV
z7wL+OYVG^F`ucEDflZ%!E+-^FmxS(sw!bnnGn;x+j8xFqPec9x--h_*ByjgA@xHmR
zNoE8--0+y6E=*r0o5R^0VPM4t#}Aw)OpEOQ|1W-3*etKCAP+8ZfQn@Tk40&+2g<G)
z**oV^<V8+S%_4-Z-|EPW?oHIAe!1ua4+F)2Iyg9hr@;VNaor(>Z$ra)^PtcJP|m$B
zn4AEjCNK%X(}0ctr<~}0WKsZHN%s0~`X75yY|7s&doLZ-lUJn8F|5*)q32!fcku=$
zcz~S@NH)h8nSQPd1BuDG67uc91^`You+aiRjKK2b10n`+1cCIkL2H$MZ3A;i=m}6U
zfPjq##LIS=2>{nAxkXpW@!u#R>;~po)()>!<)LQrt?a4-H6Qz28irD=t*!Mlp97ZX
z<;f*p*`j7+MG^sd;f*6MmsrDRb~E)pAQiI*s7q%B{y6lL5E(a`Kfw>St}6N9K^dL@
zn?hPE!oon0gudn3rHupXLATl*fY<>D?Gjf9w7-U#;y3UMl#HsodU|3zmrxx49rsj-
z$L)6)<u3n5UE)Tyscp<z)}x^|2n0`v7lAR^-QCUe^r<G{wSH?Q)Pv(-W&>0!#}Wc(
zR%GW2x<v)AfPcY>qR8d(E8FRx;Kd#Tr#A~COyKefpHyBS$LJG^0cg5Bw7W`xU$b|@
z-GhbuU9R}`G&YKrhvkl;{lNO<0Yt!1)Nn&-EG8)d_CcQL1n&LjexU@oAOxEx)x=qG
zLqmgn)_^q+>@W&uJW=CcyeWlxd!BVICM7ab;$<!<1!6}jDQZ;lNmQGppI-wg=`)n_
v{y!X-qI*%z82ky?i()h?tudCo$yd}IzI+xfiwE*BW{oB%tt?d}VHEg(G5pY@

literal 0
HcmV?d00001

diff --git a/rendering/cases/linestring-style-rotation/main.js b/rendering/cases/linestring-style-rotation/main.js
new file mode 100644
index 0000000000..f69bd1cf74
--- /dev/null
+++ b/rendering/cases/linestring-style-rotation/main.js
@@ -0,0 +1,70 @@
+import Map from '../../../src/ol/CompositeMap.js';
+import View from '../../../src/ol/View.js';
+import Feature from '../../../src/ol/Feature.js';
+import LineString from '../../../src/ol/geom/LineString.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+
+
+const vectorSource = new VectorSource();
+let feature;
+
+feature = new Feature({
+  geometry: new LineString([[-60, 60], [45, 60]])
+});
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new LineString([[-60, -50], [30, 10]])
+});
+feature.setStyle(new Style({
+  stroke: new Stroke({color: '#f00', width: 3})
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new LineString([[-110, -100], [0, 100], [100, -90]])
+});
+feature.setStyle(new Style({
+  stroke: new Stroke({
+    color: 'rgba(55, 55, 55, 0.75)',
+    width: 5,
+    lineCap: 'square',
+    lineDash: [4, 8],
+    lineJoin: 'round'
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new LineString([[-80, 80], [80, 80], [-40, -90]])
+});
+feature.setStyle([
+  new Style({
+    stroke: new Stroke({color: '#F2F211', width: 5})
+  }),
+  new Style({
+    stroke: new Stroke({color: '#292921', width: 1})
+  })
+]);
+vectorSource.addFeature(feature);
+
+
+new Map({
+  pixelRatio: 1,
+  layers: [
+    new VectorLayer({
+      source: vectorSource
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    resolution: 1,
+    rotation: Math.PI / 4
+  })
+});
+
+render();
diff --git a/src/ol/renderer/Composite.js b/src/ol/renderer/Composite.js
index f1a6686131..4beda7874e 100644
--- a/src/ol/renderer/Composite.js
+++ b/src/ol/renderer/Composite.js
@@ -30,9 +30,13 @@ class CompositeMapRenderer extends MapRenderer {
      * @type {HTMLDivElement}
      */
     this.element_ = document.createElement('div');
+    const style = this.element_.style;
+    style.display = 'flex';
+    style.alignItems = 'center';
+    style.justifyContent = 'center';
+    style.width = '100%';
+    style.height = '100%';
 
-    this.element_.style.width = '100%';
-    this.element_.style.height = '100%';
     this.element_.className = CLASS_UNSELECTABLE;
 
     const container = map.getViewport();
@@ -82,9 +86,6 @@ class CompositeMapRenderer extends MapRenderer {
     stableSort(layerStatesArray, sortByZIndex);
 
     const rotation = frameState.viewState.rotation;
-    if (rotation) {
-      // TODO: apply rotation
-    }
 
     const viewResolution = frameState.viewState.resolution;
 
@@ -99,10 +100,17 @@ class CompositeMapRenderer extends MapRenderer {
       const layerRenderer = this.getLayerRenderer(layer);
       if (layerRenderer.prepareFrame(frameState, layerState)) {
         const element = layerRenderer.renderFrame(frameState, layerState);
+
         const opacity = layerState.opacity;
         if (opacity !== element.style.opacity) {
           element.style.opacity = opacity;
         }
+
+        const transform = 'rotate(' + rotation + 'rad)';
+        if (transform !== element.style.transform) {
+          element.style.transform = transform;
+        }
+
         this.children_.push(element);
       }
     }
diff --git a/src/ol/renderer/canvas/Layer.js b/src/ol/renderer/canvas/Layer.js
index 47b0a582ae..182ed8c653 100644
--- a/src/ol/renderer/canvas/Layer.js
+++ b/src/ol/renderer/canvas/Layer.js
@@ -184,6 +184,27 @@ class CanvasLayerRenderer extends LayerRenderer {
     return composeTransform(this.transform_, dx1, dy1, sx, sy, angle, dx2, dy2);
   }
 
+  /**
+   * Creates a transform for rendering to an element that will be rotated after rendering.
+   * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+   * @param {number} width Width of the rendered element (in pixels).
+   * @param {number} height Height of the rendered element (in pixels).
+   * @param {number} offsetX Offset on the x-axis in view coordinates.
+   * @protected
+   * @return {!import("../../transform.js").Transform} Transform.
+   */
+  getRenderTransform(frameState, width, height, offsetX) {
+    const viewState = frameState.viewState;
+    const pixelRatio = frameState.pixelRatio;
+    const dx1 = width / 2;
+    const dy1 = height / 2;
+    const sx = pixelRatio / viewState.resolution;
+    const sy = -sx;
+    const dx2 = -viewState.center[0] + offsetX;
+    const dy2 = -viewState.center[1];
+    return composeTransform(this.transform_, dx1, dy1, sx, sy, 0, dx2, dy2);
+  }
+
   /**
    * @abstract
    * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
diff --git a/src/ol/renderer/canvas/VectorLayer.js b/src/ol/renderer/canvas/VectorLayer.js
index dcabe4fcbc..c54276bd69 100644
--- a/src/ol/renderer/canvas/VectorLayer.js
+++ b/src/ol/renderer/canvas/VectorLayer.js
@@ -81,6 +81,9 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
      */
     this.context = createCanvasContext2D();
 
+    const canvas = this.context.canvas;
+    canvas.style.position = 'absolute';
+
     listen(labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
   }
 
@@ -275,12 +278,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     const viewHints = frameState.viewHints;
     const snapToPixel = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
 
-    // TODO: deal with rotation (this should not be necessary)
-    if (rotation) {
-      rotateAtOffset(context, -rotation, width / 2, height / 2);
-    }
-
-    let transform = this.getTransform(frameState, 0);
+    let transform = this.getRenderTransform(frameState, width, height, 0);
     const skippedFeatureUids = layerState.managed ? frameState.skippedFeatureUids : {};
     replayGroup.replay(context, transform, rotation, skippedFeatureUids, snapToPixel);
 
@@ -292,7 +290,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
       while (startX < projectionExtent[0]) {
         --world;
         offsetX = worldWidth * world;
-        transform = this.getTransform(frameState, offsetX);
+        transform = this.getRenderTransform(frameState, width, height, offsetX);
         replayGroup.replay(context, transform, rotation, skippedFeatureUids, snapToPixel);
         startX += worldWidth;
       }
@@ -301,17 +299,12 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
       while (startX > projectionExtent[2]) {
         ++world;
         offsetX = worldWidth * world;
-        transform = this.getTransform(frameState, offsetX);
+        transform = this.getRenderTransform(frameState, width, height, offsetX);
         replayGroup.replay(context, transform, rotation, skippedFeatureUids, snapToPixel);
         startX -= worldWidth;
       }
     }
 
-    // TODO: deal with rotation (this should not be necessary)
-    if (rotation) {
-      rotateAtOffset(context, rotation, width / 2, height / 2);
-    }
-
     if (this.getLayer().hasListener(RenderEventType.RENDER)) {
       this.dispatchRenderEvent(context, frameState, transform);
     }