mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
558 lines
22 KiB
HTML
558 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>CSS Grid Layout Module 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 = {
|
||
publishDate: "2015-07-10",
|
||
shortName: "css-grid-1-test-plan",
|
||
specStatus: "unofficial",
|
||
editors: [
|
||
{
|
||
name: "Manuel Rego Casasnovas", mailto: "rego@igalia.com",
|
||
company: "Igalia, S.L.", companyURL: "http://www.igalia.com/"
|
||
},
|
||
],
|
||
testSuiteURI: "http://test.csswg.org/suites/css-grid-1_dev/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 Grid Layout Level 1 spec
|
||
[[!css3-grid-layout]]. 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 Grid Layout 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>Introduction</h2>
|
||
<p>
|
||
As CSS moved away from the monolithic development of CSS 2.1 to the
|
||
modular development of CSS 3, the number of proposed new features and
|
||
the complexity of the layout landscape have increased dramatically.
|
||
While this directly translates to increased flexibility and agility in
|
||
adopting and implementing new CSS features, it also increases the
|
||
complexity of testing CSS features and the need for coordinating the
|
||
testing efforts. Also, the need for testing coordination increases as
|
||
crowd-sourcing efforts like
|
||
<a href="http://testthewebforward.org/" target="_blank">Test the Web
|
||
Forward</a> present people less familiar with the processes and
|
||
policies of the W3C with the opportunity to contribute new tests.
|
||
</p>
|
||
<p>
|
||
Except when defining new behaviors or redefining old behaviors, the
|
||
implicit assumption for new CSS modules is that they play nicely with
|
||
other modules or properties defined in CSS 2.1 [[!CSS21]]. As CSS Grid
|
||
Layout is a spec that touches many aspects of layout, styling and
|
||
CSSOM, it's not unreasonable to want to test the spec against these
|
||
implicit assumptions, too.
|
||
</p>
|
||
<p>
|
||
This testing strategy document is meant to complement the CSS Grid
|
||
Layout spec and the existing test suite by providing an overview of
|
||
the testing areas (especially the less apparent ones) and tracking
|
||
the progress of the testing activities against these test areas.
|
||
</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 Grid Layout 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 Grid Layout
|
||
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>
|
||
As spec testing cannot be realistically separated from testing a
|
||
particular implementation (except for the very simple cases), the
|
||
approach proposed for testing is one that tries to first cover as
|
||
many areas as possible, instead of deep diving on a certain
|
||
feature or aspect of the spec first. A side benefit of this
|
||
approach is that the spec tests can be used at any time to gauge
|
||
the level of support of a certain implementation.
|
||
</p>
|
||
<p>
|
||
Having this <em>breadth-first</em> approach in mind, tests will be
|
||
created for the testing areas listed in <a href="#testing-areas"
|
||
class="sectionRef"></a>. Testing will be done in multiple passes,
|
||
each aimed at covering more specific edge-cases.
|
||
</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 Grid Layout 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 Grid Layout spec or ask a question on
|
||
the <a href="http://lists.w3.org/Archives/Public/www-style/">mailing
|
||
list</a> adding <kbd>[css-grid]</kbd> to the subject.
|
||
</p>
|
||
<section>
|
||
<h4>Grid Containers (<kbd>grid-model</kbd>)</h4>
|
||
<ul>
|
||
<li>
|
||
<code>grid</code> and <code>inline-grid</code> values for
|
||
<code>display</code> property
|
||
[<a href="https://github.com/w3c/csswg-test/issues/627">#627</a>].
|
||
</li>
|
||
<li>
|
||
Grid container’s margins do not collapse with the margins of its
|
||
contents
|
||
[<a href="https://github.com/w3c/csswg-test/issues/661">#661</a>].
|
||
</li>
|
||
<li>
|
||
<code>column-*</code> properties have no effect on a grid
|
||
container
|
||
[<a href="https://github.com/w3c/csswg-test/issues/628">#628</a>].
|
||
</li>
|
||
<li>
|
||
<code>float</code> and <code>clear</code> have no effect on a
|
||
grid item
|
||
[<a href="https://github.com/w3c/csswg-test/issues/629">#629</a>].
|
||
</li>
|
||
<li>
|
||
<code>float</code> affects to the computed value of display on
|
||
grid items
|
||
[<a href="https://github.com/w3c/csswg-test/issues/630">#630</a>].
|
||
</li>
|
||
<li>
|
||
<code>vertical-align</code> has no effect on a grid item
|
||
[<a href="https://github.com/w3c/csswg-test/issues/631">#631</a>].
|
||
</li>
|
||
<li>
|
||
<code>first-line</code> and <code>first-letter</code> do not
|
||
apply to grid containers
|
||
[<a href="https://github.com/w3c/csswg-test/issues/632">#632</a>].
|
||
</li>
|
||
<li>
|
||
Sizing grid containers
|
||
[<a href="https://github.com/w3c/csswg-test/issues/638">#638</a>].
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section>
|
||
<h4>Grid Items (<kbd>grid-items</kbd>)</h4>
|
||
<ul>
|
||
<li>
|
||
Each child of a grid container becomes a grid item
|
||
[<a href="https://github.com/w3c/csswg-test/issues/639">#639</a>].
|
||
</li>
|
||
<li>
|
||
Each contiguous run of text that is directly contained inside
|
||
grid container is wrapped in an anonymous grid item
|
||
[<a href="https://github.com/w3c/csswg-test/issues/640">#640</a>].
|
||
</li>
|
||
<li>
|
||
<code>visibility</code> property.
|
||
<div class="note">Still undefined in the spec.</div>
|
||
</li>
|
||
<li>
|
||
<code>order</code> property
|
||
[<a href="https://github.com/w3c/csswg-test/issues/641">#641</a>].
|
||
</li>
|
||
<li>
|
||
Static position
|
||
[<a href="https://github.com/w3c/csswg-test/issues/642">#642</a>
|
||
&
|
||
<a href="https://github.com/w3c/csswg-test/issues/643">#643</a>].
|
||
</li>
|
||
<li>
|
||
Z-axis ordering:
|
||
<ul>
|
||
<li>
|
||
<code>z-index</code> property
|
||
[<a href="https://github.com/w3c/csswg-test/issues/677">#677</a>].
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
Minimum size of grid items
|
||
[<a href="https://github.com/w3c/csswg-test/issues/799">#799</a>].
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section>
|
||
<h4>The Explicit Grid (<kbd>grid-definition</kbd>)</h4>
|
||
<ul>
|
||
<li>
|
||
Track sizing:
|
||
<ul>
|
||
<li>
|
||
<code>grid-template-columns</code> and
|
||
<code>grid-template-rows</code> properties
|
||
[<a href="https://github.com/w3c/csswg-test/issues/644">#644</a>].
|
||
</li>
|
||
<li>
|
||
<kbd><track-size></kbd>: <code>length</code>,
|
||
<code>percentage</code>, <code>max-content</code>,
|
||
<code>min-content</code>, <code>minmax(min, max)</code>,
|
||
<code>auto</code>.
|
||
</li>
|
||
<li>
|
||
Named grid lines (<kbd><custom-ident></kbd>)
|
||
[<a href="https://github.com/w3c/csswg-test/issues/645">#645</a>].
|
||
</li>
|
||
<li>
|
||
<code>repeat()</code> notation
|
||
[<a href="https://github.com/w3c/csswg-test/issues/646">#646</a>].
|
||
</li>
|
||
<li>
|
||
Flexible lengths: <code>fr</code> unit
|
||
[<a href="https://github.com/w3c/csswg-test/issues/647">#647</a>].
|
||
</li>
|
||
<li>
|
||
<code>subgrid</code> keyword.
|
||
<div class="note">Subgrid feature is currently at-risk.</div>
|
||
</li>
|
||
<li>
|
||
Resolved values
|
||
[<a href="https://github.com/w3c/csswg-test/issues/648">#648</a>].
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
Named areas:
|
||
<ul>
|
||
<li>
|
||
<code>grid-template-areas</code> property
|
||
[<a href="https://github.com/w3c/csswg-test/issues/649">#649</a>].
|
||
</li>
|
||
<li>
|
||
Implicit named grid lines
|
||
[<a href="https://github.com/w3c/csswg-test/issues/650">#650</a>].
|
||
</li>
|
||
<li>
|
||
Implicit named areas
|
||
[<a href="https://github.com/w3c/csswg-test/issues/651">#651</a>].
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
Explicit grid shorthand:
|
||
<ul>
|
||
<li>
|
||
<code>grid-template</code> property
|
||
[<a href="https://github.com/w3c/csswg-test/issues/652">#652</a>].
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section>
|
||
<h4>The Implicit Grid (<kbd>implicit-grids</kbd>)</h4>
|
||
<ul>
|
||
<li>
|
||
<code>grid-auto-rows</code> and <code>grid-auto-columns</code>
|
||
properties
|
||
[<a href="https://github.com/w3c/csswg-test/issues/662">#662</a>].
|
||
</li>
|
||
<li>
|
||
<code>grid-auto-flow</code> property
|
||
[<a href="https://github.com/w3c/csswg-test/issues/663">#663</a>].
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section>
|
||
<h4>Grid Definition Shorthand (<kbd>grid-shorthand</kbd>)</h4>
|
||
<ul>
|
||
<li>
|
||
<code>grid</code> property
|
||
[<a href="https://github.com/w3c/csswg-test/issues/664">#664</a>].
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section>
|
||
<h4>Placing Grid Items (<kbd>placement</kbd>)</h4>
|
||
<ul>
|
||
<li>
|
||
Common patterns:
|
||
<ul>
|
||
<li>
|
||
Named areas
|
||
[<a href="https://github.com/w3c/csswg-test/issues/665">#665</a>].
|
||
</li>
|
||
<li>
|
||
Numeric indexes and spans
|
||
[<a href="https://github.com/w3c/csswg-test/issues/666">#666</a>].
|
||
</li>
|
||
<li>
|
||
Named lines and spans
|
||
[<a href="https://github.com/w3c/csswg-test/issues/667">#667</a>].
|
||
</li>
|
||
<li>
|
||
Auto placement
|
||
[<a href="https://github.com/w3c/csswg-test/issues/668">#668</a>].
|
||
</li>
|
||
<li>
|
||
Auto sizing siblings.
|
||
<div class="note">Subgrid feature is currently at-risk.</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
Line-based placement:
|
||
<ul>
|
||
<li>
|
||
<code>grid-row-start</code>, <code>grid-column-start</code>,
|
||
<code>grid-row-end</code> and <code>grid-column-end</code>
|
||
properties
|
||
[<a href="https://github.com/w3c/csswg-test/issues/669">#669</a>].
|
||
</li>
|
||
<li>
|
||
Grid placement conflict handling
|
||
[<a href="https://github.com/w3c/csswg-test/issues/670">#670</a>].
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
Placement shorthands:
|
||
<ul>
|
||
<li>
|
||
<code>grid-column</code>, <code>grid-row</code> and
|
||
<code>grid-area</code> properties
|
||
[<a href="https://github.com/w3c/csswg-test/issues/671">#671</a>].
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
Absolutely-positioned grid items
|
||
[<a href="https://github.com/w3c/csswg-test/issues/672">#672</a>].
|
||
</li>
|
||
<li>
|
||
Grid item placement algorithm
|
||
[<a href="https://github.com/w3c/csswg-test/issues/683">#683</a>].
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section>
|
||
<h4>Alignment (<kbd>alignment</kbd>)</h4>
|
||
<ul>
|
||
<li>
|
||
Aligning with auto margins
|
||
[<a href="https://github.com/w3c/csswg-test/issues/673">#673</a>].
|
||
</li>
|
||
<li>
|
||
Row-axis alignment:
|
||
<ul>
|
||
<li>
|
||
<code>justify-self</code> and <code>justify-items</code>
|
||
properties.
|
||
[<a href="https://github.com/w3c/csswg-test/issues/674">#674</a>].
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
Column-axis alignment:
|
||
<ul>
|
||
<li>
|
||
<code>align-self</code> and <code>align-items</code>
|
||
properties
|
||
[<a href="https://github.com/w3c/csswg-test/issues/675">#675</a>].
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
Aligning the grid:
|
||
<ul>
|
||
<li>
|
||
<code>justify-content</code> and <code>align-content</code>
|
||
properties
|
||
[<a href="https://github.com/w3c/csswg-test/issues/676">#676</a>].
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
Grid baselines
|
||
[<a href="https://github.com/w3c/csswg-test/issues/678">#678</a>].
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section>
|
||
<h4>Track Sizing Algorithm (<kbd>layout-algorithm</kbd>)</h4>
|
||
<ul>
|
||
<li>
|
||
Content-based track sizing
|
||
[<a href="https://github.com/w3c/csswg-test/issues/679">#679</a>].
|
||
</li>
|
||
<li>
|
||
Grow tracks using free space
|
||
[<a href="https://github.com/w3c/csswg-test/issues/680">#680</a>].
|
||
</li>
|
||
<li>
|
||
Flexible tracks
|
||
[<a href="https://github.com/w3c/csswg-test/issues/681">#681</a>].
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section>
|
||
<h4>Fragmenting Grid Layout (<kbd>pagination</kbd>)</h4>
|
||
<ul>
|
||
<li>
|
||
Fragmentation algorithm
|
||
[<a href="https://github.com/w3c/csswg-test/issues/682">#682</a>].
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
</section>
|
||
<section>
|
||
<h3>Specification examples</h3>
|
||
<p>
|
||
The spec examples should become tests (maybe some of them need to be
|
||
defined as manual tests). This will allow to increase the coverage
|
||
with more tests, but also to check the spec itself.
|
||
</p>
|
||
</section>
|
||
<section>
|
||
<h3>Implicit testing areas</h3>
|
||
<p>
|
||
These are testing areas either normatively defined in other specs
|
||
that explicitly refer to the CSS Grid Layout spec or simply not
|
||
explicitly defined, but implied by various aspects of the 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 Grid Layout spec or ask a question on the
|
||
<a href="http://lists.w3.org/Archives/Public/www-style/">mailing
|
||
list</a> adding <kbd>[css-grid]</kbd> to the subject.
|
||
</p>
|
||
<p>
|
||
Below is the list of implicit testing areas:
|
||
</p>
|
||
<ul>
|
||
<li>
|
||
CSS Grid Layout and other layout models:
|
||
<ul>
|
||
<li>Floats [[!CSS21]].</li>
|
||
<li>Positioned elements [[!css3-positioning]].</li>
|
||
<li>CSS Flexbox [[!css3-flexbox]].</li>
|
||
<li>CSS Multicolumn [[!css3-multicol]].</li>
|
||
<li>CSS Regions [[!css3-regions]].</li>
|
||
<li>CSS Shapes [[!css-shapes-1]].</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
CSS Grid Layout and different type of elements [[!html5]]:
|
||
<ul>
|
||
<li><code>img</code>.</li>
|
||
<li><code>video</code>.</li>
|
||
<li><code>iframe</code>.</li>
|
||
<li><code>canvas</code>.</li>
|
||
<li><code>table</code>.</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
Dynamic content:
|
||
<ul>
|
||
<li>Changing the content of the grid items at runtime.</li>
|
||
<li>
|
||
Interactive content <code>contentEditable</code>,
|
||
<code>designMode</code> and input elements [[!html5]].
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>Writing modes [[!css3-writing-modes]].</li>
|
||
<li>Transforms [[!css3-transforms]].</li>
|
||
<li>
|
||
Transitions [[!css3-transitions]] and animations
|
||
[[!css3-animations]].
|
||
</li>
|
||
<li>Pseudo-elements in grid items [[!CSS21]].</li>
|
||
</ul>
|
||
</section>
|
||
</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 Grid Layout in
|
||
general:
|
||
</p>
|
||
<ul>
|
||
<li>Manuel Rego – Test Coordinator for CSS Grid Layout</li>
|
||
</ul>
|
||
</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%3Agrid&milestone=&page=1&state=open">
|
||
milestones and issues</a>.
|
||
<!--
|
||
FIXME: This link doesn't work yet.
|
||
TODO:
|
||
* Label "spec:grid" has to be created
|
||
(https://github.com/w3c/csswg-test/labels)
|
||
* Milestone "css-grid-1_dev" has to be created
|
||
https://github.com/w3c/csswg-test/milestones
|
||
* Once issues are created, add references from the different
|
||
sections.
|
||
-->
|
||
</p>
|
||
</section>
|
||
</body>
|
||
</html>
|