https://github.com/web-platform-tests/wpt
Tip revision: 638ae889cf11d1a233720a5ef2d6bfb773c45a16 authored by jgraham on 23 February 2018, 18:35:24 UTC
Revert "Switch external_host to host_ip. (#9258)"
Revert "Switch external_host to host_ip. (#9258)"
Tip revision: 638ae88
matchMedia.xht
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: CSSOM View matchMedia and MediaQueryList</title>
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com" />
<link rel="help" href="http://www.w3.org/TR/cssom-view/#dom-window-matchmedia" />
<link rel="help" href="http://www.w3.org/TR/cssom-view/#the-mediaquerylist-interface" />
<link rel="help" href="http://www.w3.org/TR/cssom-1/#serializing-media-queries" />
<meta name="flags" content="dom" />
<script src="/resources/testharness.js" type="text/javascript" />
<script src="/resources/testharnessreport.js" type="text/javascript" />
<style type="text/css"><![CDATA[
iframe { border: none; }
]]></style>
</head>
<body>
<noscript>Test not run - javascript required.</noscript>
<div id="log" />
<iframe width="200" height="100" />
<script type="text/javascript"><![CDATA[
function reflow(doc) {
doc.body.offsetWidth;
}
var iframe = document.querySelector("iframe");
var iframe_window = window.frames[0];
reflow(iframe_window.document);
test(function(){
assert_inherits(window, "matchMedia");
}, "window.matchMedia exists");
test(function(){
assert_true(window.matchMedia instanceof Function, "FATAL ERROR: The window.matchMedia function is not present. The rest of the testsuite will fail to run.");
}, "window.matchMedia is a Function");
var mql, mql1, mql2, mql3;
test(function(){
mql = window.matchMedia("all");
assert_true(mql instanceof MediaQueryList, "matchMedia(\"all\") returned MediaQueryList object.");
}, "window.matchMedia(\"all\")");
test(function(){
assert_idl_attribute(mql, "media", "Check that MediaQueryList.media exists.");
}, "MediaQueryList.media exists");
test(function(){
assert_readonly(mql, "media", "Check that MediaQueryList.media is readonly.");
}, "MediaQueryList.media is readonly");
test(function(){
assert_equals(mql.media, "all");
}, "MediaQueryList.media for \"all\"");
test(function(){
assert_idl_attribute(mql, "matches", "Check that MediaQueryList.matches exists.");
}, "MediaQueryList.matches exists");
test(function(){
assert_readonly(mql, "matches", "Check that MediaQueryList.matches is readonly.");
}, "MediaQueryList.matches is readonly");
test(function(){
assert_true(mql.matches);
}, "MediaQueryList.matches for \"all\"");
test(function(){
assert_inherits(mql, "addListener");
}, "MediaQueryList.addListener exists");
test(function(){
assert_true(mql.addListener instanceof Function);
}, "MediaQueryList.addListener is a Function");
test(function(){
assert_inherits(mql, "removeListener");
}, "MediaQueryList.removeListener exists");
test(function(){
assert_true(mql.removeListener instanceof Function);
}, "MediaQueryList.removeListener is a Function");
test(function(){
mql = window.matchMedia("::");
assert_true(mql instanceof MediaQueryList, "window.matchMedia(\"::\") returned MediaQueryList object.");
assert_equals(mql.media, "not all", "MediaQueryList.media serialized as \"not all\" from original string with syntax error.");
}, "MediaQueryList.media syntax error");
test(function(){
assert_false(mql.matches);
}, "MediaQueryList.matches for \"not all\"");
test(function(){
mql = iframe_window.matchMedia("(max-width: 199px), all and (min-width: 200px)");
assert_equals(mql.media, "(max-width: 199px), (min-width: 200px)");
assert_true(mql.matches);
}, "MediaQueryList.matches for \"(max-width: 199px), all and (min-width: 200px)\"")
test(function(){
mql = iframe_window.matchMedia("(min-aspect-ratio: 1/1)");
assert_true(mql.matches);
}, "MediaQueryList.matches for \"(min-aspect-ratio: 1/1)\"");
test(function(){
mql = iframe_window.matchMedia("(width: 200px)");
assert_true(mql.matches);
}, "MediaQueryList.matches for \"(width: 200px)\"");
test(function(){
mql1 = iframe_window.matchMedia("(max-height: 50px)");
assert_false(mql1.matches);
}, "MediaQueryList.matches for \"(max-height: 50px)\"");
test(function(){
mql2 = iframe_window.matchMedia("(min-width: 150px)");
assert_true(mql2.matches);
}, "MediaQueryList.matches for \"(min-width: 150px)\"");
var resizeTest = async_test("Resize iframe from 200x100 to 200x50, then to 100x50");
var listenerOrderTest = async_test("Listeners are called in the order which they have been added");
var duplicateListenerTest = async_test("Listener added twice is only called once.");
window.onload = function(){
var rmListener = function(x){
resizeTest.step(function(){
assert_unreached("removeListener was not successful.");
});
};
var dupListener = function(x){
duplicateListenerTest.step(function(){
assert_false(mql1.dupListenerCalled, "Check that this listener has not been called before.");
mql1.dupListenerCalled = true;
});
};
mql1.firstListenerCalled = false;
mql1.dupListenerCalled = false;
// Add listener twice and remove it below. Should not be called.
mql1.addListener(rmListener);
mql1.addListener(rmListener);
// Add listener twice. Should only be called once.
mql1.addListener(dupListener);
mql1.addListener(dupListener);
mql1.addListener(function(x){
resizeTest.step(function(){
assert_equals(x, mql1, "Check that the MediaQueryList passed to the handler is the same that addListener was invoked on.");
assert_true(x.matches, "(max-height: 50px) should now pass.");
assert_true(mql2.matches, "(min-width: 150px) should still pass.");
iframe.width = "100";
});
listenerOrderTest.step(function(){
assert_false(mql1.firstListenerCalled, "Check that this listener is only called once.");
mql1.firstListenerCalled = true;
});
});
mql1.addListener(function(x){
listenerOrderTest.step(function(){
assert_true(mql1.firstListenerCalled, "Check that the listener added last is called last.");
});
listenerOrderTest.done();
});
mql1.removeListener(rmListener);
mql2.addListener(function(x){
duplicateListenerTest.done();
resizeTest.step(function(){
assert_equals(x, mql2, "Check that the MediaQueryList passed to the handler is the same that addListener was invoked on.");
assert_true(mql1.matches, "(max-height: 50px) should still pass.");
assert_false(x.matches, "(min-width: 150px) should now fail.");
});
resizeTest.done();
});
iframe.height = "50";
};]]>
</script>
</body>
</html>
