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
57 lines
2.1 KiB
HTML
57 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>CSS Test: Shape from box value - border-box</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-box-values"/>
|
|
<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 content wraps around a shape
|
|
defined by its border box."/>
|
|
<!-- This test is derived from Examples 8 and 9 in this version of the spec:
|
|
http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ -->
|
|
<style type="text/css">
|
|
#test {
|
|
width: 400px;
|
|
color: green;
|
|
font-family: Ahem;
|
|
font-size: 20px;
|
|
line-height: 2em;
|
|
}
|
|
#box {
|
|
float: left;
|
|
width: 120px;
|
|
height: 120px;
|
|
background-color: lightblue;
|
|
border: 40px solid lightblue;
|
|
border-radius: 90px;
|
|
shape-outside: border-box;
|
|
}
|
|
</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, [185, 199, 200, 199, 185, 0]);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="checkFloats();">
|
|
<p>
|
|
The test passes if the short green horizontal bars are the right of the shape,
|
|
the long green bar is beneath it, and no bars intersect it. There should be no red.
|
|
</p>
|
|
<div id="test">
|
|
<div id="box"></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">XXXXXXXXXXXXXXX</span>
|
|
</div>
|
|
<div id="log"></div>
|
|
</body>
|
|
</html>
|