Adds test for checking media queries in stylesheets

This commit is contained in:
Rohit Burra 2016-12-12 23:09:07 +05:30
parent b5c94bad37
commit c1eb6ae295
4 changed files with 48 additions and 0 deletions

View file

@ -6788,6 +6788,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>