Auto merge of #19902 - emilio:quirks-invalidation, r=SimonSapin

style: Fix sheet invalidation in quirks mode documents.

Bug: 1433589

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/19902)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2018-01-30 09:10:17 -06:00 committed by GitHub
commit 5114d1dee9
3 changed files with 51 additions and 11 deletions

View file

@ -10,7 +10,7 @@
use Atom;
use CaseSensitivityExt;
use LocalName as SelectorLocalName;
use dom::{TElement, TNode};
use dom::{TDocument, TElement, TNode};
use fnv::FnvHashSet;
use invalidation::element::element_wrapper::{ElementSnapshot, ElementWrapper};
use invalidation::element::restyle_hints::RestyleHint;
@ -45,15 +45,15 @@ impl Invalidation {
matches!(*self, Invalidation::ID(..) | Invalidation::Class(..))
}
fn matches<E>(&self, element: E, snapshot: Option<&Snapshot>) -> bool
fn matches<E>(
&self,
element: E,
snapshot: Option<&Snapshot>,
case_sensitivity: CaseSensitivity,
) -> bool
where
E: TElement,
{
// FIXME This should look at the quirks mode of the document to
// determine case sensitivity.
//
// FIXME(emilio): Actually write a test and fix this.
let case_sensitivity = CaseSensitivity::CaseSensitive;
match *self {
Invalidation::Class(ref class) => {
if element.has_class(class, case_sensitivity) {
@ -222,7 +222,9 @@ impl StylesheetInvalidationSet {
return false;
}
self.process_invalidations_in_subtree(element, snapshots)
let case_sensitivity =
element.as_node().owner_doc().quirks_mode().classes_and_ids_case_sensitivity();
self.process_invalidations_in_subtree(element, snapshots, case_sensitivity)
}
/// Process style invalidations in a given subtree. This traverses the
@ -235,6 +237,7 @@ impl StylesheetInvalidationSet {
&self,
element: E,
snapshots: Option<&SnapshotMap>,
case_sensitivity: CaseSensitivity,
) -> bool
where
E: TElement,
@ -258,7 +261,7 @@ impl StylesheetInvalidationSet {
let element_wrapper = snapshots.map(|s| ElementWrapper::new(element, s));
let snapshot = element_wrapper.as_ref().and_then(|e| e.snapshot());
for invalidation in &self.invalid_scopes {
if invalidation.matches(element, snapshot) {
if invalidation.matches(element, snapshot, case_sensitivity) {
debug!("process_invalidations_in_subtree: {:?} matched subtree {:?}",
element, invalidation);
data.hint.insert(RestyleHint::restyle_subtree());
@ -270,7 +273,7 @@ impl StylesheetInvalidationSet {
if !data.hint.contains(RestyleHint::RESTYLE_SELF) {
for invalidation in &self.invalid_elements {
if invalidation.matches(element, snapshot) {
if invalidation.matches(element, snapshot, case_sensitivity) {
debug!("process_invalidations_in_subtree: {:?} matched self {:?}",
element, invalidation);
data.hint.insert(RestyleHint::RESTYLE_SELF);
@ -289,7 +292,7 @@ impl StylesheetInvalidationSet {
};
any_children_invalid |=
self.process_invalidations_in_subtree(child, snapshots);
self.process_invalidations_in_subtree(child, snapshots, case_sensitivity);
}
if any_children_invalid {

View file

@ -312035,6 +312035,12 @@
{}
]
],
"css/selectors/invalidation/quirks-mode-stylesheet-dynamic-add-001.html": [
[
"/css/selectors/invalidation/quirks-mode-stylesheet-dynamic-add-001.html",
{}
]
],
"css/selectors/missing-right-token.html": [
[
"/css/selectors/missing-right-token.html",
@ -523734,6 +523740,10 @@
"7c0c602803f2de72e1c0ee4977a04c5054fb03c5",
"testharness"
],
"css/selectors/invalidation/quirks-mode-stylesheet-dynamic-add-001.html": [
"de0d6f774f67362551ca7448d06ab6b264ecaa29",
"testharness"
],
"css/selectors/missing-right-token.html": [
"d961e801f7df57161cd8c7b5a4b26ae24013c3e9",
"testharness"

View file

@ -0,0 +1,27 @@
<!-- Quirks mode -->
<meta charset="utf-8">
<title>Invalidation of style due to a dynamic stylesheet change in quirks mode</title>
<link rel="help" href="https://html.spec.whatwg.org/#case-sensitivity-of-selectors">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1433589">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#foo {
width: 100px;
height: 100px;
background: red;
}
</style>
Should see a green square below.
<div id="foo"></div>
<script>
test(function() {
let foo = document.getElementById('foo');
assert_equals(getComputedStyle(foo).backgroundColor, "rgb(255, 0, 0)");
let style = document.createElement('style');
style.textContent = "#FoO { background: green; }";
document.body.appendChild(style);
assert_equals(getComputedStyle(foo).backgroundColor, "rgb(0, 128, 0)");
}, "Style should've changed to a green background");
</script>