dominykas/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Test case files:

container.html: IFRAME, 720px wide
mq.html should display:

'Matching: default', when screen is <719px wide
'Matching: min-width:719px', when screen is =719px wide
'Matching: min-width:720px', when screen is >719px wide


In Firefox:

just mq.html works as expected (I think... too hard to repro exact circumstances)
container.html works as expected at 100% zoom
BUG: mq.html inside container.html may think it is only 719px wide when zoomed in (differs based on zoom level)


## container.html
<!doctype html>
<html>
<head>
        <title>Firefox MQ test (container)</title>
</head>
<body>

	<iframe width="720" height="480" id="mqContainer" src="mq.html"></iframe>

</body>
</html>

## mq.html
<!doctype html>
<html>
<head>
        <title>Firefox MQ test</title>
	<style>
		#mq:after {
			content:"default";
		}
		@media screen and (min-width: 719px) {
			#mq:after {
				content: "min-width: 719px";
			}
		}
		@media screen and (min-width: 720px) {
			#mq:after {
				content: "min-width: 720px";
			}
		}
	</style>
</head>
<body>

	<p id="mq">Matching:</p>

</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Firefox MQ test (container)</title>
	</head>
	<body>

	<iframe width="720" height="480" id="mqContainer" src="mq.html"></iframe>

	</body>
	</html>