| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <script src="../js/resources/js-test-pre.js"></script> |
| 5 <style> |
| 6 div { margin: 5px 0; font-size: 16px; background: rgba(255,255,255,.5); } |
| 7 #rem { width: 50rem; } |
| 8 #control { width: calc(50 * 16px); } |
| 9 |
| 10 html { font-size: 8px; } |
| 11 body { font-size: 16px; margin: 0; background: green; } |
| 12 @media (min-width: 50rem) and (max-width: 799px) { body { background: red; } } |
| 13 </style> |
| 14 </head> |
| 15 <body> |
| 16 <pre id='console'></pre> |
| 17 <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> |
| 18 <div id=rem>#1: 50rem (based on style data)</div> |
| 19 <div id=control>#2: 50 * 16px (assumed to be the initial font size)</div> |
| 20 <script> |
| 21 description('Test for issue 258200:CSS Media Queries are basing "rem" unit on st
yle data.'); |
| 22 shouldBe('window.getComputedStyle(document.body).backgroundColor', '"rgb(0, 128,
0)"'); |
| 23 window.resizeTo(700, 600); |
| 24 document.body.offsetLeft; |
| 25 shouldBe('window.getComputedStyle(document.body).backgroundColor', '"rgb(0, 128,
0)"'); |
| 26 </script> |
| 27 </body> |
| 28 <script src="../js/resources/js-test-post.js"></script> |
| 29 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 18360007:
MediaQueryEvaluator should use default style for evaluating "rem".
Base URL: svn://svn.chromium.org/blink/trunk