mirror of
https://github.com/servo/servo.git
synced 2025-08-04 05:00:08 +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
|
false
|
||||||
}
|
}
|
||||||
self.is_device_dirty |= stylesheets.iter().any(|stylesheet| {
|
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)
|
mq_eval_changed(&stylesheet.rules.read().0, &self.device, &device)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -6812,6 +6812,12 @@
|
||||||
"url": "/_mozilla/css/offset_properties_inline.html"
|
"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": [
|
"css/test_font_family_parsing.html": [
|
||||||
{
|
{
|
||||||
"path": "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