gecko-dev/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-017.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

59 lines
2.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Shape from box value - content-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 content 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/ -->
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style type="text/css">
#test {
color: green;
width: 400px;
font-family: Ahem;
font-size: 20px;
line-height: 2em;
}
#box {
float: left;
width: 200px;
height: 200px;
background-color: lightblue;
border-radius: 90px;
shape-outside: content-box;
}
</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, [185, 199, 200, 199, 185, 0]);
done();
}
</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>