Blitz - WPT: iframe-zoom-nested.html

wpt / css / css-viewport / zoom / iframe-zoom-nested.html

/css/css-viewport/zoom/iframe-zoom-nested.html

<!DOCTYPE html>
<html class="reftest-wait">
<head>
<title>nested iframes with CSS zoom</title>
<link rel="author" title="Yotam Hacohen" href="mailto:yotha@chromium.org">
<link rel="author" title="Stefan Zager" href="mailto:szager@chromium.org">
<link rel="author" title="Google" href="http://www.google.com/">
<link href="reference/iframe-zoom-nested-ref.html" rel="match">
<link rel="help" href="https://drafts.csswg.org/css-viewport/">

<style>
body {
  columns: 2;
  --iframe-width: 256px;
  --iframe-height: 128px;
}
iframe {
  border: none;
  width: var(--iframe-width);
  height: var(--iframe-height);
}
.zoom {
  zoom: 1.5;
}
</style>
</head>

<body>

<iframe id="baseline" src="resources/nested-iframe.html" scrolling="no"></iframe>
<iframe id="zoom-child" src="resources/nested-iframe.html?zoom=2" scrolling="no"></iframe>
<iframe id="zoom-top" class="zoom" src="resources/nested-iframe.html" scrolling="no"></iframe>
<iframe id="zoom-top-child" class="zoom" src="resources/nested-iframe.html?zoom=2" scrolling="no"></iframe>

<script>
// Wait for all iframes to load before allowing the screenshot
let loadedCount = 0;
const iframes = document.querySelectorAll('iframe');
const totalFrames = iframes.length;

iframes.forEach(iframe => {
  iframe.onload = function() {
    loadedCount++;
    if (loadedCount === totalFrames) {
      document.documentElement.classList.remove("reftest-wait");
    }
  };
});
</script>

/css/css-viewport/zoom/reference/iframe-zoom-nested-ref.html

<!DOCTYPE html>
<title>ref for nested iframes with css zoom</title>
<link rel="author" title="Yotam Hacohen" href="mailto:yotha@chromium.org">
<link rel="author" title="Stefan Zager" href="mailto:szager@chromium.org">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-viewport/">

<style>
body {
  columns: 2;
  --iframe-width: 256px;
  --iframe-height: 128px;
  --scale: 1;
}
iframe {
  border: none;
  width: calc(var(--iframe-width) * var(--scale));
  height: calc(var(--iframe-height) * var(--scale));
}
.scale {
  --scale: 1.5;
}
</style>

<iframe id="baseline-ref" src="../resources/nested-iframe.html" scrolling="no"></iframe>
<iframe id="zoom-child-ref" src="../resources/nested-iframe.html?subscale=2" scrolling="no"></iframe>
<iframe id="zoom-top-ref" class="scale" src="../resources/nested-iframe.html?topscale=1.5" scrolling="no"></iframe>
<iframe id="zoom-top-child-ref" class="scale" src="../resources/nested-iframe.html?topscale=1.5&subscale=2" scrolling="no"></iframe>