mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1761611 - Make <dialog> styles use system colors. r=morgan 

To be landed when https://github.com/whatwg/html/issues/7754 has a resolution,
but I think it should be uncontroversial.

Differential Revision: https://phabricator.services.mozilla.com/D142170
This commit is contained in:
Emilio Cobos Álvarez 2022-03-28 19:15:46 +00:00
Родитель 65cf67139e
Коммит eb1bf035fd
2 изменённых файлов: 37 добавлений и 2 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

4
layout/style/res/html.css
Просмотреть файл

@ -807,14 +807,14 @@ dialog {
display: block;
inset-inline-start: 0;
inset-inline-end: 0;
color: black;
margin: auto;
border-width: initial;
border-style: solid;
border-color: initial;
border-image: initial;
padding: 1em;
background: white;
background-color: Canvas;
color: CanvasText;
width: -moz-fit-content;
height: -moz-fit-content;
}

35
testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/default-color.html Normal file
Просмотреть файл

@ -0,0 +1,35 @@
<!doctype html>
<meta charset=utf-8>
<title>Test for dialog element colors</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
:root { background-color: Canvas; color: CanvasText; }
#light { color-scheme: light }
#dark { color-scheme: dark }
</style>
<dialog id="dialog" open>
This is a dialog
</dialog>
<dialog id="light" open>
This is a dialog
</dialog>
<dialog id="dark" open>
This is a dialog
</dialog>
<script>
test(function() {
let dialog = document.getElementById("dialog");
let cs = getComputedStyle(dialog);
let rootCs = getComputedStyle(document.documentElement);
assert_equals(cs.color, rootCs.color, "Dialog color should match CanvasText");
assert_equals(cs.backgroundColor, rootCs.backgroundColor, "Dialog background should match Canvas");
}, "<dialog> color and background match default")
test(function() {
let lightCs = getComputedStyle(document.getElementById("light"));
let darkCs = getComputedStyle(document.getElementById("dark"));
assert_not_equals(lightCs.color, darkCs.color, "Dialog color should react to color-scheme");
assert_not_equals(lightCs.backgroundColor, darkCs.backgroundColor, "Dialog background should react to color-scheme");
}, "<dialog> colors react to dark mode")
</script>