Border-shadow quiz question

Suppose I have a div .box with the following css styling:

.box {
    height: 300px;
    width: 300px;
    margin: 200px auto;
    padding: 40px;
    border: 10px solid blue;
    background: orange;
    box-shadow: 20px 20px;
}

No color has been defined for the div. Any text in the div will be the color it inherits. If no color has been defined at all, then the text color will be the default black.

Same goes with the box-shadow. In this example, the box-shadow would default to black.

Now suppose I add a color declaration to the .box div:

.box {
    color: red;
    height: 300px;
    width: 300px;
    margin: 200px auto;
    padding: 40px;
    border: 10px solid blue;
    background: orange;
    box-shadow: 20px 20px;
}

Now the color of any text in the box is red, and the default box-shadow color becomes red as well.

Now, you might ask why I'm getting so wordy for a simple answer. Here's why: What if we remove the color declaration from the .box div but add one to a parent element.

body {
    color: green;
}


.box {
    height: 300px;
    width: 300px;
    margin: 200px auto;
    padding: 40px;
    border: 10px solid blue;
    background: orange;
    box-shadow: 20px 20px;
}

Any text in the .box div will be?

green

and the box-shadow will be?

green

So it is TRUE that "if a box shadow color is not specified, the browser will render it according to the element’s color property."

And if no color property is declared at all, then the box-shadow will default to black.

except in Safari, I suppose, where (according to your link) color is required to be declared in the box-shadow declaration or the box-shadow won't appear.

Thanks for such a thorough answer, Gary. =)