refactored tests & squashed commits

.eslintignore

@@ -2,6 +2,10 @@
 **/expected.js
 _output
 test/*/samples/*/output.js
+test/svelte-styles-csp/*.js
+test/svelte-styles-csp/svelte-test-transitions-no-styles-csp/build/*.js
+test/svelte-styles-csp/svelte-test-transitions-styles-csp/build/*.js
+
 
 # automatically generated
 internal_exports.ts

package.json

@@ -162,5 +162,8 @@
     ],
     "sourceMap": true,
     "instrument": true
+  },
+  "optionalDependencies": {
+    "fsevents": "^2.1.3"
   }
 }

src/runtime/internal/style_manager.ts

@@ -18,6 +18,24 @@ function hash(str: string) {
 	return hash >>> 0;
 }
 
+export function get_svelte_style_sheet_index(style_sheet_list: StyleSheetList) {
+	let svelte_style_sheet_index: number;
+	const svelte_style_sheet_title = 'svelte-stylesheet';
+	
+		for (let i = 0; i < style_sheet_list.length; i++) {
+			if ( style_sheet_list[i].type !== 'text/css') continue;
+			const css = <CSSStyleSheet>style_sheet_list[i];
+			
+		const css_rules = css?.cssRules;
+		if (!css_rules) continue;
+		if (css.title === svelte_style_sheet_title && css_rules.length === 0) {
+			svelte_style_sheet_index = i;
+			break;
+		}
+	}
+	return svelte_style_sheet_index;
+}
+
 export function create_rule(node: Element & ElementCSSInlineStyle, a: number, b: number, duration: number, delay: number, ease: (t: number) => number, fn: (t: number, u: number) => string, uid: number = 0) {
 	const step = 16.666 / duration;
 	let keyframes = '{\n';
@@ -31,7 +49,16 @@ export function create_rule(node: Element & ElementCSSInlineStyle, a: number, b:
 	const name = `__svelte_${hash(rule)}_${uid}`;
 	const doc = get_root_for_style(node) as ExtendedDoc;
 	active_docs.add(doc);
-	const stylesheet = doc.__svelte_stylesheet || (doc.__svelte_stylesheet = append_empty_stylesheet(node).sheet as CSSStyleSheet);
+	
+	let svelte_style_sheet_index: number;
+	
+	if (!doc.__svelte_stylesheet) {
+		svelte_style_sheet_index = get_svelte_style_sheet_index(document.styleSheets);
+	}
+
+	const stylesheet = doc.__svelte_stylesheet || 
+		(doc.__svelte_stylesheet = (document.styleSheets[svelte_style_sheet_index] as CSSStyleSheet) ??
+		 append_empty_stylesheet(node).sheet as CSSStyleSheet);
 	const current_rules = doc.__svelte_rules || (doc.__svelte_rules = {});
 
 	if (!current_rules[name]) {

test/svelte-styles-csp/index.ts

@@ -0,0 +1,70 @@
+const puppeteer = require('puppeteer');
+import * as assert from 'assert';
+const path = require('path');
+
+// set to false to view transitions tested in Chromium
+const headless_browser = true;
+
+// set to true to allow 1000ms delay between transition start and finish
+// (gives time to view transitions when not in headless mode)
+const transition_delay = false;
+
+describe('svelte-style-csp', async () => {
+  describe('test transitions with svelte-styles-csp & strict-CSP', async () => {
+    it('svelte-stylesheet loaded and transitions work', async () => {
+      const absolutePath = path.join(
+        __dirname,
+        'svelte-test-transitions-styles-csp/index.html'
+      );
+      const browser = await puppeteer.launch({ headless: headless_browser });
+      const page = await browser.newPage();
+      try {
+        await page.goto('file://' + absolutePath);
+        let linkTitle: string;
+        const linkTitles = await page.evaluateHandle(() => {
+          return Array.from(document.getElementsByTagName('link')).map(
+            (a) => a.title
+          );
+        });
+        const linkList = await linkTitles.jsonValue();
+
+        for (const item of linkList) {
+          if (item == 'svelte-stylesheet') linkTitle = item;
+        }
+
+        await page.click('input');
+        if (transition_delay) {
+          await page.waitFor(1000);
+        }
+        await page.click('input');
+        await browser.close();
+        assert.equal(linkTitle, 'svelte-stylesheet');
+      } catch (err) {
+        throw new Error(err);
+      }
+    });
+  });
+
+  describe('test transitions without svelte-styles-csp & strict CSP', async () => {
+    it('transitions fail with strict CSP and no style-src: unsafe-inline', async () => {
+      const absolutePath = path.join(
+        __dirname,
+        'svelte-test-transitions-no-styles-csp/index.html'
+      );
+      const browser = await puppeteer.launch({ headless: headless_browser });
+      const page = await browser.newPage();
+      try {
+        await page.goto('file://' + absolutePath);
+        await page.click('input');
+        if (transition_delay) {
+          await page.waitFor(1000);
+        }
+        await page.click('input');
+        await browser.close();
+      } catch (err) {
+        // Transitions should fail with strict CSP
+        assert.throws(err);
+      }
+    });
+  });
+});

test/svelte-styles-csp/svelte-test-transitions-no-styles-csp/build/bundle.css

@@ -0,0 +1 @@
+h1.svelte-i7qo5m{color:purple}.contact-card.svelte-vatk6b{box-shadow:0 2px 8px rgba(0, 0, 0, 0.26);max-width:30rem;border-radius:5px;margin:1rem 0}header.svelte-vatk6b{display:flex;justify-content:space-between;align-items:center;height:7rem}.thumb.svelte-vatk6b{width:33%;height:100%}.thumb-placeholder.svelte-vatk6b{background-color:grey}img.svelte-vatk6b{width:100%;height:100%;object-fit:cover}.user-data.svelte-vatk6b{width:67%;display:flex;flex-direction:column;justify-content:center}h1.svelte-vatk6b{font-size:1.25rem;font-family:"Roboto Slab", sans-serif;margin:0.5rem 0}h2.svelte-vatk6b{font-size:1rem;font-weight:normal;color:#5a5a5a;margin:0;margin-bottom:0.5rem}.description.svelte-vatk6b{border-top:1px solid #ccc;padding:1rem}

test/svelte-styles-csp/svelte-test-transitions-no-styles-csp/global.css

@@ -0,0 +1,63 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	-webkit-padding: 0.4em 0;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+button {
+	color: #333;
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}

test/svelte-styles-csp/svelte-test-transitions-no-styles-csp/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+	<meta http-equiv="Content-Security-Policy" content="default-src 'self';
+	  img-src 'self' data: https:; script-src 'self';
+	  style-src 'self'">
+	<title>Svelte app</title>
+
+	<link rel='icon' type='image/png' href='favicon.png'>
+	<link rel='stylesheet' href='global.css'>
+	<link rel='stylesheet' href='build/bundle.css'>
+
+	<script defer src='build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>

test/svelte-styles-csp/svelte-test-transitions-styles-csp/build/bundle.css

@@ -0,0 +1 @@
+h1.svelte-i7qo5m{color:purple}.contact-card.svelte-vatk6b{box-shadow:0 2px 8px rgba(0, 0, 0, 0.26);max-width:30rem;border-radius:5px;margin:1rem 0}header.svelte-vatk6b{display:flex;justify-content:space-between;align-items:center;height:7rem}.thumb.svelte-vatk6b{width:33%;height:100%}.thumb-placeholder.svelte-vatk6b{background-color:grey}img.svelte-vatk6b{width:100%;height:100%;object-fit:cover}.user-data.svelte-vatk6b{width:67%;display:flex;flex-direction:column;justify-content:center}h1.svelte-vatk6b{font-size:1.25rem;font-family:"Roboto Slab", sans-serif;margin:0.5rem 0}h2.svelte-vatk6b{font-size:1rem;font-weight:normal;color:#5a5a5a;margin:0;margin-bottom:0.5rem}.description.svelte-vatk6b{border-top:1px solid #ccc;padding:1rem}

test/svelte-styles-csp/svelte-test-transitions-styles-csp/global.css

@@ -0,0 +1,63 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	-webkit-padding: 0.4em 0;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+button {
+	color: #333;
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}

test/svelte-styles-csp/svelte-test-transitions-styles-csp/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+	<meta http-equiv="Content-Security-Policy" content="default-src;
+	  img-src 'self' data: https:; script-src 'self';
+	  style-src  'self'">
+	<title>Svelte app</title>
+
+	<link rel='icon' type='image/png' href='favicon.png'>
+	<link rel='stylesheet' href='global.css'>
+	<link rel='stylesheet' href='build/bundle.css'>
+	<link rel='stylesheet' title='svelte-stylesheet' href='svelte-stylesheet.css'>
+
+	<script defer src='build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>