gecko-dev/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-012.html
jugglinmike a65a3ead21 Bug 1591656 [wpt PR 19921] - [css-shapes] Refactor tests, a=testonly
Automatic update from web-platform-tests
[css-shapes] Refactor tests (#19921)

testharness.js was recently extended with an API to explicitly opt-in to
the "single page test" feature [1]. As per WPT RFC 28 [2], tests which
do not use this API and which do not declare any subtests will soon be
reported as a harness error.

Update some tests which previously opted in implicitly to use the new
API. Update others to instead declare a single subtest (so that they are
no longer single-page tests).

[1] https://github.com/web-platform-tests/wpt/pull/19449
[2] https://github.com/web-platform-tests/rfcs/blob/master/rfcs/single_test.md
--

wpt-commits: e6c03912b75fe8b8aefeacc8814ae6e8a0c78679
wpt-pr: 19921

Differential Revision: https://phabricator.services.mozilla.com/D53506
2019-11-20 11:18:54 +00:00

61 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Shape from image - shape-image-threshold - 0.9</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"/>
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"/>
<meta name="flags" content="ahem dom"/>
<meta name="assert" content="This test verifies content flows around a shape that is
defined in the image's alpha channel and adjusted by the
image-threshold" />
<!-- This test is derived from Example 7 in this version of the spec:
http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ -->
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style type="text/css">
.container {
width: 400px;
font-family: Ahem;
font-size: 20px;
line-height: 2em;
}
#test {
color: green;
}
#test-image {
float: left;
shape-outside: url("support/circle-shadow.png");
shape-image-threshold: 0.9;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/spec-example-utils.js"></script>
<script>
setup({ single_test: true });
function checkFloats() {
approxShapeTest('test', 'line-', 2, [181, 199, 201, 199, 181, 0]);
done();
}
</script>
</head>
<body onload="checkFloats();">
<p>
The test passes if the short green horizontal bars are the right of the circle, all
intersect the shadow, none intersect the circle and the long green bar is beneath the
circle. There should be no red.
</p>
<div id="test" class="container">
<img id="test-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">XXXXXXXXXXXXXXX</span>
</div>
<div id="log"></div>
</body>
</html>