update tests
This commit is contained in:
Zeno Zeng
parent
b6ef900d21
commit
e0804a60cd
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +1,2 @@
|
|||||||
node_modules
|
node_modules
|
||||||
|
dist
|
||||||
@ -5,7 +5,7 @@ A maintained fork of [gliffy's canvas2svg](https://github.com/gliffy/canvas2svg)
|
|||||||
|
|
||||||
## Demo
|
## Demo
|
||||||
|
|
||||||
http://zenozeng.github.io/svgcanvas/test/playground.html
|
https://zenozeng.github.io/svgcanvas/test/
|
||||||
|
|
||||||
## How it works
|
## 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
|
We create a mock 2d canvas context. Use the canvas context like you would on a normal canvas. As you call methods, we
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
"description": "svgcanvas",
|
"description": "svgcanvas",
|
||||||
"main": "dist/svgcanvas.js",
|
"main": "dist/svgcanvas.js",
|
||||||
"scripts": {
|
"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"
|
"prepublishOnly": "npm run build"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
|
|||||||
427
test/css/normalize.css
vendored
427
test/css/normalize.css
vendored
@ -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;
|
|
||||||
}
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
#canvas,
|
|
||||||
#svg {
|
|
||||||
border: 1px solid #CCC;
|
|
||||||
}
|
|
||||||
#svg {
|
|
||||||
width: 460px;
|
|
||||||
height: 460px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container,
|
|
||||||
.try {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
418
test/css/skeleton.css
vendored
418
test/css/skeleton.css
vendored
@ -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) {}
|
|
||||||
40
test/css/styles.css
Normal file
40
test/css/styles.css
Normal file
@ -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';
|
||||||
|
}
|
||||||
|
|
||||||
@ -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<canvases.length; i++) {
|
|
||||||
canvases[i].parentElement.removeChild(canvases[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
examples.forEach(function(example) {
|
|
||||||
|
|
||||||
describe(example, function() {
|
|
||||||
|
|
||||||
var drawFunction;
|
|
||||||
|
|
||||||
beforeEach(function() {
|
|
||||||
drawFunction = C2S_EXAMPLES[example];
|
|
||||||
});
|
|
||||||
|
|
||||||
it('to svg (left is canvas right is svg)', function () {
|
|
||||||
drawExample(drawFunction);
|
|
||||||
});
|
|
||||||
|
|
||||||
//test is async, pass in done
|
|
||||||
it('resembles each other', function() {
|
|
||||||
// see: https://github.com/Huddle/Resemble.js
|
|
||||||
var diff = resemble(imgdata).compareTo(svgimgdata).ignoreAntialiasing().onComplete(function(data){
|
|
||||||
diffdata = data;
|
|
||||||
expect(data.misMatchPercentage).to.be.below(0.30);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
after(function() {
|
|
||||||
cleanUp();
|
|
||||||
var lis = document.querySelectorAll('li');
|
|
||||||
//on server side, don't inject images
|
|
||||||
if(lis.length > 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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1 +0,0 @@
|
|||||||
window.C2S_EXAMPLES = {};
|
|
||||||
10
test/index.html
Normal file
10
test/index.html
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset=UTF-8">
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script src="../dist/test.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
59
test/index.js
Normal file
59
test/index.js
Normal file
@ -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 = `<h2>${name}</h2><div class="canvas"></div><div class="svg"></div>`
|
||||||
|
// 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,105 +0,0 @@
|
|||||||
<!DOCTYPE HTML>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
||||||
<title>Canvas2Svg Playground</title>
|
|
||||||
<link rel="stylesheet" href="css/normalize.css">
|
|
||||||
<link rel="stylesheet" href="css/skeleton.css">
|
|
||||||
<link rel="stylesheet" href="css/playground.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<form>
|
|
||||||
<div class="row">
|
|
||||||
<div class="twelve columns">
|
|
||||||
<h5>Select an example</h5>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<form>
|
|
||||||
<div class="row">
|
|
||||||
<div class="twelve columns">
|
|
||||||
<!-- select content is generated by the command `gulp update_examples` -->
|
|
||||||
<select id="select" class="u-full-width"><option value="arc">arc</option><option value="arcTo">arcTo</option><option value="arcTo2">arcTo2</option><option value="emptyArc">emptyArc</option><option value="fillstyle">fillstyle</option><option value="globalalpha">globalalpha</option><option value="gradient">gradient</option><option value="linecap">linecap</option><option value="linewidth">linewidth</option><option value="rgba">rgba</option><option value="rotate">rotate</option><option value="saveandrestore">saveandrestore</option><option value="setLineDash">setLineDash</option><option value="text">text</option><option value="tiger">tiger</option><option value="transform">transform</option></select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<div class="row">
|
|
||||||
<div class="six columns">
|
|
||||||
<h5>Canvas</h5>
|
|
||||||
</div>
|
|
||||||
<div class="six columns">
|
|
||||||
<h5>SVG</h5>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="six columns">
|
|
||||||
<canvas id="canvas" width="460" height="460"></canvas>
|
|
||||||
</div>
|
|
||||||
<div class="six columns" id="svg">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<div class="row try">
|
|
||||||
<div class="twelve columns">
|
|
||||||
<h5>Or try your own!</h5>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="twelve columns">
|
|
||||||
<textarea id="textarea" class="u-full-width" placeholder="//ctx.fillRect(0,0,100,100);"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="twelve columns">
|
|
||||||
<a href="#" class="button button-primary u-pull-right" id="render">Render</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- jQuery is only used for convenience on this test page, it's not a dependency for the library -->
|
|
||||||
<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.js"></script>
|
|
||||||
<script type="text/javascript" src="../canvas2svg.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
window.C2S_EXAMPLES = {};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- examples content is generated by the command `gulp update_examples` -->
|
|
||||||
<div id="examples"><script type="text/javascript" src="example/arc.js"></script><script type="text/javascript" src="example/arcTo.js"></script><script type="text/javascript" src="example/arcTo2.js"></script><script type="text/javascript" src="example/emptyArc.js"></script><script type="text/javascript" src="example/fillstyle.js"></script><script type="text/javascript" src="example/globalalpha.js"></script><script type="text/javascript" src="example/gradient.js"></script><script type="text/javascript" src="example/linecap.js"></script><script type="text/javascript" src="example/linewidth.js"></script><script type="text/javascript" src="example/rgba.js"></script><script type="text/javascript" src="example/rotate.js"></script><script type="text/javascript" src="example/saveandrestore.js"></script><script type="text/javascript" src="example/setLineDash.js"></script><script type="text/javascript" src="example/text.js"></script><script type="text/javascript" src="example/tiger.js"></script><script type="text/javascript" src="example/transform.js"></script></div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
(function () {
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
function drawExample (example) {
|
|
||||||
var canvas = document.getElementById('canvas');
|
|
||||||
var ctx = canvas.getContext("2d");
|
|
||||||
ctx.clearRect(0, 0, 500, 500);
|
|
||||||
var c2s = new C2S(500, 500);
|
|
||||||
var svg = document.getElementById("svg");
|
|
||||||
|
|
||||||
if (svg.children.length > 0) {
|
|
||||||
svg.removeChild(svg.children[0]);
|
|
||||||
}
|
|
||||||
|
|
||||||
example(ctx);
|
|
||||||
example(c2s);
|
|
||||||
|
|
||||||
svg.appendChild(c2s.getSvg());
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#render').on('click', function(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
var text = $("#textarea").val();
|
|
||||||
var drawFunction = new Function("ctx", text);
|
|
||||||
drawExample(drawFunction);
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#select').on('change', function(event) {
|
|
||||||
var example = C2S_EXAMPLES[$(this).val()];
|
|
||||||
drawExample(example);
|
|
||||||
}).trigger('change');
|
|
||||||
|
|
||||||
}());
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
<!DOCTYPE HTML>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
||||||
<title>Canvas2Svg Playground</title>
|
|
||||||
<link rel="stylesheet" href="css/normalize.css">
|
|
||||||
<link rel="stylesheet" href="css/skeleton.css">
|
|
||||||
<link rel="stylesheet" href="css/playground.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<form>
|
|
||||||
<div class="row">
|
|
||||||
<div class="twelve columns">
|
|
||||||
<h5>Select an example</h5>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<form>
|
|
||||||
<div class="row">
|
|
||||||
<div class="twelve columns">
|
|
||||||
<!-- select content is generated by the command `gulp update_examples` -->
|
|
||||||
<select id="select" class="u-full-width"><option value="arc">arc</option><option value="arcTo">arcTo</option><option value="arcTo2">arcTo2</option><option value="emptyArc">emptyArc</option><option value="fillstyle">fillstyle</option><option value="globalalpha">globalalpha</option><option value="gradient">gradient</option><option value="linecap">linecap</option><option value="linewidth">linewidth</option><option value="setLineDash">setLineDash</option><option value="rgba">rgba</option><option value="saveandrestore">saveandrestore</option><option value="text">text</option><option value="tiger">tiger</option></select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<div class="row">
|
|
||||||
<div class="six columns">
|
|
||||||
<h5>Canvas</h5>
|
|
||||||
</div>
|
|
||||||
<div class="six columns">
|
|
||||||
<h5>SVG</h5>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="six columns">
|
|
||||||
<canvas id="canvas" width="460" height="460"></canvas>
|
|
||||||
</div>
|
|
||||||
<div class="six columns" id="svg">
|
|
||||||
<canvas id="wrapped_canvas" width="460" height="460" style="display:none"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<div class="row try">
|
|
||||||
<div class="twelve columns">
|
|
||||||
<h5>Or try your own!</h5>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="twelve columns">
|
|
||||||
<textarea id="textarea" class="u-full-width" placeholder="//ctx.fillRect(0,0,100,100);"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="twelve columns">
|
|
||||||
<a href="#" class="button button-primary u-pull-right" id="render">Render</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- jQuery is only used for convenience on this test page, it's not a dependency for the library -->
|
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
||||||
<script type="text/javascript" src="../canvas2svg.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
window.C2S_EXAMPLES = {};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- examples content is generated by the command `gulp update_examples` -->
|
|
||||||
<div id="examples"><script type="text/javascript" src="example/arc.js"></script><script type="text/javascript" src="example/arcTo.js"></script><script type="text/javascript" src="example/arcTo2.js"></script><script type="text/javascript" src="example/emptyArc.js"></script><script type="text/javascript" src="example/fillstyle.js"></script><script type="text/javascript" src="example/globalalpha.js"></script><script type="text/javascript" src="example/gradient.js"></script><script type="text/javascript" src="example/linecap.js"></script><script type="text/javascript" src="example/linewidth.js"></script><script type="text/javascript" src="example/setLineDash.js"></script><script type="text/javascript" src="example/rgba.js"></script><script type="text/javascript" src="example/saveandrestore.js"></script><script type="text/javascript" src="example/text.js"></script><script type="text/javascript" src="example/tiger.js"></script></div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
(function () {
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
function drawExample (example) {
|
|
||||||
var canvas = document.getElementById('canvas');
|
|
||||||
var ctx = canvas.getContext("2d");
|
|
||||||
ctx.clearRect(0, 0, 500, 500);
|
|
||||||
|
|
||||||
var svg = document.getElementById("svg");
|
|
||||||
|
|
||||||
// remove the latest svg (children[0] is the wrapped canvas element)
|
|
||||||
if (svg.children.length > 1) {
|
|
||||||
svg.removeChild(svg.children[1]);
|
|
||||||
}
|
|
||||||
var otherCanvas = document.getElementById("wrapped_canvas");
|
|
||||||
var wrappedCtx = otherCanvas.getContext("2d");
|
|
||||||
var c2s = new C2S({ctx:wrappedCtx, width:500, height:500});
|
|
||||||
|
|
||||||
example(ctx);
|
|
||||||
example(c2s);
|
|
||||||
|
|
||||||
svg.appendChild(c2s.getSvg());
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#render').on('click', function(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
var text = $("#textarea").val();
|
|
||||||
var drawFunction = new Function("ctx", text);
|
|
||||||
drawExample(drawFunction);
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#select').on('change', function(event) {
|
|
||||||
var example = C2S_EXAMPLES[$(this).val()];
|
|
||||||
drawExample(example);
|
|
||||||
}).trigger('change');
|
|
||||||
|
|
||||||
}());
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title> Canvas2Svg Unit Tests</title>
|
|
||||||
<link rel="stylesheet" href="../node_modules/mocha/mocha.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="mocha"></div>
|
|
||||||
<script src="../node_modules/mocha/mocha.js"></script>
|
|
||||||
<script src="../node_modules/chai/chai.js"></script>
|
|
||||||
<script src="../node_modules/resemblejs/resemble.js"></script>
|
|
||||||
<script src="../canvas2svg.js"></script>
|
|
||||||
<script type="text/javascript" src="globals.js"></script>
|
|
||||||
<script>
|
|
||||||
mocha.setup('bdd');
|
|
||||||
var should = chai.should();
|
|
||||||
var expect = chai.expect;
|
|
||||||
</script>
|
|
||||||
<!-- examples content is generated by the command `gulp update_examples` -->
|
|
||||||
<div id="examples"><script type="text/javascript" src="example/arc.js"></script><script type="text/javascript" src="example/arcTo.js"></script><script type="text/javascript" src="example/arcTo2.js"></script><script type="text/javascript" src="example/emptyArc.js"></script><script type="text/javascript" src="example/fillstyle.js"></script><script type="text/javascript" src="example/globalalpha.js"></script><script type="text/javascript" src="example/gradient.js"></script><script type="text/javascript" src="example/linecap.js"></script><script type="text/javascript" src="example/linewidth.js"></script><script type="text/javascript" src="example/rgba.js"></script><script type="text/javascript" src="example/rotate.js"></script><script type="text/javascript" src="example/saveandrestore.js"></script><script type="text/javascript" src="example/setLineDash.js"></script><script type="text/javascript" src="example/text.js"></script><script type="text/javascript" src="example/tiger.js"></script><script type="text/javascript" src="example/transform.js"></script></div>
|
|
||||||
<script src="unit.spec.js"></script>
|
|
||||||
<script src="example.spec.js"></script>
|
|
||||||
<script>
|
|
||||||
mocha.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,8 +1,8 @@
|
|||||||
window.C2S_EXAMPLES['arc'] = function(ctx) {
|
export default function arc(ctx) {
|
||||||
|
|
||||||
// Draw shapes
|
// Draw shapes
|
||||||
for (i = 0; i < 4; i++) {
|
for (let i = 0; i < 4; i++) {
|
||||||
for (j = 0; j < 3; j++) {
|
for (let j = 0; j < 3; j++) {
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
var x = 25 + j * 50; // x coordinate
|
var x = 25 + j * 50; // x coordinate
|
||||||
var y = 25 + i * 50; // y coordinate
|
var y = 25 + i * 50; // y coordinate
|
||||||
@ -1,4 +1,4 @@
|
|||||||
window.C2S_EXAMPLES['arcTo'] = function (ctx) {
|
export default function arcTo(ctx) {
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(150, 20);
|
ctx.moveTo(150, 20);
|
||||||
ctx.arcTo(150, 100, 50, 20, 30);
|
ctx.arcTo(150, 100, 50, 20, 30);
|
||||||
@ -1,4 +1,4 @@
|
|||||||
window.C2S_EXAMPLES['arcTo2'] = function(ctx) {
|
export default function arcTo(ctx) {
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(100, 225); // P0
|
ctx.moveTo(100, 225); // P0
|
||||||
ctx.arcTo(300, 25, 500, 225, 75); // P1, P2 and the radius
|
ctx.arcTo(300, 25, 500, 225, 75); // P1, P2 and the radius
|
||||||
@ -1,8 +1,8 @@
|
|||||||
window.C2S_EXAMPLES['emptyArc'] = function(ctx) {
|
export default function emptyArc(ctx) {
|
||||||
|
|
||||||
// Draw shapes
|
// Draw shapes
|
||||||
for (i = 0; i < 4; i++) {
|
for (let i = 0; i < 4; i++) {
|
||||||
for (j = 0; j < 3; j++) {
|
for (let j = 0; j < 3; j++) {
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.arc(100, 100, 100, Math.PI, Math.PI);
|
ctx.arc(100, 100, 100, Math.PI, Math.PI);
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
@ -1,4 +1,4 @@
|
|||||||
window.C2S_EXAMPLES['fillstyle'] = function(ctx) {
|
export default function fillStyle(ctx) {
|
||||||
for (var i = 0; i < 6; i++) {
|
for (var i = 0; i < 6; i++) {
|
||||||
for (var j = 0; j < 6; j++) {
|
for (var j = 0; j < 6; j++) {
|
||||||
ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
|
ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
|
||||||
@ -1,4 +1,4 @@
|
|||||||
window.C2S_EXAMPLES['globalalpha'] = function(ctx) {
|
export default function globalAlpha(ctx) {
|
||||||
ctx.fillStyle = '#FD0';
|
ctx.fillStyle = '#FD0';
|
||||||
ctx.fillRect(0,0,75,75);
|
ctx.fillRect(0,0,75,75);
|
||||||
ctx.fillStyle = '#6C0';
|
ctx.fillStyle = '#6C0';
|
||||||
@ -13,7 +13,7 @@ window.C2S_EXAMPLES['globalalpha'] = function(ctx) {
|
|||||||
ctx.globalAlpha = 0.2;
|
ctx.globalAlpha = 0.2;
|
||||||
|
|
||||||
// Draw semi transparent circles
|
// Draw semi transparent circles
|
||||||
for (i=0;i<7;i++){
|
for (let i=0;i<7;i++){
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
|
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
@ -1,4 +1,4 @@
|
|||||||
window.C2S_EXAMPLES['gradient'] = function(ctx) {
|
export default function gradient(ctx) {
|
||||||
ctx.save();
|
ctx.save();
|
||||||
ctx.strokeStyle='rgba(0,0,0,0)';
|
ctx.strokeStyle='rgba(0,0,0,0)';
|
||||||
ctx.lineCap='butt';
|
ctx.lineCap='butt';
|
||||||
@ -1,4 +1,4 @@
|
|||||||
window.C2S_EXAMPLES['linecap'] = function(ctx) {
|
export default function linecap(ctx) {
|
||||||
var lineCap = ['butt','round','square'];
|
var lineCap = ['butt','round','square'];
|
||||||
|
|
||||||
// Draw guides
|
// Draw guides
|
||||||
@ -12,7 +12,7 @@ window.C2S_EXAMPLES['linecap'] = function(ctx) {
|
|||||||
|
|
||||||
// Draw lines
|
// Draw lines
|
||||||
ctx.strokeStyle = 'black';
|
ctx.strokeStyle = 'black';
|
||||||
for (var i=0;i<lineCap.length;i++){
|
for (let i=0;i<lineCap.length;i++){
|
||||||
ctx.lineWidth = 15;
|
ctx.lineWidth = 15;
|
||||||
ctx.lineCap = lineCap[i];
|
ctx.lineCap = lineCap[i];
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
@ -1,4 +1,4 @@
|
|||||||
window.C2S_EXAMPLES['linewidth'] = function(ctx) {
|
export default function linewidth(ctx) {
|
||||||
for (var i = 0; i < 10; i++){
|
for (var i = 0; i < 10; i++){
|
||||||
ctx.lineWidth = 1+i;
|
ctx.lineWidth = 1+i;
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
@ -1,4 +1,4 @@
|
|||||||
window.C2S_EXAMPLES['rgba'] = function(ctx) {
|
export default function rgba(ctx) {
|
||||||
// Draw background
|
// Draw background
|
||||||
ctx.fillStyle = 'rgb(255,221,0)';
|
ctx.fillStyle = 'rgb(255,221,0)';
|
||||||
ctx.fillRect(0,0,150,37.5);
|
ctx.fillRect(0,0,150,37.5);
|
||||||
@ -1,5 +1,5 @@
|
|||||||
// Example from https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate
|
// Example from https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate
|
||||||
window.C2S_EXAMPLES['rotate'] = function(ctx) {
|
export default function rotate(ctx) {
|
||||||
ctx.fillStyle = 'gray';
|
ctx.fillStyle = 'gray';
|
||||||
ctx.fillRect(80, 60, 140, 30);
|
ctx.fillRect(80, 60, 140, 30);
|
||||||
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
window.C2S_EXAMPLES['saveandrestore'] = function (ctx) {
|
export default function saveAndRestore(ctx) {
|
||||||
ctx.fillRect(0, 0, 150, 150); // Draw a rectangle with default settings
|
ctx.fillRect(0, 0, 150, 150); // Draw a rectangle with default settings
|
||||||
ctx.save(); // Save the default state
|
ctx.save(); // Save the default state
|
||||||
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
window.C2S_EXAMPLES['setLineDash'] = function(ctx) {
|
export default function setLineDash(ctx) {
|
||||||
ctx.save();
|
ctx.save();
|
||||||
ctx.lineWidth = 4;
|
ctx.lineWidth = 4;
|
||||||
for (var i = 0; i < 10; i++){
|
for (var i = 0; i < 10; i++){
|
||||||
@ -1,4 +1,4 @@
|
|||||||
window.C2S_EXAMPLES['text'] = function(ctx) {
|
export default function text(ctx) {
|
||||||
ctx.font = "normal 36px Times";
|
ctx.font = "normal 36px Times";
|
||||||
ctx.fillStyle = "#000000";
|
ctx.fillStyle = "#000000";
|
||||||
ctx.fillText("A Text Example", 50, 50);
|
ctx.fillText("A Text Example", 50, 50);
|
||||||
@ -1,4 +1,4 @@
|
|||||||
window.C2S_EXAMPLES['tiger'] = function(ctx) {
|
export default function tiger(ctx) {
|
||||||
ctx.save();
|
ctx.save();
|
||||||
ctx.strokeStyle = 'rgba(0,0,0,0)';
|
ctx.strokeStyle = 'rgba(0,0,0,0)';
|
||||||
ctx.lineCap = 'butt';
|
ctx.lineCap = 'butt';
|
||||||
@ -1,4 +1,4 @@
|
|||||||
window.C2S_EXAMPLES['transform'] = function(ctx) {
|
export default function transform(ctx) {
|
||||||
// case 1
|
// case 1
|
||||||
ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
|
ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
|
||||||
ctx.setTransform(1,1,0,1,0,0);
|
ctx.setTransform(1,1,0,1,0,0);
|
||||||
@ -1,360 +0,0 @@
|
|||||||
describe('canvas2svg', function() {
|
|
||||||
|
|
||||||
describe('it can be created', function(){
|
|
||||||
|
|
||||||
it("with options", function() {
|
|
||||||
var ctx = new C2S({width:100, height:200, enableMirroring:true});
|
|
||||||
expect(ctx instanceof C2S).to.equal(true);
|
|
||||||
expect(ctx.width).to.equal(100);
|
|
||||||
expect(ctx.height).to.equal(200);
|
|
||||||
expect(ctx.enableMirroring).to.equal(true);
|
|
||||||
|
|
||||||
var ctx2 = new C2S(300,400);
|
|
||||||
expect(ctx2 instanceof C2S).to.equal(true);
|
|
||||||
expect(ctx2.width).to.equal(300);
|
|
||||||
expect(ctx2.height).to.equal(400);
|
|
||||||
expect(ctx2.enableMirroring).to.equal(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("with no options and have defaults", function() {
|
|
||||||
var ctx = new C2S();
|
|
||||||
expect(ctx instanceof C2S).to.equal(true);
|
|
||||||
expect(ctx.width).to.equal(500);
|
|
||||||
expect(ctx.height).to.equal(500);
|
|
||||||
expect(ctx.enableMirroring).to.equal(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("even if it's called as a function", function() {
|
|
||||||
//notice the lack of new!
|
|
||||||
var ctx = C2S({width:100, height:200, enableMirroring:true});
|
|
||||||
expect(ctx instanceof C2S).to.equal(true);
|
|
||||||
expect(ctx.width).to.equal(100);
|
|
||||||
expect(ctx.height).to.equal(200);
|
|
||||||
expect(ctx.enableMirroring).to.equal(true);
|
|
||||||
|
|
||||||
var ctx2 = C2S(300,400);
|
|
||||||
expect(ctx2 instanceof C2S).to.equal(true);
|
|
||||||
expect(ctx2.width).to.equal(300);
|
|
||||||
expect(ctx2.height).to.equal(400);
|
|
||||||
expect(ctx2.enableMirroring).to.equal(false);
|
|
||||||
|
|
||||||
var ctx3 = C2S();
|
|
||||||
expect(ctx3 instanceof C2S).to.equal(true);
|
|
||||||
expect(ctx3.width).to.equal(500);
|
|
||||||
expect(ctx3.height).to.equal(500);
|
|
||||||
expect(ctx3.enableMirroring).to.equal(false);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
it("can be created on another document", function () {
|
|
||||||
var otherDoc = document.implementation.createHTMLDocument();
|
|
||||||
var ctx = C2S({document: otherDoc});
|
|
||||||
expect(ctx.getSvg().ownerDocument).to.equal(otherDoc);
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("can export to", function() {
|
|
||||||
|
|
||||||
it("inline svg", function() {
|
|
||||||
var ctx = new C2S();
|
|
||||||
ctx.fillStyle="red";
|
|
||||||
ctx.fillRect(100,100,100,100);
|
|
||||||
//svg is of course not attached to the document
|
|
||||||
var svg = ctx.getSvg();
|
|
||||||
expect(svg.nodeType).to.equal(1);
|
|
||||||
expect(svg.nodeName).to.equal("svg");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("serialized svg", function() {
|
|
||||||
var ctx = new C2S();
|
|
||||||
ctx.fillStyle="red";
|
|
||||||
ctx.fillRect(100,100,100,100);
|
|
||||||
//Standalone SVG doesn't support named entities, which document.createTextNode encodes.
|
|
||||||
//passing in true will attempt to find all named entities and encode it as a numeric entity.
|
|
||||||
var string = ctx.getSerializedSvg(true);
|
|
||||||
expect(typeof string).to.equal("string");
|
|
||||||
expect(string).to.equal('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500"><defs/><g><rect fill="red" stroke="none" x="100" y="100" width="100" height="100"/></g></svg>');
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
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);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
x
Reference in New Issue
Block a user