forked from mirrors/gecko-dev
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
55 lines
2 KiB
HTML
55 lines
2 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 has some
|
|
opacity."/>
|
|
<!-- 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 {
|
|
width: 400px;
|
|
font-family: Ahem;
|
|
font-size: 20px;
|
|
line-height: 2em;
|
|
}
|
|
#test {
|
|
color: green;
|
|
}
|
|
#image {
|
|
float: left;
|
|
shape-outside: url("support/circle-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, [218, 236, 238, 236, 218, 160]);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="checkFloats();">
|
|
<p>
|
|
The test passes if the green horizontal bars are to the right of the circle,
|
|
and no bars intersect the circle's shadow. There should be no red.
|
|
</p>
|
|
<div id="test" class="container">
|
|
<img id="image" src="support/circle-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">XXXXXX</span>
|
|
</div>
|
|
<div id="log"></div>
|
|
</body>
|
|
</html>
|