mirror of
https://github.com/servo/servo.git
synced 2025-08-28 08:38:20 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
446
tests/wpt/web-platform-tests/css/css-shapes/test-plan/index.html
Normal file
446
tests/wpt/web-platform-tests/css/css-shapes/test-plan/index.html
Normal file
|
|
@ -0,0 +1,446 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Shapes Level 1 Test Plan</title>
|
||||
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
|
||||
<!--
|
||||
=== NOTA BENE ===
|
||||
For the three scripts below, if your spec resides on dev.w3 you can check them
|
||||
out in the same tree and use relative links so that they'll work offline,
|
||||
-->
|
||||
<script src='http://www.w3.org/Tools/respec/respec-w3c-common' class='remove' async></script>
|
||||
<script class='remove'>
|
||||
var respecConfig = {
|
||||
specStatus: "unofficial",
|
||||
shortName: "css-shapes-1-test-plan",
|
||||
editors: [
|
||||
{
|
||||
name: "Rebecca Hauck", mailto: "rhauck@adobe.com",
|
||||
company: "Adobe Systems, Inc.", companyURL: "http://www.adobe.com/"
|
||||
},
|
||||
],
|
||||
testSuiteURI: "http://test.csswg.org/suites/css3-shapes/nightly-unstable/",
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
a.bibref,
|
||||
#references dt {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id='abstract'>
|
||||
<p>
|
||||
This document is intended to be used as a guideline for the testing
|
||||
activities related to the CSS Shapes Level 1 spec [[!css-shapes-1]]. Its main
|
||||
goal is to provide an overview of the general testing areas, possible
|
||||
caveats and testing aspects not immediately apparent from the spec.
|
||||
Also, it provides a means of tracking the progress of the CSS Shapes
|
||||
spec testing.
|
||||
</p>
|
||||
<p>
|
||||
This document is not meant to replace the spec in determining the
|
||||
normative and non-normative assertions to be tested, but rather
|
||||
complement it.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Goals</h2>
|
||||
<p>
|
||||
To ensure a comprehensive test suite with useful, high quality tests, a
|
||||
number of goals are proposed. They range from process goals (how to
|
||||
conduct testing) to implementation goals (how to write good tests).
|
||||
</p>
|
||||
<section>
|
||||
<h3>Enabling easy test contribution</h3>
|
||||
<p>
|
||||
An important vector in successfully testing CSS Shapes is to
|
||||
enable easy test contributions, both from W3C partners and from
|
||||
non-W3C members that wish to contribute. This is achieved by clearly
|
||||
marking and explaining the areas that need testing, linking to existing
|
||||
tests, and general testing progress.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Providing guidance on testing</h3>
|
||||
<p>
|
||||
In order to increase the quality of the test contributions, this
|
||||
document offers a set of guidelines for conducting testing (see
|
||||
<a href="#approach" class="sectionRef"></a>) and a testing progress
|
||||
tracker to increase the surface coverage of tests (see
|
||||
<a href="#test-progress-tracking" class="sectionRef"></a>).
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Creating automation-friendly tests</h3>
|
||||
<p>
|
||||
In terms of actual tests produced for the CSS Shapes specification, the main goal
|
||||
is to ensure that most tests are automatable (i.e. they're either
|
||||
reftests or use <code>testharness.js</code>). Even where manual tests
|
||||
are absolutely necessary they should be written so that they can be
|
||||
easily automated – as there are ongoing efforts to make
|
||||
WebDriver [[webdriver]] automated tests a first class citizen in W3C
|
||||
testing. This means that even if a manual test requires user
|
||||
interaction, the validation or PASS/FAIL conditions should still be
|
||||
clear enough as to allow automatic validation if said interaction is
|
||||
later automated.
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Approach</h2>
|
||||
<p>
|
||||
Since the CSS Shapes Level 1 spec introduces only three new CSS properties,
|
||||
the approach is to deep dive into every aspect of the spec as much as possible.
|
||||
|
||||
Tests will be created for the testing areas listed in <a href="#testing-areas" class="sectionRef"></a>.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Testing areas</h2>
|
||||
<section>
|
||||
<h3>Explicit testing areas</h3>
|
||||
<p>
|
||||
These are testing areas normatively defined by the spec. They cover
|
||||
things explicitly or implicitly defined in the CSS Shapes spec.
|
||||
Please note that while detailed, this list is not necessarily
|
||||
exhaustive and normative behaviors may not be contained in it.
|
||||
When in doubt, consult the CSS Shapes spec or ask a question on the
|
||||
<a href="http://lists.w3.org/Archives/Public/www-style/">mailing
|
||||
list</a>.
|
||||
</p>
|
||||
<p>
|
||||
<section>
|
||||
<h4>Proper parsing of the CSS properties and values according to the spec</h4>
|
||||
<p class=note>
|
||||
Note: For all of the tests below, where length parameters are tested,
|
||||
the supported <a class="production css-code" data-link-type=type href=http://www.w3.org/TR/css3-values/#lengths title="<length>"><length></a>
|
||||
units defined in the CSS Values & Units [[!CSS3VAL]] specification, but not all permutations will not be
|
||||
tested. Instead, a sampling of these units will be used across the parsing and layout tests.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>shape-outside</code>
|
||||
<ul>
|
||||
<li>none</li>
|
||||
<li>
|
||||
<code><basic-shape></code>
|
||||
<ul>
|
||||
<li>
|
||||
<code>inset()</code>
|
||||
<ul>
|
||||
<li>0-4 arguments</li>
|
||||
<li>length units</li>
|
||||
<li>percentages</li>
|
||||
<li>positive/negative lengths</li>
|
||||
<li>decimal/non-decimal lengths</li>
|
||||
<li>calc() lengths</li>
|
||||
<li>no unit or %</li>
|
||||
<li>commas / no commas</li>
|
||||
<li>invalid arg values</li>
|
||||
<li><code>round</code> keyword
|
||||
<ul>
|
||||
<li><code><border-radius></code>
|
||||
<ul>
|
||||
<li>0-8 arguments</li>
|
||||
<li>position of '/'</li>
|
||||
<li>length units</li>
|
||||
<li>percentages</li>
|
||||
<li>positive/negative lengths</li>
|
||||
<li>decimal/non-decimal lengths</li>
|
||||
<li>calc() lengths</li>
|
||||
<li>no unit or %</li>
|
||||
<li>commas / no commas</li>
|
||||
<li>invalid values</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>circle()</code>
|
||||
<ul>
|
||||
<li><code><shape-radius></code>
|
||||
<ul>
|
||||
<li>0-1 args (valid), 2 args (invalid)</li>
|
||||
<li>length units</li>
|
||||
<li>percentages</li>
|
||||
<li>positive/negative lengths</li>
|
||||
<li>decimal/non-decimal lengths</li>
|
||||
<li>calc() lengths</li>
|
||||
<li>no unit or %</li>
|
||||
<li>commas / no commas</li>
|
||||
<li>invalid arg values</li>
|
||||
<li><code>closest-side, farthest-side</code> keywords</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>at</code> keyword
|
||||
<ul>
|
||||
<li><code><position></code>
|
||||
<ul>
|
||||
<li>0-4 arguments</li>
|
||||
<li>length units</li>
|
||||
<li>percentages</li>
|
||||
<li>positive/negative lengths</li>
|
||||
<li>decimal/non-decimal lengths</li>
|
||||
<li>calc() lengths</li>
|
||||
<li>no unit or %</li>
|
||||
<li>commas / no commas</li>
|
||||
<li>invalid values</li>
|
||||
<li><code>top, left, bottom, right</code> keywords</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>ellipse()</code>
|
||||
<ul>
|
||||
<li><code><shape-radius></code>
|
||||
<ul>
|
||||
<li>0-2 args (valid), 3 args (invalid)</li>
|
||||
<li><i>Plus all of the same shape-radius tests listed above for circle()</i></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><i>Plus all of the <code>at <position></code> tests listed above for circle()</i></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>polygon()</code>
|
||||
<li><code><shape-arg></code>'s
|
||||
<ul>
|
||||
<li>1-6 vertices (valid), 0 vertices (invalid)</li>
|
||||
<li>length units</li>
|
||||
<li>percentages</li>
|
||||
<li>positive/negative lengths</li>
|
||||
<li>decimal/non-decimal lengths</li>
|
||||
<li>calc() lengths</li>
|
||||
<li>no unit or %</li>
|
||||
<li>commas / no commas</li>
|
||||
<li>invalid arg values</li>
|
||||
</ul>
|
||||
<li><code><fill-rule></code>
|
||||
<ul>
|
||||
<li><code>not specified (default: nonzero)</code></li>
|
||||
<li><code>nonzero</code></li>
|
||||
<li><code>evenodd</code></li>
|
||||
<li>invalid values</li>
|
||||
</ul>
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code><box></code>
|
||||
<ul>
|
||||
<li><code>margin-box</code></li>
|
||||
<li><code>border-box</code></li>
|
||||
<li><code>padding-box</code></li>
|
||||
<li><code>content-box</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code><basic-shape> + <box></code>
|
||||
<ul>
|
||||
<li>A sampling of the tests above combined together to test basic-shape with shape-box</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code><image></code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>shape-margin</code>
|
||||
<ul>
|
||||
<li>length units</li>
|
||||
<li>percentages</li>
|
||||
<li>positive/negative lengths</li>
|
||||
<li>decimal/non-decimal lengths</li>
|
||||
<li>calc() lengths</li>
|
||||
<li>no unit or %</li>
|
||||
<li>invalid values</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>shape-image-threshold</code>
|
||||
<ul>
|
||||
<li>decimal - 0-5 places</li>
|
||||
<li>no decimal</li>
|
||||
<li>percentage (invalid)</li>
|
||||
<li>positive/negative values</li>
|
||||
<li>decimal/non-decimal lengths</li>
|
||||
<li>calc() lengths</li>
|
||||
<li>+ / - signs</li>
|
||||
<li>invalid values</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Proper serialization of the CSS properties and values according to the spec</h4>
|
||||
<ul>
|
||||
<li><code><position></code> values in <code>circle</code> and <code>ellipse</code> serialize to 2- and 4-value forms
|
||||
<ul>
|
||||
<li><code>top, left, bottom, right</code> serialize to percentages</li>
|
||||
<li>omitting radii omits radii from serialization</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>inset</code> serialized shape-args omit args when possible</li>
|
||||
<li><code><round></code> values in <code>inset</code> serialize to as few as possible</li>
|
||||
<li>unspecified <code><fill-rule></code> serializes <code>nonzero</code></li>
|
||||
<li>0% is preferred over zero length</li>
|
||||
<li>calc() is avoided</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Proper computed values of the CSS properties and values according to the spec</h4>
|
||||
<ul>
|
||||
<li>lengths compute to px</li>
|
||||
<li>percentages keep %</li>
|
||||
<li>calc() preserved</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Proper rendering & layout of text around shapes according to the spec</h4>
|
||||
<ul>
|
||||
<li>Basic Shapes
|
||||
<ul>
|
||||
<li>inset
|
||||
<ul>
|
||||
<li>square corners</li>
|
||||
<li>rounded corners</li>
|
||||
<li>rounded corners to make circles & ellipses</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>circle, ellipse
|
||||
<ul>
|
||||
<li>explicit/implicit radii</li>
|
||||
<li>explicit/implicit position</li>
|
||||
<li>closest-side / farthest-side</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>polygon
|
||||
<ul>
|
||||
<li>relative/absolute units</li>
|
||||
<li>fill-rule: evenodd/nonzero</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>float left / right</li>
|
||||
<li>shape-margin</li>
|
||||
<li>shape-box</code>
|
||||
<ul>
|
||||
<li>unspecified</li>
|
||||
<li>specified:
|
||||
<ul>
|
||||
<li>margin-box</li>
|
||||
<li>border-box</li>
|
||||
<li>padding-box</li>
|
||||
<li>content-box</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Shapes from Box Values
|
||||
<ul>
|
||||
<li>margin-box, border-box, padding-box, content-box</li>
|
||||
<li>all, top, left, bottom, right, top-left, top-bottom, top-right, left-right, left-bottom, right-bottom</li>
|
||||
<li>float left / right</li>
|
||||
<li>border-radius</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Shapes from Images
|
||||
<ul>
|
||||
<li>url
|
||||
<ul>
|
||||
<li>png, svg, gif, jpeg</li>
|
||||
<li>transparency/no transparency</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>image-list
|
||||
<ul>
|
||||
<li>png, svg, gif, jpeg</li>
|
||||
<li>transparency/no transparency</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>gradient
|
||||
<ul>
|
||||
<li>linear</li>
|
||||
<li>radial</li>
|
||||
<li>repeating</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>float left / right</li>
|
||||
<li>shape-margin</li>
|
||||
<li>shape-image-threshold</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Float Tests
|
||||
<ul>
|
||||
<li>Float stacking</li>
|
||||
<li>Line boxes affected by both float right and float left shapes at the same time</li>
|
||||
<li>Empty float areas</li>
|
||||
<li>Shapes that extend past the margin box edge</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Implicit testing areas</h3>
|
||||
<p>
|
||||
These are testing areas either normatively defined in other specs
|
||||
that are explicitly referred to in the CSS Shapes spec. Additionally, the
|
||||
CSS Shapes spec is explicitly referred to by other specs. Please note that
|
||||
while detailed, this list is not necessarily exhaustive and normative behaviors
|
||||
may not be contained in it. When in doubt, consult the CSS Regions spec or ask
|
||||
a question on the <a href="http://lists.w3.org/Archives/Public/www-style/">mailing list</a>.
|
||||
</p>
|
||||
<p>
|
||||
Below is the list of implicit testing areas:
|
||||
<ul>
|
||||
<li>CSS 2.1 [[!CSS21]]</li>
|
||||
<li>CSS Box Model [[!CSS3BOX]]</li>
|
||||
<li>CSS Values & Units [[!CSS3VAL]]</li>
|
||||
<li>CSS Backgrounds & Borders [[!CSS3BG]]</li>
|
||||
<li>HTML5 [[!HTML5]]</li>
|
||||
<li>CSS Masking [[CSS-MASKING]]</li>
|
||||
<li>CSS Exclusions [[CSS-EXCLUSIONS]]</li>
|
||||
</ul>
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Interactions with other CSS features & specifications</h3>
|
||||
<p>When the CSS Shapes spec has a full suite of tests covering the behaviors defined in the spec,
|
||||
additional tests will be needed to assure that the implementation works properly with other
|
||||
CSS features defined in other specifications.
|
||||
</p>
|
||||
<p>Below is a list of features that should work properly with CSS Shapes:</p>
|
||||
<ul>
|
||||
<li>CSS Transforms</li>
|
||||
<li>CSS Transitions</li>
|
||||
<li>CSS Animations</li>
|
||||
<li>CSS Exclusions</li>
|
||||
<li>CSS Writing Modes - when the float and container have different 'writing-mode' and 'direction' properties</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>People and responsibilities</h2>
|
||||
<p>
|
||||
Below is a list of people you should reach out to if you have any
|
||||
questions related to this document or testing CSS Shapes in general:
|
||||
<ul>
|
||||
<li>Alan Stearns – Editor for CSS Shapes spec</li>
|
||||
<li>Rebecca Hauck – Test Coordinator for CSS Regions</li>
|
||||
</ul>
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Test progress tracking</h2>
|
||||
<p>
|
||||
Currently test progress tracking is done via gitHub
|
||||
<a href="https://github.com/w3c/csswg-test/issues?labels=spec%3Ashapes&milestone=&page=1&state=open">milestones
|
||||
and issues</a>.
|
||||
<!-- FIXME: Add more details once issues were created for all test areas. -->
|
||||
</p>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue