function CKEditor5MarkupTest::testStylesAndScripts
Same name in other branches
- 11.x core/modules/ckeditor5/tests/src/FunctionalJavascript/CKEditor5MarkupTest.php \Drupal\Tests\ckeditor5\FunctionalJavascript\CKEditor5MarkupTest::testStylesAndScripts()
Ensures that HTML scripts and styles are properly preserved in CKEditor 5.
File
-
core/
modules/ ckeditor5/ tests/ src/ FunctionalJavascript/ CKEditor5MarkupTest.php, line 201
Class
- CKEditor5MarkupTest
- Tests for CKEditor 5.
Namespace
Drupal\Tests\ckeditor5\FunctionalJavascriptCode
public function testStylesAndScripts() : void {
$test_cases = [
// Test cases taken from the HTML documentation.
// @see https://html.spec.whatwg.org/multipage/scripting.html#restrictions-for-contents-of-script-elements
'script' => [
'<script>(function() { let x = 10, y = 5; if( y <--x ) { console.log("run me!"); }})()</script>',
'<script>(function() { let x = 10, y = 5; if( y <--x ) { console.log("run me!"); }})()</script>',
],
'script like tag' => [
'<script>(function() { let player = 5, script = 10; if (player<script) { console.log("run me!"); }})()</script>',
'<script>(function() { let player = 5, script = 10; if (player<script) { console.log("run me!"); }})()</script>',
],
'script to escape' => [
"<script>const example = 'Consider this string: <!-- <script>';</script>",
"<script>const example = 'Consider this string: <!-- <script>';</script>",
],
'unescaped script tag' => [
<<<HTML
<script>
const example = 'Consider this string: <!-- <script>';
console.log(example);
</script>
<!-- despite appearances, this is actually part of the script still! -->
<script>
let a = 1 + 2; // this is the same script block still...
</script>
HTML
,
<<<HTML
<script>
const example = 'Consider this string: <!-- <script>';
console.log(example);
</script>
<!-- despite appearances, this is actually part of the script still! -->
<script>
let a = 1 + 2; // this is the same script block still...
</script>
HTML
,
],
'style' => [
<<<HTML
<style>
a > span {
/* Important comment. */
color: red !important;
}
</style>
HTML
,
<<<HTML
<style>
a > span {
/* Important comment. */
color: red !important;
}
</style>
HTML
,
],
'script and style' => [
<<<HTML
<script type="text/javascript">
let x = 10;
let y = 5;
if(y < x){
console.log('is smaller')
}
</script>
<style type="text/css">
:root {
--main-bg-color: brown;
}
.sections > .section {
background: var(--main-bg-color);
}
</style>
HTML
,
<<<HTML
<script type="text/javascript">
let x = 10;
let y = 5;
if(y < x){
console.log('is smaller')
}
</script><style type="text/css">
:root {
--main-bg-color: brown;
}
.sections > .section {
background: var(--main-bg-color);
}
</style>
HTML
,
],
];
$page = $this->getSession()
->getPage();
$assert_session = $this->assertSession();
// Create filter.
FilterFormat::create([
'format' => 'ckeditor5',
'name' => 'CKEditor 5 HTML',
'roles' => [
RoleInterface::AUTHENTICATED_ID,
],
])->save();
Editor::create([
'format' => 'ckeditor5',
'editor' => 'ckeditor5',
'image_upload' => [
'status' => FALSE,
],
'settings' => [
'toolbar' => [
'items' => [
'sourceEditing',
],
],
'plugins' => [
'ckeditor5_sourceEditing' => [
'allowed_tags' => [],
],
],
],
])->save();
$this->assertSame([], array_map(function (ConstraintViolation $v) {
return (string) $v->getMessage();
}, iterator_to_array(CKEditor5::validatePair(Editor::load('ckeditor5'), FilterFormat::load('ckeditor5')))));
// Add a node with text rendered via the CKEditor 5 HTML format.
foreach ($test_cases as $test_case_name => $test_case) {
[
$markup,
$expected_content,
] = $test_case;
$this->drupalGet('node/add');
$page->fillField('title[0][value]', "Style and script test - {$test_case_name}");
$this->waitForEditor();
$this->pressEditorButton('Source');
$editor = $page->find('css', '.ck-source-editing-area textarea');
$editor->setValue($markup);
$page->pressButton('Save');
$assert_session->responseContains($expected_content);
}
}
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.