mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
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:
commit
1c1aaa5a88
5 changed files with 53 additions and 0 deletions
|
@ -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)
|
||||
});
|
||||
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
[stylesheet_media_queries.html.ini]
|
||||
type: testharness
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/14719
|
17
tests/wpt/mozilla/tests/css/iframe_for_media_queries.html
Normal file
17
tests/wpt/mozilla/tests/css/iframe_for_media_queries.html
Normal 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>
|
21
tests/wpt/mozilla/tests/css/stylesheet_media_queries.html
Normal file
21
tests/wpt/mozilla/tests/css/stylesheet_media_queries.html
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue