mirror of
https://github.com/servo/servo.git
synced 2025-08-04 21:20:23 +01:00
29 lines
1.5 KiB
HTML
29 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>test calc with mixed units in media queries</title>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<link rel="help" href="https://www.w3.org/TR/css3-values/#calc-computed-value">
|
|
</head>
|
|
<body>
|
|
<iframe src="./support/mixed-units-01.html" title="px/em" frameborder="0" height="10" width="100"></iframe>
|
|
<iframe src="./support/mixed-units-02.html" title="vh/em" frameborder="0" height="10" width="100"></iframe>
|
|
<iframe src="./support/mixed-units-03.html" title="vw/em" frameborder="0" height="10" width="100"></iframe>
|
|
<iframe src="./support/mixed-units-04.html" title="vw/vh" frameborder="0" height="10" width="100"></iframe>
|
|
<iframe src="./support/mixed-units-05.html" title="vh/px" frameborder="0" height="10" width="100"></iframe>
|
|
<iframe src="./support/mixed-units-06.html" title="vw/px" frameborder="0" height="10" width="100"></iframe>
|
|
<script>
|
|
for (const frame of document.querySelectorAll("iframe")) {
|
|
async_test((t) => {
|
|
frame.addEventListener("load", t.step_func(() => {
|
|
const box = frame.contentWindow.document.querySelector(".box");
|
|
const actual = frame.contentWindow.getComputedStyle(box).getPropertyValue("background-color");
|
|
assert_equals(actual, "rgb(255, 165, 0)");
|
|
t.done();
|
|
}));
|
|
}, `box should be orange if the calc between ${frame.title} in @media was correct`);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|