mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-12 14:20:14 +02:00
3c23b481ba
These tests use setTimeout to wait for shape-outside layout to hopefully complete. This is non-deterministic race condition and leads to intermittent failures. This change makes those tests instead trigger on the onload event and removes the setTimeout infrastructure and replaces it with an assert. Without this change, these tests have no guarantee about whether the rendering will be complete by the time the test's JS fires. MozReview-Commit-ID: CHrXUC3yCCT --HG-- extra : rebase_source : b5642bf24abcbfacb7b94e95d4ca9c8d6486b98b
56 lines
2.1 KiB
HTML
56 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>CSS Test: Shape from image - url(), alpha channel, opacity 0</title>
|
|
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
|
|
<link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/>
|
|
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
|
|
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
|
|
<meta name="flags" content="ahem dom"/>
|
|
<meta name="assert" content="This test verifies that the content flows around the
|
|
shape defined in the images alpha channel that is completely
|
|
transparent."/>
|
|
<!-- This test is derived from Example 7 in this version of the spec:
|
|
http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ -->
|
|
<style type="text/css">
|
|
.container {
|
|
font-family: Ahem;
|
|
font-size: 20px;
|
|
line-height: 2em;
|
|
}
|
|
#test {
|
|
width: 400px;
|
|
color: green;
|
|
}
|
|
#image {
|
|
float: left;
|
|
shape-outside: url("support/circle-no-shadow.png");
|
|
}
|
|
</style>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="support/spec-example-utils.js"></script>
|
|
<script>
|
|
function checkFloats() {
|
|
approxShapeTest('test', 'line-', 2, [182, 199, 201, 199, 182, 0]);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="checkFloats();">
|
|
<p>
|
|
The test passes if the short green horizontal bars are the right of the circle,
|
|
the long green bar is beneath the circle, and no bars intersect the circle. There
|
|
should be no red.
|
|
</p>
|
|
<div id="test" class="container">
|
|
<img id="image" src="support/circle-no-shadow.png"/>
|
|
<span id="line-0">XXXXXX</span>
|
|
<span id="line-1">XXXXXX</span>
|
|
<span id="line-2">XXXXXX</span>
|
|
<span id="line-3">XXXXXX</span>
|
|
<span id="line-4">XXXXXX</span>
|
|
<span id="line-5">XXXXXXXXXXXXXXX</span>
|
|
</div>
|
|
<div id="log"></div>
|
|
</body>
|
|
</html>
|