diff --git a/src/test/unit.js b/src/test/unit.js
index 81da21ac8..f5b034383 100644
--- a/src/test/unit.js
+++ b/src/test/unit.js
@@ -5,6 +5,7 @@ import "test/unit/composition_test"
 import "test/unit/document_test"
 import "test/unit/document_view_test"
 import "test/unit/html_parser_test"
+import "test/unit/helpers/custom_elements_test"
 import "test/unit/location_mapper_test"
 import "test/unit/mutation_observer_test"
 import "test/unit/serialization_test"
diff --git a/src/test/unit/helpers/custom_elements_test.js b/src/test/unit/helpers/custom_elements_test.js
new file mode 100644
index 000000000..962b30750
--- /dev/null
+++ b/src/test/unit/helpers/custom_elements_test.js
@@ -0,0 +1,55 @@
+import { assert, test, testGroup } from "test/test_helper"
+import { installDefaultCSSForTagName, makeElement } from "trix/core/helpers"
+
+let meta = null
+
+const insertMeta = (attributes) => {
+  meta = makeElement("meta", attributes)
+  document.head.append(meta)
+}
+
+const installDefaultCSS = (tagName, css) => {
+  installDefaultCSSForTagName(tagName, css)
+
+  return document.querySelector(`style[data-tag-name=${tagName}]`)
+}
+
+const teardown = () => meta.remove()
+
+testGroup("Helpers: Custom Elements", { teardown }, () => {
+  test("reads from meta[name=csp-nonce][content]", () => {
+    insertMeta({ name: "csp-nonce", content: "abc123" })
+
+    const style = installDefaultCSS("trix-element", "trix-element { display: block; }")
+
+    assert.equal(style.getAttribute("nonce"), "abc123")
+    assert.equal(style.innerHTML, "trix-element { display: block; }")
+  })
+
+  test("reads from meta[name=trix-csp-nonce][content]", () => {
+    insertMeta({ name: "trix-csp-nonce", content: "abc123" })
+
+    const style = installDefaultCSS("trix-element", "trix-element { display: block; }")
+
+    assert.equal(style.getAttribute("nonce"), "abc123")
+    assert.equal(style.innerHTML, "trix-element { display: block; }")
+  })
+
+  test("reads from meta[name=csp-nonce][nonce]", () => {
+    insertMeta({ name: "csp-nonce", nonce: "abc123" })
+
+    const style = installDefaultCSS("trix-element", "trix-element { display: block; }")
+
+    assert.equal(style.getAttribute("nonce"), "abc123")
+    assert.equal(style.innerHTML, "trix-element { display: block; }")
+  })
+
+  test("reads from meta[name=trix-csp-nonce][nonce]", () => {
+    insertMeta({ name: "trix-csp-nonce", nonce: "abc123" })
+
+    const style = installDefaultCSS("trix-element", "trix-element { display: block; }")
+
+    assert.equal(style.getAttribute("nonce"), "abc123")
+    assert.equal(style.innerHTML, "trix-element { display: block; }")
+  })
+})