Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / media / mq-relative-constraints-05.html
blobc04bd3ca4157d589ccdd0401e399ddb258602fed
1 <html>
2 <head>
3 <title>CSS3 media query test: relative constraints test using screen and (min-width: 30em). Using style element, css @media rule </title>
4 <link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#width" />
6 <style type="text/css">
7 p {
8 color: red;
10 @media screen and (min-width: 30em) {
11 p {
12 color: green;
15 </style>
16 </head>
17 <body>
19 <p> This text should be green if viewport is wider than 30em. </p>
21 <div style="width: 30em; background-color: lightblue;"> div of length 30 em </div>
22 <div style="width: 800px; background-color: lightblue;"> div of length 800px </div>
23 </body>
24 </html>