Разве этот цвет диапазона не должен быть зеленым?

Чтобы упростить анализ, я сократил вашу выборку, удалив повторяющиеся и нерелевантные строки; для воспроизведения проблемы достаточно следующего:

var div = document.createElement("div");
document.body.appendChild(div);

var link = document.createElement("link");
link.href = "data:text/css,div { color: red }";
link.rel = "stylesheet";
document.head.appendChild(link);

document.querySelector("span").style.color = getComputedStyle(div).color;

div {color:green}

<span>This is a span</span>
<div>this is a div</div>

Итак, что здесь происходит, есть встроенный CSS, который говорит, что div должен быть зеленым; вы создаете ссылку text/css, которая устанавливает красный цвет div и добавляете ее в заголовок документа. Затем вы используете getComputedStyle, чтобы скопировать цвет из div в диапазон.

В Safari, Chrome и Edge обе линии заканчиваются красным; в Firefox диапазон зеленый, а div красный.

НО! при первой загрузке или если вы загрузите эту страницу в Safari или Chrome с чистым и пустым кешем^*, вы увидите то же поведение, что и в Firefox: зеленый интервал и красный разд. Edge никогда не ведет себя как FF, он всегда красный для обоих даже при первой загрузке.

^* (В Safari вы можете просто использовать приватное окно просмотра. Могу поклясться, что в какой-то момент я видел то же самое в Chrome, но больше не могу воспроизвести; возможно, я ошибался.)

Поэтому вот моя гипотеза о том, что происходит:

• В Safari, когда сгенерированная ссылка на таблицу стилей никогда ранее не использовалась, она является асинхронной, поэтому getComputedStyle выбирает цвет из встроенного стиля. При более поздних загрузках сгенерированная таблица стилей уже находится в кеше, когда запускается getComputedStyle, поэтому ее правило вступает в силу.
• В Firefox ссылки на таблицы стилей всегда обрабатываются как асинхронные, поэтому getComputedStyle всегда выбирает встроенное правило.
• В других браузерах ссылка на таблицу стилей интерпретируется синхронно (возможно, потому, что браузер может сказать, что data URI не требует сетевого времени?), поэтому обрабатывается до запуска getComputedStyle.

Это достаточно странный пограничный случай, и я не уверен, какое поведение можно описать как «согласно спецификации».

Попробуйте HTML или HTML5 (это Chrome):

<span type="color:green">shouldn't this be green</span>