From e0804a60cd27293a50bd272314369a00abca337a Mon Sep 17 00:00:00 2001 From: Zeno Zeng Date: Thu, 10 Jun 2021 20:39:09 +0800 Subject: [PATCH] update tests --- .gitignore | 3 +- README.md | 2 +- package.json | 2 +- test/css/normalize.css | 427 ---------------------- test/css/playground.css | 15 - test/css/skeleton.css | 418 --------------------- test/css/styles.css | 40 ++ test/example.spec.js | 85 ----- test/globals.js | 1 - test/index.html | 10 + test/index.js | 59 +++ test/playground.html | 105 ------ test/playground_wrapped_Context2D.html | 110 ------ test/testrunner.html | 28 -- test/{example => tests}/arc.js | 6 +- test/{example => tests}/arcTo.js | 2 +- test/{example => tests}/arcTo2.js | 2 +- test/{example => tests}/emptyArc.js | 6 +- test/{example => tests}/fillstyle.js | 2 +- test/{example => tests}/globalalpha.js | 4 +- test/{example => tests}/gradient.js | 2 +- test/{example => tests}/linecap.js | 4 +- test/{example => tests}/linewidth.js | 2 +- test/{example => tests}/rgba.js | 2 +- test/{example => tests}/rotate.js | 2 +- test/{example => tests}/saveandrestore.js | 2 +- test/{example => tests}/setLineDash.js | 2 +- test/{example => tests}/text.js | 2 +- test/{example => tests}/tiger.js | 2 +- test/{example => tests}/transform.js | 2 +- test/unit.spec.js | 360 ------------------ 31 files changed, 135 insertions(+), 1574 deletions(-) delete mode 100644 test/css/normalize.css delete mode 100644 test/css/playground.css delete mode 100644 test/css/skeleton.css create mode 100644 test/css/styles.css delete mode 100644 test/example.spec.js delete mode 100644 test/globals.js create mode 100644 test/index.html create mode 100644 test/index.js delete mode 100644 test/playground.html delete mode 100644 test/playground_wrapped_Context2D.html delete mode 100644 test/testrunner.html rename test/{example => tests}/arc.js (86%) rename test/{example => tests}/arcTo.js (87%) rename test/{example => tests}/arcTo2.js (80%) rename test/{example => tests}/emptyArc.js (56%) rename test/{example => tests}/fillstyle.js (83%) rename test/{example => tests}/globalalpha.js (86%) rename test/{example => tests}/gradient.js (97%) rename test/{example => tests}/linecap.js (83%) rename test/{example => tests}/linewidth.js (77%) rename test/{example => tests}/rgba.js (92%) rename test/{example => tests}/rotate.js (89%) rename test/{example => tests}/saveandrestore.js (93%) rename test/{example => tests}/setLineDash.js (82%) rename test/{example => tests}/text.js (83%) rename test/{example => tests}/tiger.js (99%) rename test/{example => tests}/transform.js (91%) delete mode 100644 test/unit.spec.js diff --git a/.gitignore b/.gitignore index b512c09..76add87 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -node_modules \ No newline at end of file +node_modules +dist \ No newline at end of file diff --git a/README.md b/README.md index 430f536..6515ed9 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ A maintained fork of [gliffy's canvas2svg](https://github.com/gliffy/canvas2svg) ## Demo -http://zenozeng.github.io/svgcanvas/test/playground.html +https://zenozeng.github.io/svgcanvas/test/ ## How it works We create a mock 2d canvas context. Use the canvas context like you would on a normal canvas. As you call methods, we diff --git a/package.json b/package.json index 4c7975a..a575330 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "svgcanvas", "main": "dist/svgcanvas.js", "scripts": { - "build": "rollup index.js -o dist/svgcanvas.js -f cjs", + "build": "rollup index.js -o dist/svgcanvas.js -f cjs && rollup test/index.js -o dist/test.js -f iife", "prepublishOnly": "npm run build" }, "keywords": [ diff --git a/test/css/normalize.css b/test/css/normalize.css deleted file mode 100644 index 81c6f31..0000000 --- a/test/css/normalize.css +++ /dev/null @@ -1,427 +0,0 @@ -/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; -} - -/** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. - */ - -audio, -canvas, -progress, -video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. - */ - -[hidden], -template { - display: none; -} - -/* Links - ========================================================================== */ - -/** - * Remove the gray background color from active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * Improve readability when focused and also mouse hovered in all browsers. - */ - -a:active, -a:hover { - outline: 0; -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9/10. - */ - -img { - border: 0; -} - -/** - * Correct overflow not hidden in IE 9/10/11. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari. - */ - -figure { - margin: 1em 40px; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; -} - -/** - * Contain overflow in all browsers. - */ - -pre { - overflow: auto; -} - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -/* Forms - ========================================================================== */ - -/** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ - -/** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. - */ - -button, -input, -optgroup, -select, -textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ - -button { - overflow: visible; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -input { - line-height: normal; -} - -/** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. - */ - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome - * (include `-moz` to future-proof). - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} - -/** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ - -textarea { - overflow: auto; -} - -/** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. - */ - -optgroup { - font-weight: bold; -} - -/* Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; -} \ No newline at end of file diff --git a/test/css/playground.css b/test/css/playground.css deleted file mode 100644 index baabe29..0000000 --- a/test/css/playground.css +++ /dev/null @@ -1,15 +0,0 @@ -#canvas, -#svg { - border: 1px solid #CCC; -} -#svg { - width: 460px; - height: 460px; - overflow: hidden; -} - -.container, -.try { - margin-top: 20px; -} - diff --git a/test/css/skeleton.css b/test/css/skeleton.css deleted file mode 100644 index f28bf6c..0000000 --- a/test/css/skeleton.css +++ /dev/null @@ -1,418 +0,0 @@ -/* -* Skeleton V2.0.4 -* Copyright 2014, Dave Gamache -* www.getskeleton.com -* Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 12/29/2014 -*/ - - -/* Table of contents -–––––––––––––––––––––––––––––––––––––––––––––––––– -- Grid -- Base Styles -- Typography -- Links -- Buttons -- Forms -- Lists -- Code -- Tables -- Spacing -- Utilities -- Clearing -- Media Queries -*/ - - -/* Grid -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.container { - position: relative; - width: 100%; - max-width: 960px; - margin: 0 auto; - padding: 0 20px; - box-sizing: border-box; } -.column, -.columns { - width: 100%; - float: left; - box-sizing: border-box; } - -/* For devices larger than 400px */ -@media (min-width: 400px) { - .container { - width: 85%; - padding: 0; } -} - -/* For devices larger than 550px */ -@media (min-width: 550px) { - .container { - width: 80%; } - .column, - .columns { - margin-left: 4%; } - .column:first-child, - .columns:first-child { - margin-left: 0; } - - .one.column, - .one.columns { width: 4.66666666667%; } - .two.columns { width: 13.3333333333%; } - .three.columns { width: 22%; } - .four.columns { width: 30.6666666667%; } - .five.columns { width: 39.3333333333%; } - .six.columns { width: 48%; } - .seven.columns { width: 56.6666666667%; } - .eight.columns { width: 65.3333333333%; } - .nine.columns { width: 74.0%; } - .ten.columns { width: 82.6666666667%; } - .eleven.columns { width: 91.3333333333%; } - .twelve.columns { width: 100%; margin-left: 0; } - - .one-third.column { width: 30.6666666667%; } - .two-thirds.column { width: 65.3333333333%; } - - .one-half.column { width: 48%; } - - /* Offsets */ - .offset-by-one.column, - .offset-by-one.columns { margin-left: 8.66666666667%; } - .offset-by-two.column, - .offset-by-two.columns { margin-left: 17.3333333333%; } - .offset-by-three.column, - .offset-by-three.columns { margin-left: 26%; } - .offset-by-four.column, - .offset-by-four.columns { margin-left: 34.6666666667%; } - .offset-by-five.column, - .offset-by-five.columns { margin-left: 43.3333333333%; } - .offset-by-six.column, - .offset-by-six.columns { margin-left: 52%; } - .offset-by-seven.column, - .offset-by-seven.columns { margin-left: 60.6666666667%; } - .offset-by-eight.column, - .offset-by-eight.columns { margin-left: 69.3333333333%; } - .offset-by-nine.column, - .offset-by-nine.columns { margin-left: 78.0%; } - .offset-by-ten.column, - .offset-by-ten.columns { margin-left: 86.6666666667%; } - .offset-by-eleven.column, - .offset-by-eleven.columns { margin-left: 95.3333333333%; } - - .offset-by-one-third.column, - .offset-by-one-third.columns { margin-left: 34.6666666667%; } - .offset-by-two-thirds.column, - .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } - - .offset-by-one-half.column, - .offset-by-one-half.columns { margin-left: 52%; } - -} - - -/* Base Styles -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -/* NOTE -html is set to 62.5% so that all the REM measurements throughout Skeleton -are based on 10px sizing. So basically 1.5rem = 15px :) */ -html { - font-size: 62.5%; } -body { - font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ - line-height: 1.6; - font-weight: 400; - font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #222; } - - -/* Typography -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 2rem; - font-weight: 300; } -h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} -h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } -h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } -h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } -h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } -h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } - -/* Larger than phablet */ -@media (min-width: 550px) { - h1 { font-size: 5.0rem; } - h2 { font-size: 4.2rem; } - h3 { font-size: 3.6rem; } - h4 { font-size: 3.0rem; } - h5 { font-size: 2.4rem; } - h6 { font-size: 1.5rem; } -} - -p { - margin-top: 0; } - - -/* Links -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -a { - color: #1EAEDB; } -a:hover { - color: #0FA0CE; } - - -/* Buttons -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.button, -button, -input[type="submit"], -input[type="reset"], -input[type="button"] { - display: inline-block; - height: 38px; - padding: 0 30px; - color: #555; - text-align: center; - font-size: 11px; - font-weight: 600; - line-height: 38px; - letter-spacing: .1rem; - text-transform: uppercase; - text-decoration: none; - white-space: nowrap; - background-color: transparent; - border-radius: 4px; - border: 1px solid #bbb; - cursor: pointer; - box-sizing: border-box; } -.button:hover, -button:hover, -input[type="submit"]:hover, -input[type="reset"]:hover, -input[type="button"]:hover, -.button:focus, -button:focus, -input[type="submit"]:focus, -input[type="reset"]:focus, -input[type="button"]:focus { - color: #333; - border-color: #888; - outline: 0; } -.button.button-primary, -button.button-primary, -input[type="submit"].button-primary, -input[type="reset"].button-primary, -input[type="button"].button-primary { - color: #FFF; - background-color: #33C3F0; - border-color: #33C3F0; } -.button.button-primary:hover, -button.button-primary:hover, -input[type="submit"].button-primary:hover, -input[type="reset"].button-primary:hover, -input[type="button"].button-primary:hover, -.button.button-primary:focus, -button.button-primary:focus, -input[type="submit"].button-primary:focus, -input[type="reset"].button-primary:focus, -input[type="button"].button-primary:focus { - color: #FFF; - background-color: #1EAEDB; - border-color: #1EAEDB; } - - -/* Forms -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -input[type="email"], -input[type="number"], -input[type="search"], -input[type="text"], -input[type="tel"], -input[type="url"], -input[type="password"], -textarea, -select { - height: 38px; - padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ - background-color: #fff; - border: 1px solid #D1D1D1; - border-radius: 4px; - box-shadow: none; - box-sizing: border-box; } -/* Removes awkward default styles on some inputs for iOS */ -input[type="email"], -input[type="number"], -input[type="search"], -input[type="text"], -input[type="tel"], -input[type="url"], -input[type="password"], -textarea { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; } -textarea { - min-height: 65px; - padding-top: 6px; - padding-bottom: 6px; } -input[type="email"]:focus, -input[type="number"]:focus, -input[type="search"]:focus, -input[type="text"]:focus, -input[type="tel"]:focus, -input[type="url"]:focus, -input[type="password"]:focus, -textarea:focus, -select:focus { - border: 1px solid #33C3F0; - outline: 0; } -label, -legend { - display: block; - margin-bottom: .5rem; - font-weight: 600; } -fieldset { - padding: 0; - border-width: 0; } -input[type="checkbox"], -input[type="radio"] { - display: inline; } -label > .label-body { - display: inline-block; - margin-left: .5rem; - font-weight: normal; } - - -/* Lists -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -ul { - list-style: circle inside; } -ol { - list-style: decimal inside; } -ol, ul { - padding-left: 0; - margin-top: 0; } -ul ul, -ul ol, -ol ol, -ol ul { - margin: 1.5rem 0 1.5rem 3rem; - font-size: 90%; } -li { - margin-bottom: 1rem; } - - -/* Code -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -code { - padding: .2rem .5rem; - margin: 0 .2rem; - font-size: 90%; - white-space: nowrap; - background: #F1F1F1; - border: 1px solid #E1E1E1; - border-radius: 4px; } -pre > code { - display: block; - padding: 1rem 1.5rem; - white-space: pre; } - - -/* Tables -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -th, -td { - padding: 12px 15px; - text-align: left; - border-bottom: 1px solid #E1E1E1; } -th:first-child, -td:first-child { - padding-left: 0; } -th:last-child, -td:last-child { - padding-right: 0; } - - -/* Spacing -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -button, -.button { - margin-bottom: 1rem; } -input, -textarea, -select, -fieldset { - margin-bottom: 1.5rem; } -pre, -blockquote, -dl, -figure, -table, -p, -ul, -ol, -form { - margin-bottom: 2.5rem; } - - -/* Utilities -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.u-full-width { - width: 100%; - box-sizing: border-box; } -.u-max-full-width { - max-width: 100%; - box-sizing: border-box; } -.u-pull-right { - float: right; } -.u-pull-left { - float: left; } - - -/* Misc -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -hr { - margin-top: 3rem; - margin-bottom: 3.5rem; - border-width: 0; - border-top: 1px solid #E1E1E1; } - - -/* Clearing -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -/* Self Clearing Goodness */ -.container:after, -.row:after, -.u-cf { - content: ""; - display: table; - clear: both; } - - -/* Media Queries -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -/* -Note: The best way to structure the use of media queries is to create the queries -near the relevant code. For example, if you wanted to change the styles for buttons -on small devices, paste the mobile query code up in the buttons section and style it -there. -*/ - - -/* Larger than mobile */ -@media (min-width: 400px) {} - -/* Larger than phablet (also point when grid becomes active) */ -@media (min-width: 550px) {} - -/* Larger than tablet */ -@media (min-width: 750px) {} - -/* Larger than desktop */ -@media (min-width: 1000px) {} - -/* Larger than Desktop HD */ -@media (min-width: 1200px) {} diff --git a/test/css/styles.css b/test/css/styles.css new file mode 100644 index 0000000..51c13db --- /dev/null +++ b/test/css/styles.css @@ -0,0 +1,40 @@ +body { + padding: 50px; +} + +.example { + margin-bottom: 50px; +} + +h2 { + font-weight: normal; +} + +canvas, svg { + width: 500px; + height: 500px; + border: 1px solid #ccc; + margin-right: 50px; +} + +.canvas, .svg { + display: inline-block; +} + +.svg::after, .canvas::after { + display: block; + position: absolute; + width: 500px; + text-align: center; + font-size: 14px; + color: #aaa; +} + +.canvas::after { + content: 'Canvas'; +} + +.svg::after { + content: 'SVG'; +} + diff --git a/test/example.spec.js b/test/example.spec.js deleted file mode 100644 index 8cd8915..0000000 --- a/test/example.spec.js +++ /dev/null @@ -1,85 +0,0 @@ -describe('canvas2svg exports', function() { - - var examples = Object.keys(C2S_EXAMPLES); - var C2S_WIDTH = 600; - var C2S_HEIGHT = 600; - var imgdata, svgimgdata, diffdata; - - function drawExample (example) { - var canvas = document.createElement('canvas'); - canvas.setAttribute('width', C2S_WIDTH); - canvas.setAttribute('height', C2S_HEIGHT); - document.body.appendChild(canvas); - var ctx = canvas.getContext("2d"); - ctx.clearRect(0, 0, C2S_WIDTH, C2S_HEIGHT); - var c2s = new C2S(C2S_WIDTH, C2S_HEIGHT); - - example(ctx); - example(c2s); - - imgdata = canvas.toDataURL(); - svgimgdata = "data:image/svg+xml;charset=utf-8,"+c2s.getSerializedSvg(true); - } - - function cleanUp () { - var canvases = document.querySelectorAll('canvas'); - var i; - //Node Array doesn't implement array methods :/ - for(i=0; i 0) { - //append svg + canvas images - var li = lis[lis.length - 2]; - var image = document.createElement('img'); - image.setAttribute('src', imgdata); - image.setAttribute('style', 'display:inline-block;'); - - var svgimage = document.createElement('img'); - svgimage.setAttribute('src', svgimgdata); - svgimage.setAttribute('style', 'display:inline-block;'); - li.appendChild(image); - li.appendChild(svgimage); - - // append diff data - li = lis[lis.length-1]; - var diffimage = document.createElement('img'); - diffimage.setAttribute('src', diffdata.getImageDataUrl()); - diffimage.setAttribute('style', 'display:inline-block;'); - li.appendChild(diffimage); - } - }); - - }); - - }); -}); \ No newline at end of file diff --git a/test/globals.js b/test/globals.js deleted file mode 100644 index 9694372..0000000 --- a/test/globals.js +++ /dev/null @@ -1 +0,0 @@ -window.C2S_EXAMPLES = {}; \ No newline at end of file diff --git a/test/index.html b/test/index.html new file mode 100644 index 0000000..98b2631 --- /dev/null +++ b/test/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/test/index.js b/test/index.js new file mode 100644 index 0000000..e5cee00 --- /dev/null +++ b/test/index.js @@ -0,0 +1,59 @@ +import {Element} from '../index' +import arc from './tests/arc' +import arcTo from './tests/arcTo' +import arcTo2 from './tests/arcTo2' +import emptyArc from './tests/emptyArc' +import fillstyle from './tests/fillstyle' +import globalAlpha from './tests/globalalpha' +import gradient from './tests/gradient' +import linecap from './tests/linecap' +import linewidth from './tests/linewidth' +import rgba from './tests/rgba' +import rotate from './tests/rotate' +import saveandrestore from './tests/saveandrestore' +import setLineDash from './tests/setLineDash' +import text from './tests/text' +import tiger from './tests/tiger' +import transform from './tests/transform' + +const tests = [ + tiger, + arc, + arcTo, + arcTo2, + emptyArc, + fillstyle, + globalAlpha, + gradient, + linecap, + linewidth, + rgba, + rotate, + saveandrestore, + setLineDash, + text, + transform +]; + +for (let fn of tests) { + let name = fn.name; + // Container + const container = document.createElement('div'); + container.className = 'example'; + container.id = 'example-' + name; + container.innerHTML = `

${name}

` + // Canvas + const canvas = document.createElement('canvas'); + container.querySelector('.canvas').appendChild(canvas); + // SVGCanvas + const svgcanvas = new Element(); + container.querySelector('.svg').appendChild(svgcanvas.getElement()); + document.querySelector('body').appendChild(container); + // Render + for (let c of [canvas, svgcanvas]) { + c.width = 500; + c.height = 500; + const ctx = c.getContext('2d'); + fn(ctx); + } +} \ No newline at end of file diff --git a/test/playground.html b/test/playground.html deleted file mode 100644 index dc9064b..0000000 --- a/test/playground.html +++ /dev/null @@ -1,105 +0,0 @@ - - - - - Canvas2Svg Playground - - - - - -
-
-
-
-
Select an example
-
-
-
-
-
-
- - -
-
-
-
-
-
Canvas
-
-
-
SVG
-
-
-
-
- -
-
-
-
-
-
-
-
Or try your own!
-
-
-
-
- -
-
-
-
- Render -
-
-
- - - - - - -
- - - - \ No newline at end of file diff --git a/test/playground_wrapped_Context2D.html b/test/playground_wrapped_Context2D.html deleted file mode 100644 index d6fa1d8..0000000 --- a/test/playground_wrapped_Context2D.html +++ /dev/null @@ -1,110 +0,0 @@ - - - - - Canvas2Svg Playground - - - - - -
-
-
-
-
Select an example
-
-
-
-
-
-
- - -
-
-
-
-
-
Canvas
-
-
-
SVG
-
-
-
-
- -
-
- -
-
-
-
-
-
Or try your own!
-
-
-
-
- -
-
-
-
- Render -
-
-
- - - - - - -
- - - - \ No newline at end of file diff --git a/test/testrunner.html b/test/testrunner.html deleted file mode 100644 index a860470..0000000 --- a/test/testrunner.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - Canvas2Svg Unit Tests - - - -
- - - - - - - -
- - - - - \ No newline at end of file diff --git a/test/example/arc.js b/test/tests/arc.js similarity index 86% rename from test/example/arc.js rename to test/tests/arc.js index 8af818f..9f8b9df 100644 --- a/test/example/arc.js +++ b/test/tests/arc.js @@ -1,8 +1,8 @@ -window.C2S_EXAMPLES['arc'] = function(ctx) { +export default function arc(ctx) { // Draw shapes - for (i = 0; i < 4; i++) { - for (j = 0; j < 3; j++) { + for (let i = 0; i < 4; i++) { + for (let j = 0; j < 3; j++) { ctx.beginPath(); var x = 25 + j * 50; // x coordinate var y = 25 + i * 50; // y coordinate diff --git a/test/example/arcTo.js b/test/tests/arcTo.js similarity index 87% rename from test/example/arcTo.js rename to test/tests/arcTo.js index 36995ed..7f06e61 100644 --- a/test/example/arcTo.js +++ b/test/tests/arcTo.js @@ -1,4 +1,4 @@ -window.C2S_EXAMPLES['arcTo'] = function (ctx) { +export default function arcTo(ctx) { ctx.beginPath(); ctx.moveTo(150, 20); ctx.arcTo(150, 100, 50, 20, 30); diff --git a/test/example/arcTo2.js b/test/tests/arcTo2.js similarity index 80% rename from test/example/arcTo2.js rename to test/tests/arcTo2.js index 8a53240..28765eb 100644 --- a/test/example/arcTo2.js +++ b/test/tests/arcTo2.js @@ -1,4 +1,4 @@ -window.C2S_EXAMPLES['arcTo2'] = function(ctx) { +export default function arcTo(ctx) { ctx.beginPath(); ctx.moveTo(100, 225); // P0 ctx.arcTo(300, 25, 500, 225, 75); // P1, P2 and the radius diff --git a/test/example/emptyArc.js b/test/tests/emptyArc.js similarity index 56% rename from test/example/emptyArc.js rename to test/tests/emptyArc.js index 0ad71f9..292e0ac 100644 --- a/test/example/emptyArc.js +++ b/test/tests/emptyArc.js @@ -1,8 +1,8 @@ -window.C2S_EXAMPLES['emptyArc'] = function(ctx) { +export default function emptyArc(ctx) { // Draw shapes - for (i = 0; i < 4; i++) { - for (j = 0; j < 3; j++) { + for (let i = 0; i < 4; i++) { + for (let j = 0; j < 3; j++) { ctx.beginPath(); ctx.arc(100, 100, 100, Math.PI, Math.PI); ctx.fill(); diff --git a/test/example/fillstyle.js b/test/tests/fillstyle.js similarity index 83% rename from test/example/fillstyle.js rename to test/tests/fillstyle.js index 12a5d87..24ca800 100644 --- a/test/example/fillstyle.js +++ b/test/tests/fillstyle.js @@ -1,4 +1,4 @@ -window.C2S_EXAMPLES['fillstyle'] = function(ctx) { +export default function fillStyle(ctx) { for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' + diff --git a/test/example/globalalpha.js b/test/tests/globalalpha.js similarity index 86% rename from test/example/globalalpha.js rename to test/tests/globalalpha.js index fbb25c8..ce67b0c 100644 --- a/test/example/globalalpha.js +++ b/test/tests/globalalpha.js @@ -1,4 +1,4 @@ -window.C2S_EXAMPLES['globalalpha'] = function(ctx) { +export default function globalAlpha(ctx) { ctx.fillStyle = '#FD0'; ctx.fillRect(0,0,75,75); ctx.fillStyle = '#6C0'; @@ -13,7 +13,7 @@ window.C2S_EXAMPLES['globalalpha'] = function(ctx) { ctx.globalAlpha = 0.2; // Draw semi transparent circles - for (i=0;i<7;i++){ + for (let i=0;i<7;i++){ ctx.beginPath(); ctx.arc(75,75,10+10*i,0,Math.PI*2,true); ctx.fill(); diff --git a/test/example/gradient.js b/test/tests/gradient.js similarity index 97% rename from test/example/gradient.js rename to test/tests/gradient.js index d191784..6189e32 100644 --- a/test/example/gradient.js +++ b/test/tests/gradient.js @@ -1,4 +1,4 @@ -window.C2S_EXAMPLES['gradient'] = function(ctx) { +export default function gradient(ctx) { ctx.save(); ctx.strokeStyle='rgba(0,0,0,0)'; ctx.lineCap='butt'; diff --git a/test/example/linecap.js b/test/tests/linecap.js similarity index 83% rename from test/example/linecap.js rename to test/tests/linecap.js index d0f48bb..300980d 100644 --- a/test/example/linecap.js +++ b/test/tests/linecap.js @@ -1,4 +1,4 @@ -window.C2S_EXAMPLES['linecap'] = function(ctx) { +export default function linecap(ctx) { var lineCap = ['butt','round','square']; // Draw guides @@ -12,7 +12,7 @@ window.C2S_EXAMPLES['linecap'] = function(ctx) { // Draw lines ctx.strokeStyle = 'black'; - for (var i=0;i'); - - }); - }); - - describe("with multiple transforms and fill/strokes", function() { - - it("creates new groups", function() { - var ctx = new C2S(); - ctx.translate(0, 20); - ctx.fillRect(0, 0, 10, 10); - - ctx.translate(10, 20); - ctx.fillRect(0, 0, 10, 10); - - ctx.translate(20, 20); - ctx.fillRect(0, 0, 10, 10); - - var svg = ctx.getSvg(); - var firstGroup = svg.querySelector("g"); - expect(firstGroup.getAttribute("transform")).to.equal("translate(0,20)"); - var secondGroup = firstGroup.querySelector("g"); - expect(secondGroup.getAttribute("transform")).to.equal("translate(10,20)"); - var thirdGroup = secondGroup.querySelector("g"); - expect(thirdGroup.getAttribute("transform")).to.equal("translate(20,20)"); - - }); - - it("save and restore still works", function() { - var ctx = new C2S(); - - ctx.translate(0, 10); - ctx.fillRect(0, 0, 10, 10); - - ctx.save(); - ctx.translate(40, 40); - ctx.fillRect(0, 0, 10, 10); - - ctx.restore(); - - ctx.translate(0, 10); - ctx.fillRect(0, 0, 10, 10); - - var svg = ctx.getSvg(); - var firstGroup = svg.querySelector("g"); - expect(firstGroup.getAttribute("transform")).to.equal("translate(0,10)"); - var secondGroup = firstGroup.childNodes[1]; - expect(secondGroup.getAttribute("transform")).to.equal("translate(40,40)"); - var thirdGroup = firstGroup.childNodes[2]; - expect(thirdGroup.getAttribute("transform")).to.equal("translate(0,10)"); - - }); - }); - - describe("it will generate ids", function() { - - it("that start with a letter", function() { - var ctx = new C2S(); - ctx.createRadialGradient(6E1, 6E1, 0.0, 6E1, 6E1, 5E1); - var svg = ctx.getSvg(); - var id = svg.children[0].children[0].id; - var test = /^[A-Za-z]/.test(id); - expect(test).to.equal(true); - }); - }); - - describe("will split up rgba", function() { - //while browsers support rgba values for fill/stroke, this is not accepted in visio/illustrator - it("to fill and fill-opacity", function() { - var ctx = new C2S(); - ctx.fillStyle="rgba(20,40,50,0.5)"; - ctx.fillRect(100,100,100,100); - var svg = ctx.getSvg(); - expect(svg.querySelector("rect").getAttribute("fill")).to.equal("rgb(20,40,50)"); - expect(svg.querySelector("rect").getAttribute("fill-opacity")).to.equal("0.5"); - }); - - it("to stroke and stroke-opacity", function() { - var ctx = new C2S(); - ctx.strokeStyle="rgba(10,20,30,0.4)"; - ctx.strokeRect(100,100,100,100); - var svg = ctx.getSvg(); - expect(svg.querySelector("rect").getAttribute("stroke")).to.equal("rgb(10,20,30)"); - expect(svg.querySelector("rect").getAttribute("stroke-opacity")).to.equal("0.4"); - }); - }); - - describe("supports path commands", function() { - - it("and moveTo may be called without beginPath, but is not recommended", function() { - var ctx = new C2S(); - ctx.moveTo(0,0); - ctx.lineTo(100,100); - ctx.stroke(); - }); - }); - - describe("supports text align", function() { - - it("not specifying a value defaults to 'start'", function() { - - var ctx = new C2S(); - ctx.font = "normal 36px Times"; - ctx.fillStyle = "#000000"; - ctx.fillText("A Text Example", 0, 50); - var svg = ctx.getSvg(); - expect(svg.querySelector("text").getAttribute("text-anchor")).to.equal("start"); - - }); - - it("assuming ltr, left maps to 'start'", function() { - - var ctx = new C2S(); - ctx.textAlign = "left"; - ctx.font = "normal 36px Times"; - ctx.fillStyle = "#000000"; - ctx.fillText("A Text Example", 0, 50); - var svg = ctx.getSvg(); - expect(svg.querySelector("text").getAttribute("text-anchor")).to.equal("start"); - - }); - - it("assuming ltr, right maps to 'end'", function() { - - var ctx = new C2S(); - ctx.textAlign = "right"; - ctx.font = "normal 36px Times"; - ctx.fillStyle = "#000000"; - ctx.fillText("A Text Example", 0, 50); - var svg = ctx.getSvg(); - expect(svg.querySelector("text").getAttribute("text-anchor")).to.equal("end"); - - }); - - it("center maps to 'middle'", function() { - - var ctx = new C2S(); - ctx.textAlign = "center"; - ctx.font = "normal 36px Times"; - ctx.fillStyle = "#000000"; - ctx.fillText("A Text Example", 0, 50); - var svg = ctx.getSvg(); - expect(svg.querySelector("text").getAttribute("text-anchor")).to.equal("middle"); - - }); - - it("stores the proper values on save and restore", function() { - var ctx = new C2S(); - ctx.textAlign = "center"; - expect(ctx.textAlign).to.equal("center"); - ctx.save(); - expect(ctx.textAlign).to.equal("center"); - ctx.textAlign = "right"; - expect(ctx.textAlign).to.equal("right"); - ctx.restore(); - expect(ctx.textAlign).to.equal("center"); - }); - - }); - - describe("supports text baseline", function() { - - it("not specifying a value defaults to alphabetic", function() { - var ctx = new C2S(); - ctx.font = "normal 36px Times"; - ctx.fillStyle = "#000000"; - ctx.fillText("A Text Example", 0, 50); - var svg = ctx.getSvg(); - expect(svg.querySelector("text").getAttribute("dominant-baseline")).to.equal("alphabetic"); - }); - - it("not specifying a valid value defaults to alphabetic", function() { - var ctx = new C2S(); - ctx.font = "normal 36px Times"; - ctx.fillStyle = "#000000"; - ctx.textBaseline = "werwerwer"; - ctx.fillText("A Text Example", 0, 50); - var svg = ctx.getSvg(); - expect(svg.querySelector("text").getAttribute("dominant-baseline")).to.equal("alphabetic"); - }); - - it("hanging maps to hanging", function() { - var ctx = new C2S(); - ctx.font = "normal 36px Times"; - ctx.fillStyle = "#000000"; - ctx.textBaseline = "hanging"; - ctx.fillText("A Text Example", 0, 50); - var svg = ctx.getSvg(); - expect(svg.querySelector("text").getAttribute("dominant-baseline")).to.equal("hanging"); - }); - - it("top maps to text-before-edge", function() { - var ctx = new C2S(); - ctx.font = "normal 36px Times"; - ctx.fillStyle = "#000000"; - ctx.textBaseline = "top"; - ctx.fillText("A Text Example", 0, 50); - var svg = ctx.getSvg(); - expect(svg.querySelector("text").getAttribute("dominant-baseline")).to.equal("text-before-edge"); - }); - - it("bottom maps to text-after-edge", function() { - var ctx = new C2S(); - ctx.font = "normal 36px Times"; - ctx.fillStyle = "#000000"; - ctx.textBaseline = "bottom"; - ctx.fillText("A Text Example", 0, 50); - var svg = ctx.getSvg(); - expect(svg.querySelector("text").getAttribute("dominant-baseline")).to.equal("text-after-edge"); - }); - - it("middle maps to central", function() { - var ctx = new C2S(); - ctx.font = "normal 36px Times"; - ctx.fillStyle = "#000000"; - ctx.textBaseline = "middle"; - ctx.fillText("A Text Example", 0, 50); - var svg = ctx.getSvg(); - expect(svg.querySelector("text").getAttribute("dominant-baseline")).to.equal("central"); - }); - - }); - - describe("supports fonts", function () { - it("doesn't crash when using a font", function () { - var ctx = new C2S(); - ctx.font = "normal 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"; - ctx.fillText("A Text Example", 0, 50); - var svg = ctx.getSvg(); - expect(svg.querySelector("text").getAttribute("font-family")).to.equal("\'Helvetica Neue\', \'Helvetica\', \'Arial\', sans-serif"); - expect(svg.querySelector("text").getAttribute("font-size")).to.equal("12px"); - expect(svg.querySelector("text").getAttribute("font-weight")).to.equal("normal"); - expect(svg.querySelector("text").getAttribute("font-style")).to.equal("normal"); - }); - }); - - describe("supports globalOpacity", function() { - it("set stroke-opacity when stroking and set fill-opacity when filling",function() { - var ctx = new C2S(); - ctx.globalAlpha = 0.5; - ctx.moveTo(5,5); - ctx.lineTo(15,15); - ctx.stroke(); - var svg = ctx.getSvg(); - expect(svg.querySelector("path").getAttribute("stroke-opacity")).to.equal('0.5'); - ctx.globalAlpha = 0.1; - ctx.fillStyle = "#000000"; - ctx.fill(); - expect(svg.querySelector("path").getAttribute("fill-opacity")).to.equal('0.1'); - //stroke-opacity stays o.5 - expect(svg.querySelector("path").getAttribute("stroke-opacity")).to.equal('0.5'); - }); - - it("added into color opacity when stroking or filling with rgba style color. ",function() { - var ctx = new C2S(); - ctx.strokeStyle="rgba(0,0,0,0.8)"; - ctx.globalAlpha = 0.5; - ctx.moveTo(5,5); - ctx.lineTo(15,15); - ctx.stroke(); - var svg = ctx.getSvg(); - expect(svg.querySelector("path").getAttribute("stroke")).to.equal('rgb(0,0,0)'); - //stroke-opacity should be globalAlpha*(alpha in rgba) - expect(svg.querySelector("path").getAttribute("stroke-opacity")).to.equal(''+0.8*0.5); - ctx.globalAlpha = 0.6; - ctx.fillStyle = "rgba(0,0,0,0.6)"; - ctx.fill(); - expect(svg.querySelector("path").getAttribute("fill-opacity")).to.equal(''+0.6*0.6); - expect(svg.querySelector("path").getAttribute("stroke-opacity")).to.equal(''+0.8*0.5); - }); - }); - - describe("supports clip", function() { - it("adds clippath", function() { - var ctx = new C2S(); - ctx.rect(200, 200, 400, 400); - ctx.clip(); - ctx.fillStyle = "#000000"; - ctx.rect(100, 100, 300, 300); - var svg = ctx.getSvg(); - expect(svg.querySelector("clipPath > path").getAttribute("d")).to.not.equal(null); - }); - }); -});