Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-24 09:04:33 +01:00
Code Issues Projects Releases Packages Wiki Activity
servo/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-8.xht

792 lines
No EOL
32 KiB
HTML
Raw Blame History

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Functional Notations - CSS Values and Units 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 Values and Units Module Level 3 CR Test Suite</h1>
<h2>Functional Notations (66 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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="http://www.w3.org/TR/css3-values/#functional-notations">8 Functional Notations</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s8.#example-9de05e52">
<!-- 0 tests -->
</tbody>
<tbody id="s8.#functional-notation">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.1">+</a>
<a href="http://www.w3.org/TR/css3-values/#calc-notation">8.1 Mathematical Expressions: calc()</a></th></tr>
<!-- 50 tests -->
<tr id="calc-background-image-gradient-1-8.1" class="primary">
<td><strong>
<a href="calc-background-image-gradient-1.xht">calc-background-image-gradient-1</a></strong></td>
<td><a href="reference/calc-background-image-gradient-1-ref.xht">=</a> </td>
<td></td>
<td>Test for calc() on background-image gradients
</td>
</tr>
<tr id="calc-background-linear-gradient-1-8.1" class="primary">
<td><strong>
<a href="calc-background-linear-gradient-1.xht">calc-background-linear-gradient-1</a></strong></td>
<td><a href="reference/calc-background-linear-gradient-1-ref.xht">=</a> </td>
<td></td>
<td>Support calc() on gradient stop positions
</td>
</tr>
<tr id="calc-background-position-1-8.1" class="primary">
<td><strong>
<a href="calc-background-position-1.xht">calc-background-position-1</a></strong></td>
<td><a href="reference/calc-background-position-1-ref.xht">=</a> </td>
<td></td>
<td>Test for calc() on background-position
</td>
</tr>
<tr id="calc-background-size-1-8.1" class="primary">
<td><strong>
<a href="calc-background-size-1.xht">calc-background-size-1</a></strong></td>
<td><a href="reference/calc-background-size-1-ref.xht">=</a> </td>
<td></td>
<td>Test for calc() on background-size
</td>
</tr>
<tr id="calc-border-radius-1-8.1" class="primary">
<td><strong>
<a href="calc-border-radius-1.xht">calc-border-radius-1</a></strong></td>
<td><a href="reference/calc-border-radius-1-ref.xht">=</a> </td>
<td></td>
<td>test for border-radius: calc()
</td>
</tr>
<tr id="calc-height-block-1-8.1" class="primary">
<td><strong>
<a href="calc-height-block-1.xht">calc-height-block-1</a></strong></td>
<td><a href="reference/calc-height-block-1-ref.xht">=</a> </td>
<td></td>
<td>Test for height:calc() on blocks
</td>
</tr>
<tr id="calc-height-table-1-8.1" class="primary">
<td><strong>
<a href="calc-height-table-1.xht">calc-height-table-1</a></strong></td>
<td><a href="reference/calc-height-table-1-ref.xht">=</a> </td>
<td></td>
<td>Test that height:calc() with no percentages has an effect on inner table elements
</td>
</tr>
<tr id="calc-in-calc-8.1" class="primary">
<td><strong>
<a href="calc-in-calc.xht">calc-in-calc</a></strong></td>
<td><a href="reference/all-green.xht">=</a> </td>
<td></td>
<td>Calc() inside calc()
<ul class="assert">
<li>The calc() function notation is allowed inside a calc() notation.</li>
</ul>
</td>
</tr>
<tr id="calc-in-media-queries-001-8.1" class="primary">
<td><strong>
<a href="calc-in-media-queries-001.xht">calc-in-media-queries-001</a></strong></td>
<td><a href="reference/all-green.xht">=</a> </td>
<td></td>
<td>Calc function inside media queries
<ul class="assert">
<li>The calc() expression is supported in the min-width media query.</li>
</ul>
</td>
</tr>
<tr id="calc-in-media-queries-002-8.1" class="primary">
<td><strong>
<a href="calc-in-media-queries-002.xht">calc-in-media-queries-002</a></strong></td>
<td><a href="reference/all-green.xht">=</a> </td>
<td></td>
<td>Calc function inside media queries
<ul class="assert">
<li>The calc() expression is supported in the min-width media query properly (=with range clamping).</li>
</ul>
</td>
</tr>
<tr id="calc-invalid-range-clamping-8.1" class="primary">
<td><strong>
<a href="calc-invalid-range-clamping.xht">calc-invalid-range-clamping</a></strong></td>
<td><a href="reference/200-200-green.xht">=</a> </td>
<td></td>
<td>Range clamping into calc() expressions
<ul class="assert">
<li>A calc expression can evaluate to a value which is outside the validity range. If it does, this value must be clamped into the range. The declaration must not be ignored.</li>
</ul>
</td>
</tr>
<tr id="calc-margin-block-1-8.1" class="primary">
<td><strong>
<a href="calc-margin-block-1.xht">calc-margin-block-1</a></strong></td>
<td><a href="reference/calc-margin-block-1-ref.xht">=</a> </td>
<td></td>
<td>Test of margin-*: calc()
</td>
</tr>
<tr id="calc-max-height-block-1-8.1" class="primary">
<td><strong>
<a href="calc-max-height-block-1.xht">calc-max-height-block-1</a></strong></td>
<td><a href="reference/calc-max-height-block-1-ref.xht">=</a> </td>
<td></td>
<td>Test for max-height:calc() on blocks
</td>
</tr>
<tr id="calc-max-width-block-1-8.1" class="primary">
<td><strong>
<a href="calc-max-width-block-1.xht">calc-max-width-block-1</a></strong></td>
<td><a href="reference/calc-width-block-1-ref.xht">=</a> </td>
<td></td>
<td>max-width: calc() on blocks
</td>
</tr>
<tr id="calc-max-width-block-intrinsic-1-8.1" class="primary">
<td><strong>
<a href="calc-max-width-block-intrinsic-1.xht">calc-max-width-block-intrinsic-1</a></strong></td>
<td><a href="reference/calc-max-width-block-intrinsic-1-ref.xht">=</a> </td>
<td></td>
<td>intrinsic width of max-width: calc() on blocks
</td>
</tr>
<tr id="calc-min-height-block-1-8.1" class="primary">
<td><strong>
<a href="calc-min-height-block-1.xht">calc-min-height-block-1</a></strong></td>
<td><a href="reference/calc-height-block-1-ref.xht">=</a> </td>
<td></td>
<td>Test for min-height:calc() on blocks
</td>
</tr>
<tr id="calc-min-width-block-1-8.1" class="primary">
<td><strong>
<a href="calc-min-width-block-1.xht">calc-min-width-block-1</a></strong></td>
<td><a href="reference/calc-width-block-1-ref.xht">=</a> </td>
<td></td>
<td>min-width: calc() on blocks
</td>
</tr>
<tr id="calc-min-width-block-intrinsic-1-8.1" class="primary">
<td><strong>
<a href="calc-min-width-block-intrinsic-1.xht">calc-min-width-block-intrinsic-1</a></strong></td>
<td><a href="reference/calc-min-width-block-intrinsic-1-ref.xht">=</a> </td>
<td></td>
<td>intrinsic width of min-width: calc() on blocks
</td>
</tr>
<tr id="calc-offsets-absolute-bottom-1-8.1" class="primary">
<td><strong>
<a href="calc-offsets-absolute-bottom-1.xht">calc-offsets-absolute-bottom-1</a></strong></td>
<td><a href="reference/calc-offsets-absolute-top-1-ref.xht">=</a> </td>
<td></td>
<td>Test for bottom:calc() on absolutely positioned elements
</td>
</tr>
<tr id="calc-offsets-absolute-left-1-8.1" class="primary">
<td><strong>
<a href="calc-offsets-absolute-left-1.xht">calc-offsets-absolute-left-1</a></strong></td>
<td><a href="reference/calc-offsets-relative-left-1-ref.xht">=</a> </td>
<td></td>
<td>Test for left:calc() on absolutely positioned elements
</td>
</tr>
<tr id="calc-offsets-absolute-right-1-8.1" class="primary">
<td><strong>
<a href="calc-offsets-absolute-right-1.xht">calc-offsets-absolute-right-1</a></strong></td>
<td><a href="reference/calc-offsets-relative-left-1-ref.xht">=</a> </td>
<td></td>
<td>Test for right:calc() on absolutely positioned elements
</td>
</tr>
<tr id="calc-offsets-absolute-top-1-8.1" class="primary">
<td><strong>
<a href="calc-offsets-absolute-top-1.xht">calc-offsets-absolute-top-1</a></strong></td>
<td><a href="reference/calc-offsets-absolute-top-1-ref.xht">=</a> </td>
<td></td>
<td>Test for top:calc() on absolutely positioned elements
</td>
</tr>
<tr id="calc-offsets-relative-bottom-1-8.1" class="primary">
<td><strong>
<a href="calc-offsets-relative-bottom-1.xht">calc-offsets-relative-bottom-1</a></strong></td>
<td><a href="reference/calc-offsets-relative-top-1-ref.xht">=</a> </td>
<td></td>
<td>Test for bottom:calc() on relatively positioned elements
</td>
</tr>
<tr id="calc-offsets-relative-left-1-8.1" class="primary">
<td><strong>
<a href="calc-offsets-relative-left-1.xht">calc-offsets-relative-left-1</a></strong></td>
<td><a href="reference/calc-offsets-relative-left-1-ref.xht">=</a> </td>
<td></td>
<td>Test for left:calc() on relatively positioned elements
</td>
</tr>
<tr id="calc-offsets-relative-right-1-8.1" class="primary">
<td><strong>
<a href="calc-offsets-relative-right-1.xht">calc-offsets-relative-right-1</a></strong></td>
<td><a href="reference/calc-offsets-relative-left-1-ref.xht">=</a> </td>
<td></td>
<td>Test for right:calc() on relatively positioned elements
</td>
</tr>
<tr id="calc-offsets-relative-top-1-8.1" class="primary">
<td><strong>
<a href="calc-offsets-relative-top-1.xht">calc-offsets-relative-top-1</a></strong></td>
<td><a href="reference/calc-offsets-relative-top-1-ref.xht">=</a> </td>
<td></td>
<td>Test for top:calc() on relatively positioned elements
</td>
</tr>
<tr id="calc-padding-block-1-8.1" class="primary">
<td><strong>
<a href="calc-padding-block-1.xht">calc-padding-block-1</a></strong></td>
<td><a href="reference/calc-padding-block-1-ref.xht">=</a> </td>
<td></td>
<td>Test of padding-*: calc()
</td>
</tr>
<tr id="calc-parenthesis-stack-8.1" class="primary">
<td><strong>
<a href="calc-parenthesis-stack.xht">calc-parenthesis-stack</a></strong></td>
<td><a href="reference/all-green.xht">=</a> </td>
<td></td>
<td>Calc() inside calc()
<ul class="assert">
<li>The calc() function notation is allowed inside a calc() notation.</li>
</ul>
</td>
</tr>
<tr id="calc-text-indent-1-8.1" class="primary">
<td><strong>
<a href="calc-text-indent-1.xht">calc-text-indent-1</a></strong></td>
<td><a href="reference/calc-text-indent-1-ref.xht">=</a> </td>
<td></td>
<td>text-indent: calc() on blocks
</td>
</tr>
<tr id="calc-text-indent-intrinsic-1-8.1" class="primary">
<td><strong>
<a href="calc-text-indent-intrinsic-1.xht">calc-text-indent-intrinsic-1</a></strong></td>
<td><a href="reference/calc-text-indent-intrinsic-1-ref.xht">=</a> </td>
<td></td>
<td>intrinsic width of text-indent: calc() on blocks
</td>
</tr>
<tr id="calc-transform-origin-1-8.1" class="primary">
<td><strong>
<a href="calc-transform-origin-1.xht">calc-transform-origin-1</a></strong></td>
<td><a href="reference/calc-transform-origin-1-ref.xht">=</a> </td>
<td></td>
<td>Test for calc() on transform-origin
</td>
</tr>
<tr id="calc-vertical-align-1-8.1" class="primary">
<td><strong>
<a href="calc-vertical-align-1.xht">calc-vertical-align-1</a></strong></td>
<td><a href="reference/calc-vertical-align-1-ref.xht">=</a> </td>
<td></td>
<td>Test for vertical-align:calc()
</td>
</tr>
<tr id="calc-width-block-1-8.1" class="primary">
<td><strong>
<a href="calc-width-block-1.xht">calc-width-block-1</a></strong></td>
<td><a href="reference/calc-width-block-1-ref.xht">=</a> </td>
<td></td>
<td>width: calc() on blocks
</td>
</tr>
<tr id="calc-width-block-intrinsic-1-8.1" class="primary">
<td><strong>
<a href="calc-width-block-intrinsic-1.xht">calc-width-block-intrinsic-1</a></strong></td>
<td><a href="reference/calc-width-block-intrinsic-1-ref.xht">=</a> </td>
<td></td>
<td>intrinsic width of width: calc() on blocks
</td>
</tr>
<tr id="calc-width-table-auto-1-8.1" class="primary">
<td><strong>
<a href="calc-width-table-auto-1.xht">calc-width-table-auto-1</a></strong></td>
<td><a href="reference/calc-width-table-auto-1-ref.xht">=</a> </td>
<td></td>
<td>width: calc() on table-layout: auto tables
</td>
</tr>
<tr id="calc-width-table-fixed-1-8.1" class="primary">
<td><strong>
<a href="calc-width-table-fixed-1.xht">calc-width-table-fixed-1</a></strong></td>
<td><a href="reference/calc-width-table-fixed-1-ref.xht">=</a> </td>
<td></td>
<td>width: calc() on table-layout: auto tables
</td>
</tr>
<tr id="mq-calc-001-8.1" class="primary">
<td><strong>
<a href="mq-calc-001.xht">mq-calc-001</a></strong></td>
<td><a href="reference/mq-calc-001-ref.xht">=</a> </td>
<td></td>
<td>support for calc in Media Queries
<ul class="assert">
<li>calc can be used in Media Queries</li>
</ul>
</td>
</tr>
<tr id="mq-calc-002-8.1" class="primary">
<td><strong>
<a href="mq-calc-002.xht">mq-calc-002</a></strong></td>
<td><a href="reference/mq-calc-001-ref.xht">=</a> </td>
<td></td>
<td>evaluation of em in calc in Media Queries
<ul class="assert">
<li>The size in pixels of the 'em' unit used in calc inside a media query does not depend on declarations and use the initial value.</li>
</ul>
</td>
</tr>
<tr id="mq-calc-003-8.1" class="primary">
<td><strong>
<a href="mq-calc-003.xht">mq-calc-003</a></strong></td>
<td><a href="reference/mq-calc-001-ref.xht">=</a> </td>
<td></td>
<td>evaluation of ex in calc in Media Queries
<ul class="assert">
<li>The size in pixels of the 'ex' unit used in calc inside a media query does not depend on declarations and use the initial value.</li>
</ul>
</td>
</tr>
<tr id="mq-calc-004-8.1" class="primary">
<td><strong>
<a href="mq-calc-004.xht">mq-calc-004</a></strong></td>
<td><a href="reference/mq-calc-001-ref.xht">=</a> </td>
<td></td>
<td>evaluation of ch in calc in Media Queries
<ul class="assert">
<li>The size in pixels of the 'ch' unit used in calc inside a media query does not depend on declarations and use the initial value.</li>
</ul>
</td>
</tr>
<tr id="mq-calc-005-8.1" class="primary">
<td><strong>
<a href="mq-calc-005.xht">mq-calc-005</a></strong></td>
<td><a href="reference/mq-calc-001-ref.xht">=</a> </td>
<td></td>
<td>evaluation of rem in calc in Media Queries
<ul class="assert">
<li>The size in pixels of the 'rem' unit used in calc inside a media query does not depend on declarations and use the initial value.</li>
</ul>
</td>
</tr>
<tr id="shape-outside-circle-010-8.1" class="dom script">
<td>
<a href="shape-outside-circle-010.xht">shape-outside-circle-010</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Shape Outside Circle args - calc() values
<ul class="assert">
<li>A circle's arguments may be in calc() values.</li>
</ul>
</td>
</tr>
<tr id="shape-outside-circle-011-8.1" class="dom script">
<td>
<a href="shape-outside-circle-011.xht">shape-outside-circle-011</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Shape Outside Circle position args - calc() values
<ul class="assert">
<li>A circle's &lt;position&gt; arguments may be in calc() values.</li>
</ul>
</td>
</tr>
<tr id="shape-outside-ellipse-010-8.1" class="dom script">
<td>
<a href="shape-outside-ellipse-010.xht">shape-outside-ellipse-010</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Shape Outside Ellipse args - calc() values
<ul class="assert">
<li>An ellipse's arguments may be in calc() values.</li>
</ul>
</td>
</tr>
<tr id="shape-outside-ellipse-011-8.1" class="dom script">
<td>
<a href="shape-outside-ellipse-011.xht">shape-outside-ellipse-011</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Shape Outside Ellipse position args - calc() values
<ul class="assert">
<li>An ellipse's &lt;position&gt; arguments may be in calc() values.</li>
</ul>
</td>
</tr>
<tr id="shape-outside-inset-008-8.1" class="dom script">
<td>
<a href="shape-outside-inset-008.xht">shape-outside-inset-008</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Shape Outside Inset Args - calc() values
<ul class="assert">
<li>An inset's arguments may be in calc() values.</li>
</ul>
</td>
</tr>
<tr id="shape-outside-inset-009-8.1" class="dom script">
<td>
<a href="shape-outside-inset-009.xht">shape-outside-inset-009</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Shape Outside Inset round args - calc() values
<ul class="assert">
<li>An inset's radial component arguments may be in calc() values.</li>
</ul>
</td>
</tr>
<tr id="shape-outside-polygon-006-8.1" class="dom script">
<td>
<a href="shape-outside-polygon-006.xht">shape-outside-polygon-006</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Shape Outside Polygon args - calc() values
<ul class="assert">
<li>A polygon's arguments may be in calc() values.</li>
</ul>
</td>
</tr>
<tr id="vh-calc-support-8.1" class="">
<td>
<a href="vh-calc-support.xht">vh-calc-support</a></td>
<td><a href="reference/all-green.xht">=</a> </td>
<td></td>
<td>Viewport units are supported inside calc expressions.
<ul class="assert">
<li>Check that viewport units add correctly to pixels in calc() expressions</li>
</ul>
</td>
</tr>
<tr id="vh-calc-support-pct-8.1" class="">
<td>
<a href="vh-calc-support-pct.xht">vh-calc-support-pct</a></td>
<td><a href="reference/all-green.xht">=</a> </td>
<td></td>
<td>Viewport units are supported inside calc expressions.
<ul class="assert">
<li>Check that viewport units add correctly to percentages in calc() expressions</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s8.1.#example-0bd12a8e">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#example-2b4e561f">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#example-6e868f9c">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#example-776de6b9">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#example-f570e599">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#funcdef-calc">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.1.1">+</a>
<a href="http://www.w3.org/TR/css3-values/#calc-syntax">8.1.1 Syntax</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#typedef-calc-product">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#typedef-calc-sum">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#typedef-calc-value">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#typedef-dimension">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.1.2">+</a>
<a href="http://www.w3.org/TR/css3-values/#calc-type-checking">8.1.2 Type Checking</a></th></tr>
<!-- 1 tests -->
<tr id="calc-unit-analysis-8.1.2" class="script">
<td>
<a href="calc-unit-analysis.xht">calc-unit-analysis</a></td>
<td></td>
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Variables Allowed Syntax
</td>
</tr>
</tbody>
<tbody id="s8.1.2.#resolved-type">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.1.3">+</a>
<a href="http://www.w3.org/TR/css3-values/#calc-computed-value">8.1.3 Computed Value</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.3.#example-240b0ace">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.1.4">+</a>
<a href="http://www.w3.org/TR/css3-values/#calc-range">8.1.4 Range Checking</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.4.#example-02a3b71f">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.2">+</a>
<a href="http://www.w3.org/TR/css3-values/#toggle-notation">8.2 Toggling Between Values: toggle()</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#example-17046e65">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#example-349c53dd">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#example-851607de">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#example-9492bba0">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#funcdef-toggle">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#typedef-toggle-value">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.3">+</a>
<a href="http://www.w3.org/TR/css3-values/#attr-notation">8.3 Attribute References: attr()</a></th></tr>
<!-- 15 tests -->
<tr id="attr-color-invalid-cast-8.3" class="primary">
<td><strong>
<a href="attr-color-invalid-cast.xht">attr-color-invalid-cast</a></strong></td>
<td><a href="reference/200-200-green.xht">=</a> </td>
<td></td>
<td>Attribute references (colors)
<ul class="assert">
<li>Invalid color values in referenced attributes are replaced by the fallback value</li>
</ul>
</td>
</tr>
<tr id="attr-color-invalid-fallback-8.3" class="primary">
<td><strong>
<a href="attr-color-invalid-fallback.xht">attr-color-invalid-fallback</a></strong></td>
<td><a href="reference/200-200-green.xht">=</a> </td>
<td></td>
<td>Attribute references (colors)
<ul class="assert">
<li>When the fallback value of an attr() function is invalid, the delcaration is ignored.</li>
</ul>
</td>
</tr>
<tr id="attr-color-valid-8.3" class="primary">
<td><strong>
<a href="attr-color-valid.xht">attr-color-valid</a></strong></td>
<td><a href="reference/200-200-green.xht">=</a> </td>
<td></td>
<td>Attribute references (colors)
<ul class="assert">
<li>The value of the reference attribute is used correctly in the layout when it's a color.</li>
</ul>
</td>
</tr>
<tr id="attr-invalid-type-001-8.3" class="primary">
<td><strong>
<a href="attr-invalid-type-001.xht">attr-invalid-type-001</a></strong></td>
<td><a href="reference/200-200-green.xht">=</a> </td>
<td></td>
<td>Attribute references (types)
<ul class="assert">
<li>When the type of an att() function is known and unexpected, the declaration is ingored</li>
</ul>
</td>
</tr>
<tr id="attr-invalid-type-002-8.3" class="primary">
<td><strong>
<a href="attr-invalid-type-002.xht">attr-invalid-type-002</a></strong></td>
<td><a href="reference/200-200-green.xht">=</a> </td>
<td></td>
<td>Attribute references (types)
<ul class="assert">
<li>When the type of an att() function is known and unexpected, the declaration is ignored</li>
</ul>
</td>
</tr>
<tr id="attr-invalid-type-003-8.3" class="primary">
<td><strong>
<a href="attr-invalid-type-003.xht">attr-invalid-type-003</a></strong></td>
<td><a href="reference/200-200-green.xht">=</a> </td>
<td></td>
<td>Attribute references (types)
<ul class="assert">
<li>When the type of an att() function is known and unexpected, the declaration is ignored</li>
</ul>
</td>
</tr>
<tr id="attr-length-invalid-cast-8.3" class="primary">
<td><strong>
<a href="attr-length-invalid-cast.xht">attr-length-invalid-cast</a></strong></td>
<td><a href="reference/200-200-green.xht">=</a> </td>
<td></td>
<td>Attribute references (length)
<ul class="assert">
<li>When the value of referenced attribute isn't a valid length, the fallback value is unsed instead.</li>
</ul>
</td>
</tr>
<tr id="attr-length-invalid-fallback-8.3" class="primary">
<td><strong>
<a href="attr-length-invalid-fallback.xht">attr-length-invalid-fallback</a></strong></td>
<td><a href="reference/200-200-green.xht">=</a> </td>
<td></td>
<td>Attribute references (length)
<ul class="assert">
<li>When the attr() fallback is an invalid length, the delcaration is correctly ignored.</li>
</ul>
</td>
</tr>
<tr id="attr-length-valid-8.3" class="primary">
<td><strong>
<a href="attr-length-valid.xht">attr-length-valid</a></strong></td>
<td><a href="reference/200-200-green.xht">=</a> </td>
<td></td>
<td>Attribute references (length)
<ul class="assert">
<li>The value of referenced attribute is used correctly as a length.</li>
</ul>
</td>
</tr>
<tr id="attr-length-valid-zero-8.3" class="primary">
<td><strong>
<a href="attr-length-valid-zero.xht">attr-length-valid-zero</a></strong></td>
<td><a href="reference/200-200-green.xht">=</a> </td>
<td></td>
<td>Attribute references (length)
<ul class="assert">
<li>The value of referenced attribute is used correctly as a length (even if it's 0).</li>
</ul>
</td>
</tr>
<tr id="attr-length-valid-zero-nofallback-8.3" class="primary">
<td><strong>
<a href="attr-length-valid-zero-nofallback.xht">attr-length-valid-zero-nofallback</a></strong></td>
<td><a href="reference/200-200-green.xht">=</a> </td>
<td></td>
<td>Attribute references (length)
<ul class="assert">
<li>The value of referenced attribute is used correctly as a length (even if it's 0).</li>
</ul>
</td>
</tr>
<tr id="attr-px-invalid-cast-8.3" class="primary">
<td><strong>
<a href="attr-px-invalid-cast.xht">attr-px-invalid-cast</a></strong></td>
<td><a href="reference/200-200-green.xht">=</a> </td>
<td></td>
<td>Attributes references (pixels)
<ul class="assert">
<li>When the value of the referenced attribute is not a pixel value, the fallback value is used instead.</li>
</ul>
</td>
</tr>
<tr id="attr-px-invalid-fallback-8.3" class="primary">
<td><strong>
<a href="attr-px-invalid-fallback.xht">attr-px-invalid-fallback</a></strong></td>
<td><a href="reference/200-200-green.xht">=</a> </td>
<td></td>
<td>Attribute references (pixels)
<ul class="assert">
<li>When the fallback of a pixel attribute reference is invalid, the declaration is ignored.</li>
</ul>
</td>
</tr>
<tr id="attr-px-valid-8.3" class="primary">
<td><strong>
<a href="attr-px-valid.xht">attr-px-valid</a></strong></td>
<td><a href="reference/200-200-green.xht">=</a> </td>
<td></td>
<td>Attribute references (pixels)
<ul class="assert">
<li>Attribute references for pixel values are replaced correctly at computed time.</li>
</ul>
</td>
</tr>
<tr id="initial-background-color-8.3" class="primary">
<td><strong>
<a href="initial-background-color.xht">initial-background-color</a></strong></td>
<td><a href="reference/all-green.xht">=</a> </td>
<td></td>
<td>Initial property and background-color
<ul class="assert">
<li>The initial keyword is supported on background-color.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s8.3.#example-0366e27a">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#example-4771a1ff">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#funcdef-attr">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#typedef-attr-fallback">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#typedef-attr-name">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#typedef-type-or-unit">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>
Reference in a new issue View git blame Copy permalink