From 6e964c7934c1ead0830ea63f8fa0ce36824fae73 Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Wed, 14 Nov 2018 17:49:23 +0100 Subject: [PATCH] Port render-toContext rendering test --- package.json | 2 +- rendering/cases/render-toContext/expected.png | Bin 0 -> 3123 bytes rendering/cases/render-toContext/index.html | 18 ++ rendering/cases/render-toContext/main.js | 77 +++++++ .../ol/expected/render-linestring-bevel.png | Bin 950 -> 0 bytes .../ol/expected/render-linestring-butt.png | Bin 873 -> 0 bytes .../ol/expected/render-linestring.png | Bin 966 -> 0 bytes test/rendering/ol/expected/render-point.png | Bin 717 -> 0 bytes .../ol/expected/render-polygon-linedash.png | Bin 396 -> 0 bytes .../render-polygon-linedashoffset.png | Bin 403 -> 0 bytes test/rendering/ol/expected/render-polygon.png | Bin 792 -> 0 bytes test/rendering/ol/render.test.js | 209 ------------------ 12 files changed, 96 insertions(+), 210 deletions(-) create mode 100644 rendering/cases/render-toContext/expected.png create mode 100644 rendering/cases/render-toContext/index.html create mode 100644 rendering/cases/render-toContext/main.js delete mode 100644 test/rendering/ol/expected/render-linestring-bevel.png delete mode 100644 test/rendering/ol/expected/render-linestring-butt.png delete mode 100644 test/rendering/ol/expected/render-linestring.png delete mode 100644 test/rendering/ol/expected/render-point.png delete mode 100644 test/rendering/ol/expected/render-polygon-linedash.png delete mode 100644 test/rendering/ol/expected/render-polygon-linedashoffset.png delete mode 100644 test/rendering/ol/expected/render-polygon.png delete mode 100644 test/rendering/ol/render.test.js diff --git a/package.json b/package.json index e9b14e78fa..e2b3a04110 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "private": true, "homepage": "https://openlayers.org/", "scripts": { - "lint": "eslint tasks test src/ol examples config", + "lint": "eslint tasks test rendering src/ol examples config", "pretest": "npm run lint", "test-rendering": "node rendering/test.js", "test": "npm run karma -- --single-run --log-level error && npm run test-rendering -- --force", diff --git a/rendering/cases/render-toContext/expected.png b/rendering/cases/render-toContext/expected.png new file mode 100644 index 0000000000000000000000000000000000000000..dda51739c87244c9da080bb23512fbbe8b25ee81 GIT binary patch literal 3123 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 literal 0 HcmV?d00001 diff --git a/rendering/cases/render-toContext/index.html b/rendering/cases/render-toContext/index.html new file mode 100644 index 0000000000..04e8fc21f4 --- /dev/null +++ b/rendering/cases/render-toContext/index.html @@ -0,0 +1,18 @@ + + + + + + + + + + + diff --git a/rendering/cases/render-toContext/main.js b/rendering/cases/render-toContext/main.js new file mode 100644 index 0000000000..0902835534 --- /dev/null +++ b/rendering/cases/render-toContext/main.js @@ -0,0 +1,77 @@ +import LineString from '../../../src/ol/geom/LineString.js'; +import Point from '../../../src/ol/geom/Point.js'; +import Polygon from '../../../src/ol/geom/Polygon.js'; +import {toContext} from '../../../src/ol/render.js'; +import CircleStyle from '../../../src/ol/style/Circle.js'; +import Fill from '../../../src/ol/style/Fill.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; +import Style from '../../../src/ol/style/Style.js'; + +const canvas = document.getElementById('canvas'); +const vectorContext = toContext(canvas.getContext('2d'), { + pixelRatio: 1, + size: [200, 200] +}); + +vectorContext.setStyle(new Style({ + image: new CircleStyle({ + fill: new Fill({ + color: 'green' + }), + radius: 10 + }) +})); +vectorContext.drawGeometry(new Point([100, 100])); + +vectorContext.setStyle(new Style({ + stroke: new Stroke({ + lineCap: 'butt', + color: 'red', + width: 14 + }) +})); +vectorContext.drawGeometry(new LineString([ + [10, 60], [30, 40], [50, 60], [70, 40], [90, 60] +])); + +vectorContext.setStyle(new Style({ + stroke: new Stroke({ + lineJoin: 'bevel', + lineCap: 'butt', + color: '#111', + width: 14 + }) +})); +vectorContext.drawGeometry(new LineString([ + [10, 140], [30, 120], [50, 140], [70, 120], [90, 140] +])); + + +vectorContext.setStyle(new Style({ + stroke: new Stroke({ + color: 'blue', + width: 6 + }), + fill: new Fill({ + color: 'rgba(0,0,255,0.5)' + }) +})); + +vectorContext.drawGeometry(new Polygon([ + [[125, 25], [175, 25], [175, 75], [125, 75], [125, 25]], + [[140, 40], [140, 60], [160, 60], [160, 40], [140, 40]] +])); + +vectorContext.setStyle(new Style({ + stroke: new Stroke({ + lineDash: [10, 5], + lineDashOffset: 5 + }) +})); + +vectorContext.drawGeometry(new Polygon([ + [[125, 125], [175, 125], [175, 175], [125, 175], [125, 125]], + [[140, 140], [140, 160], [160, 160], [160, 140], [140, 140]] +])); + +render(); diff --git a/test/rendering/ol/expected/render-linestring-bevel.png b/test/rendering/ol/expected/render-linestring-bevel.png deleted file mode 100644 index 596ae5328f1b452fb010972c998040c0adcb532b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 950 zcmeAS@N?(olHy`uVBq!ia0vp^DIm179z7I#qw zQ3uY2ObeL3JggeLoY(`HWI-ZJm@YM1dasdDj<&bHHSyV#o_U`ZRGS*le|IX%TDB-c z^+M#zP6?Kdo4x`Hj7ifPX3p{PXqcgzpr$S?q>#orvIyT!+X6F4`;-Gc*8)H7((ZKmU9GPXt8tZRfp3x{QbNW+RPv zzh*II=4`VRDX%?RV633D`RsxnuV43?F)Equmg?HQ@ACQgs~dAtrnNm zcD1@=x=&YAklxCZe=Mj5*arqjBHG>{ymfOB?Jg51M8#IHRY^R4cx| zlI;n@9@Y_c8mA)E(|#=@bdQ!#`(t@rhKft%)pTwmQs~*((``*yN8A!-%I$Nkhjr^ z&hERKb~ND5m%HT$x(yXlb*r~ExfyR((&+p3Zr9}WZv{@*bRy55HEVmcD!=GtlKd;9 z&AkgOUeB&sG5z^*eFlB)X}UXaP7Rpz^)BNMslPX(d&2ig}Rr9{AJU)BYsr;UjD)@v_k*uE_BEIuCF z|LRZLetyNTOL}}198Nq4No8E*HSLYGLQ27^O$>pm-rslyj4VPU8&*tG{msT9IcJrQ zL&(WVwahI%exYItt5QzxV{~F$uEi}7x+gJN^=RMrly$W8eT6ArFC#pE(o=cYMr cjQy@}-SfW+BDZhfn zPebbP38w`0#?}Z99Y%>h=_JJsED08Q9jyn18XoRY6l3ycXnWj7T}hwp6Oq3ZUd~>! zev;jL%RiI81Yhc({G~kAOk|&?)45CHp7&L2tvLQ}Uvhl%mpx8go%*pSBCBqsx@@|) z#Ktww;+3h%z7WN!r{j#~skNS%uC}D`W@gZe8cipw>AusQo=NMaT-cNu^rFVOl_#!j zhlthvZ66F2Jx}vZc6z>B$I8Xy)26#X+4c3U@5PKVZ>DLM?0fw^IMzu`KU%l-T>0y> zxtk}ro^D%u;b-4F6BEwJJvo6~bKl>~ou8#RA(bB}?DhS@s+I%OYL#2hg-;6nYR9tc zP4|?)li!Nje^jnHY;t7+i)8;72H_u0L0wKpDKY<^O)PjL__l&muW`M`({&Rh9XO4v zmh9owX?(wKinF4zqfpvb4@(}c#`gu+d=-ru^-ijuSu-(c&lHspcjs6-dlcS08Wi^N zXlo85ua)wl(|VIOb*+Cl$y8&`t5o*0y>Y9;K5qRR@SbOR<;`K})S4?8hEY-xA9{Cbbg64S@O4z#L; zKMhiS(l=$*!mUnB>dr5Ls#ZM@cHN@_kv*sgO`G+imc4$&bgK~+vC=+-M;$diT$4rD|`R?^k(y3 zxd*FS33lL66bru z5YuOHtz_;_|-Pj)7mq*;0~kqy>chZDqJAX(rRP$=*sJ=!SvD ztA8sTP9(kzxbk=D0TTts#7rQ|*HP1<>F~R@MepAKQ2&#s(0eEk$j+~`-^%Urc*9ko zin+UY-sM>md;`ROI?p7B>5^rRVArnwOOM-Kb#OV9ws6I7ZQJJ6OiE(kSb)MpJ*$2T zT-?wfaLoRaa^2C~ugsT2g@qU%d+j~IP``SCNTbVv8TTq#GK`l!-nfII-c_U9AxeVF z;+UL<@cN4A%FtqI@NnqFElg?c%^traBTK%nl==e*X#>! Xa+R>2{dEwIkn zs|GG7%>c#=j3ESw(?rmeA_cmK|td-rr7 zIhby6SZe6Q!nB)%MM)rnd4q-2Kv5G;@@{#PK9S#(Z}OirTH%>HXa0%*ck^YI)TK?c zp9D`@obtD__>S7oiBFVt{}#^-V}BC)k$OO1EYr&np=KPRQ0 zi?6*?Z?S-HLgKNfVzRQ~220r{Y)p&UUofkxD>B}j??twks6zhiRdS1d&YN~wSEu^B z^J<2d;or}-nB`sGWd6|ReHoYCgnj2FE?-@9ak=gryQNGMa>YOUPIz&2FVlo+Paf;o zPSUx2>3pY*XhR0at4oEvjt?agk9}StSsqy~SuOSEfqx`($8UivswV4R)veyut6J{) z?e5C+O0PGsiS+feIe&Y(-j}uS{`f362<@k diff --git a/test/rendering/ol/expected/render-polygon-linedash.png b/test/rendering/ol/expected/render-polygon-linedash.png deleted file mode 100644 index 73ca5f7402c8ba8e22c52063cc4a16006070ec35..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 396 zcmeAS@N?(olHy`uVBq!ia0vp^DImh3#XnvAJqRM8cd%#(q_ zOH|#@zFM+uf*2R);t2+(t!vIGuCG}8@6FyTBAbMsTwMJ-J$`k){vGerk5YC{u$_Nu z*7BNGr$ZVlKHiGYCfuwS2(w%N?Dkb5pfNCWXEDQ(HGh{@NO;d=1Zo9?2RVAipZERP*|Prc&+_FZ zb7!8PSsDA|&Mrgk*Z-2=9zV0^?=!X~JN?`}yxn~f_;}2+HQhaV zTHmY*2)uT})#MLz7k>+7Gy2~DZhqyJeyZAew^lUOaJKFHEShL qtW|Db65myw^7eF<87y=dIQKFB^FQe+(p32$Bzha3}fpZ!gl&ExMq?aGxk_f`C=mdvVpb*=yT zY}c4DKAo^E0p*4nyi5%YN6s)BTc&V0oRKk@?A%5MSJ*hEUjOChCEF*(&9W`;pTq8X zf63B6eEZcHEf4&#j9DArET85ulXXeYJZt^`ZL4p3p8kDt?K!4R^14?x?7e^KQ`Q!} zh7!wNJm2#xnvXxf9q-)c!Q^qhLayG};aK&ptB*c2e%gAvea~#>xeO&Fyiw8X)(oKfXo53lQ2jhEIA*UAsv)ZVc5--!uNcsl#s z8JH$4RQ;Ks9BW9vcT z@(1@6gq&eIl%BM=LBzB@|9hQft;f%!t-oaQZ_EB~x_700ifrwjwq>5G+0y*)R|qMj vg)lG)7_*;wGC`5Su=s!vpClPv8^-5LpQVca{&EPI;u$<${an^LB{Ts5CcjlN diff --git a/test/rendering/ol/render.test.js b/test/rendering/ol/render.test.js deleted file mode 100644 index 6a516ec91e..0000000000 --- a/test/rendering/ol/render.test.js +++ /dev/null @@ -1,209 +0,0 @@ -import LineString from '../../../src/ol/geom/LineString.js'; -import Point from '../../../src/ol/geom/Point.js'; -import Polygon from '../../../src/ol/geom/Polygon.js'; -import {toContext} from '../../../src/ol/render.js'; -import VectorContext from '../../../src/ol/render/VectorContext.js'; -import CanvasImmediateRenderer from '../../../src/ol/render/canvas/Immediate.js'; -import CircleStyle from '../../../src/ol/style/Circle.js'; -import Fill from '../../../src/ol/style/Fill.js'; -import Stroke from '../../../src/ol/style/Stroke.js'; -import Style from '../../../src/ol/style/Style.js'; - -function getContext() { - return document.createElement('canvas').getContext('2d'); -} - -describe('ol.render', function() { - - describe('ol.render.toContext()', function() { - - it('creates a vector context from a Canvas 2d context', function() { - const vectorContext = toContext(getContext(), { - pixelRatio: 1, - size: [100, 100] - }); - expect(vectorContext).to.be.a(VectorContext); - expect(vectorContext).to.be.a(CanvasImmediateRenderer); - }); - - it('can be used to render a point geometry', function(done) { - const context = getContext(); - const vectorContext = toContext(context, { - pixelRatio: 1, - size: [100, 100] - }); - - const style = new Style({ - image: new CircleStyle({ - fill: new Fill({ - color: 'green' - }), - radius: 10 - }) - }); - - vectorContext.setStyle(style); - vectorContext.drawGeometry(new Point([50, 50])); - - resembleCanvas(context.canvas, - 'rendering/ol/expected/render-point.png', IMAGE_TOLERANCE, done); - - }); - - it('can be used to render a linestring geometry', function(done) { - const context = getContext(); - const vectorContext = toContext(context, { - pixelRatio: 1, - size: [100, 100] - }); - - const style = new Style({ - stroke: new Stroke({ - color: 'red', - width: 14 - }) - }); - - vectorContext.setStyle(style); - vectorContext.drawGeometry(new LineString([ - [10, 60], [30, 40], [50, 60], [70, 40], [90, 60] - ])); - - resembleCanvas(context.canvas, - 'rendering/ol/expected/render-linestring.png', IMAGE_TOLERANCE, done); - - }); - - it('respects lineCap for linestring', function(done) { - const context = getContext(); - const vectorContext = toContext(context, { - pixelRatio: 1, - size: [100, 100] - }); - - const style = new Style({ - stroke: new Stroke({ - lineCap: 'butt', - color: 'red', - width: 14 - }) - }); - - vectorContext.setStyle(style); - vectorContext.drawGeometry(new LineString([ - [10, 60], [30, 40], [50, 60], [70, 40], [90, 60] - ])); - - resembleCanvas(context.canvas, - 'rendering/ol/expected/render-linestring-butt.png', IMAGE_TOLERANCE, done); - - }); - - it('respects lineJoin for linestring', function(done) { - const context = getContext(); - const vectorContext = toContext(context, { - pixelRatio: 1, - size: [100, 100] - }); - - const style = new Style({ - stroke: new Stroke({ - lineJoin: 'bevel', - color: 'red', - width: 14 - }) - }); - - vectorContext.setStyle(style); - vectorContext.drawGeometry(new LineString([ - [10, 60], [30, 40], [50, 60], [70, 40], [90, 60] - ])); - - resembleCanvas(context.canvas, - 'rendering/ol/expected/render-linestring-bevel.png', IMAGE_TOLERANCE, done); - - }); - - it('can be used to render a polygon geometry', function(done) { - const context = getContext(); - const vectorContext = toContext(context, { - pixelRatio: 1, - size: [100, 100] - }); - - const style = new Style({ - stroke: new Stroke({ - color: 'blue', - width: 8 - }), - fill: new Fill({ - color: 'rgba(0,0,255,0.5)' - }) - }); - - vectorContext.setStyle(style); - - vectorContext.drawGeometry(new Polygon([ - [[25, 25], [75, 25], [75, 75], [25, 75], [25, 25]], - [[40, 40], [40, 60], [60, 60], [60, 40], [40, 40]] - ])); - - resembleCanvas(context.canvas, - 'rendering/ol/expected/render-polygon.png', IMAGE_TOLERANCE, done); - - }); - - it('supports lineDash styles', function(done) { - const context = getContext(); - const vectorContext = toContext(context, { - pixelRatio: 1, - size: [100, 100] - }); - - const style = new Style({ - stroke: new Stroke({ - lineDash: [10, 5] - }) - }); - - vectorContext.setStyle(style); - - vectorContext.drawGeometry(new Polygon([ - [[25, 25], [75, 25], [75, 75], [25, 75], [25, 25]], - [[40, 40], [40, 60], [60, 60], [60, 40], [40, 40]] - ])); - - resembleCanvas(context.canvas, - 'rendering/ol/expected/render-polygon-linedash.png', IMAGE_TOLERANCE, done); - - }); - - it('supports lineDashOffset', function(done) { - const context = getContext(); - const vectorContext = toContext(context, { - pixelRatio: 1, - size: [100, 100] - }); - - const style = new Style({ - stroke: new Stroke({ - lineDash: [10, 5], - lineDashOffset: 5 - }) - }); - - vectorContext.setStyle(style); - - vectorContext.drawGeometry(new Polygon([ - [[25, 25], [75, 25], [75, 75], [25, 75], [25, 25]], - [[40, 40], [40, 60], [60, 60], [60, 40], [40, 40]] - ])); - - resembleCanvas(context.canvas, - 'rendering/ol/expected/render-polygon-linedashoffset.png', IMAGE_TOLERANCE, done); - - }); - - }); - -});