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

Bug 1711170 - Look at the right element for exportparts in each_applicable_non_document_style_rule_data. r=boris 

Otherwise we might not find those rules for invalidation.

Differential Revision: https://phabricator.services.mozilla.com/D115130
This commit is contained in:
Emilio Cobos Álvarez 2021-05-20 08:31:34 +00:00
Родитель 5e9a828adc
Коммит b9ab630742
2 изменённых файлов: 51 добавлений и 1 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
servo/components/style/dom.rs
Просмотреть файл

@ -887,7 +887,7 @@ pub trait TElement:
}
}
// TODO: Could be more granular.
if !shadow.host().exports_any_part() {
if !inner_shadow_host.exports_any_part() {
break;
}
inner_shadow = shadow;

50
testing/web-platform/tests/css/css-shadow-parts/invalidation-part-pseudo.html Normal file
Просмотреть файл

@ -0,0 +1,50 @@
<!doctype html>
<title>CSS Shadow Parts - Pseudo class and exported parts</title>
<link rel="help" href="https://drafts.csswg.org/css-shadow-parts" >
<link rel="help" href="https://drafts.csswg.org/selectors/#matches">
<link href="https://drafts.csswg.org/selectors/#matches" rel="help">
<link rel="match" href="interaction-with-nested-pseudo-class-ref.html">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<style>
/* NOTE: Even though it might be tempting to use :focus instead, because we
can more easily add that state programmatically, that'd defeat the point
of the test, since :focus / :focus-visible has default styles which
invalidate the element's style anyways */
#host::part(a):hover {
background: blue;
}
</style>
<div id="host"></div>
<script>
let host = document.querySelector('#host')
host.attachShadow({mode: 'open'}).innerHTML = `<div part="b" exportparts="a"></div>`;
let innerHost = host.shadowRoot.querySelector('div');
innerHost.attachShadow({mode: 'open'}).innerHTML = `
<style>
div {
width: 100px;
height: 100px;
background: black;
color: white;
}
</style>
<div part="a">hover, the background should be blue</div>
`;
let part = innerHost.shadowRoot.querySelector("div");
let t = async_test("Invalidation of nested part on hover");
part.addEventListener("mouseover", t.step_func_done(function() {
assert_true(part.matches(":hover"), "Element should be hovered");
assert_equals(getComputedStyle(part).backgroundColor, "rgb(0, 0, 255)", "Hover style should apply");
}));
new test_driver.Actions()
.pointerMove(0, 0)
.pointerMove(50, 50)
.send();
</script>