summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-grid/test-plan/index.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-grid/test-plan/index.html
parentInitial commit. (diff)
downloadfirefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/test-plan/index.html')
-rw-r--r--testing/web-platform/tests/css/css-grid/test-plan/index.html558
1 files changed, 558 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/test-plan/index.html b/testing/web-platform/tests/css/css-grid/test-plan/index.html
new file mode 100644
index 0000000000..039f3a87c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/test-plan/index.html
@@ -0,0 +1,558 @@
+<!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 &ndash; 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>
+ &amp;
+ <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>&lt;track-size&gt;</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>&lt;custom-ident&gt;</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 &ndash; 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&amp;milestone=&amp;page=1&amp;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>