Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 12:40:06 +01:00
Code Issues Projects Releases Packages Wiki Activity

wpt: Fix flakiness in vh_not_refreshing_on_chrome.html (#34626)

Browse source 
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>
This commit is contained in:
Martin Robinson 2024-12-16 16:46:46 +01:00 • committed by GitHub
parent 3e052676ef
commit a0dce44ce6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 278 additions and 296 deletions
Download patch file Download diff file Expand all files Collapse all files

48
tests/wpt/meta/MANIFEST.json vendored
View file

@ -294185,6 +294185,21 @@
{} {}
] ]
], ],
"vh-update-and-transition-in-subframe.html": [
"5e73ffc31153f0542de6fa4da37ef528d6866cd9",
[
null,
[
[
"/css/css-values/reference/vh-update-and-transition-in-subframe-ref.html",
"=="
]
],
{
"timeout": "long"
}
]
],
"vh-zero-support.html": [ "vh-zero-support.html": [
"1c1bcd1761a2ffccfc1a92a10ddf860712606fa1", "1c1bcd1761a2ffccfc1a92a10ddf860712606fa1",
[ [
@ -294198,21 +294213,6 @@
{} {}
] ]
], ],
"vh_not_refreshing_on_chrome.html": [
"e5606a0cb751554602c2d108840300973e92c734",
[
null,
[
[
"/css/css-values/reference/vh_not_refreshing_on_chrome-ref.html",
"=="
]
],
{
"timeout": "long"
}
]
],
"viewport-unit-011.html": [ "viewport-unit-011.html": [
"055f3d1fd2d716a68d857738493815c8772bef06", "055f3d1fd2d716a68d857738493815c8772bef06",
[ [
@ -440473,12 +440473,12 @@
"cfa9e8d02d48436ee1c311da7c7bd65b0f4291cf", "cfa9e8d02d48436ee1c311da7c7bd65b0f4291cf",
[] []
], ],
"vh_not_refreshing_on_chrome-ref.html": [ "vh-update-and-transition-in-subframe-iframe-ref.html": [
"279d1c69b9f7fbe60edb55b7e8a5d507eda24936", "bc8216835883bc0314d76cb10f287f5202e3dc03",
[] []
], ],
"vh_not_refreshing_on_chrome_iframe-ref.html": [ "vh-update-and-transition-in-subframe-ref.html": [
"5e35f6261e266be2981ae79038e464ac354cc8ef", "ab068dfaf87773ebfaefbb3ab9d48f251760bc60",
[] []
], ],
"viewport-unit-011-ref.html": [ "viewport-unit-011-ref.html": [
@ -440740,10 +440740,6 @@
"vh-support-transform-translate-iframe.html": [ "vh-support-transform-translate-iframe.html": [
"f0b1b54c12d35da74bf19849612574a20339fe6a", "f0b1b54c12d35da74bf19849612574a20339fe6a",
[] []
],
"vh_not_refreshing_on_chrome_iframe.html": [
"8d8e9b49d4aa3d9804a176852288e32ccaaa47d8",
[]
] ]
}, },
"urls": { "urls": {
@ -440762,6 +440758,10 @@
] ]
} }
}, },
"vh-update-and-transition-in-subframe-iframe.html": [
"61831f42f7d6ca1efe2e9534366f4b91da2ca155",
[]
],
"viewport-units-001-print-ref.html": [ "viewport-units-001-print-ref.html": [
"bc914522c7fcf556c69ba56d2d0ba792d7e92b89", "bc914522c7fcf556c69ba56d2d0ba792d7e92b89",
[] []
@ -474935,7 +474935,7 @@
] ]
}, },
"lint.ignore": [ "lint.ignore": [
"00fb7fd020192843abd6ba46baabd86ca0ce129f", "4bf325500491b21f1556a365e14ebf1c96c9a516",
[] []
], ],
"loading": { "loading": {

2
tests/wpt/meta/css/css-values/vh_not_refreshing_on_chrome.html.ini vendored
View file

@ -1,2 +0,0 @@
[vh_not_refreshing_on_chrome.html]
expected: TIMEOUT

74
tests/wpt/tests/css/css-values/reference/vh_not_refreshing_on_chrome_iframe-ref.html → tests/wpt/tests/css/css-values/reference/vh-update-and-transition-in-subframe-iframe-ref.html vendored
View file

@ -2,23 +2,39 @@
<html> <html>
<!-- Submitted from TestTWF Paris --> <!-- Submitted from TestTWF Paris -->
<head> <head>
<title>CSS Reference File</title>
<title>CSS Reference File</title>
<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com"> <link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
<style type="text/css"> <style type="text/css">
* {
* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } margin: 0;
padding: 0;
#testBoxWithVhOnly { background: #F00; width: 60px; float: left; } }
#testBoxNotGrownHorizontallyByJS { background: #F0F; height: 60px; float: left; } p {
#testBoxWithTransition { background: #FF0; width: 40px; height: 40px; float: left; } clear: both;
#referenceBoxGrownHorizontallyByJS { background: #0F0; height: 40px; float: left; } margin: 10px 0;
}
p { clear: both; margin: 10px 0; } #testBoxWithVhOnly {
background: #F00;
width: 60px;
float: left;
}
#testBoxNotGrownHorizontallyByJS {
background: #F0F;
height: 60px;
float: left;
}
#testBoxWithTransition {
background: #FF0;
width: 40px;
height: 40px;
float: left;
}
#referenceBoxGrownHorizontallyByJS {
background: #0F0;
height: 40px;
float: left;
}
</style> </style>
</head> </head>
<body> <body>
@ -33,30 +49,13 @@
<script type="text/javascript"> <script type="text/javascript">
'use strict'; 'use strict';
// In case this file was opened by mistake, redirects to proper test
if (window.top.location.href === document.location.href) {
window.top.location.href = "vh_not_refreshing_on_chrome-ref.html";
}
function setDimension(id, dimension, value) {
var element = document.getElementById(id);
element.style[dimension] = value + "px";
}
function animate() { function animate() {
var viewportHeight = document.documentElement.clientHeight; var viewportHeight = document.documentElement.clientHeight;
var referenceDimension = Math.round(20 * viewportHeight / 100);
var sizeH = 20; let setDimension = (id, dimension, value) => {
document.getElementById(id).style[dimension] = value + "px";
var referenceDimension = Math.round(sizeH * viewportHeight / 100); }
setDimension('testBoxWithVhOnly', 'height', referenceDimension); setDimension('testBoxWithVhOnly', 'height', referenceDimension);
setDimension('testBoxNotGrownHorizontallyByJS', 'width', referenceDimension); setDimension('testBoxNotGrownHorizontallyByJS', 'width', referenceDimension);
setDimension('testBoxWithTransition', 'width', referenceDimension); setDimension('testBoxWithTransition', 'width', referenceDimension);
@ -67,12 +66,11 @@
if (referenceDimension < 60) { if (referenceDimension < 60) {
setTimeout(animate, 20); setTimeout(animate, 20);
} else { } else {
parent.postMessage('testBoxWithVhOnly', '*'); parent.postMessage('testEnded', '*');
} }
} }
setTimeout(animate, 20); setTimeout(animate, 20);
parent.postMessage('frameLoaded', '*');
</script> </script>
</body> </body>

