| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <script src="../../js/resources/js-test-pre.js"></script> |
| 5 <script> |
| 6 jsTestIsAsync = true; |
| 7 </script> |
| 8 <style> |
| 9 div { margin: 5px 0; font-size: 16px; background: rgba(255,255,255,.5); } |
| 10 #one { width: 50rem; } |
| 11 #two { width: calc(50 * 16px); } |
| 12 #three { width: 0px; } |
| 13 |
| 14 html { font-size: 8px; } |
| 15 body { font-size: 16px; margin: 0; background: green; } |
| 16 @media (min-width: 50rem) and (max-width: 799px) { body { background: red; } } |
| 17 </style> |
| 18 </head> |
| 19 <body> |
| 20 <pre id='console'></pre> |
| 21 <div>Resize the window to be larger than #1, but smaller than #2. If the screen
turns red, the browser is basing 'rem' units in MQs on style data, which is a s
pec violation. (It should be equal to the initial font size, same as the 'em' u
nit, to avoid circularity issues.)</div> |
| 22 <div style="width: 700px; height: 600px"> |
| 23 <iframe id="iframe" seamless src="resources/css-cascade-child.html"></iframe> |
| 24 </div> |
| 25 <script> |
| 26 description('Test for issue 258200:CSS Media Queries are basing "rem" unit on st
yle data.'); |
| 27 |
| 28 window.onload = function() { |
| 29 window.iframe = document.getElementById("iframe"); |
| 30 shouldBeTrue("iframe.seamless"); |
| 31 shouldBe('window.getComputedStyle(iframe.contentDocument.body).backgroundCol
or', '"rgb(0, 128, 0)"'); |
| 32 window.resizeTo(700, 600); |
| 33 shouldBe('window.getComputedStyle(iframe.contentDocument.body).backgroundCol
or', '"rgb(0, 128, 0)"'); |
| 34 finishJSTest(); |
| 35 } |
| 36 </script> |
| 37 </body> |
| 38 <script src="../../js/resources/js-test-post.js"></script> |
| 39 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 18360007:
MediaQueryEvaluator should use default style for evaluating "rem".
Base URL: svn://svn.chromium.org/blink/trunk