calc-in-media-queries-with-mixed-units.html (2262B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>test calc with mixed units in media queries</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <link rel="help" href="https://www.w3.org/TR/css3-values/#calc-computed-value"> 8 </head> 9 <body> 10 <iframe src="./support/mixed-units-01.html" title="px-em" frameborder="0" height="10" width="100"></iframe> 11 <iframe src="./support/mixed-units-02.html" title="vh+em" frameborder="0" height="10" width="100"></iframe> 12 <iframe src="./support/mixed-units-03.html" title="vw-em" frameborder="0" height="10" width="100"></iframe> 13 <iframe src="./support/mixed-units-04.html" title="vw+vh" frameborder="0" height="10" width="100"></iframe> 14 <iframe src="./support/mixed-units-05.html" title="vh+px" frameborder="0" height="10" width="100"></iframe> 15 <iframe src="./support/mixed-units-06.html" title="vw+px" frameborder="0" height="10" width="100"></iframe> 16 <iframe src="./support/mixed-units-07.html" title="px/em*em" frameborder="0" height="10" width="100"></iframe> 17 <iframe src="./support/mixed-units-08.html" title="vh*em" frameborder="0" height="10" width="100"></iframe> 18 <iframe src="./support/mixed-units-09.html" title="vh*vw/em*px/vh" frameborder="0" height="10" width="100"></iframe> 19 <iframe src="./support/mixed-units-10.html" title="vw/px*vh" frameborder="0" height="10" width="100"></iframe> 20 <iframe src="./support/mixed-units-11.html" title="vh*vw/em*px" frameborder="0" height="10" width="100"></iframe> 21 <iframe src="./support/mixed-units-12.html" title="vw*vh*px*em/px/px/px" frameborder="0" height="10" width="100"></iframe> 22 <script> 23 for (const frame of document.querySelectorAll("iframe")) { 24 async_test((t) => { 25 frame.addEventListener("load", t.step_func(() => { 26 const body = frame.contentWindow.document.body; 27 const actual = frame.contentWindow.getComputedStyle(body).getPropertyValue("background-color"); 28 assert_equals(actual, "rgb(255, 165, 0)"); 29 t.done(); 30 })); 31 }, `box should be orange if the calc between ${frame.title} in @media was correct`); 32 } 33 </script> 34 </body> 35 </html>