servo/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-8.xht
Ms2ger 296fa2512b Update web-platform-tests and CSS tests.
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180.
- Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
2017-02-06 22:38:29 +01:00

1095 lines
No EOL
39 KiB
HTML

<!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="https://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.#ref-for-functional-notation-3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.1">+</a>
<a href="https://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="">
<td>
<a href="calc-background-image-gradient-1.xht">calc-background-image-gradient-1</a></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="">
<td>
<a href="calc-background-linear-gradient-1.xht">calc-background-linear-gradient-1</a></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="">
<td>
<a href="calc-background-position-1.xht">calc-background-position-1</a></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="">
<td>
<a href="calc-background-size-1.xht">calc-background-size-1</a></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="">
<td>
<a href="calc-border-radius-1.xht">calc-border-radius-1</a></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="">
<td>
<a href="calc-height-block-1.xht">calc-height-block-1</a></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="">
<td>
<a href="calc-height-table-1.xht">calc-height-table-1</a></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="">
<td>
<a href="calc-in-calc.xht">calc-in-calc</a></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="">
<td>
<a href="calc-in-media-queries-001.xht">calc-in-media-queries-001</a></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="">
<td>
<a href="calc-in-media-queries-002.xht">calc-in-media-queries-002</a></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="">
<td>
<a href="calc-invalid-range-clamping.xht">calc-invalid-range-clamping</a></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="">
<td>
<a href="calc-margin-block-1.xht">calc-margin-block-1</a></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="">
<td>
<a href="calc-max-height-block-1.xht">calc-max-height-block-1</a></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="">
<td>
<a href="calc-max-width-block-1.xht">calc-max-width-block-1</a></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="">
<td>
<a href="calc-max-width-block-intrinsic-1.xht">calc-max-width-block-intrinsic-1</a></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="">
<td>
<a href="calc-min-height-block-1.xht">calc-min-height-block-1</a></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="">
<td>
<a href="calc-min-width-block-1.xht">calc-min-width-block-1</a></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="">
<td>
<a href="calc-min-width-block-intrinsic-1.xht">calc-min-width-block-intrinsic-1</a></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="">
<td>
<a href="calc-offsets-absolute-bottom-1.xht">calc-offsets-absolute-bottom-1</a></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="">
<td>
<a href="calc-offsets-absolute-left-1.xht">calc-offsets-absolute-left-1</a></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="">
<td>
<a href="calc-offsets-absolute-right-1.xht">calc-offsets-absolute-right-1</a></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="">
<td>
<a href="calc-offsets-absolute-top-1.xht">calc-offsets-absolute-top-1</a></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="">
<td>
<a href="calc-offsets-relative-bottom-1.xht">calc-offsets-relative-bottom-1</a></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="">
<td>
<a href="calc-offsets-relative-left-1.xht">calc-offsets-relative-left-1</a></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="">
<td>
<a href="calc-offsets-relative-right-1.xht">calc-offsets-relative-right-1</a></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="">
<td>
<a href="calc-offsets-relative-top-1.xht">calc-offsets-relative-top-1</a></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="">
<td>
<a href="calc-padding-block-1.xht">calc-padding-block-1</a></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="">
<td>
<a href="calc-parenthesis-stack.xht">calc-parenthesis-stack</a></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="">
<td>
<a href="calc-text-indent-1.xht">calc-text-indent-1</a></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="">
<td>
<a href="calc-text-indent-intrinsic-1.xht">calc-text-indent-intrinsic-1</a></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="">
<td>
<a href="calc-transform-origin-1.xht">calc-transform-origin-1</a></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="">
<td>
<a href="calc-vertical-align-1.xht">calc-vertical-align-1</a></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="">
<td>
<a href="calc-width-block-1.xht">calc-width-block-1</a></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="">
<td>
<a href="calc-width-block-intrinsic-1.xht">calc-width-block-intrinsic-1</a></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="">
<td>
<a href="calc-width-table-auto-1.xht">calc-width-table-auto-1</a></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="">
<td>
<a href="calc-width-table-fixed-1.xht">calc-width-table-fixed-1</a></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="">
<td>
<a href="mq-calc-001.xht">mq-calc-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.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="">
<td>
<a href="mq-calc-002.xht">mq-calc-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.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="">
<td>
<a href="mq-calc-003.xht">mq-calc-003</a></td>
<td><a href="reference/ref-filled-green-100px-square.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="">
<td>
<a href="mq-calc-004.xht">mq-calc-004</a></td>
<td><a href="reference/ref-filled-green-100px-square.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="">
<td>
<a href="mq-calc-005.xht">mq-calc-005</a></td>
<td><a href="reference/ref-filled-green-100px-square.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-37f70430">
<!-- 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.#ref-for-angle-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-frequency-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-funcdef-attr-1">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-funcdef-calc-3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-funcdef-calc-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-funcdef-calc-5">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-funcdef-calc-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-integer-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-length-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-number-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-percentage-value-17">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-rem-5">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-time-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.1.1">+</a>
<a href="https://www.w3.org/TR/css3-values/#calc-syntax">8.1.1 Syntax</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-comb-one-10">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-comb-one-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-comb-one-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-comb-one-8">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-comb-one-9">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-funcdef-calc-10">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-funcdef-calc-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-funcdef-calc-8">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-funcdef-calc-9">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-mult-zero-plus-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-mult-zero-plus-3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-number-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-number-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-percentage-value-18">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-typedef-calc-product-1">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-typedef-calc-product-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-typedef-calc-sum-1">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-typedef-calc-sum-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-typedef-calc-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-typedef-calc-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.1.#ref-for-typedef-dimension-3">
<!-- 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.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.1.2">+</a>
<a href="https://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.#ref-for-angle-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-angle-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-cm-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-deg-3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-frequency-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-funcdef-attr-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-funcdef-calc-11">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-funcdef-calc-12">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-funcdef-calc-13">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-integer-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-integer-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-integer-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-integer-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-integer-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-integer-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-integer-value-9">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-length-value-10">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-length-value-11">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-length-value-9">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-number-value-10">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-number-value-11">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-number-value-12">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-number-value-13">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-number-value-14">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-number-value-15">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-number-value-16">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-number-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-number-value-9">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-percentage-value-19">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-percentage-value-20">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-percentage-value-21">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-resolved-type-1">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-resolved-type-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-time-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.2.#ref-for-typedef-type-or-unit-1">
<!-- 0 tests -->
</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="https://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-77f45fca">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.3.#ref-for-funcdef-calc-14">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.3.#ref-for-funcdef-calc-15">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.3.#ref-for-funcdef-calc-16">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.3.#ref-for-funcdef-calc-17">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.1.4">+</a>
<a href="https://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-5b14c23c">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.4.#ref-for-funcdef-calc-18">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.4.#ref-for-funcdef-calc-19">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.4.#ref-for-funcdef-calc-20">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.1.5">+</a>
<a href="https://www.w3.org/TR/css3-values/#calc-serialize">8.1.5 Serialization</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.5.#ref-for-funcdef-calc-21">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.2">+</a>
<a href="https://www.w3.org/TR/css3-values/#attr-notation">8.2 Attribute References: attr()</a></th></tr>
<!-- 15 tests -->
<tr id="attr-color-invalid-cast-8.2" class="">
<td>
<a href="attr-color-invalid-cast.xht">attr-color-invalid-cast</a></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.2" class="">
<td>
<a href="attr-color-invalid-fallback.xht">attr-color-invalid-fallback</a></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.2" class="">
<td>
<a href="attr-color-valid.xht">attr-color-valid</a></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.2" class="">
<td>
<a href="attr-invalid-type-001.xht">attr-invalid-type-001</a></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.2" class="">
<td>
<a href="attr-invalid-type-002.xht">attr-invalid-type-002</a></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.2" class="">
<td>
<a href="attr-invalid-type-003.xht">attr-invalid-type-003</a></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.2" class="">
<td>
<a href="attr-length-invalid-cast.xht">attr-length-invalid-cast</a></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.2" class="">
<td>
<a href="attr-length-invalid-fallback.xht">attr-length-invalid-fallback</a></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.2" class="">
<td>
<a href="attr-length-valid.xht">attr-length-valid</a></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.2" class="">
<td>
<a href="attr-length-valid-zero.xht">attr-length-valid-zero</a></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.2" class="">
<td>
<a href="attr-length-valid-zero-nofallback.xht">attr-length-valid-zero-nofallback</a></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.2" class="">
<td>
<a href="attr-px-invalid-cast.xht">attr-px-invalid-cast</a></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.2" class="">
<td>
<a href="attr-px-invalid-fallback.xht">attr-px-invalid-fallback</a></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.2" class="">
<td>
<a href="attr-px-valid.xht">attr-px-valid</a></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.2" class="">
<td>
<a href="initial-background-color.xht">initial-background-color</a></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.2.#example-0366e27a">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#example-4771a1ff">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#funcdef-attr">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-angle-value-9">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-dimension-8">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-frequency-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-funcdef-attr-10">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-funcdef-attr-11">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-funcdef-attr-3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-funcdef-attr-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-funcdef-attr-5">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-funcdef-attr-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-funcdef-attr-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-funcdef-attr-8">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-funcdef-attr-9">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-integer-value-10">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-length-value-12">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-number-value-17">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-px-10">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-px-11">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-string-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-string-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-time-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-typedef-attr-fallback-1">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-typedef-attr-fallback-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-typedef-attr-fallback-3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-typedef-attr-fallback-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-typedef-attr-name-1">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-typedef-attr-name-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-typedef-type-or-unit-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-typedef-type-or-unit-3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-typedef-type-or-unit-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-typedef-type-or-unit-5">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#typedef-attr-fallback">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#typedef-attr-name">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#typedef-type-or-unit">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>