59
tests/wpt/tests/css/css-values/reference/vh-update-and-transition-in-subframe-ref.html vendored Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<!-- Submitted from TestTWF Paris -->
<html class="reftest-wait">
<head>
<title>CSS Reference File</title>
<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
<script src="/common/reftest-wait.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#frameTest {
width: 600px;
height: 200px;
border: 1px solid #000;
}
</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.
// - testEnded: The iframe has finished the final resize and the reference is
// ready for screenshot.
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 == "testEnded") {
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-ref.html" frameborder="0"></iframe>
</body>
</html>

65
tests/wpt/tests/css/css-values/reference/vh_not_refreshing_on_chrome-ref.html vendored
View file

@ -1,65 +0,0 @@
<!DOCTYPE html>
<html class="reftest-wait">
<!-- Submitted from TestTWF Paris -->
<head>
<title>CSS Reference File</title>
<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
<script src="/common/reftest-wait.js"></script>
<style type="text/css">
* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
#frameTest { width: 600px; height: 200px; border: 1px solid #000; }
</style>
<script type="text/javascript">
'use strict';
// We must not capture the screen until the frameTest
// and testBoxWithVhOnly elements have finished changing height.
var elementsPending = 2;
function receiveMessage() {
if (--elementsPending === 0) {
takeScreenshot();
}
}
window.addEventListener('message', receiveMessage, false);
var height = 200;
function resizeReference() {
var frameTest = document.getElementById('frameTest');
// let's resize the iframe vertically only, showing that the vh sizes is not updated.
if (height < 300) {
//frameTest.style.width = height++ + "px";
frameTest.style.height = ++height + "px";
setTimeout(resizeReference, 10);
} else {
// uncomment the next line to see how a width resize triggers a layout recalculation
//frameTest.style.width = (parseInt(window.getComputedStyle(document.getElementById('frameTest'))['width'], 10) + 1) + "px";
window.postMessage('frameTest', '*');
}
}
setTimeout(resizeReference, 10);
</script>
</head>
<body>
<iframe id="frameTest" src="vh_not_refreshing_on_chrome_iframe-ref.html" frameborder="0"></iframe>
</body>
</html>

93
tests/wpt/tests/css/css-values/support/vh_not_refreshing_on_chrome_iframe.html vendored
View file

@ -1,93 +0,0 @@
<!DOCTYPE html>
<html>
<!-- Submitted from TestTWF Paris -->
<head>
<title>CSS Values and Units Test: vh-based dimension doesn't change when the element other dimension doesn't change.</title>
<style type="text/css">
* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
/* the first test box has its vertical dimension is set to some vh units */
#testBoxWithVhOnly { background: #F00; width: 60px; height: 20vh; float: left; }
/* the second test box, with fixed height */
#testBoxNotGrownHorizontallyByJS { background: #F0F; width: 20vh; height: 60px; float: left; }
/* third box, changed by using CSS transition */
#testBoxWithTransition { background: #FF0; width: 20vh; height: 40px; float: left;
transition-property: width, height;
transition-duration: 0.3s;
transition-delay: 0;
}
/* the reference box, growing in both directions (height by js, width by vh unit */
#referenceBoxGrownHorizontallyByJS { background: #0F0; width: 20vh; height: 40px; float: left; }
p { clear: both; margin: 10px 0; }
</style>
</head>
<body>
<p>
All boxes should end up the same size. The green box is the reference one.
</p>
<div id="testBoxWithVhOnly"></div>
<div id="testBoxNotGrownHorizontallyByJS"></div>
<div id="testBoxWithTransition"></div>
<div id="referenceBoxGrownHorizontallyByJS"></div>
<script type="text/javascript">
'use strict';
// In case this file was opened by mistake, redirects to proper test
if (window.top.location.href === document.location.href) {
window.top.location.href = "vh_not_refreshing_on_chrome.html";
}
function setDimension(id, dimension, value) {
var element = document.getElementById(id);
element.style[dimension] = value + "px";
}
function animate() {
var viewportHeight = document.documentElement.clientHeight;
var sizeH = 20;
var referenceDimension = Math.round(sizeH * viewportHeight / 100);
setDimension('referenceBoxGrownHorizontallyByJS', 'height', referenceDimension);
if (referenceDimension < 60) {
setTimeout(animate, 20);
} else {
parent.postMessage('referenceBoxGrownHorizontallyByJS', '*');
}
}
setTimeout(animate, 20);
addEventListener('transitionend', event => {
if (event.propertyName == 'width') {
// Stop any further transitons.
testBoxWithTransition.style.transitionProperty = 'none';
parent.postMessage('testBoxWithTransition', '*');
}
}, false);
var transitionedTestBoxStyle = document.getElementById('testBoxWithTransition').style;
transitionedTestBoxStyle.height = "60px";
</script>
</body>
</html>

