<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style>
.a .b::backdrop { background-color: green; }
</style>
<div id="t">
<dialog class="b" id="dialog"><span></span><span></span><span></span></dialog>
</div>
<script>
description("Change class affecting ::backdrop style");
var dialog = document.getElementById("dialog");
dialog.showModal();
var green = 'rgb(0, 128, 0)';
shouldNotBe("getComputedStyle(dialog, '::backdrop').backgroundColor", "green");
document.body.offsetLeft;
document.getElementById("t").className = "a";
if (window.internals)
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
shouldBe("getComputedStyle(dialog, '::backdrop').backgroundColor", "green");
dialog.close();
</script>