iterate style element to get css rules string

This commit is contained in:
Yanzhen Yu
2019-02-17 16:34:28 +08:00
parent 5e07137059
commit 687c710fe9
4 changed files with 57 additions and 6 deletions

View File

@@ -83,6 +83,20 @@ exports[`[html file]: cors-style-sheet.html 1`] = `
</head><body></body></html>"
`;
exports[`[html file]: dynamic-stylesheet.html 1`] = `
"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>dynamic stylesheet</title>
<style>body { margin: 0px; }p { background: lightpink; }</style>
<noscript>SCRIPT_PLACEHOLDER</noscript>
</head>
<body>
<p>p tag</p>
</body></html>"
`;
exports[`[html file]: form-fields.html 1`] = `
"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />

View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>dynamic stylesheet</title>
<style></style>
<script>
const styleEl = document.querySelector('style');
const rules = [`body { margin: 0 }`, `p { background: lightpink }`];
rules.forEach((rule, idx) => {
styleEl.sheet.insertRule(rule, idx);
});
</script>
</head>
<body>
<p>p tag</p>
</body>
</html>