Fix wording and add a note explaining the sample

chartjs · Feb 7, 2019 · 1a380ee · 1a380ee
1 parent 0f3b844
commit 1a380ee
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 11 deletions.
diff --git a/docs/getting-started/integration.md b/docs/getting-started/integration.md
@@ -85,9 +85,9 @@ require(['moment'], function() {
 });
 ```
 
-## Content-Security-Policy
+## Content Security Policy
 
-By default, Chart.js injects CSS directly into the DOM. For webpages secured using [Content-Security-Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy), this requires to allow `style-src 'unsafe-inline'`. For stricter CSP environments, where only `style-src 'self'` is allowed, the following CSS file needs to be manually added to your webpage:
+By default, Chart.js injects CSS directly into the DOM. For webpages secured using [`Content-Security-Policy` (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy), this requires to allow `style-src 'unsafe-inline'`. For stricter CSP environments, where only `style-src 'self'` is allowed, the following CSS file needs to be manually added to your webpage:
 
 ```html
 <link rel="stylesheet" type="text/css" href="path/to/chartjs/dist/Chart.min.css">

diff --git a/rollup.config.js b/rollup.config.js
@@ -29,7 +29,7 @@ module.exports = [
 			}),
 			optional({
 				include: ['moment']
-			}),
+			})
 		],
 		output: {
 			name: 'Chart',

diff --git a/samples/advanced/content-security-policy.css b/samples/advanced/content-security-policy.css
@@ -1,5 +1,20 @@
 .content {
 	max-width: 640px;
 	margin: auto;
-	padding: 16px 32px;
+	padding: 1rem;
+}
+
+.note {
+	font-family: sans-serif;
+	color: #5050a0;
+	line-height: 1.4;
+	margin-bottom: 1rem;
+	padding: 1rem;
+}
+
+code {
+	background-color: #f5f5ff;
+	border: 1px solid #d0d0fa;
+	border-radius: 4px;
+	padding: 0.05rem 0.25rem;
 }
diff --git a/samples/advanced/content-security-policy.html b/samples/advanced/content-security-policy.html
@@ -14,6 +14,11 @@
 </head>
 <body>
 	<div class="content">
+		<div class="note">
+			In order to support a strict content security policy (<code>default-src 'self'</code>),
+			this page manually loads <code>Chart.min.css</code> and turns off the automatic style
+			injection by setting <code>Chart.platform.useExternalStylesheet = true;</code>.
+		</div>
 		<div class="wrapper">
 			<canvas id="chart-0"></canvas>
 		</div>

diff --git a/samples/samples.js b/samples/samples.js
@@ -188,7 +188,7 @@
 			title: 'Progress bar',
 			path: 'advanced/progress-bar.html'
 		}, {
-			title: 'Content-Security-Policy',
+			title: 'Content Security Policy',
 			path: 'advanced/content-security-policy.html'
 		}]
 	}];

diff --git a/samples/style.css b/samples/style.css
@@ -1,4 +1,3 @@
-
 @import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');
 
 body, html {

diff --git a/src/platforms/platform.dom.css b/src/platforms/platform.dom.css
@@ -2,17 +2,12 @@
  * DOM element rendering detection
  * https://davidwalsh.name/detect-node-insertion
  */
-@-webkit-keyframes chartjs-render-animation {
-	from { opacity: 0.99; }
-	to { opacity: 1; }
-}
 @keyframes chartjs-render-animation {
 	from { opacity: 0.99; }
 	to { opacity: 1; }
 }
 
 .chartjs-render-monitor {
-	-webkit-animation: chartjs-render-animation 0.001s;
 	animation: chartjs-render-animation 0.001s;
 }