mirror of
https://github.com/servo/servo.git
synced 2025-08-06 06:00:15 +01:00
a0dce44ce6
This test manually animates the height of an `<iframe>` that has content which uses the `vh` unit. Each tick of the animation changes the height by one pixel. Inside the `<iframe>` the element using `vh` units has a transition applied, so every manual tick of the animation triggers a new transition. The causes a pretty slow test execution. This change improves `vh_not_refreshing_on_chrome.html` to remove flakiness by making the test wait to start until after the `<iframe>` has loaded and to increase the `<iframe>` height by 10 pixels instead of 1 when doing the manual animation. These changes make the test faster and much less flaky in Servo. In addition, the test is reformated a bit removing extraneous whitespace and renamed to follow WPT naming conventions. Fixes #23385. Fixes #15570. Signed-off-by: Martin Robinson <mrobinson@igalia.com>
64 lines
2.2 KiB
HTML
Vendored
64 lines
2.2 KiB
HTML
Vendored
<!DOCTYPE html>
|
|
<!-- Submitted from TestTWF Paris -->
|
|
<!-- This test exhibits a bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8 -->
|
|
<html class="reftest-wait">
|
|
<head>
|
|
<title>CSS Values and Units Test: Ensure vh-based dimensions update and transition when used in subframe that change size.</title>
|
|
<meta name="timeout" content="long">
|
|
<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
|
|
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
|
<link rel="match" href="reference/vh-update-and-transition-in-subframe-ref.html">
|
|
<meta charset="UTF-8">
|
|
<meta name="assert" content="vh-based dimension doesn't change when the element's other dimension doesn't change.">
|
|
<script src="/common/reftest-wait.js"></script>
|
|
<style type="text/css">
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#frameTest {
|
|
width: 600px;
|
|
height: 200px;
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
'use strict';
|
|
|
|
// We must capture 2 messages to end the test:
|
|
// - frameLoaded: The iframe has loaded and is ready for resizing.
|
|
// - transitionInIFrameEnded: The transition in the child iframe has ended.
|
|
let finishedResizingFrame = false;
|
|
window.addEventListener('message', (message) => {
|
|
// If the <iframe> has finished loading start the test.
|
|
if (message.data == "frameLoaded") {
|
|
setTimeout(resizeReference, 10);
|
|
}
|
|
if (finishedResizingFrame && message.data == "transitionInIFrameEnded") {
|
|
takeScreenshot();
|
|
}
|
|
}, false);
|
|
|
|
let height = 200;
|
|
function resizeReference() {
|
|
// Resize the <iframe> vertically which should trigger a relayout
|
|
// in the child, growing any element that depends on `vh` units.
|
|
height += 10;
|
|
document.getElementById('frameTest').style.height = height + "px";
|
|
|
|
if (height >= 300) {
|
|
// If we are done resizing the frame, then signal that the test can
|
|
// start looking for completion.
|
|
finishedResizingFrame = true;
|
|
} else {
|
|
// Otherwise, keep growing the frame.
|
|
setTimeout(resizeReference, 10);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<iframe id="frameTest" src="vh-update-and-transition-in-subframe-iframe.html" frameborder="0"></iframe>
|
|
</body>
|
|
</html>
|