mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Update web-platform-tests and CSS tests.
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
This commit is contained in:
Ms2ger
parent
fb4f421c8b
commit
296fa2512b
21852 changed files with 2080936 additions and 892894 deletions
51
tests/wpt/css-tests/css-align-3_dev/html/chapter-1.htm
Normal file
51
tests/wpt/css-tests/css-align-3_dev/html/chapter-1.htm
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Introduction - CSS Box Alignment Module Level 3 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Box Alignment Module Level 3 CR Test Suite</h1>
|
||||
<h2>Introduction (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s1">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#intro">1 Introduction</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s1.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#placement">1.1 Module interactions</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s1.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s1.2">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#values">1.2 Values</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
63
tests/wpt/css-tests/css-align-3_dev/html/chapter-2.htm
Normal file
63
tests/wpt/css-tests/css-align-3_dev/html/chapter-2.htm
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Overview of Alignment Properties - CSS Box Alignment Module Level 3 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Box Alignment Module Level 3 CR Test Suite</h1>
|
||||
<h2>Overview of Alignment Properties (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#overview">2 Overview of Alignment Properties</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#box-alignment-properties">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#ref-for-box-alignment-properties-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#ref-for-propdef-align-content-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#ref-for-propdef-align-items-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#ref-for-propdef-align-self-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#ref-for-propdef-justify-content-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#ref-for-propdef-justify-items-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#ref-for-propdef-justify-self-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
627
tests/wpt/css-tests/css-align-3_dev/html/chapter-3.htm
Normal file
627
tests/wpt/css-tests/css-align-3_dev/html/chapter-3.htm
Normal file
|
|
@ -0,0 +1,627 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Alignment Values - CSS Box Alignment Module Level 3 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Box Alignment Module Level 3 CR Test Suite</h1>
|
||||
<h2>Alignment Values (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#alignment-values">3 Alignment Values</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#alignment-container">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#alignment-subject">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#ref-for-alignment-container-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#ref-for-alignment-subject-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#ref-for-alignment-subject-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#ref-for-alignment-subject-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#ref-for-alignment-subject-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#ref-for-alignment-subject-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#ref-for-propdef-align-content-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#ref-for-propdef-align-self-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#ref-for-propdef-justify-content-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#ref-for-propdef-justify-self-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#positional-values">3.1 Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#issue-511afb43">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#issue-bb5da799">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-container-10">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-container-11">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-container-12">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-container-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-container-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-container-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-container-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-container-6">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-container-7">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-container-8">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-container-9">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-subject-10">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-subject-11">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-subject-12">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-subject-13">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-subject-14">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-subject-15">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-subject-16">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-subject-17">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-subject-6">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-subject-7">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-subject-8">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-alignment-subject-9">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-propdef-align-content-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-propdef-align-items-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-propdef-align-self-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-propdef-align-self-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-propdef-justify-content-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-propdef-justify-items-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-propdef-justify-self-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-propdef-justify-self-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-typedef-content-position-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-typedef-self-position-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-valdef-self-position-center-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-valdef-self-position-end-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-valdef-self-position-end-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-valdef-self-position-flex-end-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-valdef-self-position-flex-start-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-valdef-self-position-left-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-valdef-self-position-right-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-valdef-self-position-self-end-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-valdef-self-position-self-start-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-valdef-self-position-start-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-valdef-self-position-start-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-valdef-self-position-start-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#ref-for-valdef-self-position-start-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#typedef-content-position">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#typedef-self-position">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#valdef-self-position-center">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#valdef-self-position-end">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#valdef-self-position-flex-end">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#valdef-self-position-flex-start">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#valdef-self-position-left">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#valdef-self-position-right">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#valdef-self-position-self-end">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#valdef-self-position-self-start">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1.#valdef-self-position-start">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.2">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#baseline">3.2 Baseline Alignment: the baseline and last-baseline keywords</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#baseline-alignment">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#baseline-alignment-preference">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#first-baseline-alignment">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#issue-13b9ed6a">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#issue-a2b059e5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#last-baseline-alignment">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-alignment-baseline-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-alignment-subject-18">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-alignment-subject-19">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-alignment-subject-20">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-baseline-alignment-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-baseline-alignment-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-baseline-content-alignment-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-baseline-content-alignment-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-baseline-self-alignment-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-baseline-self-alignment-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-baseline-self-alignment-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-baseline-sharing-group-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-baseline-sharing-group-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-first-baseline-set-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-first-baseline-set-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-first-baseline-set-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-last-baseline-set-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-last-baseline-set-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-last-baseline-set-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-propdef-align-content-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-propdef-align-self-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-propdef-justify-content-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-propdef-justify-self-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-shared-alignment-context-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-valdef-justify-content-baseline-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-valdef-justify-content-baseline-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-valdef-justify-content-last-baseline-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-valdef-justify-content-last-baseline-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-valdef-overflow-position-safe-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-valdef-overflow-position-unsafe-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-valdef-self-position-end-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-valdef-self-position-end-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-valdef-self-position-start-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#ref-for-valdef-self-position-start-6">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#typedef-baseline-position">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#valdef-justify-content-baseline">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#valdef-justify-content-last-baseline">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.3">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#distribution-values">3.3 Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#fallback-alignment">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#issue-77ee454e">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-container-13">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-container-14">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-container-15">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-container-16">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-container-17">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-container-18">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-container-19">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-container-20">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-21">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-22">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-23">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-24">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-25">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-26">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-27">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-28">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-29">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-30">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-31">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-32">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-33">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-34">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-35">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-36">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-37">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-alignment-subject-38">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-fallback-alignment-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-propdef-align-content-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-propdef-justify-content-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-typedef-content-position-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-valdef-align-content-space-around-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-valdef-align-content-space-between-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-valdef-align-content-space-evenly-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-valdef-align-content-stretch-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-valdef-self-position-center-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-valdef-self-position-center-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-valdef-self-position-flex-start-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-valdef-self-position-flex-start-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-valdef-self-position-start-7">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#ref-for-valdef-self-position-start-8">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#typedef-content-distribution">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#valdef-align-content-space-around">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#valdef-align-content-space-between">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#valdef-align-content-space-evenly">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.#valdef-align-content-stretch">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.4">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#overflow-values">3.4 Overflow Alignment: the safe and unsafe keywords</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#example-f905a4f9">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#issue-186f9274">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#overflow-alignment">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-alignment-container-21">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-alignment-container-22">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-alignment-container-23">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-alignment-container-24">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-alignment-container-25">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-alignment-subject-39">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-alignment-subject-40">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-alignment-subject-41">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-alignment-subject-42">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-alignment-subject-43">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-overflow-alignment-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-overflow-alignment-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-propdef-align-self-6">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-propdef-align-self-7">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-valdef-overflow-position-safe-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-valdef-overflow-position-safe-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-valdef-overflow-position-unsafe-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-valdef-overflow-position-unsafe-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-valdef-overflow-position-unsafe-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-valdef-self-position-start-10">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#ref-for-valdef-self-position-start-9">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#typedef-overflow-position">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#valdef-overflow-position-safe">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.#valdef-overflow-position-unsafe">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
446
tests/wpt/css-tests/css-align-3_dev/html/chapter-4.htm
Normal file
446
tests/wpt/css-tests/css-align-3_dev/html/chapter-4.htm
Normal file
|
|
@ -0,0 +1,446 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Content Distribution: the justify-content and align-content properties - CSS Box Alignment Module Level 3 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Box Alignment Module Level 3 CR Test Suite</h1>
|
||||
<h2>Content Distribution: the justify-content and align-content properties (1 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#content-distribution">4 Content Distribution: the justify-content and align-content properties</a></th></tr>
|
||||
<!-- 1 tests -->
|
||||
<tr id="ttwf-reftest-aligncontent-4" class="">
|
||||
<td>
|
||||
<a href="ttwf-reftest-alignContent.htm">ttwf-reftest-aligncontent</a></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>ttwf-reftest-alignContent-ref
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s4.#content-distribution-properties">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#propdef-align-content">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#propdef-justify-content">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#ref-for-fallback-alignment-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#ref-for-propdef-align-content-6">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#ref-for-propdef-align-content-7">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#ref-for-propdef-justify-content-6">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#ref-for-propdef-justify-content-7">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#ref-for-typedef-baseline-position-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#ref-for-typedef-content-distribution-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#ref-for-typedef-content-distribution-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#ref-for-typedef-content-position-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#ref-for-typedef-content-position-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#ref-for-typedef-content-position-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#ref-for-typedef-overflow-position-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#valdef-justify-content-normal">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#distribution-details">4.1 Details per Layout Mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.1.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#distribution-block">4.1.1 Block Containers</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#ref-for-alignment-container-26">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#ref-for-alignment-subject-44">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#ref-for-fallback-alignment-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#ref-for-propdef-align-content-8">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#ref-for-propdef-justify-content-8">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#ref-for-typedef-content-distribution-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#ref-for-valdef-justify-content-baseline-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#ref-for-valdef-justify-content-normal-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#ref-for-valdef-justify-content-normal-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#ref-for-valdef-justify-content-normal-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#ref-for-valdef-justify-content-normal-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#ref-for-valdef-self-position-center-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#ref-for-valdef-self-position-end-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#ref-for-valdef-self-position-start-11">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#ref-for-valdef-self-position-start-12">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.1.2">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#distribution-multicol">4.1.2 Multicol Containers</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.2.#ref-for-alignment-container-27">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.2.#ref-for-alignment-subject-45">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.2.#ref-for-fallback-alignment-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.2.#ref-for-propdef-align-content-9">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.2.#ref-for-propdef-justify-content-9">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.2.#ref-for-typedef-content-distribution-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.2.#ref-for-valdef-align-content-stretch-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.2.#ref-for-valdef-justify-content-normal-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.2.#ref-for-valdef-justify-content-normal-6">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.1.3">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#distribution-flex">4.1.3 Flex Containers</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.3.#ref-for-alignment-container-28">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.3.#ref-for-alignment-subject-46">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.3.#ref-for-fallback-alignment-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.3.#ref-for-propdef-align-content-10">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.3.#ref-for-propdef-align-content-11">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.3.#ref-for-propdef-justify-content-10">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.3.#ref-for-propdef-justify-content-11">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.3.#ref-for-propdef-justify-content-12">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.3.#ref-for-valdef-align-content-stretch-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.3.#ref-for-valdef-align-content-stretch-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.3.#ref-for-valdef-justify-content-normal-7">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.3.#ref-for-valdef-justify-content-normal-8">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.3.#ref-for-valdef-self-position-flex-start-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.1.4">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#distribution-grid">4.1.4 Grid Containers</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.4.#ref-for-alignment-container-29">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.4.#ref-for-alignment-subject-47">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.4.#ref-for-propdef-align-content-12">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.4.#ref-for-propdef-justify-content-13">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.4.#ref-for-valdef-align-content-stretch-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.4.#ref-for-valdef-justify-content-normal-10">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.4.#ref-for-valdef-justify-content-normal-9">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.2">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#baseline-align-content">4.2 Baseline Content-Alignment</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#baseline-content-alignment">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-alignment-baseline-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-alignment-baseline-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-alignment-baseline-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-alignment-baseline-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-alignment-container-30">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-alignment-subject-48">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-alignment-subject-49">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-baseline-content-alignment-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-baseline-content-alignment-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-baseline-content-alignment-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-baseline-content-alignment-6">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-baseline-content-alignment-7">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-baseline-content-alignment-8">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-baseline-sharing-group-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-baseline-sharing-group-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-propdef-align-content-13">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-propdef-align-content-14">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-propdef-align-content-15">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-propdef-align-self-10">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-propdef-align-self-11">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-propdef-align-self-12">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-propdef-align-self-8">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-propdef-align-self-9">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-propdef-justify-self-6">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-propdef-justify-self-7">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-shared-alignment-context-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-shared-alignment-context-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-shared-alignment-context-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-justify-content-baseline-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-justify-content-baseline-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-justify-content-baseline-6">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-justify-content-last-baseline-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-justify-content-last-baseline-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-justify-content-last-baseline-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-justify-self-stretch-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-justify-self-stretch-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-self-position-end-6">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-self-position-end-7">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-self-position-flex-end-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-self-position-flex-end-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-self-position-flex-start-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-self-position-flex-start-6">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-self-position-self-end-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-self-position-self-end-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-self-position-self-end-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-self-position-self-end-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-self-position-self-start-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-self-position-self-start-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-self-position-self-start-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-self-position-self-start-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-self-position-start-13">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ref-for-valdef-self-position-start-14">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.3">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#overflow-scroll-position">4.3 Overflow and Scroll Positions</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.3.#example-a104fac2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.3.#issue-f2f93187">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.3.#ref-for-content-distribution-properties-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.3.#ref-for-content-distribution-properties-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.3.#ref-for-propdef-justify-content-14">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.3.#ref-for-propdef-justify-content-15">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1047
tests/wpt/css-tests/css-align-3_dev/html/chapter-5.htm
Normal file
1047
tests/wpt/css-tests/css-align-3_dev/html/chapter-5.htm
Normal file
File diff suppressed because it is too large
Load diff
171
tests/wpt/css-tests/css-align-3_dev/html/chapter-6.htm
Normal file
171
tests/wpt/css-tests/css-align-3_dev/html/chapter-6.htm
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Default Alignment - CSS Box Alignment Module Level 3 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Box Alignment Module Level 3 CR Test Suite</h1>
|
||||
<h2>Default Alignment (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s6">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#default-alignment">6 Default Alignment</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#ref-for-propdef-align-items-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#ref-for-propdef-align-self-24">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#ref-for-propdef-justify-items-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.#ref-for-propdef-justify-self-19">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#justify-items-property">6.1 Inline/Main-Axis Alignment: the justify-items property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#issue-22e76fcc">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#issue-d17b843d">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#propdef-justify-items">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-propdef-justify-items-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-propdef-justify-items-6">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-propdef-justify-self-20">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-propdef-justify-self-21">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-typedef-baseline-position-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-typedef-overflow-position-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-typedef-self-position-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-valdef-justify-items-auto-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-valdef-justify-items-auto-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-valdef-justify-items-auto-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-valdef-justify-items-auto-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-valdef-justify-items-legacy-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-valdef-justify-items-legacy-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-valdef-justify-items-legacy-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-valdef-justify-items-legacy-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-valdef-justify-items-legacy-6">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-valdef-justify-items-legacy-7">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-valdef-justify-items-legacy-8">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-valdef-self-position-center-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-valdef-self-position-center-6">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-valdef-self-position-left-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-valdef-self-position-left-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-valdef-self-position-right-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#ref-for-valdef-self-position-right-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#valdef-justify-items-auto">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#valdef-justify-items-legacy">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.2">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#align-items-property">6.2 Block/Cross-Axis Alignment: the align-items property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2.#propdef-align-items">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2.#ref-for-propdef-align-items-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2.#ref-for-propdef-align-self-25">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2.#ref-for-propdef-align-self-26">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2.#ref-for-typedef-baseline-position-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2.#ref-for-typedef-overflow-position-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2.#ref-for-typedef-self-position-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
162
tests/wpt/css-tests/css-align-3_dev/html/chapter-7.htm
Normal file
162
tests/wpt/css-tests/css-align-3_dev/html/chapter-7.htm
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Baseline Alignment Details - CSS Box Alignment Module Level 3 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Box Alignment Module Level 3 CR Test Suite</h1>
|
||||
<h2>Baseline Alignment Details (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s7">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#baseline-rules">7 Baseline Alignment Details</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#baseline-export">7.1 Determining the Baselines of a Box</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#first-baseline-set">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#generate-baselines">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#issue-cfbec8b9">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#last-baseline-set">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#ref-for-alignment-baseline-10">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#ref-for-alignment-baseline-11">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#ref-for-alignment-baseline-12">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#ref-for-alignment-container-44">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#ref-for-first-baseline-set-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#ref-for-generate-baselines-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#ref-for-generate-baselines-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#ref-for-generate-baselines-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#ref-for-synthesize-baselines-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#ref-for-synthesize-baselines-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#ref-for-valdef-justify-content-baseline-10">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#ref-for-valdef-justify-content-baseline-9">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#ref-for-valdef-justify-content-last-baseline-8">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#ref-for-valdef-justify-content-last-baseline-9">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#synthesize-baselines">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.2">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#baseline-terms">7.2 Baseline Alignment Terminology</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#alignment-baseline">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#baseline-sharing-group">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#ref-for-baseline-alignment-preference-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#ref-for-baseline-alignment-preference-2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#ref-for-baseline-sharing-group-7">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#ref-for-propdef-align-content-19">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#ref-for-shared-alignment-context-8">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#ref-for-shared-alignment-context-9">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#ref-for-valdef-justify-content-last-baseline-10">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#shared-alignment-context">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.3">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#align-by-baseline">7.3 Aligning Boxes by Baseline</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.3.#aligned-subtree">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.3.#ref-for-alignment-baseline-13">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.3.#ref-for-alignment-baseline-14">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.3.#ref-for-baseline-sharing-group-8">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.3.#ref-for-valdef-justify-content-baseline-11">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.3.#ref-for-valdef-justify-content-last-baseline-11">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
48
tests/wpt/css-tests/css-align-3_dev/html/chapter-8.htm
Normal file
48
tests/wpt/css-tests/css-align-3_dev/html/chapter-8.htm
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Changes - CSS Box Alignment Module Level 3 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Box Alignment Module Level 3 CR Test Suite</h1>
|
||||
<h2>Changes (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s8">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#changes">8 Changes</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.#ref-for-propdef-align-self-27">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.#ref-for-propdef-justify-self-22">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.#ref-for-valdef-overflow-position-unsafe-5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
165
tests/wpt/css-tests/css-align-3_dev/html/chapter-9.htm
Normal file
165
tests/wpt/css-tests/css-align-3_dev/html/chapter-9.htm
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Privacy and Security Considerations - CSS Box Alignment Module Level 3 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Box Alignment Module Level 3 CR Test Suite</h1>
|
||||
<h2>Privacy and Security Considerations (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s9">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9">+</a>
|
||||
<a href="https://www.w3.org/TR/css3-align/#privacy-security">9 Privacy and Security Considerations</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#abstract">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#acknowledgments">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#conformance">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#contents">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#issues-index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#property-index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#references">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#status">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#subtitle">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconform-responsible.#conform-future-proofing">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconform-responsible.#conform-partial">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconform-responsible.#conform-testing">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#conform-classes">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#conform-responsible">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#document-conventions">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sdocument-conventions.#example-52448c84">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sindex.#index-defined-elsewhere">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sindex.#index-defined-here">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sinformative.#biblio-css-inline-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sinformative.#biblio-css-line-grid-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css-cascade-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css-display-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css-flexbox-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css-fonts-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css-grid-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css-multicol-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css-overflow-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css-position-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css-sizing-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css-text-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css-writing-modes-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css21">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css3-multicol">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css3val">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-rfc2119">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-selectors-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-svg2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sreferences.#informative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sreferences.#normative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sstatus.#toc">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sstatus.#w3c_process_revision">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a row flex container, with various "align-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-content-001-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
/* This "align-self" only gets a chance to take effect when our container
|
||||
has "align-content: stretch". In that case, it helps us verify that
|
||||
the container's "align-content: stretch" is actually taking effect
|
||||
and stretching the flex line (and giving us space to center in). */
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "align-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-content-002-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
/* This "align-self" only gets a chance to take effect when our container
|
||||
has "align-content: stretch". In that case, it helps us verify that
|
||||
the container's "align-content: stretch" is actually taking effect
|
||||
and stretching the flex line (and giving us space to center in). */
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "align-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-content-003-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row-reverse wrap;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
/* This "align-self" only gets a chance to take effect when our container
|
||||
has "align-content: stretch". In that case, it helps us verify that
|
||||
the container's "align-content: stretch" is actually taking effect
|
||||
and stretching the flex line (and giving us space to center in). */
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "align-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-content-004-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row-reverse wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
/* This "align-self" only gets a chance to take effect when our container
|
||||
has "align-content: stretch". In that case, it helps us verify that
|
||||
the container's "align-content: stretch" is actually taking effect
|
||||
and stretching the flex line (and giving us space to center in). */
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a column flex container, with various "align-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-content-005-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
/* This "align-self" only gets a chance to take effect when our container
|
||||
has "align-content: stretch". In that case, it helps us verify that
|
||||
the container's "align-content: stretch" is actually taking effect
|
||||
and stretching the flex line (and giving us space to center in). */
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "align-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-content-006-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
/* This "align-self" only gets a chance to take effect when our container
|
||||
has "align-content: stretch". In that case, it helps us verify that
|
||||
the container's "align-content: stretch" is actually taking effect
|
||||
and stretching the flex line (and giving us space to center in). */
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "align-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-content-007-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column-reverse wrap;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
/* This "align-self" only gets a chance to take effect when our container
|
||||
has "align-content: stretch". In that case, it helps us verify that
|
||||
the container's "align-content: stretch" is actually taking effect
|
||||
and stretching the flex line (and giving us space to center in). */
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "align-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-content-008-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column-reverse wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
/* This "align-self" only gets a chance to take effect when our container
|
||||
has "align-content: stretch". In that case, it helps us verify that
|
||||
the container's "align-content: stretch" is actually taking effect
|
||||
and stretching the flex line (and giving us space to center in). */
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a RTL row flex container, with various "align-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-content-rtl-001-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
direction: rtl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
/* This "align-self" only gets a chance to take effect when our container
|
||||
has "align-content: stretch". In that case, it helps us verify that
|
||||
the container's "align-content: stretch" is actually taking effect
|
||||
and stretching the flex line (and giving us space to center in). */
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a RTL column flex container, with various "align-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-content-rtl-002-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
direction: rtl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
/* This "align-self" only gets a chance to take effect when our container
|
||||
has "align-content: stretch". In that case, it helps us verify that
|
||||
the container's "align-content: stretch" is actually taking effect
|
||||
and stretching the flex line (and giving us space to center in). */
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl row flex container, with various "align-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-content-vertWM-001-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
/* This "align-self" only gets a chance to take effect when our container
|
||||
has "align-content: stretch". In that case, it helps us verify that
|
||||
the container's "align-content: stretch" is actually taking effect
|
||||
and stretching the flex line (and giving us space to center in). */
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "align-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-content-vertWM-002-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
/* This "align-self" only gets a chance to take effect when our container
|
||||
has "align-content: stretch". In that case, it helps us verify that
|
||||
the container's "align-content: stretch" is actually taking effect
|
||||
and stretching the flex line (and giving us space to center in). */
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="align-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="align-content: baseline" class="container"><div></div></div>
|
||||
<div style="align-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="align-content: center" class="container"><div></div></div>
|
||||
<div style="align-content: start" class="container"><div></div></div>
|
||||
<div style="align-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="align-content: flex-start" class="container"><div></div></div>
|
||||
<div style="align-content: flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: left" class="container"><div></div></div>
|
||||
<div style="align-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a row flex container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-self-001-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-self-002-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-self-003-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-self-004-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row-reverse wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a column flex container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-self-005-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-self-006-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-self-007-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-self-008-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column-reverse wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a RTL row flex container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-self-rtl-001-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
direction: rtl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos LTR children in a RTL row flex container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-self-rtl-002-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
direction: rtl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
direction: ltr;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a RTL column flex container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-self-rtl-003-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
direction: rtl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos LTR children in a RTL column flex container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-self-rtl-004-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
direction: rtl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
direction: ltr;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl row flex container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-self-vertWM-001-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl row flex container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-self-vertWM-002-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
writing-mode: horizontal-tb;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-self-vertWM-003-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos vertical-lr + RTL children in a vertical-rl column flex container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-align-self-vertWM-004-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a row flex container, with various "align-content" values with explicit fallback values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-fallback-align-content-001-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- <content-distribution> with implied fallback -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> with explicit "flex-end" fallback -->
|
||||
<div style="align-content: space-between flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: space-around flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: stretch flex-end" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- <content-distribution> with implied fallback -->
|
||||
<div style="align-content: space-between" class="container"><div></div></div>
|
||||
<div style="align-content: space-around" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="align-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> with explicit "flex-end" fallback -->
|
||||
<div style="align-content: space-between flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: space-around flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: space-evenly flex-end" class="container"><div></div></div>
|
||||
<div style="align-content: stretch flex-end" class="container"><div></div></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a row flex container, with various "justify-content" values with explicit fallback values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#justify-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-fallback-justify-content-001-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- <content-distribution> with implied fallback -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> with explicit "flex-end" fallback -->
|
||||
<div style="justify-content: space-between flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch flex-end" class="container"><div></div></div>
|
||||
<!-- Note: specifically for flex containers, in the justify-content axis,
|
||||
"stretch behaves as flex-start (ignoring the specified fallback
|
||||
alignment, if any." https://drafts.csswg.org/css-align-3/#distribution-flex -->
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- <content-distribution> with implied fallback -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> with explicit "flex-end" fallback -->
|
||||
<div style="justify-content: space-between flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch flex-end" class="container"><div></div></div>
|
||||
<!-- As noted above, the explicit fallback for "stretch" is ignored here. -->
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a row flex container, with various "justify-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#justify-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-justify-content-001-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "justify-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#justify-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-justify-content-002-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "justify-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#justify-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-justify-content-003-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row-reverse wrap;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "justify-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#justify-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-justify-content-004-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row-reverse wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a column flex container, with various "justify-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#justify-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-justify-content-005-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "justify-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#justify-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-justify-content-006-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "justify-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#justify-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-justify-content-007-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column-reverse wrap;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "justify-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#justify-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-justify-content-008-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column-reverse wrap-reverse;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a RTL row flex container, with various "justify-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#justify-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-justify-content-rtl-001-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
direction: rtl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a RTL column flex container, with various "justify-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#justify-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-justify-content-rtl-002-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
direction: rtl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl row flex container, with various "justify-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#justify-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-justify-content-vertWM-001-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "justify-content" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#justify-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-justify-content-vertWM-002-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div style="justify-content: normal" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div style="justify-content: baseline" class="container"><div></div></div>
|
||||
<div style="justify-content: last baseline" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div style="justify-content: space-between" class="container"><div></div></div>
|
||||
<div style="justify-content: space-around" class="container"><div></div></div>
|
||||
<div style="justify-content: space-evenly" class="container"><div></div></div>
|
||||
<div style="justify-content: stretch" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1 -->
|
||||
<div style="justify-content: center" class="container"><div></div></div>
|
||||
<div style="justify-content: start" class="container"><div></div></div>
|
||||
<div style="justify-content: end" class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2 -->
|
||||
<div style="justify-content: flex-start" class="container"><div></div></div>
|
||||
<div style="justify-content: flex-end" class="container"><div></div></div>
|
||||
<div style="justify-content: left" class="container"><div></div></div>
|
||||
<div style="justify-content: right" class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a row flex container, with various "justify-self" values (which shouldn't have any effect) </title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#justify-flex" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-justify-self-001-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a row flex container, with various margins applied</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-margin-001-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 10px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 14px;
|
||||
width: 20px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- Margin just on one side: -->
|
||||
<div class="container"><div style="margin-top: 3px"></div></div>
|
||||
<div class="container"><div style="margin-right: 3px"></div></div>
|
||||
<div class="container"><div style="margin-bottom: 3px"></div></div>
|
||||
<div class="container"><div style="margin-left: 3px"></div></div>
|
||||
<!-- Margin on all sides: -->
|
||||
<div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
|
||||
<br>
|
||||
|
||||
<!-- "auto" margin on just one side (should be treated as 0): -->
|
||||
<div class="container"><div style="margin-top: auto"></div></div>
|
||||
<div class="container"><div style="margin-right: auto"></div></div>
|
||||
<div class="container"><div style="margin-bottom: auto"></div></div>
|
||||
<div class="container"><div style="margin-left: auto"></div></div>
|
||||
<!-- "auto" margin on all sides (should be treated as 0): -->
|
||||
<div class="container"><div style="margin: auto"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- Margin just on one side: -->
|
||||
<div class="container"><div style="margin-top: 3px"></div></div>
|
||||
<div class="container"><div style="margin-right: 3px"></div></div>
|
||||
<div class="container"><div style="margin-bottom: 3px"></div></div>
|
||||
<div class="container"><div style="margin-left: 3px"></div></div>
|
||||
<!-- Margin on all sides: -->
|
||||
<div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
|
||||
<br>
|
||||
|
||||
<!-- "auto" margin on just one side (should be treated as 0): -->
|
||||
<div class="container"><div style="margin-top: auto"></div></div>
|
||||
<div class="container"><div style="margin-right: auto"></div></div>
|
||||
<div class="container"><div style="margin-bottom: auto"></div></div>
|
||||
<div class="container"><div style="margin-left: auto"></div></div>
|
||||
<!-- "auto" margin on all sides (should be treated as 0): -->
|
||||
<div class="container"><div style="margin: auto"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Test: Static position of abspos children in a row flex container, with various margins applied, and "justify-content: flex-end"</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/flex-abspos-staticpos-margin-002-ref.htm" rel="match">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: flex-end;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 10px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 14px;
|
||||
width: 20px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- Margin just on one side: -->
|
||||
<div class="container"><div style="margin-top: 3px"></div></div>
|
||||
<div class="container"><div style="margin-right: 3px"></div></div>
|
||||
<div class="container"><div style="margin-bottom: 3px"></div></div>
|
||||
<div class="container"><div style="margin-left: 3px"></div></div>
|
||||
<!-- Margin on all sides: -->
|
||||
<div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
|
||||
<br>
|
||||
|
||||
<!-- "auto" margin on just one side (should be treated as 0): -->
|
||||
<div class="container"><div style="margin-top: auto"></div></div>
|
||||
<div class="container"><div style="margin-right: auto"></div></div>
|
||||
<div class="container"><div style="margin-bottom: auto"></div></div>
|
||||
<div class="container"><div style="margin-left: auto"></div></div>
|
||||
<!-- "auto" margin on all sides (should be treated as 0): -->
|
||||
<div class="container"><div style="margin: auto"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- Margin just on one side: -->
|
||||
<div class="container"><div style="margin-top: 3px"></div></div>
|
||||
<div class="container"><div style="margin-right: 3px"></div></div>
|
||||
<div class="container"><div style="margin-bottom: 3px"></div></div>
|
||||
<div class="container"><div style="margin-left: 3px"></div></div>
|
||||
<!-- Margin on all sides: -->
|
||||
<div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
|
||||
<br>
|
||||
|
||||
<!-- "auto" margin on just one side (should be treated as 0): -->
|
||||
<div class="container"><div style="margin-top: auto"></div></div>
|
||||
<div class="container"><div style="margin-right: auto"></div></div>
|
||||
<div class="container"><div style="margin-bottom: auto"></div></div>
|
||||
<div class="container"><div style="margin-left: auto"></div></div>
|
||||
<!-- "auto" margin on all sides (should be treated as 0): -->
|
||||
<div class="container"><div style="margin: auto"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a grid container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-align-self-001-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a static-pos grid container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-align-self-002-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos replaced children in a grid container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-align-self-img-001-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 40px;
|
||||
width: 22px;
|
||||
grid: 2px 30px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: auto"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: normal"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: stretch"></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: baseline"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: last baseline"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: center"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: self-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: self-end"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: flex-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: flex-end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: left"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: right"></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: auto"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: normal"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: stretch"></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: baseline"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: last baseline"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: center"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: self-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: self-end"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: flex-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: flex-end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: left"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: right"></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos replaced children in a static-pos grid container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-align-self-img-002-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 40px;
|
||||
width: 22px;
|
||||
grid: 2px 30px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: auto"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: normal"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: stretch"></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: baseline"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: last baseline"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: center"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: self-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: self-end"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: flex-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: flex-end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: left"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: right"></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: auto"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: normal"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: stretch"></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: baseline"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: last baseline"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: center"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: self-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: self-end"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: flex-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: flex-end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: left"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="align-self: right"></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a RTL grid container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-align-self-rtl-001-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
direction: rtl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos LTR children in a RTL grid container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-align-self-rtl-002-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
direction: rtl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
direction: ltr;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a RTL static-pos grid container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-align-self-rtl-003-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
direction: rtl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos LTR children in a RTL static-pos grid container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-align-self-rtl-004-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
direction: rtl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
direction: ltr;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl grid container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-align-self-vertWM-001-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl grid container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-align-self-vertWM-002-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
writing-mode: horizontal-tb;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl static-pos grid container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-align-self-vertWM-003-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos horizontal-tb children in a static-pos vertical-rl grid container, with various "align-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-align-self-vertWM-004-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 2px 20px 2px / 3px 14px 3px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 0px 2px 0px / 3px 2px 3px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
writing-mode: horizontal-tb;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="align-self: auto"></div></div>
|
||||
<div class="container"><div style="align-self: normal"></div></div>
|
||||
<div class="container"><div style="align-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="align-self: baseline"></div></div>
|
||||
<div class="container"><div style="align-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="align-self: center"></div></div>
|
||||
<div class="container"><div style="align-self: start"></div></div>
|
||||
<div class="container"><div style="align-self: end"></div></div>
|
||||
<div class="container"><div style="align-self: self-start"></div></div>
|
||||
<div class="container"><div style="align-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="align-self: flex-start"></div></div>
|
||||
<div class="container"><div style="align-self: flex-end"></div></div>
|
||||
<div class="container"><div style="align-self: left"></div></div>
|
||||
<div class="container"><div style="align-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a grid container, with various "justify-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-justify-self-001-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a static-pos grid container, with various "justify-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-justify-self-002-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos replaced children in a grid container, with various "justify-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-justify-self-img-001-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
grid: 3px 14px 3px / 2px 30px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: auto"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: normal"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: stretch"></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: baseline"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: last baseline"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: center"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: self-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: self-end"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: flex-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: flex-end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: left"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: right"></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: auto"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: normal"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: stretch"></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: baseline"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: last baseline"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: center"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: self-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: self-end"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: flex-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: flex-end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: left"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: right"></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos replaced children in a static-pos grid container, with various "justify-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-justify-self-img-002-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
grid: 3px 14px 3px / 2px 30px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: auto"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: normal"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: stretch"></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: baseline"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: last baseline"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: center"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: self-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: self-end"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: flex-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: flex-end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: left"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: right"></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: auto"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: normal"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: stretch"></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: baseline"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: last baseline"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: center"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: self-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: self-end"></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: flex-start"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: flex-end"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: left"></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" style="justify-self: right"></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a RTL grid container, with various "justify-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-justify-self-rtl-001-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
direction: rtl;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos LTR children in a RTL grid container, with various "justify-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-justify-self-rtl-002-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
direction: rtl;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
direction: ltr;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a RTL static-pos grid container, with various "justify-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-justify-self-rtl-003-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
direction: rtl;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos LTR children in a RTL static-pos grid container, with various "justify-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-justify-self-rtl-004-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
direction: rtl;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
direction: ltr;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl grid container, with various "justify-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-justify-self-vertWM-001-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl grid container, with various "justify-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-justify-self-vertWM-002-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
position: relative;
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
writing-mode: horizontal-tb;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos children in a vertical-rl static-pos grid container, with various "justify-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-justify-self-vertWM-003-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl static-pos grid container, with various "justify-self" values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="https://drafts.csswg.org/css-align-3/#align-abspos-static" rel="help">
|
||||
<link href="reference/grid-abspos-staticpos-justify-self-vertWM-004-ref.htm" rel="match">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
writing-mode: vertical-rl;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
grid: 3px 14px 3px / 2px 20px 2px;
|
||||
}
|
||||
.small > .container {
|
||||
grid: 3px 2px 3px / 0px 2px 0px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: absolute;
|
||||
writing-mode: horizontal-tb;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div style="justify-self: auto"></div></div>
|
||||
<div class="container"><div style="justify-self: normal"></div></div>
|
||||
<div class="container"><div style="justify-self: stretch"></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div style="justify-self: baseline"></div></div>
|
||||
<div class="container"><div style="justify-self: last baseline"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1 -->
|
||||
<div class="container"><div style="justify-self: center"></div></div>
|
||||
<div class="container"><div style="justify-self: start"></div></div>
|
||||
<div class="container"><div style="justify-self: end"></div></div>
|
||||
<div class="container"><div style="justify-self: self-start"></div></div>
|
||||
<div class="container"><div style="justify-self: self-end"></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2 -->
|
||||
<div class="container"><div style="justify-self: flex-start"></div></div>
|
||||
<div class="container"><div style="justify-self: flex-end"></div></div>
|
||||
<div class="container"><div style="justify-self: left"></div></div>
|
||||
<div class="container"><div style="justify-self: right"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-top: 4px; }
|
||||
.small > .container > * { margin-top: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-top: 4px; }
|
||||
.small > .container > * { margin-top: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 8px }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { /* nothing special */ }
|
||||
.small .alignStart { margin-left: -4px }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { /* nothing special */ }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 8px }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { /* nothing special */ }
|
||||
.small .alignStart { margin-left: -4px }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { /* nothing special */ }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-top: 4px; }
|
||||
.small > .container > * { margin-top: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-top: 4px; }
|
||||
.small > .container > * { margin-top: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue