Auto merge of #14556 - iamrohit7:fix-set-device, r=SimonSapin,Emilio

Make Stylist::set_device check stylesheet media queries

Fixes Stylist::set_device to check for media queries in stylesheets.

<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes fix #14279  (github issue number if applicable).

<!-- Either: -->
- [X] There are tests for these changes

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- 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/14556)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2017-01-29 04:06:03 -08:00 committed by GitHub
commit 1c1aaa5a88
5 changed files with 53 additions and 0 deletions

View file

@ -458,6 +458,11 @@ impl Stylist {
false
}
self.is_device_dirty |= stylesheets.iter().any(|stylesheet| {
let mq = stylesheet.media.read();
if mq.evaluate(&self.device) != mq.evaluate(&device) {
return true
}
mq_eval_changed(&stylesheet.rules.read().0, &self.device, &device)
});

View file

@ -6812,6 +6812,12 @@
"url": "/_mozilla/css/offset_properties_inline.html"
}
],
"css/stylesheet_media_queries.html": [
{
"path": "css/stylesheet_media_queries.html",
"url": "/_mozilla/css/stylesheet_media_queries.html"
}
],
"css/test_font_family_parsing.html": [
{
"path": "css/test_font_family_parsing.html",

View file

@ -0,0 +1,4 @@
[stylesheet_media_queries.html.ini]
type: testharness
expected: FAIL
bug: https://github.com/servo/servo/issues/14719

View file

@ -0,0 +1,17 @@
<html>
<head>
<style media="(min-width: 400px)">
h1 {
background: rgb(255, 0, 0);
}
</style>
<style media="(max-width: 399px)">
h1 {
background: rgb(0, 255, 0);
}
</style>
</head>
<body>
<h1 id="testelement">Header</h1>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test: Media query correctly forces style invalidation</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<iframe id="myframe" src="iframe_for_media_queries.html" height="500" width="500">
</iframe>
<script>
var test = async_test("Media queries within stylesheets");
window.onload = test.step_func(function() {
var frame = document.getElementById("myframe");
var frameDoc = frame.contentWindow.document;
var element = frameDoc.getElementById("testelement");
assert_equals(frame.contentWindow.getComputedStyle(element).backgroundColor, "rgb(255, 0, 0)");
frame.width = "300";
frameDoc.documentElement.offsetWidth; // Force layout
window.requestAnimationFrame(test.step_func_done(function () {
assert_equals(frame.contentWindow.getComputedStyle(element).backgroundColor, "rgb(0, 255, 0)");
}));
});
</script>