Blitz - WPT: transform-iframe-scroll-position.html

wpt / css / css-transforms / transform-iframe-scroll-position.html

/css/css-transforms/transform-iframe-scroll-position.html

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Test (Transforms): iframe scroll position</title>
    <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
    <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering">
    <meta name="assert" content="This test ensures that when an iframe element is transformed, the scroll position of the iframe content is preserved.">
    <link rel="match" href="transform-iframe-scroll-position-ref.html">
    <style>
        iframe {
            border: 0;
            width: 50px;
            height: 50px;
            border: solid;
        }

        .rotate {
            transform: rotate(90deg);
        }
    </style>
    <body onload="onLoad();">
        <iframe id="iframe" src="support/transform-iframe-scroll-position-contents.html"></iframe>
        <script>
            function onLoad() {
                iframe.classList.toggle("rotate");
            }
        </script>
    </body>
</html>

/css/css-transforms/transform-iframe-scroll-position-ref.html

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Test (Transforms): iframe scroll position</title>
    <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
    <style>
        #iframe {
            border: 0;
            width: 50px;
            height: 50px;
            border: solid;
        }

        #iframe div {
            width: 25px;
            height: 50px;
            float: left;
        }

        .rotate {
            transform: rotate(90deg);
        }
    </style>
    <body onload="onLoad();">
        <div id="iframe">
            <div style="background: blue;"></div>
            <div style="background: green;"></div>
        </div>
    </body>
</html>