How can I fix font shadow and font stroke not appearing properly on my WordPress website?

I'm building a website on WordPress and upon trying to change the font shadow and font stroke, the changes do not appear properly on the webpage.

For my title, I wrote this CSS:

.wp-block-heading-h1 {
	text-decoration: underline	dotted purple;
	text-shadow: black -4px 5px;
	-webkit-text-stroke: 2px black;
	color: white;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.wp-block-heading-h1 {
	text-decoration: underline	dotted purple;
	text-shadow: black -4px 5px;
	-webkit-text-stroke: 2px black;
	color: white;
}

<!-- language: lang-html -->

<h1 class="wp-block-heading-h1">S. CRAP</h1>

<!-- end snippet -->

The output is this:

Whereas, upon highlighting I get this which should be the expected output:

You can use the below CSS to achieve the expected result:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

.wp-block-heading-h1 {
    text-decoration: underline dotted #fff;
    text-shadow: black -3px 1px;
    -webkit-text-stroke: 1px #000;
    color: #fff;
    font-family: sans-serif;
    background-color: coral;
    display: inline;
}

<!-- language: lang-html -->

<h1 class="wp-block-heading-h1">S. CRAP</h1>

<!-- end snippet -->

Your output would look like this:

<img src="https://i.stack.imgur.com/jv5tS.png" width="270">