91
tests/wpt/tests/css/css-values/vh-update-and-transition-in-subframe-iframe.html vendored Normal file
View file

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html>
<!-- Submitted from TestTWF Paris -->
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
p {
clear: both;
margin: 10px 0;
}
/* The first test box has its vertical dimension is set to
some `vh` units. */
#testBoxWithVhOnly {
background: #F00;
width: 60px; height: 20vh;
float: left;
}
/* The second test box, with fixed height. */
#testBoxNotGrownHorizontallyByJS {
background: #F0F;
width: 20vh;
height: 60px;
float: left;
}
/* The third box, changed by using CSS transition. */
#testBoxWithTransition {
background: #FF0;
width: 20vh;
height: 40px;
float: left;
transition-property: width, height;
transition-duration: 0.3s;
transition-delay: 0;
}
/* The reference box, growing in both directions (height
by script, width by `vh` units. */
#referenceBoxGrownHorizontallyByJS {
background: #0F0;
width: 20vh;
height: 40px;
float: left;
}
</style>
</head>
<body>
<p>
All boxes should end up the same size. The green box is the reference one.
</p>
<div id="testBoxWithVhOnly"></div>
<div id="testBoxNotGrownHorizontallyByJS"></div>
<div id="testBoxWithTransition"></div>
<div id="referenceBoxGrownHorizontallyByJS"></div>
<script type="text/javascript">
'use strict';
function animate() {
var viewportHeight = document.documentElement.clientHeight;
var referenceDimension = Math.round(20 * viewportHeight / 100);
document.getElementById('referenceBoxGrownHorizontallyByJS')
.style['height'] = referenceDimension + "px";
if (referenceDimension < 60) {
setTimeout(animate, 20);
}
}
addEventListener('transitionend', event => {
if (event.propertyName == 'width') {
// Stop any further transitions.
testBoxWithTransition.style.transitionProperty = 'none';
parent.postMessage('transitionInIFrameEnded', '*');
}
}, false);
document.getElementById('testBoxWithTransition').style.height = "60px";
setTimeout(animate, 20);
parent.postMessage('frameLoaded', '*');
</script>
</body>
</html>

