diff options
Diffstat (limited to 'testing/web-platform/tests/css/CSS2/tables/separated-border-model-004d.xht')
-rw-r--r-- | testing/web-platform/tests/css/CSS2/tables/separated-border-model-004d.xht | 119 |
1 files changed, 119 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/CSS2/tables/separated-border-model-004d.xht b/testing/web-platform/tests/css/CSS2/tables/separated-border-model-004d.xht new file mode 100644 index 0000000000..7269e1f97d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/tables/separated-border-model-004d.xht @@ -0,0 +1,119 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: width of CSS table in border-collapse separate model</title> + + <link rel="author" title="GĂ©rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model" /> + <link rel="match" href="separated-border-model-004d-ref.xht" /> + + <meta content="The width of a CSS table is the distance from the left inner padding edge to the right inner padding edge (including the table border-spacing but excluding table padding and table borders)." name="assert" /> + + <style type="text/css"><![CDATA[ + div#table-width-set + { + background-color: green; + border-left: white solid 32px; + border-top: white solid 8px; + border-spacing: 17px 0; + display: table; + padding: 0px; + table-layout: fixed; + width: 100px; + /* + The set width (100px) of this CSS table is larger than sum of columns plus + border spacing + + 17px (left-most border-spacing) + + + 16px (div#td's width) + + + 17px (right-most border-spacing) + ====== + 50px : sum of columns plus border spacing + + 100px (width of table) + - + 50px (sum of columns plus border spacing) + ====== + 50px : such extra (exceeding) 50px width will be distributed + over the columns, therefore given to the unique cell of such + div#table-width-set . + */ + } + + div.tr {display: table-row;} + + div.td + { + display: table-cell; + height: 100px; + width: 16px; + } + + div#table-sum-of-columns + { + background-color: green; + border-left: white solid 32px; + border-top: white solid 8px; + border-spacing: 42px 0; + display: table; + padding: 0px; + table-layout: fixed; + width: 9px; + + /* + The width of a CSS table is given by the greater of the value of + the 'width' property as set for the table element and the sum of the columns' + width (plus border spacing): + + max(set width, sum of columns width plus border spacing) + + The set width (9px) is smaller than sum of columns (plus border spacing) + + 42px (left-most border-spacing) + + + 16px (div.td's width) + + + 42px (right-most border-spacing) + ====== + 100px : sum of columns plus border spacing + */ + } + + div#reference + { + background-color: green; + height: 100px; + left: 32px; /* equal to the tables' border-left */ + position: relative; + top: 8px; /* equal to the tables' border-top */ + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there are 3 filled green squares with the <strong>same width</strong>.</p> + + <div id="table-width-set"> + <div class="tr"> + <div class="td"></div> + </div> + </div> + + <div id="table-sum-of-columns"> + <div class="tr"> + <div class="td"></div> + </div> + </div> + + <div id="reference"></div> + + </body> +</html>
\ No newline at end of file |