mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 21:58:41 +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
67 lines
2.5 KiB
HTML
67 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>CSS Test: Shape from image - alpha channel, opacity > 0 + shape-margin</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 and the shape-margin."/>
|
|
<!-- This test is derived from Example 11 in this version of the spec:
|
|
http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ -->
|
|
<style type="text/css">
|
|
#test {
|
|
position: relative;
|
|
color: green;
|
|
width: 400px;
|
|
font-family: Ahem;
|
|
font-size: 20px;
|
|
line-height: 2em;
|
|
}
|
|
#image {
|
|
float: left;
|
|
shape-outside: url("support/circle-shadow.png");
|
|
shape-margin: 20px;
|
|
}
|
|
#margin-circle {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 300px;
|
|
height: 300px;
|
|
background-color: black;
|
|
clip-path: ellipse(141px 127px at 115px 100px);
|
|
z-index: -1;
|
|
}
|
|
</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, [242, 256, 258, 256, 242, 204, 0]);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="checkFloats();">
|
|
<p>
|
|
The test passes if the short green horizontal bars are the right of the black edge
|
|
of circle, the long green bar is beneath it, and no bars intersect the black.
|
|
There should be no red.
|
|
</p>
|
|
<div id="test">
|
|
<img id="image" src="support/circle-shadow.png"/>
|
|
<div id="margin-circle"></div>
|
|
<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>
|
|
<span id="line-6">XXXXXXXXXXXXXXX</span>
|
|
</div>
|
|
<div id="log"></div>
|
|
</body>
|
|
</html>
|