64
tests/wpt/tests/css/css-values/vh-update-and-transition-in-subframe.html vendored Normal file
View file

@ -0,0 +1,64 @@
<!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>

70
tests/wpt/tests/css/css-values/vh_not_refreshing_on_chrome.html vendored
View file

@ -1,70 +0,0 @@
<!-- Submitted from TestTWF Paris -->
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<title>CSS Values and Units Test: vh-based dimension doesn't change when the element's other dimension doesn't change.</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_not_refreshing_on_chrome-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.">
<!-- This test exhibits a bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8 -->
<script src="/common/reftest-wait.js"></script>
<style type="text/css">
* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
#frameTest { width: 600px; height: 200px; border: 1px solid #000; }
</style>
<script type="text/javascript">
'use strict';
// We must not capture the screen until the frameTest, referenceBoxGrownHorizontallyByJS
// and testBoxWithTransition elements have finished changing height.
var elementsPending = 3;
function receiveMessage() {
if (--elementsPending === 0) {
takeScreenshot();
}
}
window.addEventListener('message', receiveMessage, false);
var height = 200;
function resizeReference() {
var frameTest = document.getElementById('frameTest');
// let's resize the iframe vertically only, showing that the vh sizes is not updated.
if (height < 300) {
//frameTest.style.width = height++ + "px";
frameTest.style.height = ++height + "px";
setTimeout(resizeReference, 10);
} else {
// uncomment the next line to see how a width resize triggers a layout recalculation
//frameTest.style.width = (parseInt(window.getComputedStyle(document.getElementById('frameTest'))['width'], 10) + 1) + "px";
window.postMessage('frameTest', '*');
}
}
setTimeout(resizeReference, 10);
</script>
</head>
<body>
<iframe id="frameTest" src="support/vh_not_refreshing_on_chrome_iframe.html" frameborder="0"></iframe>
</body>
</html>

8
tests/wpt/tests/lint.ignore vendored
View file

@ -480,10 +480,10 @@ SET TIMEOUT: css/css-transitions/events-007.html
SET TIMEOUT: css/css-transitions/support/generalParallelTest.js SET TIMEOUT: css/css-transitions/support/generalParallelTest.js
SET TIMEOUT: css/css-transitions/support/runParallelAsyncHarness.js SET TIMEOUT: css/css-transitions/support/runParallelAsyncHarness.js
SET TIMEOUT: css/css-transitions/transitioncancel-001.html SET TIMEOUT: css/css-transitions/transitioncancel-001.html
SET TIMEOUT: css/css-values/reference/vh_not_refreshing_on_chrome-ref.html SET TIMEOUT: css/css-values/reference/vh-update-and-transition-in-subframe-ref.html
SET TIMEOUT: css/css-values/reference/vh_not_refreshing_on_chrome_iframe-ref.html SET TIMEOUT: css/css-values/reference/vh-update-and-transition-in-subframe-iframe-ref.html
SET TIMEOUT: css/css-values/vh_not_refreshing_on_chrome.html SET TIMEOUT: css/css-values/vh-update-and-transition-in-subframe.html
SET TIMEOUT: css/css-values/support/vh_not_refreshing_on_chrome_iframe.html SET TIMEOUT: css/css-values/vh-update-and-transition-in-subframe-iframe.html
SET TIMEOUT: css/css-writing-modes/orthogonal-parent-shrink-to-fit-001.html SET TIMEOUT: css/css-writing-modes/orthogonal-parent-shrink-to-fit-001.html
SET TIMEOUT: css/css-writing-modes/orthogonal-parent-shrink-to-fit-001a.html SET TIMEOUT: css/css-writing-modes/orthogonal-parent-shrink-to-fit-001a.html
SET TIMEOUT: css/css-writing-modes/orthogonal-parent-shrink-to-fit-001b.html SET TIMEOUT: css/css-writing-modes/orthogonal-parent-shrink-to-fit-001b.html