diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-display')
384 files changed, 11571 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-display/META.yml b/testing/web-platform/tests/css/css-display/META.yml new file mode 100644 index 0000000000..4e70cb4630 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/META.yml @@ -0,0 +1,5 @@ +spec: https://drafts.csswg.org/css-display/ +suggested_reviewers: + - kojiishi + - tabatkins + - fantasai diff --git a/testing/web-platform/tests/css/css-display/accessibility/display-contents-role-and-label.html b/testing/web-platform/tests/css/css-display/accessibility/display-contents-role-and-label.html new file mode 100644 index 0000000000..4a06d0ff5b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/accessibility/display-contents-role-and-label.html @@ -0,0 +1,302 @@ +<!doctype html> +<html> +<head> + <title>Testing accessibility of display: contents</title> + <link rel="help" href="https://drafts.csswg.org/css-display-4/#box-generation"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> + <script src="/wai-aria/scripts/aria-utils.js"></script> +</head> +<body> + + <!-- Dec 2023 notes for "display: contents" testing: + - Per CSS spec, setting "display: contents" must not alter an element's semantics (https://www.w3.org/TR/css-display-3/#valdef-display-contents): + "As only the box tree is affected, any semantics based on the document tree, such as selector-matching, event handling, and + property inheritance, are not affected." + + - As of December 2023, the current state of cross-browser, automated web accessibility testing is limited to retrieving the following + accessibility object properties with planned future enhancements (https://github.com/WICG/aom/issues/203): + - computedRole + - computedLabel + --> + + <h1>Testing accessibility of display: contents</h1> + + <p>Verifies accessibility behavior of the <a href="https://www.w3.org/TR/css-display-3/#box-generation">contents</a> keyword for the CSS display property</p> + + <h2>Accname</h2> + + <button aria-labelledby="b2" style="display: contents;" data-expectedlabel="hidden label" data-expectedrole="button" data-testname="button with display: contents is labelled via referenced hidden span" class="ex-role-and-label"> + <span aria-hidden="true" id="b2">hidden label</span> + <span hidden>hidden from all users</span> + <span>visible to all users</span> + </button> + + <span id="a1">label</span> + <a href="#" aria-labelledby="a1" style="display: contents;" data-expectedlabel="label" data-expectedrole="link" data-testname="link with display: contents is labelled via aria-labelledby" class="ex-role-and-label">x</a> + <nav aria-labelledby="a1" style="display: contents;" data-expectedlabel="label" data-expectedrole="navigation" data-testname="nav with display: contents is labelled via aria-labelledby" class="ex-role-and-label">x</nav> + + <button aria-label="label" style="display: contents;" data-expectedlabel="label" data-expectedrole="button" data-testname="button with display: contents is labelled via aria-label" class="ex-role-and-label">x</button> + <div role="group" aria-label="label" style="display: contents;" data-expectedlabel="label" data-expectedrole="group" data-testname="div with role group with display: contents is labelled via aria-label" class="ex-role-and-label">x</div> + + <!-- <img> renders "display: contents" the same as "display:none", see: https://www.w3.org/TR/css-display-3/#unbox-html--> + <label for="label-for-button">label</label> + <button id="label-for-button" style="display: contents;" data-expectedlabel="label" data-expectedrole="button" data-testname="button with display: contents is labelled via label for/id association" class="ex-role-and-label">x</button> + <!-- SVG and display: contents behavior: https://github.com/w3c/svgwg/issues/305--> + <svg viewbox="0 0 100 50"> + <g style="display: contents;" fill="silver" stroke="blue" data-expectedlabel="group label" data-expectedrole="group" data-testname="g element with display: contents, as child of svg, is labelled via title element" class="ex-role-and-label"> + <title>group label</title> + <circle cx="20" cy="20" r="10" /> + <circle cx="20" cy="20" r="10" /> + </g> + </svg> + + <a href="#" style="display: contents;" data-expectedlabel="label" data-expectedrole="link" data-testname="link with display: contents is labelled via name from contents" class="ex-role-and-label">label</a> + <button style="display: contents;" data-expectedlabel="label" data-expectedrole="button" data-testname="button with display: contents is labelled via name from contents" class="ex-role-and-label">label</button> + <h3 style="display: contents;" data-expectedlabel="label" data-expectedrole="heading" data-testname="h3 with display: contents is labelled via name from contents" class="ex-role-and-label">label</h3> + + <h2>Accessibility roles</h2> + <!-- Buttons --> + <button style="display: contents;" data-expectedrole="button" data-expectedlabel="x" data-testname="button with display: contents has button role" class="ex-role-and-label">x</button> + <button role="button" style="display: contents;" data-expectedrole="button" data-expectedlabel="x" data-testname="button with explicit button role and display: contents has button role" class="ex-role-and-label">x</button> + <div role="button" style="display: contents;" data-expectedrole="button" data-expectedlabel="x" data-testname="div with button role and display: contents has button role" class="ex-role-and-label">x</div> + <div role="button" tabindex="0" style="display: contents;" data-expectedrole="button" data-expectedlabel="x" data-testname="div with button role, tabindex=0 and display: contents has button role" class="ex-role-and-label">x</div> + + <!-- Display: Flex --> + <table style="display: flex; flex-flow: column nowrap;" data-expectedrole="table"> + <thead> + <tr style="display: contents;" data-expectedrole="row" data-testname="tr with display: contents, within table with display: flex, has row role" class="ex-role"> + <th data-expectedrole="columnheader" data-expectedlabel="x" data-testname="th as child of tr with display: contents, within table with display: flex, has columnheader role" class="ex-role-and-label">x</th> + <th>x</th> + </tr> + </thead> + <tbody> + <tr style="display: contents;"> + <td data-expectedrole="cell" data-expectedlabel="x" data-testname="td as child of tr with display: contents, within table with display: flex, has cell role" class="ex-role-and-label">x</td> + <td>x</td> + </tr> + </tbody> + </table> + + <table role="table" style="display: flex; flex-flow: column nowrap;" data-expectedrole="table"> + <thead> + <tr style="display: contents;" data-expectedrole="row" data-testname="tr with display: contents, within table with role=table with display: flex, has row role" class="ex-role"> + <th data-expectedrole="columnheader" data-expectedlabel="x" data-testname="th as child of tr with display: contents, within table with role=table with display: flex, has columnheader role" class="ex-role-and-label">x</th> + <th>x</th> + </tr> + </thead> + <tbody> + <tr style="display: contents;"> + <td data-expectedrole="cell" data-expectedlabel="x" data-testname="td as child of tr with display: contents, within table with role=table with display: flex, has cell role" class="ex-role-and-label">x</td> + <td>x</td> + </tr> + </tbody> + </table> + + <table role="grid" style="display: flex; flex-flow: column nowrap;" data-expectedrole="grid"> + <thead> + <tr style="display: contents;" data-expectedrole="row" data-testname="tr with display: contents, within table with role=grid with display: flex, has row role" class="ex-role"> + <th data-expectedrole="columnheader" data-expectedlabel="x" data-testname="th as child of tr with display: contents, within table with role=grid with display: flex, has columnheader role" class="ex-role-and-label">x</th> + <th>x</th> + </tr> + </thead> + <tbody> + <tr style="display: contents;"> + <td data-expectedrole="gridcell" data-expectedlabel="x" data-testname="td (no explicit role) as child of tr with display: contents, within table with role=grid with display: flex, has gridcell role" class="ex-role-and-label">x</td> + <td>x</td> + </tr> + </tbody> + </table> + + <!-- Display: Grid --> + <div style="display: grid; grid-template-columns: 1fr 100px; grid-gap: 1em;"> + <h2>x</h2> + <ul style="display: contents" data-expectedrole="list" data-testname="ul with display: contents, as child of div with display: grid, has list role" class="ex-role"> + <li>x</li> + <li data-expectedrole="listitem" data-expectedlabel="x" data-testname="listitem within ul with display: contents, as child of div with display: grid, has listitem role" class="ex-role-and-label">x</li> + </ul> + </div> + + <!-- Generics --> + <div style="display: contents;" data-testname="div with display: contents has generic role" class="ex-generic">x</div> + <span style="display: contents;" data-testname="span with display: contents has generic role" class="ex-generic">x</span> + + <!-- Headings --> + <h3 style="display: contents;" data-expectedrole="heading" data-expectedlabel="x" data-testname="h3 with display: contents has heading role" class="ex-role-and-label">x</h3> + <div role="heading" aria-level="3" style="display: contents;" data-expectedrole="heading" data-expectedlabel="x" data-testname="div with heading role, aria-level=3 and display: contents has heading role" class="ex-role-and-label">x</div> + <span role="heading" aria-level="1" style="display: contents;" data-expectedrole="heading" data-expectedlabel="x" data-testname="span with heading role, aria-level=1 and display: contents has heading role" class="ex-role-and-label">x</span> + + <!-- Landmarks and regions --> + <header style="display: contents;" data-expectedrole="banner" data-testname="header with display: contents has banner role" class="ex-role">x</header> + <nav style="display: contents;" aria-label="label" data-expectedrole="navigation" data-testname="nav with display: contents and aria-label has navigation role" class="ex-role-and-label">x</nav> + <aside style="display: contents;" aria-label="label" data-expectedrole="complementary" data-testname="aside with display: contents and aria-label has complementary role" class="ex-role-and-label">x</aside> + <main style="display: contents;" data-expectedrole="main" data-testname="main with display: contents has main role" class="ex-role">x</main> + <footer style="display: contents;" data-expectedrole="contentinfo" data-testname="footer with display: contents has contentinfo role" class="ex-role">x</footer> + <form aria-label="label" style="display: contents;" data-expectedrole="form" data-expectedlabel="label" data-testname="form with display: contents has form role" class="ex-role-and-label">x</form> + <search style="display: contents;" data-expectedrole="search" data-testname="search with display: contents has search role" class="ex-role">x</search> + <section aria-label="label" style="display: contents;" data-expectedrole="region" data-expectedlabel="label" data-testname="section with aria-label and display: contents has region role" class="ex-role-and-label"></section> + + <div role="banner" style="display: contents;" data-expectedrole="banner" data-testname="div with role banner and display: contents has banner role" class="ex-role">x</div> + <div role="navigation" aria-label="label" style="display: contents;" data-expectedrole="navigation" data-testname="div with role navigation, aria-label and display: contents has navigation role" class="ex-role-and-label">x</div> + <div role="complementary" aria-label="label" style="display: contents;" data-expectedrole="complementary" data-testname="div with role complementary, aria-label and display: contents has complementary role" class="ex-role-and-label">x</div> + <div role="main" style="display: contents;" data-expectedrole="main" data-testname="div with role main and display: contents has main role" class="ex-role">x</div> + <div role="contentinfo" style="display: contents;" data-expectedrole="contentinfo" data-testname="div with role contentinfo and display: contents has contentinfo role" class="ex-role">x</div> + <div role="form" aria-label="label" style="display: contents;" data-expectedrole="form" data-expectedlabel="label" data-testname="div with role form, aria-label and display: contents has form role" class="ex-role-and-label">x</div> + <div role="search" aria-label="label" style="display: contents;" data-expectedrole="search" data-testname="div with role search and display: contents has search role" class="ex-role-and-label">x</div> + <div role="region" aria-label="label" style="display: contents;" data-expectedrole="region" data-expectedlabel="label" data-testname="div with role region, aria-label and display: contents has region role" class="ex-role-and-label">x</div> + + <!-- Links --> + <a href="#" style="display: contents;" data-expectedrole="link" data-expectedlabel="x" data-testname="link with display: contents has link role" class="ex-role-and-label">x</a> + <a href="#" role="link" style="display: contents;" data-expectedrole="link" data-expectedlabel="x" data-testname="link with explicit link role and display: contents has link role" class="ex-role-and-label">x</a> + <div role="link" style="display: contents;" data-expectedrole="link" data-expectedlabel="x" data-testname="div with link role and display: contents has link role" class="ex-role-and-label">x</div> + <div role="link" tabindex="0" style="display: contents;" data-expectedrole="link" data-expectedlabel="x" data-testname="div with link role, tabindex=0 and display: contents has link role" class="ex-role-and-label">x</div> + + <!-- Lists --> + <ul role="list" style="display: contents;" data-expectedrole="list" data-testname="ul with role list and display: contents (child li has display: contents) has list role" class="ex-role"> + <li style="display: contents;" data-expectedrole="listitem" data-expectedlabel="x" data-testname="li as child of ul with role list, both with display: contents, has listitem role" class="ex-role-and-label">x</li> + <li>y</li> + </ul> + + <ul role="list" style="display: contents;" data-expectedrole="list" data-testname="ul with role list and display: contents has list role" class="ex-role"> + <li>x</li> + <li data-expectedrole="listitem" data-expectedlabel="y" data-testname="li, as child of ul with role list and display: contents, has listitem role" class="ex-role-and-label">y</li> + </ul> + + <ul role="list"> + <li>x</li> + <li style="display: contents;" data-expectedrole="listitem" data-expectedlabel="y" data-testname="li with display: contents, as child of ul with role list, has listitem role" class="ex-role-and-label">y</li> + </ul> + + <ol role="list" style="display: contents;" data-expectedrole="list" data-testname="ol with role list and display: contents has list role (child li has display: contents)" class="ex-role"> + <li style="display: contents;" data-expectedrole="listitem" data-expectedlabel="x" data-testname="li as child of ol with role list, both with display: contents, has listitem role" class="ex-role-and-label">x</li> + <li>y</li> + </ol> + + <ol role="list" style="display: contents;" data-expectedrole="list" data-testname="ol with role list and display: contents has list role" class="ex-role"> + <li>x</li> + <li data-expectedrole="listitem" data-expectedlabel="y" data-testname="li, as child of ol with role list and display: contents, has listitem role" class="ex-role-and-label">y</li> + </ol> + + <ol role="list"> + <li>x</li> + <li style="display: contents;" data-expectedrole="listitem" data-expectedlabel="y" data-testname="li with display: contents, as child of ol with role list, has listitem role" class="ex-role-and-label">y</li> + </ol> + + <div role="list" style="display: contents;" data-expectedrole="list" data-testname="div with list role and display: contents has list role" class="ex-role"> + <div role="listitem" data-expectedrole="listitem" data-expectedlabel="x" data-testname="div with listitem role, as child of div with display: contents, has listitem role" class="ex-role-and-label">x</div> + <div>y</div> + </div> + + <div role="list" style="display: contents;" data-expectedrole="list" data-testname="div with list role and display: contents has list role (child div with listitem role has display: contents)" class="ex-role"> + <div>x</div> + <div role="listitem" style="display: contents;" data-expectedrole="listitem" data-expectedlabel="y" data-testname="div with listitem role (as child of div with list role), both with display: contents, has listitem role" class="ex-role-and-label">y</div> + </div> + + <div role="list"> + <div>x</div> + <div role="listitem" style="display: contents;" data-expectedrole="listitem" data-expectedlabel="y" data-testname="div with listitem role with display: contents, as child of div with list role, has listitem role" class="ex-role-and-label">y</div> + </div> + + <!-- Lists: description/definition lists -> wpt/html-aam/roles.html --> + + <!-- Tables (including grids/treegrids) --> + <table role="table" style="display: contents;" data-expectedrole="table" data-testname="table with role table and display: contents has table role" class="ex-role"> + <thead> + <tr style="display: contents;" data-expectedrole="row" data-testname="tr in table with role table and display: contents has row role" class="ex-role"> + <th style="display: contents;" data-expectedrole="columnheader" data-expectedlabel="x" data-testname="td within tr both with display: contents, in table with role table and display: contents, has columnheader role" class="ex-role-and-label">x</th> + <th>x</th> + </tr> + </thead> + <tbody> + <tr> + <td style="display: contents;" data-expectedrole="cell" data-expectedlabel="x" data-testname="td within tr in table with role table, all with display: contents, has cell role" class="ex-role-and-label">x</td> + <td>x</td> + </tr> + </tbody> + </table> + + <div role="table" style="display: contents;" data-expectedrole="table" data-testname="div with role table with display: contents has table role" class="ex-role"> + <div role="rowgroup" style="display: contents;" data-expectedrole="rowgroup" data-testname="div with role rowgroup in div with role table, both with display: contents, has rowgroup role" class="ex-role"> + <div role="row"> + <div role="columnheader" style="display: contents;" data-expectedrole="columnheader" data-expectedlabel="x" data-testname="div with role columnheader with display: contents, in div with role rowgroup within div with table role both with display: contents, has columnheader role" class="ex-role-and-label">x</div> + <div role="columnheader">x</div> + </div> + </div> + <div role="rowgroup"> + <div role="row"> + <div role="cell">x</div> + <div role="cell">x</div> + </div> + </div> + </div> + + <table role="grid" style="display: contents;" data-expectedrole="grid" data-testname="table with role grid and display: contents has grid role"> + <thead> + <tr style="display: contents;" data-expectedrole="row" data-testname="tr within table with role grid, both with display: contents, has row role"> + <th style="display: contents;" data-expectedrole="columnheader" data-expectedlabel="x" data-testname="th within table with role grid, both with display: contents, has columnheader role" class="ex-role-and-label">x</th> + <th>x</th> + </tr> + </thead> + <tbody> + <tr> + <td style="display: contents;" data-expectedrole="gridcell" data-expectedlabel="x" data-testname="td within table with role grid, both with display: contents, has gridcell role" class="ex-role-and-label">x</td> + <td>x</td> + </tr> + </tbody> + </table> + + <div role="grid" style="display: contents;" data-expectedrole="grid" data-testname="div with role grid with display: contents has grid role" class="ex-role"> + <div role="rowgroup" style="display: contents;" data-expectedrole="rowgroup" data-testname="div with role rowgroup in div with role grid, both with display: contents, has rowgroup role" class="ex-role"> + <div role="row"> + <div role="columnheader" style="display: contents;" data-expectedrole="columnheader" data-expectedlabel="x" data-testname="div with role columnheader with display: contents, in div with role rowgroup within div with grid role both with display: contents, has rowgroup role" class="ex-role-and-label">x</div> + <div role="columnheader">x</div> + </div> + </div> + <div role="rowgroup"> + <div role="row"> + <div role="gridcell"></div> + <div role="gridcell" style="display: contents;" data-expectedrole="gridcell" data-expectedlabel="x" data-testname="div with gridcell role and display: contents, within div with role row contained in a div with role grid both with display: contents, has gridcell role" class="ex-role-and-label">x</div> + </div> + </div> + </div> + + <table role="grid" tabindex="0" style="display: contents;" data-expectedrole="grid" data-testname="div with role grid, tabindex=0 and display: contents has grid role" > + <thead> + <tr> + <th>x</th> + <th>x</th> + </tr> + </thead> + <tbody> + <tr> + <td>x</td> + <td>x</td> + </tr> + </tbody> + </table> + + <table role="treegrid" style="display: contents;" data-expectedrole="treegrid" data-testname="table with role treegrid and display: contents has treegrid role" class="ex-role"></table> + <div role="treegrid" style="display: contents;" data-expectedrole="treegrid" data-testname="div with role treegrid and display: contents has treegrid role" class="ex-role"></div> + + <ul role="tree" style="display: contents;" data-expectedrole="tree" data-testname="ul with role tree and display: contents has tree role" class="ex-role"> + <li role="treeitem" aria-expanded="true" style="display: contents;" data-expectedrole="treeitem" data-expectedlabel="x" data-testname="li with role treeitem and display: contents, within ul with role tree and display: contents, has treeitem role" class="ex-role-and-label"> + <span>x</span> + <ul role="group"> + <li role="treeitem" aria-expanded="false" style="display: contents;" data-expectedrole="treeitem" data-expectedlabel="x" data-testname="li with role treeitem and display: contents, within ul with role=group (within ul with role tree and display: contents), has treeitem role" class="ex-role-and-label"> + <span>x</span> + </li> + </ul> + </li> + </ul> + +<script> + AriaUtils.verifyRolesBySelector(".ex-role"); + AriaUtils.verifyRolesAndLabelsBySelector(".ex-role-and-label"); + AriaUtils.verifyGenericRolesBySelector(".ex-generic"); +</script> + +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/animations/display-interpolation.html b/testing/web-platform/tests/css/css-display/animations/display-interpolation.html new file mode 100644 index 0000000000..6bf3dcc5a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/animations/display-interpolation.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>display interpolation</title> +<link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#display-prop"> +<meta name="assert" content="display supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_not_animatable({ + property: 'display', + from: 'none', + to: 'flex', + underlying: 'block' +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-display/animations/display-interpolation.tentative.html b/testing/web-platform/tests/css/css-display/animations/display-interpolation.tentative.html new file mode 100644 index 0000000000..b6b58ee45e --- /dev/null +++ b/testing/web-platform/tests/css/css-display/animations/display-interpolation.tentative.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>display interpolation</title> +<link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#display-prop"> +<meta name="assert" content="display supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> + <script> + test_no_interpolation({ + property: 'display', + from: 'grid', + to: 'flex', + underlying: 'block', + target_names: ['CSS Animations', 'Web Animations'] + }); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-display/display-change-iframe.html b/testing/web-platform/tests/css/css-display/display-change-iframe.html new file mode 100644 index 0000000000..5fc53274e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-change-iframe.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-display-3/#outer-role"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <iframe id="victim" src="support/red-square.html" style="width:100px; height:100px; border:none;"></iframe> + <script> + var loaded_once = false; + victim.onload = function() { + // The child document should only load once. It should not be reloaded + // by changing the display type of the IFRAME. + if (loaded_once) + return; + loaded_once = true; + var childDoc = victim.contentWindow.document; + // Change the red background to green. This will revert back to red if + // the document gets reloaded (which shouldn't happen) when re-attaching + // #victim. + childDoc.getElementById("square").style.background = "green"; + document.offsetTop; + victim.style.display = "block"; + document.documentElement.className = ""; + } + </script> +</html> diff --git a/testing/web-platform/tests/css/css-display/display-change-object-iframe.html b/testing/web-platform/tests/css/css-display/display-change-object-iframe.html new file mode 100644 index 0000000000..a44cfde79e --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-change-object-iframe.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-display-3/#outer-role"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <object id="victim" data="support/red-square.html" style="width:100px; height:100px;"></object> + <script> + var loaded_once = false; + victim.onload = function() { + // The child document should only load once. It should not be reloaded + // by changing the display type of the OBJECT. + if (loaded_once) + return; + loaded_once = true; + var childDoc = victim.contentWindow.document; + // Change the red background to green. This will revert back to red if + // the document gets reloaded (which shouldn't happen) when re-attaching + // #victim. + childDoc.getElementById("square").style.background = "green"; + document.offsetTop; + victim.style.display = "block"; + document.documentElement.className = ""; + } + </script> +</html> diff --git a/testing/web-platform/tests/css/css-display/display-contents-001-crash.html b/testing/web-platform/tests/css/css-display/display-contents-001-crash.html new file mode 100644 index 0000000000..376c3b549a --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-001-crash.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8"> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144434"> +</head> +<body onload="c.style.display = 'inline-block';"> + +<div style="display: table-cell;"></div><div style="display: contents;"><div id="c"></div></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-display/display-contents-alignment-001-ref.html b/testing/web-platform/tests/css/css-display/display-contents-alignment-001-ref.html new file mode 100644 index 0000000000..595aa7f7e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-alignment-001-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<style> + .container { + display: flex; + width: 300px; + height: 300px; + align-items: center; + border: 2px solid purple; + } + .container > div { + width: 100px; + height: 100px; + background: blue; + align-self: auto; + } +</style> +<p>Test passes if there's a blue square vertically centered inside the box.</p> +<div class="container"> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-alignment-001.html b/testing/web-platform/tests/css/css-display/display-contents-alignment-001.html new file mode 100644 index 0000000000..6a6bf8c748 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-alignment-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: flex container align-items is used for flex item regardless of intermediate display: contents ancestors</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="help" href="https://drafts.csswg.org/css-align/#align-items-property"> +<link rel="match" href="display-contents-alignment-001-ref.html"> +<style> + .container { + display: flex; + width: 300px; + height: 300px; + align-items: center; + border: 2px solid purple; + } + .contents { + display: contents; + align-items: flex-start; + } + .contents > div { + width: 100px; + height: 100px; + background: blue; + align-self: auto; + } +</style> +<p>Test passes if there's a blue square vertically centered inside the box.</p> +<div class="container"> + <div class="contents"> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-alignment-002-ref.html b/testing/web-platform/tests/css/css-display/display-contents-alignment-002-ref.html new file mode 100644 index 0000000000..f58ccf04b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-alignment-002-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<style> + .container { + display: grid; + width: 300px; + height: 300px; + justify-items: center; + border: 2px solid purple; + } + .container > div { + width: 100px; + height: 100px; + background: blue; + justify-self: auto; + } +</style> +<p>Test passes if there's a blue square horizontally centered inside the box.</p> +<div class="container"> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-alignment-002.html b/testing/web-platform/tests/css/css-display/display-contents-alignment-002.html new file mode 100644 index 0000000000..d8fa0d9efe --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-alignment-002.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: grid container justify-items is used for grid item regardless of intermediate display: contents ancestors</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="help" href="https://drafts.csswg.org/css-align/#justify-items-property"> +<link rel="match" href="display-contents-alignment-002-ref.html"> +<style> + .container { + display: grid; + width: 300px; + height: 300px; + justify-items: center; + border: 2px solid purple; + } + .contents { + display: contents; + justify-items: start; + } + .contents > div { + width: 100px; + height: 100px; + background: blue; + justify-self: auto; + } +</style> +<p>Test passes if there's a blue square horizontally centered inside the box.</p> +<div class="container"> + <div class="contents"> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-before-after-001.html b/testing/web-platform/tests/css/css-display/display-contents-before-after-001.html new file mode 100644 index 0000000000..65fc9fee84 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-before-after-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: Generated ::before and ::after on display:contents</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-pass-ref.html"> +<style> + /* Disable kerning because kerning may differ for different node tree. */ + html { font-kerning: none; font-feature-settings: "kern" off; } + div { display: contents } + .p::before { content: "P" } + .a::before { content: "A" } + .s::after { content: "S" } +</style> +<p>You should see the word PASS below.</p> +<div><!-- + --><div><div class="p"></div></div><!-- + --><div></div><!-- + --><div class="a"></div><!-- + --><div>S<div class="s"></div></div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-before-after-002.html b/testing/web-platform/tests/css/css-display/display-contents-before-after-002.html new file mode 100644 index 0000000000..5860a73c3d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-before-after-002.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: Generated ::before and ::after with display:contents</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-pass-ref.html"> +<style> + /* Disable kerning because kerning may differ for different node tree. */ + html { font-kerning: none; font-feature-settings: "kern" off; } + div::before { + display: contents; + border: 100px solid red; + content: "P" + } + div::after { + display: contents; + border: 100px solid red; + content: "S" + } +</style> +<p>You should see the word PASS below.</p> +<div>A<span>S</span></div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-before-after-003.html b/testing/web-platform/tests/css/css-display/display-contents-before-after-003.html new file mode 100644 index 0000000000..30451426cf --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-before-after-003.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: Generated ::before and ::after with display:contents inside flex</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-pass-ref.html"> +<style> + /* Disable kerning because kerning may differ for different node tree. */ + html { font-kerning: none; font-feature-settings: "kern" off; } + .flex { display: inline-flex; flex-direction: column } + .flex::before { display: contents; content: "A" } + .flex::after { display: contents; content: "S" } +</style> +<!-- The before and after pseudo elements do not generate boxes due to + display:contents, so that their generated text content constitutes a + contiguous sequence of child text runs which means they end up in the same + flex item. --> +<p>You should see the word PASS below.</p> +P<div class="flex"></div>S diff --git a/testing/web-platform/tests/css/css-display/display-contents-block-001.html b/testing/web-platform/tests/css/css-display/display-contents-block-001.html new file mode 100644 index 0000000000..5a5a4f9e6c --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-block-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: display:contents in block layout</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-pass-no-red-ref.html"> +<style> + #contents { + display: contents; + border: 10px solid red + } +</style> +<p>You should see the word PASS and no red below.</p> +<div> + <div id="contents"> + <div id="inner">P<span>A</span>S<span>S</span></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-block-002-ref.html b/testing/web-platform/tests/css/css-display/display-contents-block-002-ref.html new file mode 100644 index 0000000000..2e7105f919 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-block-002-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<p>You should see the word PASS with a 300px top margin below.</p> +<div style="margin-top: 300px">PASS</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-block-002.html b/testing/web-platform/tests/css/css-display/display-contents-block-002.html new file mode 100644 index 0000000000..2dd8a10b5e --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-block-002.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: margin collapsing through display:contents</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-block-002-ref.html"> +<style> + #outer { margin-top: 100px } + #inner { margin-top: 300px } + #contents { + display: contents; + margin-top: 2000px + } +</style> +<p>You should see the word PASS with a 300px top margin below.</p> +<div id="outer"> + <div id="contents"> + <div id="inner">PASS</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-blockify-dynamic.html b/testing/web-platform/tests/css/css-display/display-contents-blockify-dynamic.html new file mode 100644 index 0000000000..a1e09affc8 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-blockify-dynamic.html @@ -0,0 +1,34 @@ +<!doctype html> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1561283"> +<link rel="help" href="https://drafts.csswg.org/css-display/#valdef-display-contents"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-display"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="mailto:obrufau@igalia.com" title="Oriol Brufau"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .grid { display: grid } +</style> +<div style="display: grid"> + <span id="grid-child"> + <span></span> + </div> +</div> +<script> +function display(el) { + return getComputedStyle(el).display; +} +test(function() { + let child = document.getElementById("grid-child"); + let grandChild = child.firstElementChild; + assert_equals(display(child), "block", "Grid child should get blockified"); + assert_equals(display(grandChild), "inline", "Grid grand-child should not get initially blockified"); + child.style.display = "contents"; + assert_equals(display(child), "contents", "No reason for it not to become display: contents"); + assert_equals(display(grandChild), "block", "Grid grand-child with display: contents parent should get blockified"); + child.style.display = ""; + assert_equals(display(child), "block", "Grid child should get blockified"); + assert_equals(display(grandChild), "inline", "Grid grand-child should get un-blockified when its parent's display stops being `contents`"); +}, "Dynamic changes to `display` causing blockification of children are handled correctly"); +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-button.html b/testing/web-platform/tests/css/css-display/display-contents-button.html new file mode 100644 index 0000000000..3711972a27 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-button.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: display:contents and HTML button element</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-display/#unbox-html"> +<link rel="match" href="display-contents-pass-ref.html"> +<style> + /* Disable kerning because kerning may differ for different node tree. */ + html { font-kerning: none; font-feature-settings: "kern" off; } + button { + all: initial; + font-kerning: none; font-feature-settings: "kern" off; + border: 10px solid red; + display: contents; + } +</style> +<p>You should see the word PASS below.</p> +<button>P<!---->A<!---->S<!---->S</button> diff --git a/testing/web-platform/tests/css/css-display/display-contents-computed-style.html b/testing/web-platform/tests/css/css-display/display-contents-computed-style.html new file mode 100644 index 0000000000..2bc63701f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-computed-style.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: Computed style for display:contents</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#transformations"> +<link rel="help" href="https://drafts.csswg.org/cssom-1/#resolved-values"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + html, .contents { display: contents } + + #t2 .contents { background-color: green } + #t2 span { background-color: inherit } + + #t3 .contents { color: green } + + #t4 { + width: auto; + height: 50%; + margin-left: 25%; + padding-top: 10%; + } +</style> +<div id="t1" class="contents"></div> +<div id="t2"> + <div class="contents"> + <span></span> + </div> +</div> +<div id="t3"> + <div class="contents"> + <span></span> + </div> +</div> +<div id="t4" class="contents"></div> +<script> + test(function(){ + assert_equals(getComputedStyle(document.querySelector("#t1")).display, "contents"); + }, "Serialization of computed style value for display:contents"); + + test(function(){ + assert_equals(getComputedStyle(document.querySelector("#t2 span")).backgroundColor, "rgb(0, 128, 0)"); + }, "display:contents element as inherit parent - explicit inheritance"); + + test(function(){ + assert_equals(getComputedStyle(document.querySelector("#t3 span")).color, "rgb(0, 128, 0)"); + }, "display:contents element as inherit parent - implicit inheritance"); + + test(function(){ + var computed = getComputedStyle(document.querySelector("#t4")); + assert_equals(computed.width, "auto"); + assert_equals(computed.height, "50%"); + assert_equals(computed.marginLeft, "25%"); + assert_equals(computed.paddingTop, "10%"); + }, "Resolved value should be computed value, not used value, for display:contents"); + + test(function(){ + assert_equals(getComputedStyle(document.documentElement).display, "block"); + }, "display:contents is blockified for root elements"); +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-details-001-ref.html b/testing/web-platform/tests/css/css-display/display-contents-details-001-ref.html new file mode 100644 index 0000000000..fc078b8150 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-details-001-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<details> + <div> + <summary>summary</summary> + details + </div> +</details> diff --git a/testing/web-platform/tests/css/css-display/display-contents-details-001.html b/testing/web-platform/tests/css/css-display/display-contents-details-001.html new file mode 100644 index 0000000000..b1cefa6ffd --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-details-001.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: display: contents under a details element doesn't prevent content from getting suppressed</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-details-001-ref.html"> +<details> + <div style="display:contents"> + <summary>summary</summary> + details + </div> +</details> diff --git a/testing/web-platform/tests/css/css-display/display-contents-details.html b/testing/web-platform/tests/css/css-display/display-contents-details.html new file mode 100644 index 0000000000..0dcda91ab3 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-details.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: display:contents and HTML details and summary elements</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-display/#unbox-html"> +<link rel="match" href="display-contents-pass-ref.html"> +<style> + html { font-kerning: none; font-feature-settings: "kern" off; } + details, summary { + all: initial; + border: 10px solid red; + display: contents; + } +</style> +<p>You should see the word PASS below.</p> +P<details open><summary>A</summary><span>S</span></details>S diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-before-after-001.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-before-after-001.html new file mode 100644 index 0000000000..b8dc4ba1e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-before-after-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: Dynamic changes to ::before and ::after on display:contents</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-pass-green-no-red-ref.html"> +<style> + div { display: contents; color: green; } + .p::before { content: "P" } + .a::before { content: "A" } + .s::after { content: "S" } + div::before { color: red; display: contents; border: 1px solid red; } + .active div::before { color: green; } +</style> +<p>You should see the word PASS in green and no red below.</p> +<div><!-- + --><div><div class="p"></div></div><!-- + --><div></div><!-- + --><div class="a"></div><!-- + --><div>S<div class="s"></div></div> +</div> +<script> +document.body.offsetTop; +document.body.className = "active"; +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-before-after-first-letter-001.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-before-after-first-letter-001.html new file mode 100644 index 0000000000..7684a4b900 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-before-after-first-letter-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: Dynamic changes to ::before and ::after on display:contents when ::first-letter is in effect</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-pass-green-no-red-ref.html"> +<style> + div { color: blue; } + div::first-letter { color: red; } + div::before { display: contents; content: "PASS"; border: 1px solid red; } + .active div::before, + .active div::first-letter { color: green; } +</style> +<p>You should see the word PASS in green and no red below.</p> +<div></div> +<script> +document.body.offsetTop; +document.body.className = "active"; +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-fieldset-legend-001-ref.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-fieldset-legend-001-ref.html new file mode 100644 index 0000000000..a3998524f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-fieldset-legend-001-ref.html @@ -0,0 +1,83 @@ +<!doctype html> +<title>Reference: display:contents on fieldset/legend</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1694459"> +<style> + body { font-size: 10px; } + fieldset { + border:1px solid; + padding: 1px 0; + } +</style> +<fieldset> +<fieldset id='test1'> +<legend>LEGEND</legend> +</fieldset> +</fieldset> + +<fieldset> +<fieldset id='test2'> +<legend>LEGEND</legend> +</fieldset> +</fieldset> + +<fieldset> +<legend>OUTER LEGEND</legend> +<fieldset id='test3'> +<legend>INNER LEGEND</legend> +</fieldset> +</fieldset> + +<fieldset> +<legend id='test4'>LEGEND</legend> +<legend>NOT LEGEND</legend> +</fieldset> + +<fieldset> +<legend>LEGEND</legend> +<legend id='test5'>NOT LEGEND</legend> +</fieldset> + +<fieldset> +<legend id='test6'>LEGEND</legend> +<legend>NOT LEGEND</legend> +</fieldset> + +<fieldset> +<legend>LEGEND</legend> +<legend>NOT LEGEND</legend> +</fieldset> + +<fieldset> +<legend>LEGEND</legend> +</fieldset> + +<fieldset> +<div id='test9'><legend>NOT LEGEND</legend></div> +</fieldset> + +<fieldset> +<legend>LEGEND</legend> +<div>NOT LEGEND</div> +</fieldset> + +<fieldset id='test11'> +<legend>LEGEND</legend> +<legend>NOT LEGEND</legend> +</fieldset> + +<fieldset> +<legend id='test12'>LEGEND</legend> +</fieldset> + +<fieldset> +<legend id='test13'>LEGEND</legend> +</fieldset> + +<fieldset> + <legend>LEGEND</legend> + <legend>NOT LEGEND</legend> +</fieldset> + +<fieldset> + <legend>LEGEND</legend> +</fieldset> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-fieldset-legend-001.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-fieldset-legend-001.html new file mode 100644 index 0000000000..a17828bd7a --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-fieldset-legend-001.html @@ -0,0 +1,171 @@ +<!doctype html> +<title>CSS Display Module Test: display:contents on fieldset/legend</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1694459"> +<link rel="help" href="https://drafts.csswg.org/css-display/#box-generation"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1694459"> +<link rel="match" href="display-contents-dynamic-fieldset-legend-001-ref.html"> +<style> + body { font-size: 10px; } + fieldset { + border:1px solid; + padding: 1px 0; + } + #test10 { padding: 0; } +</style> +<script> +window.onload = () => { + document.body.getClientRects(); + o = document.getElementById("test1") + o.setAttribute("style", "display:contents") + o.getClientRects() + o.style.cssText = "" + o.getClientRects() + + o = document.getElementById("test2") + o.setAttribute("style", "") + o.getClientRects() + + o = document.getElementById("test3") + o.setAttribute("style", "") + o.getClientRects() + + o = document.getElementById("test4") + o.setAttribute("style", "") + o.getClientRects() + + o = document.getElementById("test5") + o.setAttribute("style", "") + o.getClientRects() + + o = document.getElementById("test6") + o.setAttribute("style", "") + o.getClientRects() + + o = document.getElementById("test7") + o.setAttribute("style", "display:contents") + o.getClientRects() + + o = document.getElementById("test8") + o.setAttribute("style", "display:contents") + o.getClientRects() + + o = document.getElementById("test9") + o.setAttribute("style", "display:contents") + o.getClientRects() + o.style.cssText = "" + o.getClientRects() + + o = document.getElementById("test10") + o.setAttribute("style", "display:contents") + o.getClientRects() + + o = document.getElementById("test11") + set = document.createDocumentFragment() + set.append(document.createElement("div")) + legend = document.createElement("legend") + legend.append(document.createTextNode("LEGEND")) + set.append(legend) + legend = document.createElement("legend") + legend.append(document.createTextNode("NOT LEGEND")) + set.append(legend) + o.append(set) + o.getClientRects() + + o = document.getElementById("test12") + o.setAttribute("style", "") + o.getClientRects() + + o = document.getElementById("test13") + o.setAttribute("style", "") + o.getClientRects() + + o = document.getElementById("test14"); + o.appendChild(document.createElement('legend')).textContent = "LEGEND"; + o.getClientRects(); + + o = document.getElementById("test15"); + o.textContent = ""; + o.getClientRects() +} +</script> +<fieldset> +<fieldset id='test1'> +<legend>LEGEND</legend> +</fieldset> +</fieldset> + +<fieldset> +<fieldset id='test2' style="display:contents"> +<legend>LEGEND</legend> +</fieldset> +</fieldset> + +<fieldset> +<legend>OUTER LEGEND</legend> +<fieldset id='test3' style="display:contents"> +<legend>INNER LEGEND</legend> +</fieldset> +</fieldset> + +<fieldset> +<fieldset style="display:contents"> +<legend id='test4' style="display:contents">LEGEND</legend> +<legend>NOT LEGEND</legend> +</fieldset> +</fieldset> + +<fieldset> +<legend>LEGEND</legend> +<fieldset style="display:contents"> +<legend id='test5' style="display:contents">NOT LEGEND</legend> +</fieldset> +</fieldset> + +<fieldset> +<legend id='test6' style="display:contents">LEGEND</legend> +<fieldset style="display:contents"> +<legend>NOT LEGEND</legend> +</fieldset> +</fieldset> + +<fieldset> +<div id='test7'><legend>LEGEND</legend></div> +<legend>NOT LEGEND</legend> +</fieldset> + +<fieldset> +<fieldset style="display:contents"> +<div id='test8'><legend>LEGEND</legend></div> +</fieldset> +</fieldset> + +<fieldset> +<fieldset style="display:contents"> +<div id='test9'><legend>NOT LEGEND</legend></div> +</fieldset> +</fieldset> + +<fieldset> +<div style="display:contents"><legend id='test10'>NOT LEGEND</legend></div> +<legend>LEGEND</legend> +</fieldset> + +<fieldset id='test11'></fieldset> + +<fieldset> + <legend id='test12' style="display:none">LEGEND</legend> +</fieldset> + +<fieldset> + <div style="display:contents"><legend id='test13' style="display:none">LEGEND</legend></div> +</fieldset> + +<fieldset> + <div style="display:contents"><div style="display:contents" id="test14"></div></div> + <legend>NOT LEGEND</legend> +</fieldset> + +<fieldset> + <div style="display:contents"><div style="display:contents" id="test15"><legend>NOT LEGEND</legend></div></div> + <legend>LEGEND</legend> +</fieldset> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-001-inline.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-001-inline.html new file mode 100644 index 0000000000..2d797795b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-001-inline.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display 3: Display contents reattachment works well in a flex container</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-flex-001-ref.html"> +<script src="support/util.js"></script> +<style> +.flex { + display: flex; +} +.inline { + display: inline; +} +.contents { + display: contents; + border: 1px solid red; +} +</style> +<p>Test passes if you see the word "PASS", with a "0" under the first "S", and no red</p> +<div class="flex"> +P + <div class="contents"> + <div>A</div> + </div> + <div class="contents"> + <div class="inline">S<div>0</div></div> + </div> + <div class="contents"> + S + </div> +</div> +<script> +window.onload = function() { + eachDisplayContentsElementIn(document, window, + function(e) { e.style.display = 'inline'; }, + function(e) { e.style.display = ''; }) +} +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-001-none.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-001-none.html new file mode 100644 index 0000000000..bf2af1a5b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-001-none.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display 3: Display contents reattachment works well in a flex container</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-flex-001-ref.html"> +<script src="support/util.js"></script> +<style> +.flex { + display: flex; +} +.inline { + display: inline; +} +.contents { + display: contents; + border: 1px solid red; +} +</style> +<p>Test passes if you see the word "PASS", with a "0" under the first "S", and no red</p> +<div class="flex"> +P + <div class="contents"> + <div>A</div> + </div> + <div class="contents"> + <div class="inline">S<div>0</div></div> + </div> + <div class="contents"> + S + </div> +</div> +<script> +window.onload = function() { + eachDisplayContentsElementIn(document, window, + function(e) { e.style.display = 'none'; }, + function(e) { e.style.display = ''; }) +} +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-002-inline.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-002-inline.html new file mode 100644 index 0000000000..a31d923150 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-002-inline.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display: contents in flex layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-flex-002-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<script src="support/util.js"></script> +<div class="flex c1"> + 0 + <div class="contents c1">x</div> + <div class="contents c1"><div class="contents c2">y</div></div> + <div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div> + <div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div> + <div class="contents c3"><div class="inline">3</div></div> + <div class="inline"><div class="contents c4">4</div></div> + <div><div class="contents c5">5a</div></div> + <div class="c5">5b</div> + <div class="contents c6"><div>6</div></div> + <div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div> + <div class="contents c9"><div>8</div></div> + <div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> + <div class="contents c10"><div>10</div></div> +</div> +<script> +window.onload = function() { + eachDisplayContentsElementIn(document, window, + function(e) { e.style.display = 'inline'; }, + function(e) { e.style.display = ''; }) +} +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-002-none.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-002-none.html new file mode 100644 index 0000000000..64fbf03b8a --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-002-none.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display: contents in flex layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-flex-002-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<script src="support/util.js"></script> +<div class="flex c1"> + 0 + <div class="contents c1">x</div> + <div class="contents c1"><div class="contents c2">y</div></div> + <div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div> + <div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div> + <div class="contents c3"><div class="inline">3</div></div> + <div class="inline"><div class="contents c4">4</div></div> + <div><div class="contents c5">5a</div></div> + <div class="c5">5b</div> + <div class="contents c6"><div>6</div></div> + <div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div> + <div class="contents c9"><div>8</div></div> + <div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> + <div class="contents c10"><div>10</div></div> +</div> +<script> +window.onload = function() { + eachDisplayContentsElementIn(document, window, + function(e) { e.style.display = 'none'; }, + function(e) { e.style.display = ''; }) +} +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-003-inline.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-003-inline.html new file mode 100644 index 0000000000..435a10a724 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-003-inline.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display: contents in flex layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-flex-002-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<script src="support/util.js"></script> +<div class="flex"><div class="contents c1"> + 0 + <div class="contents c1">x</div> + <div class="contents c1"><div class="contents c2">y</div></div> + <div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div> + <div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div> + <div class="contents c3"><div class="inline">3</div></div> + <div><div class="contents c4">4</div></div> + <div><div class="contents c5">5a</div></div> + <div class="c5">5b</div> + <div class="contents c6"><div>6</div></div> + <div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div> + <div class="contents c9"><div>8</div></div> + <div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> + <div class="contents c10"><div>10</div></div> +</div></div> +<script> +window.onload = function() { + eachDisplayContentsElementIn(document, window, + function(e) { e.style.display = 'inline'; }, + function(e) { e.style.display = ''; }) +} +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-003-none.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-003-none.html new file mode 100644 index 0000000000..5c357c1632 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-flex-003-none.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display: contents in flex layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-flex-002-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<script src="support/util.js"></script> +<div class="flex"><div class="contents c1"> + 0 + <div class="contents c1">x</div> + <div class="contents c1"><div class="contents c2">y</div></div> + <div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div> + <div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div> + <div class="contents c3"><div class="inline">3</div></div> + <div><div class="contents c4">4</div></div> + <div><div class="contents c5">5a</div></div> + <div class="c5">5b</div> + <div class="contents c6"><div>6</div></div> + <div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div> + <div class="contents c9"><div>8</div></div> + <div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> + <div class="contents c10"><div>10</div></div> +</div></div> +<script> +window.onload = function() { + eachDisplayContentsElementIn(document, window, + function(e) { e.style.display = 'none'; }, + function(e) { e.style.display = ''; }) +} +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-generated-content-fieldset-001-ref.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-generated-content-fieldset-001-ref.html new file mode 100644 index 0000000000..651bc19b83 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-generated-content-fieldset-001-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<style> +div { + display: contents; + border: 10px solid red; +} +</style> +<p> + Test passes if there is no red text and no red border. +</p> +<fieldset> + <div></div> +</fieldset> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-generated-content-fieldset-001.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-generated-content-fieldset-001.html new file mode 100644 index 0000000000..8f8a0ba479 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-generated-content-fieldset-001.html @@ -0,0 +1,26 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: Dynamic changes to display: contents generated content in fieldsets.</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-dynamic-generated-content-fieldset-001-ref.html"> +<style> +.after::after { + content: "FAIL"; + color: red; +} +div { + display: contents; + border: 10px solid red; +} +</style> +<p> + Test passes if there is no red text and no red border. +</p> +<fieldset> + <div class="after"></div> +</fieldset> +<script> +document.body.offsetHeight; +document.querySelector("div").classList.remove("after"); +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-inline-flex-001-inline.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-inline-flex-001-inline.html new file mode 100644 index 0000000000..f14e133a04 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-inline-flex-001-inline.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display: contents in inline-flex layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-inline-flex-001-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<script src="support/util.js"></script> +<div style="color: red"> + <div class="iflex"><div class="contents c2"> + 0 + </div></div> + <div class="iflex"><div class="contents c2"> + 0 + <div class="contents c1">1</div> + 2 + </div></div> + <div class="iflex"><div class="contents c2"> + 0 + <div class="c1">1</div> + 2 + </div></div> + <div class="iflex c3"> + 0 + <div class="contents c2"><div class="c1">1</div></div> + 2 + </div> + <div class="iflex c3"> + <div class="contents c2">0</div> + <div class="contents c2"><div class="c1">1</div></div> + <div class="contents c2">2</div> + </div> + <div class="iflex c3"> + <div class="inline">0</div> + <div class="contents"><div class="inline c1">1</div></div> + <div class="inline">2</div> + </div> +</div> +<script> +window.onload = function() { + eachDisplayContentsElementIn(document, window, + function(e) { e.style.display = 'none'; }, + function(e) { e.style.display = ''; }) +} +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-inline-flex-001-none.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-inline-flex-001-none.html new file mode 100644 index 0000000000..f14e133a04 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-inline-flex-001-none.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display: contents in inline-flex layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-inline-flex-001-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<script src="support/util.js"></script> +<div style="color: red"> + <div class="iflex"><div class="contents c2"> + 0 + </div></div> + <div class="iflex"><div class="contents c2"> + 0 + <div class="contents c1">1</div> + 2 + </div></div> + <div class="iflex"><div class="contents c2"> + 0 + <div class="c1">1</div> + 2 + </div></div> + <div class="iflex c3"> + 0 + <div class="contents c2"><div class="c1">1</div></div> + 2 + </div> + <div class="iflex c3"> + <div class="contents c2">0</div> + <div class="contents c2"><div class="c1">1</div></div> + <div class="contents c2">2</div> + </div> + <div class="iflex c3"> + <div class="inline">0</div> + <div class="contents"><div class="inline c1">1</div></div> + <div class="inline">2</div> + </div> +</div> +<script> +window.onload = function() { + eachDisplayContentsElementIn(document, window, + function(e) { e.style.display = 'none'; }, + function(e) { e.style.display = ''; }) +} +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-list-001-inline.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-list-001-inline.html new file mode 100644 index 0000000000..f44ee28fd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-list-001-inline.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display: contents in list layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-list-001-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<script src="support/util.js"></script> +<div style="color: red"> + <ul><li class="c1"><div class="contents c2"> + 0 + <div class="contents c1">x</div> + <div class="contents c1"><div class="contents c2">y</div></div> + <div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div> + <div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div> + <div class="contents c3"><div class="inline">3</div></div> + <div class="inline"><div class="contents c4">4</div></div> + <div><div class="contents c5">5a</div></div> + <div class="c5">5b</div> + <div class="contents c6"><div>6</div></div> + <div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div> + <div class="contents c9"><div>8</div></div> + <div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> + <div class="contents c10"><div>10</div></div> + </div></li></ul> +</div> +<script> +window.onload = function() { + eachDisplayContentsElementIn(document, window, + function(e) { e.style.display = 'inline'; }, + function(e) { e.style.display = ''; }) +} +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-list-001-none.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-list-001-none.html new file mode 100644 index 0000000000..f44ee28fd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-list-001-none.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display: contents in list layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-list-001-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<script src="support/util.js"></script> +<div style="color: red"> + <ul><li class="c1"><div class="contents c2"> + 0 + <div class="contents c1">x</div> + <div class="contents c1"><div class="contents c2">y</div></div> + <div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div> + <div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div> + <div class="contents c3"><div class="inline">3</div></div> + <div class="inline"><div class="contents c4">4</div></div> + <div><div class="contents c5">5a</div></div> + <div class="c5">5b</div> + <div class="contents c6"><div>6</div></div> + <div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div> + <div class="contents c9"><div>8</div></div> + <div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> + <div class="contents c10"><div>10</div></div> + </div></li></ul> +</div> +<script> +window.onload = function() { + eachDisplayContentsElementIn(document, window, + function(e) { e.style.display = 'inline'; }, + function(e) { e.style.display = ''; }) +} +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-multicol-001-inline.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-multicol-001-inline.html new file mode 100644 index 0000000000..b8b2c6bb10 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-multicol-001-inline.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display:contents in multicolumn layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-multicol-001-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<script src="support/util.js"></script> +<div style="color: red"> + <div class="columns"> + <div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div> + <div class="contents c2"><div>2</div></div> + <div class="contents c3"><div>3</div></div> + </div> + + <div class="columns"> + <div class="columns contents"> + <div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div> + <div class="contents c2"><div>2</div></div> + <div class="contents c3"><div>3</div></div> + </div> + </div> +</div> +<script> +window.onload = function() { + eachDisplayContentsElementIn(document, window, + function(e) { e.style.display = 'inline'; }, + function(e) { e.style.display = ''; }) +} +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-multicol-001-none.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-multicol-001-none.html new file mode 100644 index 0000000000..f171fc09fc --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-multicol-001-none.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display:contents in multicolumn layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-multicol-001-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<script src="support/util.js"></script> +<div style="color: red"> + <div class="columns"> + <div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div> + <div class="contents c2"><div>2</div></div> + <div class="contents c3"><div>3</div></div> + </div> + + <div class="columns"> + <div class="columns contents"> + <div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div> + <div class="contents c2"><div>2</div></div> + <div class="contents c3"><div>3</div></div> + </div> + </div> +</div> +<script> +window.onload = function() { + eachDisplayContentsElementIn(document, window, + function(e) { e.style.display = 'none'; }, + function(e) { e.style.display = ''; }) +} +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-pseudo-insertion-001-ref.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-pseudo-insertion-001-ref.html new file mode 100644 index 0000000000..38dd74a744 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-pseudo-insertion-001-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +P<span>A</span>SS diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-pseudo-insertion-001.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-pseudo-insertion-001.html new file mode 100644 index 0000000000..f35c3cc47b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-pseudo-insertion-001.html @@ -0,0 +1,26 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: Dynamic insertion on empty display: contents element with pseudo-elements</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel=match href="display-contents-dynamic-pseudo-insertion-001-ref.html"> +<style> +.contents { + display: contents; + border: 10px solid red; +} +.contents::before { + content: "A"; +} +.contents::after { + content: "SS"; +} +</style> +<div class="contents"></div> +<script> +document.body.offsetTop; +let span = document.createElement('span'); +span.innerHTML = "P"; +let contents = document.querySelector('.contents'); +contents.parentNode.insertBefore(span, contents); +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-table-001-inline.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-table-001-inline.html new file mode 100644 index 0000000000..4f2578cbb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-table-001-inline.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display:contents</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-table-001-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<script src="support/util.js"></script> +<div style="color: red"> + <div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div> + <div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div> + <div class="contents c3"><div class="cell">3</div></div> + <div class="contents c4"><div class="rowg">4</div></div> + <div class="contents c5"><div class="cell">5a</div></div> + <div class="cell c5">5b</div> + <div class="contents c6"><div class="head">6</div></div> + <div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div> + <div class="contents c8"><div class="cell">7b</div></div> + <div class="contents c9"><div class="foot">8</div></div> + <div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> + <div class="contents c10"><div class="cell">10</div></div> +</div> +<script> +window.onload = function() { + eachDisplayContentsElementIn( + document, + window, + function(e) { e.style.display = 'inline'; }, + function(e) { e.style.display = 'contents'; }); +} +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-table-001-none.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-table-001-none.html new file mode 100644 index 0000000000..eb4297d431 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-table-001-none.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display:contents</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-table-001-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<script src="support/util.js"></script> +<div style="color: red"> + <div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div> + <div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div> + <div class="contents c3"><div class="cell">3</div></div> + <div class="contents c4"><div class="rowg">4</div></div> + <div class="contents c5"><div class="cell">5a</div></div> + <div class="cell c5">5b</div> + <div class="contents c6"><div class="head">6</div></div> + <div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div> + <div class="contents c8"><div class="cell">7b</div></div> + <div class="contents c9"><div class="foot">8</div></div> + <div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> + <div class="contents c10"><div class="cell">10</div></div> +</div> +<script> +window.onload = function() { + eachDisplayContentsElementIn( + document, + window, + function(e) { e.style.display = 'none'; }, + function(e) { e.style.display = 'contents'; }); +} +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-table-002-inline.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-table-002-inline.html new file mode 100644 index 0000000000..e7a9d200d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-table-002-inline.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display:contents in table layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-table-002-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<script src="support/util.js"></script> +<div style="color: red"> + <div class="table" style="float:right"> + <div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div> + <div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div> + <div class="contents c3"><div class="cell">3</div></div> + <div class="contents c4"><div class="rowg">4</div></div> + <div class="contents c5"><div class="cell">5a</div></div> + <div class="cell c5">5b</div> + <div class="contents c6"><div class="head">6</div></div> + <div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div> + <div class="contents c8"><div class="cell">7b</div></div> + <div class="contents c9"><div class="foot">8</div></div> + <div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> + <div class="contents c10"><div class="cell">10</div></div> + </div> +</div> +<script> +window.onload = function() { + eachDisplayContentsElementIn( + document, + window, + function(e) { e.style.display = 'inline'; }, + function(e) { e.style.display = 'contents'; }); +} +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-dynamic-table-002-none.html b/testing/web-platform/tests/css/css-display/display-contents-dynamic-table-002-none.html new file mode 100644 index 0000000000..964b6d72f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-dynamic-table-002-none.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display:contents in table layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-table-002-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<script src="support/util.js"></script> +<div style="color: red"> + <div class="table" style="float:right"> + <div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div> + <div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div> + <div class="contents c3"><div class="cell">3</div></div> + <div class="contents c4"><div class="rowg">4</div></div> + <div class="contents c5"><div class="cell">5a</div></div> + <div class="cell c5">5b</div> + <div class="contents c6"><div class="head">6</div></div> + <div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div> + <div class="contents c8"><div class="cell">7b</div></div> + <div class="contents c9"><div class="foot">8</div></div> + <div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> + <div class="contents c10"><div class="cell">10</div></div> + </div> +</div> +<script> +window.onload = function() { + eachDisplayContentsElementIn( + document, + window, + function(e) { e.style.display = 'none'; }, + function(e) { e.style.display = 'contents'; }); +} +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-fieldset-002-ref.html b/testing/web-platform/tests/css/css-display/display-contents-fieldset-002-ref.html new file mode 100644 index 0000000000..ff8fd9dea7 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-fieldset-002-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE HTML> +<html><head> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1140160"> +<style> +fieldset { padding:0; } +span { display:block; width:10px; height:10px; background:lime; } +.contents { } +legend { border: 1px solid; } +.test2 legend { } +.test2 legend::after, .test3 legend::after { content:"legend"; } +.test2 legend.static, .test3 legend.static { display:block; } +.test2 legend.static::before, .test3 legend.static::before { content:"static "; } +.test2 legend.static::before { content:"static "; } +.after::after { content:"::after"; } +.before::before { content:"::before"; } +.nb legend.static { border: 1px solid; } +.nb legend { border-style:none; } +</style> +</head> +<body> +<fieldset><div class="test contents"></div></fieldset> +<fieldset><div class="test contents">x</div></fieldset> +<fieldset><div class="test contents after"></div></fieldset> +<fieldset><div class="test contents before"></div></fieldset> +<fieldset><div class="test contents before after"></div></fieldset> +<fieldset><span></span></fieldset> +<fieldset><span></span></fieldset> +<fieldset><span></span></fieldset> +<fieldset class="test2"></fieldset> +<fieldset class="test2 after"></fieldset> +<fieldset class="test2"><legend class="static"></legend></fieldset> +<fieldset class="test2"><legend class="static contents"></legend></fieldset> +<fieldset class="test2"><legend class="static"></legend></fieldset> +<fieldset class="test2"></fieldset> +<fieldset class="test3"></fieldset> +<fieldset class="test2"><legend class="static"></legend></fieldset> +<fieldset class="test3"><legend class="static"></legend></fieldset> +<script> +document.body.offsetHeight; +var tests = document.querySelectorAll('.test'); +for (i=0; i < tests.length; ++i) { + test = tests[i]; + test.appendChild(document.createElement('span')); +} +var tests = document.querySelectorAll('.test2'); +for (i=0; i < tests.length; ++i) { + test = tests[i]; + let span = document.createElement('dummy-inline'); + span.innerHTML = "legend"; + test.appendChild(span); +} + +var tests = document.querySelectorAll('.test3'); +for (i=0; i < tests.length; ++i) { + test = tests[i]; + test.appendChild(document.createElement('legend')); +} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-display/display-contents-fieldset-002.html b/testing/web-platform/tests/css/css-display/display-contents-fieldset-002.html new file mode 100644 index 0000000000..612d483d7c --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-fieldset-002.html @@ -0,0 +1,52 @@ +<!DOCTYPE HTML> +<html><head> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1140160"> +<link rel="help" href="https://drafts.csswg.org/css-display/#box-generation"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1140160"> +<link rel="match" href="display-contents-fieldset-002-ref.html"> +<style> +fieldset { padding:0; } +span { display:block; width:10px; height:10px; background:lime; } +.contents { display: contents; } +legend { border: 1px solid; } +.test2 legend { display:contents; } +.test2 legend::after, .test3 legend::after { content:"legend"; } +.test2 legend.static, .test3 legend.static { display:block; } +.test2 legend.static::before, .test3 legend.static::before { content:"static "; } +.after::after { content:"::after"; } +.before::before { content:"::before"; } +</style> +</head> +<body> +<fieldset><div class="test contents"></div></fieldset> +<fieldset><div class="test contents">x</div></fieldset> +<fieldset><div class="test contents after"></div></fieldset> +<fieldset><div class="test contents before"></div></fieldset> +<fieldset><div class="test contents before after"></div></fieldset> +<fieldset><legend class="test contents"></legend></fieldset> +<fieldset><div class="contents"><legend class="test contents"></legend></div></fieldset> +<fieldset><legend class="contents"><div class="test contents"></div></legend></fieldset> +<fieldset class="test2"></fieldset> +<fieldset class="test2 after"></fieldset> +<fieldset class="test2"><legend class="static"></legend></fieldset> +<fieldset class="test2"><legend class="static contents"></legend></fieldset> +<fieldset class="test2"><div class="contents"><legend class="static"></legend></div></fieldset> +<fieldset><div class="test2 contents"></div></fieldset> +<fieldset><div class="test3 contents"></div></fieldset> +<fieldset><div class="test2 contents"><legend class="static"></legend></div></fieldset> +<fieldset><div class="test3 contents"><legend class="static"></legend></div></fieldset> +<script> +document.body.offsetHeight; +var tests = document.querySelectorAll('.test'); +for (i=0; i < tests.length; ++i) { + test = tests[i]; + test.appendChild(document.createElement('span')); +} +var tests = document.querySelectorAll('.test2,.test3'); +for (i=0; i < tests.length; ++i) { + test = tests[i]; + test.appendChild(document.createElement('legend')); +} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-display/display-contents-fieldset-nested-legend-ref.html b/testing/web-platform/tests/css/css-display/display-contents-fieldset-nested-legend-ref.html new file mode 100644 index 0000000000..c4afe0e53b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-fieldset-nested-legend-ref.html @@ -0,0 +1,6 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<title>CSS Test Reference</title> +<fieldset style="color: green">P<legend>legend</legend>ASS</fieldset> diff --git a/testing/web-platform/tests/css/css-display/display-contents-fieldset-nested-legend.html b/testing/web-platform/tests/css/css-display/display-contents-fieldset-nested-legend.html new file mode 100644 index 0000000000..abda0ad32d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-fieldset-nested-legend.html @@ -0,0 +1,25 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<link rel="match" href="display-contents-fieldset-nested-legend-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-display/#unbox"> +<link rel="help" href="https://drafts.csswg.org/css-display/#valdef-display-contents"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1427292"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<title>CSS Test: display: contents on legend</title> +<style> +fieldset { + color: red; +} +.contents { + display: contents; + color: green; + border: 10px solid red; + unicode-bidi: normal; +} +</style> +<fieldset><legend class="contents">P<legend>legend</legend>ASS</legend></fieldset> diff --git a/testing/web-platform/tests/css/css-display/display-contents-fieldset.html b/testing/web-platform/tests/css/css-display/display-contents-fieldset.html new file mode 100644 index 0000000000..f38a3763cf --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-fieldset.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: display:contents and HTML fieldset and legend elements</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-display/#unbox-html"> +<link rel="match" href="display-contents-pass-ref.html"> +<style> + /* Disable kerning because kerning may differ for different node tree. */ + html { font-kerning: none; font-feature-settings: "kern" off; } + fieldset, legend { + all: initial; + border: 10px solid red; + display: contents; + } +</style> +<p>You should see the word PASS below.</p> +P<fieldset>A<legend>S</legend>S</fieldset> diff --git a/testing/web-platform/tests/css/css-display/display-contents-first-letter-001.html b/testing/web-platform/tests/css/css-display/display-contents-first-letter-001.html new file mode 100644 index 0000000000..eb645c9ee7 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-first-letter-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: display:contents and ::first-letter</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo"> +<link rel="match" href="display-contents-pass-green-no-red-ref.html"> +<style> + #contents { display: contents } + #contents::first-letter { background-color: red } + #container::first-letter { color: green } + span { color: green } +</style> +<p>You should see the word PASS in green and no red below.</p> +<div id="container"> + <div id="contents">P<span>ASS</span></div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-first-letter-002.html b/testing/web-platform/tests/css/css-display/display-contents-first-letter-002.html new file mode 100644 index 0000000000..8d1d8572ac --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-first-letter-002.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: display:contents and ::first-letter inheritance</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo"> +<link rel="match" href="display-contents-pass-green-no-red-ref.html"> +<style> + div { color: red } + div::first-letter { background: transparent /* To trigger first-letter pseudo element */ } + span { color: green; display: contents; background-color: red } +</style> +<p>You should see the word PASS in green and no red below.</p> +<div><span>PASS</span></div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-first-line-001.html b/testing/web-platform/tests/css/css-display/display-contents-first-line-001.html new file mode 100644 index 0000000000..7fbd4b3bff --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-first-line-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: display:contents and ::first-line</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo"> +<link rel="match" href="display-contents-pass-green-no-red-ref.html"> +<style> + #contents { display: contents } + #contents::first-line { background-color: red } + #container::first-line { color: green } +</style> +<p>You should see the word PASS in green and no red below.</p> +<div id="container"> + <div id="contents"><span>P</span>ASS</div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-first-line-002.html b/testing/web-platform/tests/css/css-display/display-contents-first-line-002.html new file mode 100644 index 0000000000..ae900235a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-first-line-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: display:contents and ::first-line inheritance</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo"> +<link rel="match" href="display-contents-pass-green-no-red-ref.html"> +<style> + span { color: green } + .contents { display: contents } + #container::first-line { color: red } +</style> +<p>You should see the word PASS in green and no red below.</p> +<div id="container"> + <span class="contents">P</span><span>ASS</span> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-flex-001-ref.html b/testing/web-platform/tests/css/css-display/display-contents-flex-001-ref.html new file mode 100644 index 0000000000..144af7cf9e --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-flex-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<style> +.flex { + display: flex; +} +.inline { + display: inline; +} +</style> +<p>Test passes if you see the word "PASS", with a "0" under the first "S", and no red</p> +<div class="flex"> +P + <div>A</div> + <div class="inline">S<div>0</div></div> + S +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-flex-001.html b/testing/web-platform/tests/css/css-display/display-contents-flex-001.html new file mode 100644 index 0000000000..da4cd72008 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-flex-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: display: contents inside a flex container</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-flex-001-ref.html"> +<style> +.flex { + display: flex; +} +.inline { + display: inline; +} +.contents { + display: contents; + border: 1px solid red; +} +</style> +<p>Test passes if you see the word "PASS", with a "0" under the first "S", and no red</p> +<div class="flex"> +P + <div class="contents"> + <div>A</div> + </div> + <div class="contents"> + <div class="inline">S<div>0</div></div> + </div> + <div class="contents"> + S + </div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-flex-002-ref.html b/testing/web-platform/tests/css/css-display/display-contents-flex-002-ref.html new file mode 100644 index 0000000000..3624bb782d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-flex-002-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="stylesheet" href="support/acid.css"> +<div style="color: red" class="ref"> + <div class="flex c1"> + 0 + <div class="inline c1">x </div> + <div class="inline c1"><div class="inline c2">y</div></div> + <div class="inline c1"><div class="inline c2"><div>1<span>1</span></div></div></div> + <div class="inline c2"><div class="inline">2a<div>2<div class="inline c2">b<span class="b">b</span></div></div></div></div> + <div class="c3">3</div> + <div class="inline"><div class="inline c4">4</div></div> + <div><div class="inline c5">5a</div></div> + <div class="c5">5b</div> + <div class="inline c6"><div>6</div></div> + <div class="ib"><div class="inline c7"><div class="inline c2">7<span class="b">a</span></div></div></div> + <div class="inline c9"><div>8</div></div> + <div class="inline c9"><div class="inline">9<div class="inline c2">a</div></div></div> + <span class="c2 b">b</span> + <div class="inline c2">c</div> + <div class="inline c10"><div>10</div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-flex-002.html b/testing/web-platform/tests/css/css-display/display-contents-flex-002.html new file mode 100644 index 0000000000..869ca00b72 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-flex-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display: contents in flex layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-flex-002-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<div class="flex c1"> + 0 + <div class="contents c1">x</div> + <div class="contents c1"><div class="contents c2">y</div></div> + <div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div> + <div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div> + <div class="contents c3"><div class="inline">3</div></div> + <div class="inline"><div class="contents c4">4</div></div> + <div><div class="contents c5">5a</div></div> + <div class="c5">5b</div> + <div class="contents c6"><div>6</div></div> + <div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div> + <div class="contents c9"><div>8</div></div> + <div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> + <div class="contents c10"><div>10</div></div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-flex-003.html b/testing/web-platform/tests/css/css-display/display-contents-flex-003.html new file mode 100644 index 0000000000..6425db9421 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-flex-003.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display: contents in flex layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-flex-002-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<div class="flex"><div class="contents c1"> + 0 + <div class="contents c1">x</div> + <div class="contents c1"><div class="contents c2">y</div></div> + <div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div> + <div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div> + <div class="contents c3"><div class="inline">3</div></div> + <div><div class="contents c4">4</div></div> + <div><div class="contents c5">5a</div></div> + <div class="c5">5b</div> + <div class="contents c6"><div>6</div></div> + <div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div> + <div class="contents c9"><div>8</div></div> + <div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> + <div class="contents c10"><div>10</div></div> +</div></div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-float-001.html b/testing/web-platform/tests/css/css-display/display-contents-float-001.html new file mode 100644 index 0000000000..d51e7c1d4a --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-float-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: display:contents works on floated elements</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-pass-no-red-ref.html"> +<style> + div { + display: contents; + float: right; + background: red; + } +</style> +<p>You should see the word PASS and no red below.</p> +<div>P<span>A</span>S<span>S</span></div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-focusable-001.html b/testing/web-platform/tests/css/css-display/display-contents-focusable-001.html new file mode 100644 index 0000000000..3f64718587 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-focusable-001.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title>CSS Test (Display): Elements with display:contents should be focusable</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#box-generation"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2632"> +<link rel="help" href="https://github.com/whatwg/html/issues/1837"> +<link rel="help" href="https://github.com/whatwg/html/pull/9425"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1366037"> +<!-- + + This requirement may not be crystal-clear from CSS specs, but + discussion in https://github.com/w3c/csswg-drafts/issues/2632 + concluded it was correct and that no spec changes were needed. + + https://github.com/whatwg/html/pull/9425 makes this clearer in the + HTML spec. + +--> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + +#test { --test-var: test-not-focused; } +#test:focus { --test-var: test-focused; } + +</style> + +<div id="test" style="display: contents" tabindex="1">Hello</div> + +<script> + + test( + function() { + var e = document.getElementById("test"); + var cs = getComputedStyle(e); + assert_not_equals(document.activeElement, e, "precondition"); + assert_equals(cs.getPropertyValue("--test-var"), "test-not-focused", "precondition (style)"); + e.focus(); + assert_equals(document.activeElement, e, "e is now focused"); + assert_equals(cs.getPropertyValue("--test-var"), "test-focused", "e is now focused (style)"); + }, "element with display:contents is focusable"); + +</script> + diff --git a/testing/web-platform/tests/css/css-display/display-contents-inline-001.html b/testing/web-platform/tests/css/css-display/display-contents-inline-001.html new file mode 100644 index 0000000000..9527382e8b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-inline-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: display:contents in inline layout</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-pass-no-red-ref.html"> +<style> + #contents { + display: contents; + border: 10px solid red + } +</style> +<p>You should see the word PASS and no red below.</p> +<span> + P<div id="contents">A<span>S</span></div>S +</span> diff --git a/testing/web-platform/tests/css/css-display/display-contents-inline-flex-001-ref.html b/testing/web-platform/tests/css/css-display/display-contents-inline-flex-001-ref.html new file mode 100644 index 0000000000..20ec437a51 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-inline-flex-001-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="stylesheet" href="support/acid.css"> +<div style="color: red" class="ref"> +<div class="iflex"><div class="contents c2"> +0 +</div></div> +<div class="iflex"><div class="contents c2"> +0 +<div class="inline c1">1</div> +2 +</div></div> +<div class="iflex"><div class="contents c2"> +0<div class="inline c1">1</div>2 +</div></div> +<div class="iflex c3"> +0<div class="inline c2"><div class="c1">1</div></div>2 +</div> +<div class="iflex c3"> +<div class="inline c2">0</div><div class="inline c2"><div class="c1">1</div></div><div class="inline c2">2</div> +</div> +<div class="iflex c3"> +<div class="inline">0</div> +<div class="inline"><div class="inline c1">1</div></div> +<div class="inline">2</div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-inline-flex-001.html b/testing/web-platform/tests/css/css-display/display-contents-inline-flex-001.html new file mode 100644 index 0000000000..43b502731a --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-inline-flex-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display: contents in inline-flex layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-inline-flex-001-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<div style="color: red"> + <div class="iflex"><div class="contents c2"> + 0 + </div></div> + <div class="iflex"><div class="contents c2"> + 0 + <div class="contents c1">1</div> + 2 + </div></div> + <div class="iflex"><div class="contents c2"> + 0 + <div class="c1">1</div> + 2 + </div></div> + <div class="iflex c3"> + 0 + <div class="contents c2"><div class="c1">1</div></div> + 2 + </div> + <div class="iflex c3"> + <div class="contents c2">0</div> + <div class="contents c2"><div class="c1">1</div></div> + <div class="contents c2">2</div> + </div> + <div class="iflex c3"> + <div class="inline">0</div> + <div class="contents"><div class="inline c1">1</div></div> + <div class="inline">2</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-line-height-ref.html b/testing/web-platform/tests/css/css-display/display-contents-line-height-ref.html new file mode 100644 index 0000000000..d06c63f09f --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-line-height-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<style> + span { font-size: 40px; } +</style> +<p>The two lines below should not overlap.</p> +<span>Line 1</span><br><span>Line 2</span> diff --git a/testing/web-platform/tests/css/css-display/display-contents-line-height.html b/testing/web-platform/tests/css/css-display/display-contents-line-height.html new file mode 100644 index 0000000000..31fd5a6d47 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-line-height.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: display:contents font-size should affect line-height</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-line-height-ref.html"> +<style> + span { + display: contents; + font-size: 40px; + } +</style> +<p>The two lines below should not overlap.</p> +<span>Line 1</span><br><span>Line 2</span> diff --git a/testing/web-platform/tests/css/css-display/display-contents-list-001-ref.html b/testing/web-platform/tests/css/css-display/display-contents-list-001-ref.html new file mode 100644 index 0000000000..bc5dfbe5c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-list-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="stylesheet" href="support/acid.css"> +<div style="color: red" class="ref"> + <ul><li class="c1"><div class="inline c2"> + 0 + <div class="inline c1">x</div> + <div class="inline c1"><div class="inline c2">y</div></div> + <div class="inline c1"><div class="inline c2"><div>1<span>1</span></div></div></div> + <div class="inline c2"><div class="inline">2a<div>2<div class="inline c2">b<span class="b">b</span></div></div></div></div> + <div class="inline c3"><div class="inline">3</div></div> + <div class="inline"><div class="inline c4">4</div></div> + <div><div class="inline c5">5a</div></div> + <div class="c5">5b</div> + <div class="inline c6"><div>6</div></div> + <div class="ib"><div class="inline c7"><div class="inline c2">7<span class="b">a</span></div></div></div> + <div class="inline c9"><div>8</div></div> + <div class="inline c9"><div class="inline">9<div class="inline c2">a<span class="b">b</span>c</div></div></div> + <div class="inline c10"><div>10</div></div> + </div></li> + </ul> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-list-001.html b/testing/web-platform/tests/css/css-display/display-contents-list-001.html new file mode 100644 index 0000000000..7b1fd44cae --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-list-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display: contents in list layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-list-001-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<div style="color: red"> + <ul><li class="c1"><div class="contents c2"> + 0 + <div class="contents c1">x</div> + <div class="contents c1"><div class="contents c2">y</div></div> + <div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div> + <div class="contents c2"><div class="inline">2a<div>2<div class="contents c2">b<span class="b">b</span></div></div></div></div> + <div class="contents c3"><div class="inline">3</div></div> + <div class="inline"><div class="contents c4">4</div></div> + <div><div class="contents c5">5a</div></div> + <div class="c5">5b</div> + <div class="contents c6"><div>6</div></div> + <div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div> + <div class="contents c9"><div>8</div></div> + <div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> + <div class="contents c10"><div>10</div></div> + </div></li></ul> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-multicol-001-ref.html b/testing/web-platform/tests/css/css-display/display-contents-multicol-001-ref.html new file mode 100644 index 0000000000..0d371b3442 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-multicol-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="stylesheet" href="support/acid.css"> +<div style="color: red" class="ref"> + <div class="columns"> + <div class="contents c1"><div class="contents c2"><div>1<span>1</span></div></div></div> + <div class="contents c2"><div>2</div></div> + <div class="contents c3"><div>3</div></div> + </div> + + <div class="columns"> + <div class="contents c1"><div class="contents c2"><div>1<span>1</span></div></div></div> + <div class="contents c2"><div>2</div></div> + <div class="contents c3"><div>3</div></div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-multicol-001.html b/testing/web-platform/tests/css/css-display/display-contents-multicol-001.html new file mode 100644 index 0000000000..2213fdc684 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-multicol-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display:contents in multicolumn layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-multicol-001-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<div style="color: red"> + <div class="columns"> + <div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div> + <div class="contents c2"><div>2</div></div> + <div class="contents c3"><div>3</div></div> + </div> + + <div class="columns"> + <div class="columns contents"> + <div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div> + <div class="contents c2"><div>2</div></div> + <div class="contents c3"><div>3</div></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-oof-001.html b/testing/web-platform/tests/css/css-display/display-contents-oof-001.html new file mode 100644 index 0000000000..03509bf9ef --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-oof-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: display:contents works on out-of-flow positioned elements</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-pass-no-red-ref.html"> +<style> + div { + display: contents; + position: absolute; + right: 0; + background: red; + } +</style> +<p>You should see the word PASS and no red below.</p> +<div>P<span>A</span>S<span>S</span></div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-oof-002.html b/testing/web-platform/tests/css/css-display/display-contents-oof-002.html new file mode 100644 index 0000000000..8df8251a67 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-oof-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: display:contents works on out-of-flow positioned elements</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-pass-no-red-ref.html"> +<style> + div { + display: contents; + position: fixed; + right: 0; + background: red; + } +</style> +<p>You should see the word PASS and no red below.</p> +<div>P<span>A</span>S<span>S</span></div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-parsing-001.html b/testing/web-platform/tests/css/css-display/display-contents-parsing-001.html new file mode 100644 index 0000000000..085d12b103 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-parsing-001.html @@ -0,0 +1,43 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Tests that the 'contents' value for the 'display' property is correctly parsed</title> +<link rel="help" href="https://drafts.csswg.org/css-display/#box-generation"> +<link rel="author" href="mailto:ecobos@igalia.com" title="Emilio Cobos Álvarez"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .contents { + display: contents; + } + + .contents-then-block { + display: contents; + display: block; + } + + .content { + display: content; + } +</style> +<div class="contents" id="contentsElement"></div> +<div class="content" id="bogusContentsElement"></div> +<div class="contents-then-block" id="contentsThenBlockElement"></div> +<script> +test(function() { + var contentsElement = document.getElementById("contentsElement"); + var bogusContentsElement = document.getElementById("bogusContentsElement"); + var contentsThenBlockElement = document.getElementById("contentsThenBlockElement"); + + assert_equals(getComputedStyle(contentsElement).getPropertyValue("display"), "contents"); + assert_equals(getComputedStyle(bogusContentsElement).getPropertyValue("display"), "block"); + assert_equals(getComputedStyle(contentsThenBlockElement).getPropertyValue("display"), "block"); + + var element = document.createElement("div"); + document.body.appendChild(element); + assert_equals(getComputedStyle(element).getPropertyValue("display"), "block"); + element.style.display = "contents"; + assert_equals(getComputedStyle(element).getPropertyValue("display"), "contents"); + element.style.display = "block"; + assert_equals(getComputedStyle(element).getPropertyValue("display"), "block"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-pass-green-no-red-ref.html b/testing/web-platform/tests/css/css-display/display-contents-pass-green-no-red-ref.html new file mode 100644 index 0000000000..9e7349cacd --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-pass-green-no-red-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<p>You should see the word PASS in green and no red below.</p> +<div style="color:green"><span>P</span>ASS</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-pass-no-red-ref.html b/testing/web-platform/tests/css/css-display/display-contents-pass-no-red-ref.html new file mode 100644 index 0000000000..3e445d4b43 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-pass-no-red-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<p>You should see the word PASS and no red below.</p> +<div>P<span>A</span>S<span>S</span></div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-pass-ref.html b/testing/web-platform/tests/css/css-display/display-contents-pass-ref.html new file mode 100644 index 0000000000..82321b9c07 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-pass-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<style> +/* Disable kerning because kerning may differ for different node tree. */ +html { font-kerning: none; font-feature-settings: "kern" off; } +</style> +<p>You should see the word PASS below.</p> +PASS diff --git a/testing/web-platform/tests/css/css-display/display-contents-root-background-ref.html b/testing/web-platform/tests/css/css-display/display-contents-root-background-ref.html new file mode 100644 index 0000000000..720ef20d83 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-root-background-ref.html @@ -0,0 +1,4 @@ +<!doctype html> +<html style="background:green"> +<title>CSS Test Reference</title> +<p>Pass if the background is green.</p> diff --git a/testing/web-platform/tests/css/css-display/display-contents-root-background.html b/testing/web-platform/tests/css/css-display/display-contents-root-background.html new file mode 100644 index 0000000000..6770266f51 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-root-background.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>CSS Test: display:contents on root element blockified with rendered background.</title> +<link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties"> +<link rel="help" href="https://drafts.csswg.org/css-display/#transformations"> +<link rel="match" href="display-contents-root-background-ref.html"> +<style> + :root { + display: contents; + background-image: url(../support/1x1-green.png); + } +</style> +<p>Pass if the background is green.</p> diff --git a/testing/web-platform/tests/css/css-display/display-contents-shadow-dom-1-ref.html b/testing/web-platform/tests/css/css-display/display-contents-shadow-dom-1-ref.html new file mode 100644 index 0000000000..324cfc3cec --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-shadow-dom-1-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <title>Reference: CSS display:contents; in Shadow DOM</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; +} + +span { color:blue; } +</style> + </head> + <body> + <div>X 1 c</div> + <div>a 2 c</div> + <div>a 3 Y</div> + <div>X 4 Y</div> + <div>a 5 Y</div> + <div>X <span>6</span> c</div> + <div>a <span>7</span> c</div> + <div>a <span>8</span> Y</div> + <div>X <span>9</span> Y</div> + <div>a <span>A</span> Y</div> + <div>a <span>1 2</span> B</div> + <div>A <span>a 1 2 c</span> B</div> + <div>A <span>a 1 a 2 ca 3 c</span> B</div> + <div>A <span>a 1 c a 2 c</span> B</div> + <div>X <span>a 1 c a 2 c</span> B</div> + <div><span>1a 2 c</span></div> + <div><span>a 1 c2</span></div> + <div>A<span>b</span>c</div> + <div>A<span>b</span>c</div> + <div><span>b c</span>d</div> + <div><span>a </span>b</div> + <div><b>One</b><i>Two</i></div> + <div><b>One</b><i>Two</i></div> + <div><b>One</b><i>Two</i></div> + <div><b>One</b><i>Two</i></div> + <b style="color:blue">One</b><i style="color:blue">Two</i>Three + <div></div> + <b style="color:green">V</b> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/display-contents-shadow-dom-1.html b/testing/web-platform/tests/css/css-display/display-contents-shadow-dom-1.html new file mode 100644 index 0000000000..45dd6d9b77 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-shadow-dom-1.html @@ -0,0 +1,221 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait" lang="en-US"> + <head> + <meta charset="utf-8"> + <title>CSS Test: CSS display:contents; in Shadow DOM</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"> + <link rel="help" href="https://drafts.csswg.org/css-display/"> + <link rel="match" href="display-contents-shadow-dom-1-ref.html"> +<style> +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; +} +.before::before, ::slotted(.before)::before {content: "a ";} +.after::after, ::slotted(.after)::after {content: " c";} +div.before::before {content: "X ";} +div.after::after {content: " Y";} +.b, .c, ::slotted(.b), ::slotted(.c) { display:contents; } +</style> + </head> + <body> + <div id="host1" class="before"></div> + <span id="host2"></span> + <div id="host3" class="after"></div> + <div id="host4" class="before after"></div> + <div id="host5" class="after"></div> + <div id="host6" class="before"></div> + <div id="host7"></div> + <div id="host8" class="after"></div> + <div id="host9" class="before after"></div> + <div id="hostA" class="after"></div> + <div id="hostB"></div> + <div id="hostC"></div> + <div id="hostD"></div> + <div id="hostE"></div> + <div id="hostF" class="before"></div> + <div id="hostG"></div> + <span id="hostH"></span> + <div id="hostI"></div> + <div id="hostJ"></div> + <span id="hostK"></span> + <div id="hostL"></div> + <div id="hostM"><i slot=i>Two</i><b slot=b>One</b></div> + <div id="hostN"><i slot=i class="c">Two</i><b slot=b>One</b></div> + <div id="hostO"><i slot=i>Two</i><b slot=b class="c">One</b></div> + <div id="hostP"><i slot=i class="c">Two</i><b slot=b class="c">One</b></div> + <div id="hostQ" class="c" style="color:blue"><i slot=i class="c">Two</i><b slot=b class="c">One</b></div>Three + <div id="hostS" class="c"><span class="c">S</span></div> + <div id="hostT" class="c">T</div> + <div id="hostU"><span slot="c">U</span></div> + <div id="hostV" class="c" style="color:red"><b slot="b" class="c" style="color:inherit">V</b></div> + + <script> + function shadow(id) { + return document.getElementById(id).attachShadow({mode:"open"}); + } + function span(s) { + var e = document.createElement("span"); + var t = document.createTextNode(s); + e.appendChild(t); + return e; + } + function text(s) { + return document.createTextNode(s); + } + function contents(n, slotName) { + var e = document.createElement("z"); + e.style.display = "contents"; + e.style.color = "blue"; + if (n) e.appendChild(n); + if (slotName) e.setAttribute("slot", slotName); + return e; + } + + function run() { + document.body.offsetHeight; + + shadow("host1").innerHTML = '<slot style="display:inline"></slot> c'; + shadow("host2").innerHTML = 'a <slot style="display:contents"></slot> c'; + shadow("host3").innerHTML = 'a <slot style="display:contents"></slot>'; + shadow("host4").innerHTML = '<slot style="display:contents"></slot>'; + shadow("host5").innerHTML = 'a <slot style="display:contents"></slot>'; + shadow("host6").innerHTML = '<z style="color:blue; display:contents"><slot style="display:inline"></slot></z> c'; + shadow("host7").innerHTML = 'a <slot style="display:contents"></slot> c'; + shadow("host8").innerHTML = 'a <z style="color:blue; display:contents"><slot style="display:contents"></z></slot>'; + shadow("host9").innerHTML = '<slot style="display:contents"></slot>'; + shadow("hostA").innerHTML = 'a <slot style="display:contents"></slot>'; + shadow("hostB").innerHTML = 'a <slot name="c" style="display:contents"></slot> <slot name="b" style="display:contents"></slot> B'; + shadow("hostC").innerHTML = 'A <slot name="c" style="display:contents"></slot> <slot name="b" style="display:contents"></slot> B'; + shadow("hostD").innerHTML = 'A <slot name="c" style="display:contents"></slot> <slot name="b" style="display:contents"></slot> B <slot name="b"></slot>'; + shadow("hostE").innerHTML = 'A <slot name="c" style="display:contents"></slot> <slot name="b" style="display:contents"></slot> B'; + shadow("hostF").innerHTML = '<slot name="c" style="display:contents"></slot> <slot name="b" style="display:contents"></slot> B'; + shadow("hostG").innerHTML = '<slot name="b" style="display:contents"></slot>'; + shadow("hostH").innerHTML = '<slot name="b" style="display:contents"></slot>'; + shadow("hostI").innerHTML = 'A<slot name="b" style="display:contents"></slot>'; + shadow("hostJ").innerHTML = 'A<slot name="b" style="display:contents"></slot>'; + shadow("hostK").innerHTML = '<slot name="b" style="display:contents"></slot>'; + shadow("hostL").innerHTML = '<slot name="b" style="display:contents"></slot>'; + shadow("hostM").innerHTML = '<slot name="b" style="display:contents"></slot><slot name="i" style="display:inline"></slot>'; + shadow("hostN").innerHTML = '<slot name="b" style="display:contents"></slot><slot name="i" style="display:inline"></slot>'; + shadow("hostO").innerHTML = '<slot name="b" style="display:contents"></slot><slot name="i" style="display:inline"></slot>'; + shadow("hostP").innerHTML = '<slot name="b" style="display:contents"></slot><slot name="i" style="display:inline"></slot>'; + shadow("hostQ").innerHTML = '<slot name="b" style="display:contents"></slot><slot name="i" style="display:inline"></slot>'; + } + + function tweak() { + document.body.offsetHeight; + + host1.appendChild(span("1")); + host2.appendChild(text("2")); + host3.appendChild(span("3")); + host4.appendChild(text("4")); + + var e = span("5"); + e.style.display = "contents"; + host5.appendChild(e); + + host6.appendChild(span("6")); + host7.appendChild(contents(text("7"))); + host8.appendChild(contents(span("8"))); + host9.appendChild(contents(text("9"))); + + var e = contents(span("A")); + hostA.appendChild(e); + + var e = contents(text("2"), "b"); + hostB.appendChild(e); + var e = contents(text("1"), "c"); + hostB.appendChild(e); + + var e = contents(text("2"), "b"); + e.className = "after"; + hostC.appendChild(e); + var e = contents(text("1"), "c"); + e.className = "before"; + hostC.appendChild(e); + + var e = contents(text("2"), "b"); + e.className = "before after"; + hostD.appendChild(e); + var e = contents(text(" 3"), "b"); + e.className = "before after"; + hostD.appendChild(e); + var e = contents(text("1"), "c"); + e.className = "before"; + hostD.appendChild(e); + + var e = contents(contents(text("2")), "b"); + e.className = "before after"; + hostE.appendChild(e); + var e2 = contents(text("1"), "c"); + e2.className = "before after"; + hostE.insertBefore(e2, e); + + var e = contents(text("2"), "b"); + e.className = "before after"; + hostF.appendChild(e); + var e2 = contents(text("1"), "c"); + e2.className = "before after"; + hostF.insertBefore(e2, e); + + var e = contents(contents(text("1")), "b"); + hostG.appendChild(e); + var e = contents(text("2"), "b"); + e.className = "before after"; + hostG.appendChild(e); + + var e = contents(contents(text("2")), "b"); + hostH.appendChild(e); + var e2 = contents(text("1"), "b"); + e2.className = "before after"; + hostH.insertBefore(e2, e); + + var e = contents(text("b"), "b"); + hostI.appendChild(e); + var e = span("c"); + e.setAttribute("slot", "b"); + hostI.appendChild(e); + + var e = contents(contents(text("b")), "b"); + hostJ.appendChild(e); + var e = span("c"); + e.setAttribute("slot", "b"); + hostJ.appendChild(e); + + var inner = span("b"); + inner.className = "after"; + var e = contents(contents(inner), "b"); + hostK.appendChild(e); + var e = span("d"); + e.setAttribute("slot", "b"); + hostK.appendChild(e); + + var inner = contents(null); + inner.className = "before"; + var e = contents(inner, "b"); + hostL.appendChild(e); + var e = span("b"); + e.setAttribute("slot", "b"); + hostL.appendChild(e); + + document.body.offsetHeight; + setTimeout(function() { + shadow("hostS"); + shadow("hostT"); + shadow("hostU"); + shadow("hostV").innerHTML = '<z style="color:green"><slot name="b"></slot></z>'; + + document.body.offsetHeight; + document.documentElement.removeAttribute("class"); + },0); + } + + run(); + setTimeout(tweak, 0); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/display-contents-shadow-host-whitespace.html b/testing/web-platform/tests/css/css-display/display-contents-shadow-host-whitespace.html new file mode 100644 index 0000000000..84b04dba10 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-shadow-host-whitespace.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Whitespace across display:contents shadow host</title> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-rules"> +<link rel="match" href="../reference/pass_if_two_words.html"> +<p>There should be a space between "two" and "words" below.</p> +<div id="host" style="display:contents"></div> <span>words</span> +<script> + host.attachShadow({mode:"open"}).innerHTML = "two"; +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-sharing-001-ref.html b/testing/web-platform/tests/css/css-display/display-contents-sharing-001-ref.html new file mode 100644 index 0000000000..a047f326fe --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-sharing-001-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<meta charset="utf-8"> +<title style="display: none">CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<style> + * { display: contents } +</style> +<whatever> + PASS +</whatever> diff --git a/testing/web-platform/tests/css/css-display/display-contents-sharing-001.html b/testing/web-platform/tests/css/css-display/display-contents-sharing-001.html new file mode 100644 index 0000000000..3ecb8eb2b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-sharing-001.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title style="display: none">CSS Test: display:contents style sharing.</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="match" href="display-contents-sharing-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-display/#unbox-html"> +<link rel="help" href="https://bugzil.la/1469076"> +<style> + * { display: contents } +</style> +<br> +<whatever> + PASS +</whatever> diff --git a/testing/web-platform/tests/css/css-display/display-contents-slot-attach-whitespace.html b/testing/web-platform/tests/css/css-display/display-contents-slot-attach-whitespace.html new file mode 100644 index 0000000000..c29b5ba634 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-slot-attach-whitespace.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>Attaching shadow slot with assigned whitespace separated inline elements</title> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-rules"> +<link rel="match" href="../reference/pass_if_two_words.html"> +<p>There should be a space between "two" and "words" below.</p> +<div id="host"><span>two</span> <span>words</span></div> +<script> + host.offsetTop; + host.attachShadow({mode:"open"}).innerHTML = "<slot></slot>"; +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-state-change-001-ref.html b/testing/web-platform/tests/css/css-display/display-contents-state-change-001-ref.html new file mode 100644 index 0000000000..244572a685 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-state-change-001-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel="author" name="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<style> +div { + color: green; +} +</style> +<div> + This text should be green, there should be no red border at any time. +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-state-change-001.html b/testing/web-platform/tests/css/css-display/display-contents-state-change-001.html new file mode 100644 index 0000000000..3923041e0d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-state-change-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS display: State changes are handled correctly for display: contents children</title> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="author" name="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="match" href="display-contents-state-change-001-ref.html"> +<style> +:focus-within .contents { + color: green; +} +.contents { + display: contents; + border: 10px solid red; + color: red; +} +input { + position: absolute; + left: -9999px; + top: -9999px; +} +</style> +<div> + <input type="text"> + <div class="contents">This text should be green, there should be no red border at any time.</div> +</div> +<script> +onload = function() { + document.querySelector('input').focus(); +} +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-suppression-dynamic-001-ref.html b/testing/web-platform/tests/css/css-display/display-contents-suppression-dynamic-001-ref.html new file mode 100644 index 0000000000..07a5663748 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-suppression-dynamic-001-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<p>Test passes if you see nothing below.</p> diff --git a/testing/web-platform/tests/css/css-display/display-contents-suppression-dynamic-001.html b/testing/web-platform/tests/css/css-display/display-contents-suppression-dynamic-001.html new file mode 100644 index 0000000000..5007e1f57d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-suppression-dynamic-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: display: contents unboxing works in presence of dynamic changes to the tree.</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#unbox"> +<link rel="match" href="display-contents-suppression-dynamic-001-ref.html"> +<p>Test passes if you see nothing below.</p> +<textarea style="display: contents"> + FAIL +</textarea> +<script> + let textarea = document.querySelector("textarea"); + textarea.offsetTop; + textarea.appendChild(document.createTextNode("FAIL")); +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-svg-anchor-child.html b/testing/web-platform/tests/css/css-display/display-contents-svg-anchor-child.html new file mode 100644 index 0000000000..d0119d7fff --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-svg-anchor-child.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: display:contents on SVG anchor child</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-display/#unbox-svg"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<svg> + <a> + <tspan style="display:contents;color:green">Text</tspan> + </a> + <text> + <a> + <tspan style="display:contents;color:green">Text</tspan> + </a> + </text> +</svg> +<script> + test(() => {}, "Loading this page should not cause a crash."); +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-svg-elements-ref.html b/testing/web-platform/tests/css/css-display/display-contents-svg-elements-ref.html new file mode 100644 index 0000000000..b691e0e80e --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-svg-elements-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<p>You should see the word PASS below.</p> +<div style="font: 16px monospace"> + <svg> + <text x="0" y="20">P</text> + <text x="10" y="20">A</text> + <text x="20" y="20">S</text> + <text x="30" y="20">S</text> + </svg> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-svg-elements.html b/testing/web-platform/tests/css/css-display/display-contents-svg-elements.html new file mode 100644 index 0000000000..7ccc92f720 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-svg-elements.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: display:contents and SVG elements</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-display/#unbox-svg"> +<link rel="match" href="display-contents-svg-elements-ref.html"> +<p>You should see the word PASS below.</p> +<div style="font: 16px monospace"> + <svg> + <defs><text x="20" y="20" id="S">S</text></defs> + <text y="40" style="display:contents">FAIL</text> + <svg style="display:contents;opacity:0"> + <text x="0" y="20">P</text> + </svg> + <g style="display:contents;opacity:0"> + <text x="10" y="20"><tspan dx="2000" style="display:contents;opacity:0">A</tspan></text> + </g> + <use xlink:href="#S" style="display:contents;opacity:0"></use> + <text x="30" y="20">S</text> + </svg> + <svg style="display:contents"><text y="40">FAIL</text></svg> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-svg-switch-child.html b/testing/web-platform/tests/css/css-display/display-contents-svg-switch-child.html new file mode 100644 index 0000000000..7befdb415b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-svg-switch-child.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: display:contents on SVG switch child</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-display/#unbox-svg"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<svg> + <switch> + <tspan style="display:contents;color:green">Text</tspan> + </switch> +</svg> +<script> + test(() => {}, "Loading this page should not cause a crash."); +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-table-001-ref.html b/testing/web-platform/tests/css/css-display/display-contents-table-001-ref.html new file mode 100644 index 0000000000..597f153724 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-table-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="stylesheet" href="support/acid.css"> +<div style="color: red" class="ref"> + <div class="caption c2">1<span>1</span></div> + <div class="row c2">2a<div class="cell">2<div class="inline c2">b<span class="b">b</span></div></div></div> + <div class="cell c3">3</div> + <div class="rowg c4">4</div> + <div class="cell c5">5a</div> + <div class="cell c5">5b</div> + <div class="head c6">6</div> + <div class="cell c7"><div class="inline c2">7<span class="b">a</span></div></div> + <div class="cell c8">7b</div> + <div class="foot c9">8</div> + <div class="foot c9">9<div class="inline c2">a<span class="b">b</span>c</div></div> + <div class="cell c10">10</div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-table-001.html b/testing/web-platform/tests/css/css-display/display-contents-table-001.html new file mode 100644 index 0000000000..d3c37fe361 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-table-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display:contents in table layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-table-001-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<div style="color: red"> + <div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div> + <div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div> + <div class="contents c3"><div class="cell">3</div></div> + <div class="contents c4"><div class="rowg">4</div></div> + <div class="contents c5"><div class="cell">5a</div></div> + <div class="cell c5">5b</div> + <div class="contents c6"><div class="head">6</div></div> + <div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div> + <div class="contents c8"><div class="cell">7b</div></div> + <div class="contents c9"><div class="foot">8</div></div> + <div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> + <div class="contents c10"><div class="cell">10</div></div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-table-002-ref.html b/testing/web-platform/tests/css/css-display/display-contents-table-002-ref.html new file mode 100644 index 0000000000..1ea41e1694 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-table-002-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="stylesheet" href="support/acid.css"> +<div style="color: red" class="ref"> + <div class="table" style="float:right"> + <div class="caption c2">1<span>1</span></div> + <div class="row c2">2a<div class="cell">2<div class="inline c2">b<span class="b">b</span></div></div></div> + <div class="cell c3" style="border:none">3</div> + <div class="rowg c4">4</div> + <div class="cell c5" style="border:none">5a</div> + <div class="cell c5">5b</div> + <div class="head c6">6</div> + <div class="cell c7" style="border:none"><div class="inline c2">7<span class="b">a</span></div></div> + <div class="cell c8" style="border:none">7b</div> + <div class="foot c9" style="border:none">8</div> + <div class="foot c9">9<div class="inline c2">a<span class="b">b</span>c</div></div> + <div class="cell c10" style="border:none">10</div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-display/display-contents-table-002.html b/testing/web-platform/tests/css/css-display/display-contents-table-002.html new file mode 100644 index 0000000000..2a30a1b8b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-table-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: CSS display:contents in table layout</title> +<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 --> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-table-002-ref.html"> +<link rel="stylesheet" href="support/acid.css"> +<div style="color: red"> + <div class="table" style="float:right"> + <div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div> + <div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div> + <div class="contents c3"><div class="cell">3</div></div> + <div class="contents c4"><div class="rowg">4</div></div> + <div class="contents c5"><div class="cell">5a</div></div> + <div class="cell c5">5b</div> + <div class="contents c6"><div class="head">6</div></div> + <div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div> + <div class="contents c8"><div class="cell">7b</div></div> + <div class="contents c9"><div class="foot">8</div></div> + <div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> + <div class="contents c10"><div class="cell">10</div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-td-001.html b/testing/web-platform/tests/css/css-display/display-contents-td-001.html new file mode 100644 index 0000000000..5585024a49 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-td-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: Children of multiple td elements with display:contents wrapped in single anonymous table cell</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-pass-ref.html"> +<style> + /* Disable kerning because kerning may differ for different node tree. */ + html { font-kerning: none; font-feature-settings: "kern" off; } + td { + display: contents; + padding-right: 3em + } +</style> +<p>You should see the word PASS below.</p> +<table cellpadding="0" cellspacing="0"> + <tr> + <td>P</td><td>A</td><td>S</td><td>S</td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-display/display-contents-text-inherit-002.html b/testing/web-platform/tests/css/css-display/display-contents-text-inherit-002.html new file mode 100644 index 0000000000..51bf96846c --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-text-inherit-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: Apply white-space property of display:contents element to inline children</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-text-inherit-ref.html"> +<p>The words "Two" and "lines" should not be on the same line.</p> +<div id="div" style="background-color:red"> + <span style="display:contents;white-space:pre-line">Two + lines + </span> +</div> +<script> + document.body.offsetTop; + div.style.backgroundColor = "transparent"; +</script> diff --git a/testing/web-platform/tests/css/css-display/display-contents-text-inherit-ref.html b/testing/web-platform/tests/css/css-display/display-contents-text-inherit-ref.html new file mode 100644 index 0000000000..163efd401c --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-text-inherit-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<p>The words "Two" and "lines" should not be on the same line.</p> +Two<br> +lines diff --git a/testing/web-platform/tests/css/css-display/display-contents-text-inherit.html b/testing/web-platform/tests/css/css-display/display-contents-text-inherit.html new file mode 100644 index 0000000000..b7e769cd69 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-text-inherit.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: Apply display:contents text properties to text children</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-text-inherit-ref.html"> +<style> + div { + display: contents; + white-space: pre; + } +</style> +<p>The words "Two" and "lines" should not be on the same line.</p> +<div>Two +lines</div> diff --git a/testing/web-platform/tests/css/css-display/display-contents-text-only-001-ref.html b/testing/web-platform/tests/css/css-display/display-contents-text-only-001-ref.html new file mode 100644 index 0000000000..7d055f2cec --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-text-only-001-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<style> + html, body { margin: 0; padding: 0; } +</style> +<p>Test passes if you see the word "PASS" below</p> +PASS diff --git a/testing/web-platform/tests/css/css-display/display-contents-text-only-001.html b/testing/web-platform/tests/css/css-display/display-contents-text-only-001.html new file mode 100644 index 0000000000..0f4ebf7aae --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-text-only-001.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: Only text on a display: contents subtree</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-text-only-001-ref.html"> +<style> + body { display: contents; } +</style> +<p>Test passes if you see the word "PASS" below</p> +PASS diff --git a/testing/web-platform/tests/css/css-display/display-contents-tr-001-ref.html b/testing/web-platform/tests/css/css-display/display-contents-tr-001-ref.html new file mode 100644 index 0000000000..9d57f1a802 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-tr-001-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<p>You should see the word PASS below.</p> +<table cellpadding="0" cellspacing="0"> + <tr> + <td>P<span>A</span></td> + <td>S<span>S</span></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-display/display-contents-tr-001.html b/testing/web-platform/tests/css/css-display/display-contents-tr-001.html new file mode 100644 index 0000000000..f0f6894c95 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-tr-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: td elements wrapped in single anonymous table-row with display:contents tr</title> +<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="match" href="display-contents-tr-001-ref.html"> +<style> + tr { display: contents } +</style> +<p>You should see the word PASS below.</p> +<table cellpadding="0" cellspacing="0"> + <tr> + <td>P<span>A</span></td> + </tr> + <tr> + <td>S<span>S</span></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-display/display-contents-unusual-html-elements-none.html b/testing/web-platform/tests/css/css-display/display-contents-unusual-html-elements-none.html new file mode 100644 index 0000000000..53f5f9e5c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-unusual-html-elements-none.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: display:contents and unusual HTML elements as display:none</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-display/#unbox-html"> +<link rel="match" href="display-contents-pass-ref.html"> +<style> + /* Disable kerning because kerning may differ for different node tree. */ + html { font-kerning: none; font-feature-settings: "kern" off; } + body { overflow: hidden } + br, wbr, meter, progress, canvas, embed, object, audio, iframe, img, video, + input, textarea, select { + display: contents; + border: 10px solid red; + width: 200px; height: 200px; + } +</style> +<p>You should see the word PASS below.</p> +<div> + <meter></meter> + <progress></progress> + <canvas></canvas> + <embed> + <object>FAIL</object> + <audio controls></audio> + <iframe></iframe> + <img> + <video></video> + <input></input> + <textarea></textarea> + <select></select> +</div> +P<br>A<wbr>S<br>S diff --git a/testing/web-platform/tests/css/css-display/display-contents-whitespace-inside-inline-ref.html b/testing/web-platform/tests/css/css-display/display-contents-whitespace-inside-inline-ref.html new file mode 100644 index 0000000000..135bc04d8e --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-whitespace-inside-inline-ref.html @@ -0,0 +1,8 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> + +<p>There should be an space between "Foo" and "bar" below</p> +<span>Foo bar</span> diff --git a/testing/web-platform/tests/css/css-display/display-contents-whitespace-inside-inline.html b/testing/web-platform/tests/css/css-display/display-contents-whitespace-inside-inline.html new file mode 100644 index 0000000000..a97c02575b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-whitespace-inside-inline.html @@ -0,0 +1,10 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: Whitespace inside display: contents is preserved correctly.</title> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="display-contents-whitespace-inside-inline-ref.html"> + +<p>There should be an space between "Foo" and "bar" below</p> +<span>Foo<div style="display: contents"> </div>bar</span> diff --git a/testing/web-platform/tests/css/css-display/display-first-line-001.html b/testing/web-platform/tests/css/css-display/display-first-line-001.html new file mode 100644 index 0000000000..6a714629e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-first-line-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: first-line and first-letter pseudo-elements</title> +<link rel="help" href="https://www.w3.org/TR/css-display-3/#placement"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #t1::first-letter { float: left; display: flex; font-size: 30px } + #t2::first-letter { float: left; font-size: 30px } + #t3::first-letter { display: flex; font-size: 30px } + #t4::first-letter { font-size: 30px } + #t5::first-line { float: left; display: flex; font-size: 30px } + #t6::first-line { float: left; font-size: 30px } + #t7::first-line { display: flex; font-size: 30px } + #t8::first-line { font-size: 30px } +</style> +<div id="t1">First letter is float and flex.</div> +<div id="t2">First letter is float but not flex.</div> +<div id="t3">First letter is flex but not float.</div> +<div id="t4">First letter not float or flex.</div> +<div id="t5">First line is float and flex.</div> +<div id="t6">First line is float but not flex.</div> +<div id="t7">First line is flex but not float.</div> +<div id="t8">First line is not float or flex.</div> +<script> + function getFirstLetterDisplayFor(id) { + return window.getComputedStyle(document.getElementById(id), "::first-letter").display; + } + function getFirstLineDisplayFor(id) { + return window.getComputedStyle(document.getElementById(id), "::first-line").display; + } + test(function() { + assert_equals(getFirstLetterDisplayFor("t1"), "block"); + assert_equals(getFirstLetterDisplayFor("t2"), "block"); + assert_equals(getFirstLetterDisplayFor("t3"), "inline"); + assert_equals(getFirstLetterDisplayFor("t4"), "inline"); + assert_equals(getFirstLineDisplayFor("t5"), "inline"); + assert_equals(getFirstLineDisplayFor("t6"), "inline"); + assert_equals(getFirstLineDisplayFor("t7"), "inline"); + assert_equals(getFirstLineDisplayFor("t8"), "inline"); + }, "display of first-letter and first-line"); +</script> diff --git a/testing/web-platform/tests/css/css-display/display-first-line-002-ref.html b/testing/web-platform/tests/css/css-display/display-first-line-002-ref.html new file mode 100644 index 0000000000..e82f6153a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-first-line-002-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<div contenteditable></div> +<p>The word "PASS" should be seen below. There should be no DCHECK + failure.</p> +<p style="color: blue;">PASS</p> diff --git a/testing/web-platform/tests/css/css-display/display-first-line-002.html b/testing/web-platform/tests/css/css-display/display-first-line-002.html new file mode 100644 index 0000000000..fef1d0b001 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-first-line-002.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Display flex first line with floated first letter</title> +<link rel="help" href="https://crbug.com/1097595"> +<link rel="match" href="display-first-line-002-ref.html"> +<style id="styleElm"> + #victim::first-line { display:flex; } + #victim::first-letter { float:right; } +</style> + +<!-- The contenteditable DIV is just here to trigger legacy layout + fallback, and a DCHECK failure identical to the one in the bug + report. If we remove it, we'll get NG layout, and then it will + actually DCHECK-fail inside NG inline layout code instead. --> +<div contenteditable></div> + +<p>The word "PASS" should be seen below. There should be no DCHECK + failure.</p> +<div id="child" style="display:none;"></div> +<div id="victim" style="width:fit-content;"> + SPAS +</div> +<script> + document.body.offsetTop; + styleElm.appendChild(child); + document.body.offsetTop; + victim.style.color = "blue"; +</script> diff --git a/testing/web-platform/tests/css/css-display/display-flow-root-001-ref.html b/testing/web-platform/tests/css/css-display/display-flow-root-001-ref.html new file mode 100644 index 0000000000..fcb5ac277e --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-flow-root-001-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: display:flow-root</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322191"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.float { + float: left; + width: 20px; + height: 40px; + background: pink; +} + +.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} + + </style> +</head> +<body> + +<div style="border:1px solid"> + <div style="margin: 40px 0"> + <div>x</div> + </div> +</div> + +<div style="border:1px solid"> + <div class="float"></div> + <div class="clearfix"></div> +</div> + +<div style="border:1px solid"> + <div class="float"></div> + <div style="display:block; border:1px solid; margin-left:20px">x</div> +</div> + +<span> + <span style="display:block; background:grey; margin:20px 0 0 21px"><div style="padding:20px">x</div></span> +</span> + +<div style="border:3px solid; height:10px;"></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-display/display-flow-root-001.html b/testing/web-platform/tests/css/css-display/display-flow-root-001.html new file mode 100644 index 0000000000..3d1dcb020d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-flow-root-001.html @@ -0,0 +1,56 @@ +<!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 Display Test: display:flow-root</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322191"> + <link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-flow-root"> + <link rel="match" href="display-flow-root-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.float { + float: left; + width: 20px; + height: 40px; + background: pink; +} + + </style> +</head> +<body> + +<div style="border:1px solid"> + <!-- this tests that the flow-root margins don't collapse with its children. --> + <span style="display:flow-root; margin: 20px 0"> + <div style="margin: 20px 0">x</div> + </span> +</div> + +<div style="border:1px solid"> + <!-- this tests that the flow-root grows to fit child floats --> + <span style="display:flow-root"><div class="float"></div></span> +</div> + +<div style="border:1px solid; margin-bottom:20px"> + <!-- this tests that a float does not intrude into flow-root box --> + <div class="float"></div> + <span style="display:flow-root; border:1px solid">x</span> +</div> + +<span> + <!-- this tests that a flow-root box is constructed also in the "ibsplit" case --> + <span style="display:flow-root; background:grey;"><div style="margin:20px">x</div></span> +</span> + +<span style="display:flow-root; border:3px solid; height:10px;"> + <!-- this tests that a flow-root fills the available width, and that 'height' applies --> +</span> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-display/display-flow-root-002-ref.html b/testing/web-platform/tests/css/css-display/display-flow-root-002-ref.html new file mode 100644 index 0000000000..014380f96e --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-flow-root-002-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>Reference for CSS Display Test</title> +<style> + .float { + background-color: blue; + width: 250px; + height: 100px; + } + .left { float: left; } + .right { float: right; } + + #outer { position: relative; width: 400px; } + + #zerowidth { + position: absolute; + top: 100px; + left: 250px; + width: 0; + outline: 1px solid black; + height: 200px; + } +</style> +<div id="outer"> + <div class="float right"></div> + <div class="float left"></div> + <div id="zerowidth"></div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-flow-root-002.html b/testing/web-platform/tests/css/css-display/display-flow-root-002.html new file mode 100644 index 0000000000..0640db93db --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-flow-root-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Display Test: div with display: flow-root and zero width does not intersect outer floats</title> +<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-flow-root"> +<link rel="help" href="https://www.w3.org/TR/CSS21/visuren.html#floats"> +<link rel="match" href="display-flow-root-002-ref.html"> +<style> + .float { + background-color: blue; + width: 250px; + height: 100px; + } + .left { float: left; } + .right { float: right; } + + #outer { width: 400px; } + + #zerowidth { + display: flow-root; + width: 0; + outline: 1px solid black; + height: 200px; + } +</style> +<div id="outer"> + <!-- Two floats are positioned and sized such that there is less than zero empty space "between" them. --> + <div class="float right"></div> + <div class="float left"></div> + <div id="zerowidth"></div> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-flow-root-list-item-001-ref.html b/testing/web-platform/tests/css/css-display/display-flow-root-list-item-001-ref.html new file mode 100644 index 0000000000..7d9199af42 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-flow-root-list-item-001-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: display:flow-root list-item</title> + <link rel="author" title="Mats Palmgren" href=""> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +body { padding-left: 100px; } + +.float { + float: left; + width: 20px; + height: 40px; + background: pink; +} + +.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} + + </style> +</head> +<body> + +<div style="border:1px solid"> + <div style="margin: 40px 0"> + <div style="display:list-item"><div>x</div></div> + </div> +</div> + +<div style="border:1px solid"> + <div style="display:list-item" class="float"></div> + <div class="clearfix"></div> +</div> + +<div style="border:1px solid"> + <div class="float"></div> + <div style="display:list-item; border:1px solid; margin-left:20px">x</div> +</div> + +<span> + <div style="display:flow-root; margin-top:20px"><span style="display:list-item; background:grey"><div style="padding:20px">x</div></span></div> +</span> + +<div style="display:list-item; border:3px solid; height:10px;"></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-display/display-flow-root-list-item-001.html b/testing/web-platform/tests/css/css-display/display-flow-root-list-item-001.html new file mode 100644 index 0000000000..6c5bece586 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-flow-root-list-item-001.html @@ -0,0 +1,59 @@ +<!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 Display Test: display:flow-root list-item</title> + <link rel="author" title="Mats Palmgren" href=""> + <link rel="help" href="https://drafts.csswg.org/css-display-3/#list-items"> + <link rel="match" href="display-flow-root-list-item-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +body { padding-left: 100px; } + +.float { + float: left; + width: 20px; + height: 40px; + background: pink; +} + +.li { display: flow-root list-item; } + </style> +</head> +<body> + +<div style="border:1px solid"> + <!-- this tests that the flow-root margins don't collapse with its children. --> + <span class="li" style="margin: 20px 0"> + <div style="margin: 20px 0">x</div> + </span> +</div> + +<div style="border:1px solid"> + <!-- this tests that the flow-root grows to fit child floats --> + <span class="li"><div class="float"></div></span> +</div> + +<div style="border:1px solid; margin-bottom:20px"> + <!-- this tests that a float does not intrude into flow-root box --> + <div class="float"></div> + <span class="li" style="border:1px solid">x</span> +</div> + +<span> + <!-- this tests that a flow-root box is constructed also in the "ibsplit" case --> + <span class="li" style="background:grey;"><div style="margin:20px">x</div></span> +</span> + +<span class="li" style="border:3px solid; height:10px;"> + <!-- this tests that a flow-root fills the available width, and that 'height' applies --> +</span> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-display/display-inline-dynamic-001-ref.html b/testing/web-platform/tests/css/css-display/display-inline-dynamic-001-ref.html new file mode 100644 index 0000000000..8b5f5015f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-inline-dynamic-001-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<style>div::first-line { font-family:monospace; color:green; }</style> +<p>Test passes if PASS is displayed in green below.</p> +<div>PASS</div> diff --git a/testing/web-platform/tests/css/css-display/display-inline-dynamic-001.html b/testing/web-platform/tests/css/css-display/display-inline-dynamic-001.html new file mode 100644 index 0000000000..7df697f940 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-inline-dynamic-001.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-display/"> +<link rel="match" href="display-inline-dynamic-001-ref.html"> +<style>div::first-line { font-family:monospace; color:green; }</style> +<p>Test passes if PASS is displayed in green below.</p> +<div>P<span id="showme" style="display:none;">AS</span>S</div> +<script> + document.body.offsetTop; + showme.style.display = "inline"; +</script> diff --git a/testing/web-platform/tests/css/css-display/display-list-item-height-after-dom-change.html b/testing/web-platform/tests/css/css-display/display-list-item-height-after-dom-change.html new file mode 100644 index 0000000000..f8d6e85cee --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-list-item-height-after-dom-change.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: reflowing a display:list-item on dom changes - non-zero height</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#list-items"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<ul> + <li id="item" style="background:green"> + <div id="content" style="overflow:hidden">Text<div> + </li> +</ul> +<script> + test(function() { + document.body.offsetTop; // force layout + item.insertBefore(document.createTextNode("This text should have a green background"), item.firstChild); + content.innerHTML = ""; + assert_not_equals(item.clientHeight, 0, "The height of the LI should not be 0px."); + }, "List item height after DOM change."); +</script> diff --git a/testing/web-platform/tests/css/css-display/display-math-on-non-mathml-elements.html b/testing/web-platform/tests/css/css-display/display-math-on-non-mathml-elements.html new file mode 100644 index 0000000000..c2f0f5f9c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-math-on-non-mathml-elements.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>display: math display values on non-MathML compute to flow</title> +<link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="container"> + + <div data-expected="inline" style="display: math;"></div> + <div data-expected="inline" style="display: inline math;"></div> + <div data-expected="inline" style="display: math inline;"></div> + <div data-expected="block" style="display: block math;"></div> + <div data-expected="block" style="display: math block;"></div> + + <svg data-expected="inline" style="display: math;"></svg> + <svg data-expected="inline" style="display: inline math;"></svg> + <svg data-expected="inline" style="display: math inline;"></svg> + <svg data-expected="block" style="display: block math;"></svg> + <svg data-expected="block" style="display: math block;"></svg> + +</div> + +<script> + Array.from(container.children).forEach(element => { + test(function() { + assert_equals(window.getComputedStyle(element).display, + element.getAttribute('data-expected')); + }, `computed display on <${element.localName} style="${element.getAttribute('style')}">`); + }); +</script> diff --git a/testing/web-platform/tests/css/css-display/display-math-on-pseudo-elements-001.html b/testing/web-platform/tests/css/css-display/display-math-on-pseudo-elements-001.html new file mode 100644 index 0000000000..dbc2525a69 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-math-on-pseudo-elements-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>display: math and inline-math on pseudo elements compute to flow</title> +<link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .inline::before { content: 'math'; display: math; } + .inline::after { content: 'math'; display: math; } + .block::before { content: 'math'; display: block math; } + .block::after { content: 'math'; display: block math; } +</style> +<div> + <div class="block"></div> + <math class="block"></math> + <math><mrow class="block"></mrow></math> + <div class="inline"></div> + <math class="inline"></math> + <math><mrow class="inline"></mrow></math> +</div> +<script> + Array.from(document.querySelectorAll('[class]')).forEach(element => { + test(function() { + assert_equals(window.getComputedStyle(element, "::before").display, + element.getAttribute('class')); + assert_equals(window.getComputedStyle(element, "::after").display, + element.getAttribute('class')); + }, `computed display on ::before and ::after for <${element.localName} class="${element.className}">`); + }); +</script> diff --git a/testing/web-platform/tests/css/css-display/display-math-on-pseudo-elements-002-ref.html b/testing/web-platform/tests/css/css-display/display-math-on-pseudo-elements-002-ref.html new file mode 100644 index 0000000000..7d7ba37637 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-math-on-pseudo-elements-002-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>display: block math and inline math on pseudo elements (reference)</title> +<style> + .inline::before { content: 'math'; display: inline; } + .inline::after { content: 'math'; display: inline; } + .block::before { content: 'math'; display: block; } + .block::after { content: 'math'; display: block; } +</style> +<p>Test passes if SPAN and DIV are respectively surrounded by inline and block + "math" text.</p> +<div> + <span class="inline">SPAN</span> +</div> +<div> + <span class="block">DIV</span> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-math-on-pseudo-elements-002.html b/testing/web-platform/tests/css/css-display/display-math-on-pseudo-elements-002.html new file mode 100644 index 0000000000..426adb6a23 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-math-on-pseudo-elements-002.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>display: block math and inline math on pseudo elements</title> +<link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties"> +<meta name="assert" content="display: inline math and display: block math on compute to flow"> +<link rel="match" href="display-math-on-pseudo-elements-002-ref.html"> +<style> + .inline::before { content: 'math'; display: math; } + .inline::after { content: 'math'; display: math; } + .block::before { content: 'math'; display: block math; } + .block::after { content: 'math'; display: block math; } +</style> +<p>Test passes if SPAN and DIV are respectively surrounded by inline and block + "math" text.</p> +<div> + <span class="inline">SPAN</span> +</div> +<div> + <span class="block">DIV</span> +</div> diff --git a/testing/web-platform/tests/css/css-display/display-none-inline-img-ref.html b/testing/web-platform/tests/css/css-display/display-none-inline-img-ref.html new file mode 100644 index 0000000000..a3e7369afb --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-none-inline-img-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<style> +.carousel { + position: relative; + overflow: hidden; + height: 300px; +} + +.scroller { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: auto; +} + +.slides { + width: 200%; + display: flex; +} + +.slide { + flex: 0 0 50%; + contain: paint; +} + +img { + width: 300px; + height: 250px; +} +</style> + +<div class="carousel"> + <div class="scroller"> + <div class="slides"> + <div class="slide"> + <img id="image" src="/images/green-256x256.png"> + </div> + </div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-display/display-none-inline-img.html b/testing/web-platform/tests/css/css-display/display-none-inline-img.html new file mode 100644 index 0000000000..f97ca7bbd3 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-none-inline-img.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: display: none then inline on img</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-inline"> +<link rel="match" href="display-none-inline-img-ref.html"> +<html class="reftest-wait"> +<style> +.carousel { + position: relative; + overflow: hidden; + height: 300px; +} + +.scroller { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: auto; +} + +.slides { + width: 200%; + display: flex; +} + +.slide { + flex: 0 0 50%; + contain: paint; +} + +img { + width: 300px; + height: 250px; +} +</style> + +<div class="carousel"> + <div class="scroller"> + <div class="slides"> + <div class="slide"> + <img id="image" src="/images/green-256x256.png"> + </div> + <div class="slide"> + <img> + </div> + </div> + </div> +</div> + +<script> + +function toggleDisplay() { + var img = document.getElementById("image"); + img.style.display = img.style.display == 'none' ? 'inline' : 'none'; +} + +window.onload = () => { + requestAnimationFrame(() => { + toggleDisplay(); + requestAnimationFrame(() => { + toggleDisplay(); + document.documentElement.classList.remove("reftest-wait"); + }); + }); +}; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-display/display-none-root-hit-test-crash.html b/testing/web-platform/tests/css/css-display/display-none-root-hit-test-crash.html new file mode 100644 index 0000000000..b2467fa58f --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-none-root-hit-test-crash.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1409273"> +<style> + html { display: none; } +</style> +<script> + document.elementFromPoint(10, 10); +</script> diff --git a/testing/web-platform/tests/css/css-display/display-with-float-dynamic.html b/testing/web-platform/tests/css/css-display/display-with-float-dynamic.html new file mode 100644 index 0000000000..7cc2fefcc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-with-float-dynamic.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Computed float value of flex/grid items</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers"> +<meta name="assert" content="computed float value of flex/grid items should be as specified"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="flex" style="display:flex;"> + <div id="flex-item"></div> +</div> +<div id="grid" style="display:grid;"> + <div id="grid-item"> +</div> +<script> + function setFloatFor(id, float) { + document.getElementById(id).style.cssFloat = float; + } + function getFloatFor(id) { + return window.getComputedStyle(document.getElementById(id)).getPropertyValue("float"); + } + function setDisplayBlock(id) { + document.getElementById(id).style.display = "block"; + } + test(function() { + assert_equals(getFloatFor("flex-item"), "none"); + assert_equals(getFloatFor("grid-item"), "none"); + + setFloatFor("flex-item", "left"); + setFloatFor("grid-item", "right"); + assert_equals(getFloatFor("flex-item"), "left"); + assert_equals(getFloatFor("grid-item"), "right"); + + setDisplayBlock("grid"); + setDisplayBlock("flex"); + assert_equals(getFloatFor("flex-item"), "left"); + assert_equals(getFloatFor("grid-item"), "right"); + }, "computed style for float"); +</script> diff --git a/testing/web-platform/tests/css/css-display/display-with-float.html b/testing/web-platform/tests/css/css-display/display-with-float.html new file mode 100644 index 0000000000..49f94799d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-with-float.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Computed float value of flex/grid items</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers"> +<meta name="assert" content="computed float value of flex/grid items should be as specified"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div style="display:flex;"> + <div id="flex-item" style="float:left;"></div> +</div> +<div style="display:grid;"> + <div id="grid-item" style="float:right;"></div> +</div> +<script> + function getFloatFor(id) { + return window.getComputedStyle(document.getElementById(id)).getPropertyValue("float"); + } + test(function() { + assert_equals(getFloatFor("flex-item"), "left"); + assert_equals(getFloatFor("grid-item"), "right"); + }, "computed style for float"); +</script> diff --git a/testing/web-platform/tests/css/css-display/empty-text-baseline-001.html b/testing/web-platform/tests/css/css-display/empty-text-baseline-001.html new file mode 100644 index 0000000000..a3a34f1fd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/empty-text-baseline-001.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: An Empty Text Node Should Not Generate a Baseline</title> +<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#intro"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9606"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1855583"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +body { + margin: 0; +} + +#container { + font-family: Ahem; +} + +#inner { + display: inline-block; +} +</style> +<div id="container"><div id="inner">x</div><span id="span">x</span></div> +<script> +const expected = span.offsetTop; + +// Force an empty text node on the second line of #inner +inner.appendChild(document.createElement("br")); +inner.appendChild(document.createTextNode('')); + +test(function() { + assert_equals(span.offsetTop, expected); +}, "Empty second line in #inner does not generate baseline for #span"); + +test(function() { + inner.style = "white-space: pre-line"; + assert_equals(span.offsetTop, expected); +}, "Empty second line in #inner does not generate baseline for #span with white-space: pre-line"); + +test(function() { + inner.style = "white-space: pre"; + assert_equals(span.offsetTop, expected); +}, "Empty second line in #inner does not generate baseline for #span with white-space: pre"); +</script> diff --git a/testing/web-platform/tests/css/css-display/empty-text-baseline-002.html b/testing/web-platform/tests/css/css-display/empty-text-baseline-002.html new file mode 100644 index 0000000000..ca9558a403 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/empty-text-baseline-002.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: An Empty Text Node Should Not Generate a Baseline</title> +<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#intro"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9606"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1855583"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +body { + margin: 0; +} + +.ahem { + font-family: Ahem; +} + +.with-pseudo::before, .with-pseudo::after { + content: ""; + width: 4px; + height: 4px; + border: 2px solid; + background: orange; + display: inline-block; +} + +.font-size::before, .font-size::after { + font-size: 100px; +} + +.line-height::before, .line-height::after { + line-height: 10; +} + +.empty-concat::before, .empty-concat::after { + content: "" "" "" "" ""; +} + +</style> +<div id="reference" class="ahem">x</div> +<div id="fs" class="ahem with-pseudo font-size">x</div> +<div id="ba" class="ahem with-pseudo line-height">x</div> +<div id="ec" class="ahem with-pseudo font-size empty-concat">x</div> +<script> +test(function() { + assert_equals(fs.offsetHeight, reference.offsetHeight); + assert_equals(ba.offsetHeight, reference.offsetHeight); + assert_equals(ec.offsetHeight, reference.offsetHeight); +}, "Empty content pseudo-element does not generate baseline"); + +test(function() { + const divs = [fs, ba, ec]; + for (let d of divs) { + d.style = "white-space: pre"; + } + assert_equals(fs.offsetHeight, reference.offsetHeight); + assert_equals(ba.offsetHeight, reference.offsetHeight); + assert_equals(ec.offsetHeight, reference.offsetHeight); +}, "Empty content pseudo-element does not generate baseline with white-space: pre"); +</script> diff --git a/testing/web-platform/tests/css/css-display/focus/display-contents-focus.html b/testing/web-platform/tests/css/css-display/focus/display-contents-focus.html new file mode 100644 index 0000000000..8f1e2c5c90 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/focus/display-contents-focus.html @@ -0,0 +1,49 @@ +<!doctype html> +<html> +<head> + <title>Testing focus for display: contents</title> + <link rel="help" href="https://drafts.csswg.org/css-display-4/#box-generation"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> +</head> +<body> + + <!-- Dec 2023 notes for "display: contents" testing: + - Per CSS spec, setting "display: contents" must not alter an element's semantics (https://www.w3.org/TR/css-display-3/#valdef-display-contents): + "As only the box tree is affected, any semantics based on the document tree, such as selector-matching, event handling, and + property inheritance, are not affected." + + --> + + <h1>Testing focusability of display: contents</h1> + + <button style="display: contents;" class="ex-focusable" data-testname="button with display: contents is focusable">x</button> + <div role="button" tabindex="0" style="display: contents;" class="ex-focusable" data-testname="div with role button, tabindex=0 and display: contents is focusable"></div> + <div role="button" tabindex="-1" style="display: contents;" class="ex-focusable" data-testname="div with role button, tabindex=-1 and display: contents is focusable"></div> + + <a href="#" style="display: contents;" class="ex-focusable" data-testname="link with display: contents is focusable">x</a> + <span role="link" tabindex="0" style="display: contents;" class="ex-focusable" data-testname="span with role link, tabindex=0 and display: contents is focusable"></span> + +<script> + verifyElementsAreFocusable(); + + function verifyElementsAreFocusable() { + const els = document.querySelectorAll(".ex-focusable"); + if (!els.length) { + throw `Selector passed in verifyElementsAreFocusable should match at least one element.`; + } + for (const el of els) { + let testName = el.getAttribute("data-testname"); + test(() => { + el.focus(); + assert_equals(document.activeElement, el, "Element is focusable with element.focus()"); + }, `${testName}`); + } + }; +</script> + +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/inheritance.html b/testing/web-platform/tests/css/css-display/inheritance.html new file mode 100644 index 0000000000..bfd072651c --- /dev/null +++ b/testing/web-platform/tests/css/css-display/inheritance.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS display property</title> +<link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties"> +<meta name="assert" content="Property 'display' does not inherit."> +<meta name="assert" content="Property 'display' has initial value 'inline'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> +<div id="target"></div> +</div> +<script> +assert_not_inherited('display', 'inline', 'table'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-display/parsing/display-computed.html b/testing/web-platform/tests/css/css-display/parsing/display-computed.html new file mode 100644 index 0000000000..c32f470e07 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/parsing/display-computed.html @@ -0,0 +1,193 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Display: getComputedStyle().display</title> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#display-prop"> +<link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers"> +<link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo"> +<meta name="assert" content="position and float can change display computed value."> +<meta name="assert" content="display computed value is otherwise as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +'use strict'; + +// https://drafts.csswg.org/css-grid-1/#grid-containers +test_computed_value("display", "grid"); +test_computed_value("display", "inline-grid"); + +// https://drafts.csswg.org/css2/visuren.html#display-prop +test_computed_value("display", "inline"); +test_computed_value("display", "block"); +test_computed_value("display", "list-item"); +test_computed_value("display", "inline-block"); +test_computed_value("display", "table"); +test_computed_value("display", "inline-table"); +test_computed_value("display", "table-row-group"); +test_computed_value("display", "table-header-group"); +test_computed_value("display", "table-footer-group"); +test_computed_value("display", "table-row"); +test_computed_value("display", "table-column-group"); +test_computed_value("display", "table-column"); +test_computed_value("display", "table-cell"); +test_computed_value("display", "table-caption"); +test_computed_value("display", "none"); + +// https://drafts.csswg.org/css-flexbox-1/#flex-containers +test_computed_value("display", "flex"); +test_computed_value("display", "inline-flex"); + +test_computed_value("display", "contents"); + +test_computed_value("display", "run-in"); +test_computed_value("display", "flow", "block"); +test_computed_value("display", "flow-root"); +test_computed_value("display", "ruby"); +test_computed_value("display", "ruby-base"); +test_computed_value("display", "ruby-text"); + +test_computed_value("display", "flow list-item", "list-item"); +test_computed_value("display", "list-item flow", "list-item"); +test_computed_value("display", "flow-root list-item", "flow-root list-item"); +test_computed_value("display", "list-item flow-root", "flow-root list-item"); + +test_computed_value("display", "block flow", "block"); +test_computed_value("display", "flow block", "block"); +test_computed_value("display", "flow-root block", "flow-root"); +test_computed_value("display", "block flow-root", "flow-root"); +test_computed_value("display", "flex block", "flex"); +test_computed_value("display", "block flex", "flex"); +test_computed_value("display", "grid block", "grid"); +test_computed_value("display", "block grid", "grid"); +test_computed_value("display", "table block", "table"); +test_computed_value("display", "block table", "table"); +test_computed_value("display", "block ruby", "block ruby"); +test_computed_value("display", "ruby block", "block ruby"); +test_computed_value("display", "block list-item", "list-item"); +test_computed_value("display", "list-item block", "list-item"); +test_computed_value("display", "flow block list-item", "list-item"); +test_computed_value("display", "block flow list-item", "list-item"); +test_computed_value("display", "flow list-item block", "list-item"); +test_computed_value("display", "block list-item flow", "list-item"); +test_computed_value("display", "list-item block flow", "list-item"); +test_computed_value("display", "list-item flow block", "list-item"); +test_computed_value("display", "flow-root block list-item", "flow-root list-item"); +test_computed_value("display", "block flow-root list-item", "flow-root list-item"); +test_computed_value("display", "flow-root list-item block", "flow-root list-item"); +test_computed_value("display", "block list-item flow-root", "flow-root list-item"); +test_computed_value("display", "list-item block flow-root", "flow-root list-item"); +test_computed_value("display", "list-item flow-root block", "flow-root list-item"); + +test_computed_value("display", "inline flow", "inline"); +test_computed_value("display", "flow inline", "inline"); +test_computed_value("display", "flow-root inline", "inline-block"); +test_computed_value("display", "inline flow-root", "inline-block"); +test_computed_value("display", "flex inline", "inline-flex"); +test_computed_value("display", "inline flex", "inline-flex"); +test_computed_value("display", "grid inline", "inline-grid"); +test_computed_value("display", "inline grid", "inline-grid"); +test_computed_value("display", "table inline", "inline-table"); +test_computed_value("display", "inline table", "inline-table"); +test_computed_value("display", "inline ruby", "ruby"); +test_computed_value("display", "ruby inline", "ruby"); +test_computed_value("display", "inline list-item", "inline list-item"); +test_computed_value("display", "list-item inline", "inline list-item"); +test_computed_value("display", "flow inline list-item", "inline list-item"); +test_computed_value("display", "inline flow list-item", "inline list-item"); +test_computed_value("display", "flow list-item inline", "inline list-item"); +test_computed_value("display", "inline list-item flow", "inline list-item"); +test_computed_value("display", "list-item inline flow", "inline list-item"); +test_computed_value("display", "list-item flow inline", "inline list-item"); +test_computed_value("display", "flow-root inline list-item", "inline flow-root list-item"); +test_computed_value("display", "inline flow-root list-item", "inline flow-root list-item"); +test_computed_value("display", "flow-root list-item inline", "inline flow-root list-item"); +test_computed_value("display", "inline list-item flow-root", "inline flow-root list-item"); +test_computed_value("display", "list-item inline flow-root", "inline flow-root list-item"); +test_computed_value("display", "list-item flow-root inline", "inline flow-root list-item"); + +test_computed_value("display", "run-in flow", "run-in"); +test_computed_value("display", "flow run-in", "run-in"); +test_computed_value("display", "flow-root run-in", "run-in flow-root"); +test_computed_value("display", "run-in flow-root", "run-in flow-root"); +test_computed_value("display", "flex run-in", "run-in flex"); +test_computed_value("display", "run-in flex", "run-in flex"); +test_computed_value("display", "grid run-in", "run-in grid"); +test_computed_value("display", "run-in grid", "run-in grid"); +test_computed_value("display", "table run-in", "run-in table"); +test_computed_value("display", "run-in table", "run-in table"); +test_computed_value("display", "run-in ruby", "run-in ruby"); +test_computed_value("display", "ruby run-in", "run-in ruby"); +test_computed_value("display", "run-in list-item", "run-in list-item"); +test_computed_value("display", "list-item run-in", "run-in list-item"); +test_computed_value("display", "flow run-in list-item", "run-in list-item"); +test_computed_value("display", "run-in flow list-item", "run-in list-item"); +test_computed_value("display", "flow list-item run-in", "run-in list-item"); +test_computed_value("display", "run-in list-item flow", "run-in list-item"); +test_computed_value("display", "list-item run-in flow", "run-in list-item"); +test_computed_value("display", "list-item flow run-in", "run-in list-item"); +test_computed_value("display", "flow-root run-in list-item", "run-in flow-root list-item"); +test_computed_value("display", "run-in flow-root list-item", "run-in flow-root list-item"); +test_computed_value("display", "flow-root list-item run-in", "run-in flow-root list-item"); +test_computed_value("display", "run-in list-item flow-root", "run-in flow-root list-item"); +test_computed_value("display", "list-item run-in flow-root", "run-in flow-root list-item"); +test_computed_value("display", "list-item flow-root run-in", "run-in flow-root list-item"); + +// https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo +function test_display_affected(property, value) { + const target = document.getElementById('target'); + test(() => { + target.style[property] = value; + target.style.display = 'inline-table'; + assert_equals(getComputedStyle(target).display, 'table', 'inline-table -> block'); + + const displayValues = [ + 'inline', + 'table-row-group', + 'table-column', + 'table-column-group', + 'table-header-group', + 'table-footer-group', + 'table-row', + 'table-cell', + 'table-caption', + 'ruby-base', + 'ruby-text', + 'inline-block' + ]; + + for (let displayValue of displayValues) { + target.style.display = displayValue; + assert_equals(getComputedStyle(target).display, 'block', displayValue + ' -> block'); + } + + target.style.display = 'inline-flex'; + assert_equals(getComputedStyle(target).display, 'flex', 'inline-flex -> flex'); + + target.style.display = 'inline-grid'; + assert_equals(getComputedStyle(target).display, 'grid', 'inline-grid -> grid'); + + // Other values are not affected. + target.style.display = 'list-item'; + assert_equals(getComputedStyle(target).display, 'list-item', 'list-item -> list-item'); + + target.style.display = 'contents'; + assert_equals(getComputedStyle(target).display, 'contents', 'contents -> contents'); + + target.style[property] = ''; + target.style.display = ''; + }, property + ' ' + value + ' affects computed display'); +} + +test_display_affected("position", "absolute"); +test_display_affected("position", "fixed"); +test_display_affected("float", "left"); +test_display_affected("float", "right"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-display/parsing/display-invalid.html b/testing/web-platform/tests/css/css-display/parsing/display-invalid.html new file mode 100644 index 0000000000..7c4054747e --- /dev/null +++ b/testing/web-platform/tests/css/css-display/parsing/display-invalid.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Display: parsing display with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#display-prop"> +<link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers"> +<meta name="assert" content="display supports only the spec grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("display", "grid inline-grid"); +test_invalid_value("display", "none grid"); +test_invalid_value("display", "none flow"); +test_invalid_value("display", "none ruby"); +test_invalid_value("display", "none flow-root"); +test_invalid_value("display", "none list-item"); +test_invalid_value("display", "contents list-item"); +test_invalid_value("display", "list-item contents"); +test_invalid_value("display", "flow flow"); +test_invalid_value("display", "block block"); +test_invalid_value("display", "flow flow-root"); +test_invalid_value("display", "flow-root flow-root"); +test_invalid_value("display", "block inline"); +test_invalid_value("display", "flex ruby"); +test_invalid_value("display", "ruby flex"); +test_invalid_value("display", "inline inline"); +test_invalid_value("display", "flex flex"); +test_invalid_value("display", "grid flex"); +test_invalid_value("display", "ruby grid"); +test_invalid_value("display", "flex grid"); +test_invalid_value("display", "grid table"); +test_invalid_value("display", "table flex"); +test_invalid_value("display", "flex table"); +test_invalid_value("display", "ruby table"); +test_invalid_value("display", "table table"); +test_invalid_value("display", "table flow-root"); +test_invalid_value("display", "flow-root ruby"); +test_invalid_value("display", "list-item list-item"); +test_invalid_value("display", "list-item table"); +test_invalid_value("display", "flex list-item"); +test_invalid_value("display", "list-item grid"); +test_invalid_value("display", "flow flow list-item"); +test_invalid_value("display", "grid flow list-item"); +test_invalid_value("display", "flow list-item flow"); +test_invalid_value("display", "block list-item block"); +test_invalid_value("display", "list-item flow-root flow"); +test_invalid_value("display", "list-item block block"); +test_invalid_value("display", "list-item block list-item"); +test_invalid_value("display", "list-item flow-root list-item"); +test_invalid_value("display", "list-item flow-root block list-item"); +test_invalid_value("display", "list-item block flow-root list-item"); +test_invalid_value("display", "block list-item flow-root list-item"); +test_invalid_value("display", "flow-root list-item block list-item"); +test_invalid_value("display", "list-item ruby"); +test_invalid_value("display", "ruby list-item"); +test_invalid_value("display", "ruby ruby"); +test_invalid_value("display", "ruby flow"); +test_invalid_value("display", "flow ruby"); +test_invalid_value("display", "ruby flow-root"); +test_invalid_value("display", "grid ruby"); +test_invalid_value("display", "table ruby"); +test_invalid_value("display", "table-row flow"); +test_invalid_value("display", "flow table-row"); +test_invalid_value("display", "table-row-group flow-root"); +test_invalid_value("display", "flex table-row-group"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-display/parsing/display-valid.html b/testing/web-platform/tests/css/css-display/parsing/display-valid.html new file mode 100644 index 0000000000..c011c2a30c --- /dev/null +++ b/testing/web-platform/tests/css/css-display/parsing/display-valid.html @@ -0,0 +1,141 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Display: parsing display with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#display-prop"> +<link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers"> +<meta name="assert" content="display supports the full spec grammar."> +<meta name="assert" content="display supports the new values 'grid | inline-grid'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// https://drafts.csswg.org/css-grid-1/#grid-containers +test_valid_value("display", "grid"); +test_valid_value("display", "inline-grid"); + +// https://drafts.csswg.org/css2/visuren.html#display-prop +test_valid_value("display", "inline"); +test_valid_value("display", "block"); +test_valid_value("display", "list-item"); +test_valid_value("display", "inline-block"); +test_valid_value("display", "table"); +test_valid_value("display", "inline-table"); +test_valid_value("display", "table-row-group"); +test_valid_value("display", "table-header-group"); +test_valid_value("display", "table-footer-group"); +test_valid_value("display", "table-row"); +test_valid_value("display", "table-column-group"); +test_valid_value("display", "table-column"); +test_valid_value("display", "table-cell"); +test_valid_value("display", "table-caption"); +test_valid_value("display", "none"); + +// https://drafts.csswg.org/css-flexbox-1/#flex-containers +test_valid_value("display", "flex"); +test_valid_value("display", "inline-flex"); + +test_valid_value("display", "contents"); + +// https://drafts.csswg.org/css-display/#the-display-properties +test_valid_value("display", "run-in"); +test_valid_value("display", "flow"); +test_valid_value("display", "flow-root"); +test_valid_value("display", "ruby"); +test_valid_value("display", "ruby-base"); +test_valid_value("display", "ruby-text"); + +test_valid_value("display", "flow list-item", "list-item"); +test_valid_value("display", "list-item flow", "list-item"); +test_valid_value("display", "flow-root list-item", "flow-root list-item"); +test_valid_value("display", "list-item flow-root", "flow-root list-item"); + +test_valid_value("display", "block flow", "block"); +test_valid_value("display", "flow block", "block"); +test_valid_value("display", "flow-root block", "flow-root"); +test_valid_value("display", "block flow-root", "flow-root"); +test_valid_value("display", "flex block", "flex"); +test_valid_value("display", "block flex", "flex"); +test_valid_value("display", "grid block", "grid"); +test_valid_value("display", "block grid", "grid"); +test_valid_value("display", "table block", "table"); +test_valid_value("display", "block table", "table"); +test_valid_value("display", "block ruby", "block ruby"); +test_valid_value("display", "ruby block", "block ruby"); +test_valid_value("display", "block list-item", "list-item"); +test_valid_value("display", "list-item block", "list-item"); +test_valid_value("display", "flow block list-item", "list-item"); +test_valid_value("display", "block flow list-item", "list-item"); +test_valid_value("display", "flow list-item block", "list-item"); +test_valid_value("display", "block list-item flow", "list-item"); +test_valid_value("display", "list-item block flow", "list-item"); +test_valid_value("display", "list-item flow block", "list-item"); +test_valid_value("display", "flow-root block list-item", "flow-root list-item"); +test_valid_value("display", "block flow-root list-item", "flow-root list-item"); +test_valid_value("display", "flow-root list-item block", "flow-root list-item"); +test_valid_value("display", "block list-item flow-root", "flow-root list-item"); +test_valid_value("display", "list-item block flow-root", "flow-root list-item"); +test_valid_value("display", "list-item flow-root block", "flow-root list-item"); + +test_valid_value("display", "inline flow", "inline"); +test_valid_value("display", "flow inline", "inline"); +test_valid_value("display", "flow-root inline", "inline flow-root"); +test_valid_value("display", "inline flow-root"); +test_valid_value("display", "flex inline", "inline flex"); +test_valid_value("display", "inline flex"); +test_valid_value("display", "grid inline", "inline grid"); +test_valid_value("display", "inline grid"); +test_valid_value("display", "table inline", "inline table"); +test_valid_value("display", "inline table"); +test_valid_value("display", "inline ruby", "ruby"); +test_valid_value("display", "ruby inline", "ruby"); +test_valid_value("display", "inline list-item", "inline list-item"); +test_valid_value("display", "list-item inline", "inline list-item"); +test_valid_value("display", "flow inline list-item", "inline list-item"); +test_valid_value("display", "inline flow list-item", "inline list-item"); +test_valid_value("display", "flow list-item inline", "inline list-item"); +test_valid_value("display", "inline list-item flow", "inline list-item"); +test_valid_value("display", "list-item inline flow", "inline list-item"); +test_valid_value("display", "list-item flow inline", "inline list-item"); +test_valid_value("display", "flow-root inline list-item", "inline flow-root list-item"); +test_valid_value("display", "inline flow-root list-item", "inline flow-root list-item"); +test_valid_value("display", "flow-root list-item inline", "inline flow-root list-item"); +test_valid_value("display", "inline list-item flow-root", "inline flow-root list-item"); +test_valid_value("display", "list-item inline flow-root", "inline flow-root list-item"); +test_valid_value("display", "list-item flow-root inline", "inline flow-root list-item"); + +test_valid_value("display", "run-in flow", "run-in"); +test_valid_value("display", "flow run-in", "run-in"); +test_valid_value("display", "flow-root run-in", "run-in flow-root"); +test_valid_value("display", "run-in flow-root", "run-in flow-root"); +test_valid_value("display", "flex run-in", "run-in flex"); +test_valid_value("display", "run-in flex", "run-in flex"); +test_valid_value("display", "grid run-in", "run-in grid"); +test_valid_value("display", "run-in grid", "run-in grid"); +test_valid_value("display", "table run-in", "run-in table"); +test_valid_value("display", "run-in table", "run-in table"); +test_valid_value("display", "run-in ruby", "run-in ruby"); +test_valid_value("display", "ruby run-in", "run-in ruby"); +test_valid_value("display", "run-in list-item", "run-in list-item"); +test_valid_value("display", "list-item run-in", "run-in list-item"); +test_valid_value("display", "flow run-in list-item", "run-in list-item"); +test_valid_value("display", "run-in flow list-item", "run-in list-item"); +test_valid_value("display", "flow list-item run-in", "run-in list-item"); +test_valid_value("display", "run-in list-item flow", "run-in list-item"); +test_valid_value("display", "list-item run-in flow", "run-in list-item"); +test_valid_value("display", "list-item flow run-in", "run-in list-item"); +test_valid_value("display", "flow-root run-in list-item", "run-in flow-root list-item"); +test_valid_value("display", "run-in flow-root list-item", "run-in flow-root list-item"); +test_valid_value("display", "flow-root list-item run-in", "run-in flow-root list-item"); +test_valid_value("display", "run-in list-item flow-root", "run-in flow-root list-item"); +test_valid_value("display", "list-item run-in flow-root", "run-in flow-root list-item"); +test_valid_value("display", "list-item flow-root run-in", "run-in flow-root list-item"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/after-content-display-004.xht b/testing/web-platform/tests/css/css-display/run-in/after-content-display-004.xht new file mode 100644 index 0000000000..4a99ba2ee1 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/after-content-display-004.xht @@ -0,0 +1,33 @@ +<!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: :after generated content - display run-in</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content" title="12.1 The :before and :after pseudo-elements" /> + <link rel="help" href="http://www.w3.org/TR/css3-box/#run-in-boxes" title="4.3. Run-in boxes" /> + + <meta content="Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element." name="assert" /> + + <style type="text/css"><![CDATA[ + div:after + { + content: "Filler text"; + display: run-in; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there are <strong>2 lines of "Filler text"</strong>.</p> + + <div>Filler text</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/anonymous-box-generation-002.xht b/testing/web-platform/tests/css/css-display/run-in/anonymous-box-generation-002.xht new file mode 100644 index 0000000000..deb9af1f32 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/anonymous-box-generation-002.xht @@ -0,0 +1,32 @@ +<!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: Anonymous run-in box generation</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" /> + <meta name="assert" content="Block boxes with inline content followed by a run-in box generate an anonymous run-in box around the inline content." /> + <style type="text/css"> + div + { + width: 2in; + } + #div1 + { + text-align: center; + } + div div + { + background: blue; + display: run-in; + height: 1em; + } + </style> + </head> + <body> + <p>Test passes if the "Filler Text" text is centered above the blue box.</p> + <div id="div1"> + Filler Text + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/background-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/background-applies-to-011.xht new file mode 100644 index 0000000000..9994af0ce6 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/background-applies-to-011.xht @@ -0,0 +1,23 @@ +<!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: Background applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties" /> + <meta name="assert" content="The 'background' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + background: black; + display: run-in; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a black box below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/background-attachment-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/background-attachment-applies-to-011.xht new file mode 100644 index 0000000000..9f2c78913b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/background-attachment-applies-to-011.xht @@ -0,0 +1,27 @@ +<!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: Background-attachment applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties" /> + <meta name="flags" content="image" /> + <meta name="assert" content="The 'background-attachment' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + background-color: orange; + background-image: url('support/blue96x96.png'); + background-attachment: fixed; + background-repeat: repeat-x; + display: run-in; + height: 2in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a short blue box above a taller orange box below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/background-color-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/background-color-applies-to-011.xht new file mode 100644 index 0000000000..c930a4a36f --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/background-color-applies-to-011.xht @@ -0,0 +1,23 @@ +<!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: Background-color applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-color" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties" /> + <meta name="assert" content="The 'background-color' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + background-color: black; + display: run-in; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the box below is black.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/background-image-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/background-image-applies-to-011.xht new file mode 100644 index 0000000000..84ade79760 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/background-image-applies-to-011.xht @@ -0,0 +1,24 @@ +<!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: Background-image applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-image" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties" /> + <meta name="flags" content="image" /> + <meta name="assert" content="The 'background-image' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + background-image: url('support/black15x15.png'); + display: run-in; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/background-position-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/background-position-applies-to-011.xht new file mode 100644 index 0000000000..33b3cb8c16 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/background-position-applies-to-011.xht @@ -0,0 +1,27 @@ +<!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: Background-position applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties" /> + <meta name="flags" content="image" /> + <meta name="assert" content="The 'background-position' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + background-image: url('support/blue15x15.png'); + background-position: bottom right; + background-repeat: no-repeat; + border: solid black; + display: run-in; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue box is in the lower-right corner of the black box.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/background-repeat-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/background-repeat-applies-to-011.xht new file mode 100644 index 0000000000..236b30a5ad --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/background-repeat-applies-to-011.xht @@ -0,0 +1,26 @@ +<!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: Background-repeat applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties" /> + <meta name="flags" content="image" /> + <meta name="assert" content="The 'background-repeat' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + background-color: red; + background-image: url('support/green15x15.png'); + background-repeat: repeat; + display: run-in; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a green box below and no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/before-content-display-004.xht b/testing/web-platform/tests/css/css-display/run-in/before-content-display-004.xht new file mode 100644 index 0000000000..d1cc892056 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/before-content-display-004.xht @@ -0,0 +1,33 @@ +<!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: :before generated content - display run-in</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content" title="12.1 The :before and :after pseudo-elements" /> + <link rel="help" href="http://www.w3.org/TR/css3-box/#run-in-boxes" title="4.3. Run-in boxes" /> + + <meta content="Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element." name="assert" /> + + <style type="text/css"><![CDATA[ + div:before + { + content: "Filler text "; + display: run-in; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 "Filler text" are both <strong>on the same line</strong>.</p> + + <div>Filler text</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-applies-to-011.xht new file mode 100644 index 0000000000..98b062db27 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-applies-to-011.xht @@ -0,0 +1,23 @@ +<!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: Border applied to element with 'display' set to run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties" /> + <meta name="assert" content="The 'border' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border: solid green; + display: run-in; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a hollow box below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-bottom-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-bottom-applies-to-011.xht new file mode 100644 index 0000000000..fb176f6c70 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-bottom-applies-to-011.xht @@ -0,0 +1,22 @@ +<!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: Border-bottom applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties" /> + <meta name="assert" content="The 'border-bottom' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-bottom: solid green; + display: run-in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a green line below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-bottom-color-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-bottom-color-applies-to-011.xht new file mode 100644 index 0000000000..21541842e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-bottom-color-applies-to-011.xht @@ -0,0 +1,23 @@ +<!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: Border-bottom-color applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom-color" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-color-properties" /> + <meta name="assert" content="The 'border-bottom-color' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-bottom-style: solid; + border-bottom-color: green; + display: run-in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the line below is green.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-bottom-style-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-bottom-style-applies-to-011.xht new file mode 100644 index 0000000000..746063bb9d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-bottom-style-applies-to-011.xht @@ -0,0 +1,22 @@ +<!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: Border-bottom-style applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom-style" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-style-properties" /> + <meta name="assert" content="The 'border-bottom-style' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-bottom-style: dashed; + display: run-in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the line below is dashed.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-bottom-width-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-bottom-width-applies-to-011.xht new file mode 100644 index 0000000000..b32c4c54bd --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-bottom-width-applies-to-011.xht @@ -0,0 +1,23 @@ +<!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: Border-bottom-width applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-width-properties" /> + <meta name="assert" content="The 'border-bottom-width' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-bottom-style: solid; + border-bottom-width: 1in; + display: run-in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-collapse-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/border-collapse-applies-to-004.xht new file mode 100644 index 0000000000..d83718ea81 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-collapse-applies-to-004.xht @@ -0,0 +1,32 @@ +<!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: Border-collapse and 'display: run-in' elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#borders" /> + <meta name="assert" content="Border-collapse does not apply to 'display: run-in' elements." /> + <style type="text/css"> + div + { + border-collapse: collapse; + display: run-in; + height: 100px; + width: 100px; + } + #top + { + border-bottom: 10px solid blue; + } + #bottom + { + border-top: 10px dotted orange; + } + </style> + </head> + <body> + <p>Test passes if below there is a horizontal solid blue line above a dotted orange line.</p> + <div id="top"></div> + <div id="bottom"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-color-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-color-applies-to-011.xht new file mode 100644 index 0000000000..8f29f03af2 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-color-applies-to-011.xht @@ -0,0 +1,24 @@ +<!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: Border-color applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-color" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-color-properties" /> + <meta name="assert" content="The 'border-color' properties applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-style: solid; + border-color: green; + display: run-in; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a green box below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-left-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-left-applies-to-011.xht new file mode 100644 index 0000000000..80cd899214 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-left-applies-to-011.xht @@ -0,0 +1,22 @@ +<!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: Border-left applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties" /> + <meta name="assert" content="The 'border-left' properties applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-left: solid green; + display: run-in; + height: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a green line below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-left-color-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-left-color-applies-to-011.xht new file mode 100644 index 0000000000..1f271d0d09 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-left-color-applies-to-011.xht @@ -0,0 +1,23 @@ +<!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: Border-left-color applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left-color" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-color-properties" /> + <meta name="assert" content="The 'border-left-color' properties applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-left-style: solid; + border-left-color: green; + display: run-in; + height: 1in; + } + </style> + </head> + <body> + <p>Test passes if the line below is green.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-left-style-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-left-style-applies-to-011.xht new file mode 100644 index 0000000000..2ab73f4536 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-left-style-applies-to-011.xht @@ -0,0 +1,22 @@ +<!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: Border-left-style applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left-style" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-style-properties" /> + <meta name="assert" content="The 'border-left-style' properties applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-left-style: dashed; + display: run-in; + height: 1in; + } + </style> + </head> + <body> + <p>Test passes if the line below is dashed.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-left-width-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-left-width-applies-to-011.xht new file mode 100644 index 0000000000..8da0710f03 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-left-width-applies-to-011.xht @@ -0,0 +1,23 @@ +<!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: Border-left-width applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-width-properties" /> + <meta name="assert" content="The 'border-left-width' properties applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-left-style: solid; + border-left-width: 1in; + display: run-in; + height: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-right-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-right-applies-to-011.xht new file mode 100644 index 0000000000..4b81ed2190 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-right-applies-to-011.xht @@ -0,0 +1,23 @@ +<!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: Border-right applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties" /> + <meta name="assert" content="The 'border-right' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-right: solid green; + display: run-in; + height: 1in; + width: 0; + } + </style> + </head> + <body> + <p>Test passes if there is a green line below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-right-color-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-right-color-applies-to-011.xht new file mode 100644 index 0000000000..6b6853da3f --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-right-color-applies-to-011.xht @@ -0,0 +1,24 @@ +<!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: Border-right-color applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-right-color" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-color-properties" /> + <meta name="assert" content="The 'border-right-color' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-right-style: solid; + border-right-color: green; + display: run-in; + height: 1in; + width: 0; + } + </style> + </head> + <body> + <p>Test passes if the line below is green.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-right-style-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-right-style-applies-to-011.xht new file mode 100644 index 0000000000..9768edfb11 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-right-style-applies-to-011.xht @@ -0,0 +1,23 @@ +<!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: Border-right-style applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-right-style" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-style-properties" /> + <meta name="assert" content="The 'border-right-style' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-right-style: dashed; + display: run-in; + height: 1in; + width: 0; + } + </style> + </head> + <body> + <p>Test passes if the line below is dashed.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-right-width-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-right-width-applies-to-011.xht new file mode 100644 index 0000000000..b57b4eb0ee --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-right-width-applies-to-011.xht @@ -0,0 +1,24 @@ +<!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: Border-right-width applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-right-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-width-properties" /> + <meta name="assert" content="The 'border-right-width' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-right-style: solid; + border-right-width: 1in; + display: run-in; + height: 1in; + width: 0; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-spacing-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/border-spacing-applies-to-004.xht new file mode 100644 index 0000000000..ed08262a36 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-spacing-applies-to-004.xht @@ -0,0 +1,25 @@ +<!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: Border-spacing and 'display: run-in' elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" /> + <meta name="assert" content="Border-spacing does not apply to 'display: run-in' elements." /> + <style type="text/css"> + div + { + border: 10px solid black; + border-spacing: 20px; + display: run-in; + height: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if the two boxes below are adjoining.</p> + <div></div> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-style-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-style-applies-to-011.xht new file mode 100644 index 0000000000..286b75afbd --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-style-applies-to-011.xht @@ -0,0 +1,22 @@ +<!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: Border-style applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-style-properties" /> + <meta name="assert" content="The 'border-style' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-style: dashed; + display: run-in; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a dashed lined box below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-top-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-top-applies-to-011.xht new file mode 100644 index 0000000000..804e76573d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-top-applies-to-011.xht @@ -0,0 +1,22 @@ +<!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: Border-top applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties" /> + <meta name="assert" content="The 'border-top' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-top: solid green; + display: run-in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a green line below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-top-color-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-top-color-applies-to-011.xht new file mode 100644 index 0000000000..c51329a63d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-top-color-applies-to-011.xht @@ -0,0 +1,23 @@ +<!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: Border-top-color applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-top-color" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-color-properties" /> + <meta name="assert" content="The 'border-top-color' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-top-style: solid; + border-top-color: green; + display: run-in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the line below is green.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-top-style-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-top-style-applies-to-011.xht new file mode 100644 index 0000000000..1b241a4bf6 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-top-style-applies-to-011.xht @@ -0,0 +1,22 @@ +<!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: Border-top-style applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-top-style" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-style-properties" /> + <meta name="assert" content="The 'border-top-style' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-top-style: dashed; + display: run-in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the line below is dashed.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-top-width-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-top-width-applies-to-011.xht new file mode 100644 index 0000000000..575365c980 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-top-width-applies-to-011.xht @@ -0,0 +1,23 @@ +<!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: Border-top-width applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-top-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-width-properties" /> + <meta name="assert" content="The 'border-top-width' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-top-style: solid; + border-top-width: 1in; + display: run-in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/border-width-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/border-width-applies-to-011.xht new file mode 100644 index 0000000000..2c4cf3b1cb --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/border-width-applies-to-011.xht @@ -0,0 +1,24 @@ +<!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: Border-width applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-width-properties" /> + <meta name="assert" content="The 'border-width' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + border-style: solid; + border-width: 1in; + display: run-in; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box below with four sides that are the same width. (Note: this will make a large square surrounding a smaller white square.)</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/bottom-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/bottom-applies-to-011.xht new file mode 100644 index 0000000000..83a7f8fcb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/bottom-applies-to-011.xht @@ -0,0 +1,26 @@ +<!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: Bottom applied to element with 'display' set to run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <meta name="assert" content="The 'bottom' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + background: green; + bottom: 0; + display: run-in; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box at the bottom of the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/caption-side-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/caption-side-applies-to-004.xht new file mode 100644 index 0000000000..08cc3b1554 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/caption-side-applies-to-004.xht @@ -0,0 +1,26 @@ +<!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: Caption-side and 'display: run-in' elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#propdef-caption-side" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#caption-position" /> + <meta name="assert" content="Caption-side does not apply to 'display: run-in' elements." /> + <style type="text/css"> + span + { + background: blue; + caption-side: bottom; + display: run-in; + } + </style> + </head> + <body> + <p>Test passes if there are three lines of "Filler Text" below and the middle line has a blue background.</p> + <div> + Filler Text + <span>Filler Text</span> + Filler Text + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/clear-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/clear-applies-to-011.xht new file mode 100644 index 0000000000..49eb51d213 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/clear-applies-to-011.xht @@ -0,0 +1,28 @@ +<!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: Clear applied to element with 'display' set to run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <meta name="assert" content="The 'clear' property applies to elements with a display of 'run-in'." /> + <style type="text/css"> + p + { + float: left; + } + div + { + background: green; + display: run-in; + clear: both; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/clear-runin-001.xht b/testing/web-platform/tests/css/css-display/run-in/clear-runin-001.xht new file mode 100644 index 0000000000..01b6e4c7bf --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/clear-runin-001.xht @@ -0,0 +1,35 @@ +<!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: Clear applies to final block box of a run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <meta name="assert" content="Clearance only applies to the final block box of a run-in element." /> + <style type="text/css"> + #div1 + { + width: 4in; + } + #span1 + { + background-color: blue; + float: left; + height: 1in; + width: 1in; + } + #span2 + { + clear: left; + display: run-in; + } + </style> + </head> + <body> + <p>Test passes if the "Filler Text" is all on the same line and is below the blue box.</p> + <div id="div1"> + <span id="span1"></span> + <span id="span2">Filler Text </span> + <div>Filler Text</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/color-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/color-applies-to-011.xht new file mode 100644 index 0000000000..e8ee1ba832 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/color-applies-to-011.xht @@ -0,0 +1,23 @@ +<!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: Color applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-color" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#colors" /> + <meta name="assert" content="The 'color' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + color: green; + display: run-in; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the "Filler Text" below is green.</p> + <div>Filler Text</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/counter-increment-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/counter-increment-applies-to-011.xht new file mode 100644 index 0000000000..73b1c94f4b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/counter-increment-applies-to-011.xht @@ -0,0 +1,26 @@ +<!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: Counter-increment applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#counters" /> + <link rel="match" href="../../reference/pass_if_number_5.xht"/> + <meta name="assert" content="The 'counter-increment' property applies to elements with a 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + counter-increment: test 5; + display: run-in; + } + div:before + { + content: counter(test); + } + </style> + </head> + <body> + <p>Test passes if there is a number '5' below.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/counter-reset-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/counter-reset-applies-to-011.xht new file mode 100644 index 0000000000..8038177d70 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/counter-reset-applies-to-011.xht @@ -0,0 +1,26 @@ +<!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: Counter-reset applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#counters" /> + <link rel="match" href="../../reference/pass_if_number_5.xht"/> + <meta name="assert" content="The 'counter-reset' property applies to elements with a 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + counter-reset: test 5; + display: run-in; + } + div:before + { + content: counter(test); + } + </style> + </head> + <body> + <p>Test passes if there is a number '5' below.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/cursor-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/cursor-applies-to-011.xht new file mode 100644 index 0000000000..d4ed8d2d0c --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/cursor-applies-to-011.xht @@ -0,0 +1,25 @@ +<!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: Cursor applied to element with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/ui.html#propdef-cursor" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props" /> + <meta name="flags" content="interact" /> + <meta name="assert" content="The 'cursor' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + background-color: blue; + cursor: pointer; + height: 1in; + display: run-in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the cursor changes to a pointer cursor when it is over the blue area.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/direction-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/direction-applies-to-011.xht new file mode 100644 index 0000000000..02c4a50b7a --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/direction-applies-to-011.xht @@ -0,0 +1,27 @@ +<!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: Direction applied to element with 'display' set to run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'direction' property applies to elements with a display of run-in." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: orange; + direction: rtl; + display: run-in; + font: 0.5in/1em Ahem; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box in the upper-right corner of the orange box.</p> + <div>X</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/display-004.xht b/testing/web-platform/tests/css/css-display/run-in/display-004.xht new file mode 100644 index 0000000000..8a9ab3225a --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/display-004.xht @@ -0,0 +1,21 @@ +<!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: Display set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" /> + <meta name="assert" content="The property 'display' set to 'run-in' behaves in layout as a run-in block." /> + <style type="text/css"> + #test + { + display: run-in; + } + </style> + </head> + <body> + <p>Test passes if the "Filler Text" below is all on the same line.</p> + <div id="test">Filler Text</div> + <div>Filler Text</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/empty-cells-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/empty-cells-applies-to-004.xht new file mode 100644 index 0000000000..8eb74d5daf --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/empty-cells-applies-to-004.xht @@ -0,0 +1,47 @@ +<!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: Empty-cells and 'display: run-in' elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#propdef-empty-cells" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#empty-cells" /> + <meta name="assert" content="Empty-cells does not apply to 'display: run-in' elements." /> + <style type="text/css"> + #table + { + display: table; + } + .tr + { + display: table-row; + } + .td + { + color: white; + display: table-cell; + } + #test + { + background: black; + border: 5px solid black; + display: run-in; + empty-cells: hide; + height: 1em; + width: 1em; + } + </style> + </head> + <body> + <p>Test passes if there is a box below.</p> + <div id="table"> + <div class="tr"> + <div id="test"></div> + <div class="td">XXXXX</div> + </div> + <div class="tr"> + <div class="td">XXXXX</div> + <div class="td">XXXXX</div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/first-line-pseudo-009.xht b/testing/web-platform/tests/css/css-display/run-in/first-line-pseudo-009.xht new file mode 100644 index 0000000000..690aee9f85 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/first-line-pseudo-009.xht @@ -0,0 +1,26 @@ +<!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" lang="en"> + <head> + <title>CSS Test: CSS Block Box Model: first-line and inherited backgrounds</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/block/first-line/009.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo" /> + <style type="text/css"> + /* layout */ + .test { border: solid; margin: 1em; } + /* test */ + .runin { display: run-in; background: navy; color: yellow; } + .block { display: block; background: purple; color: white; } + .block:first-line { background: inherit; color: inherit; font-weight: bold; } + /* control */ + .fakerunin { display: inline; background: navy; color: yellow; font-weight: bold; } + .fakeblock { display: block; background: purple; color: white; font-weight: bold; } + </style> + </head> + <body> + <p>The following two lines should look identical (this test also tests run-in).</p> + <div class="test"> <div class="runin"> ABC </div> <div class="block"> DEF </div> </div> + <div class="test"> <div class="fakeblock"> <div class="fakerunin"> ABC </div> DEF </div> </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/float-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/float-applies-to-011.xht new file mode 100644 index 0000000000..4c8933e3ff --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/float-applies-to-011.xht @@ -0,0 +1,24 @@ +<!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: Float applied to element with 'display' set to run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <meta name="assert" content="The 'float' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + background: green; + display: run-in; + float: right; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box on the right side of the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/font-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/font-applies-to-004.xht new file mode 100644 index 0000000000..3a1864847e --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/font-applies-to-004.xht @@ -0,0 +1,26 @@ +<!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: Font and 'display: run-in' elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#font-shorthand" /> + <link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-prop"/> + <meta name="assert" content="The 'font' property applies to 'display: run-in' elements." /> + <style type="text/css"> + div + { + font: italic small-caps bold 16px sans-serif; + } + #div1 + { + display: run-in; + } + </style> + </head> + <body> + <p>Test passes if the lines of "Filler Text" below match.</p> + <div>Filler Text</div> + <div id="div1">Filler Text</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/font-family-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/font-family-applies-to-004.xht new file mode 100644 index 0000000000..8895fcb9f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/font-family-applies-to-004.xht @@ -0,0 +1,23 @@ +<!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: Font-family and 'display: run-in' elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#font-family-prop" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'font-family' property applies to 'display: run-in' elements." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + display: run-in; + font-family: Ahem; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div>X</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/font-size-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/font-size-applies-to-004.xht new file mode 100644 index 0000000000..143c51742b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/font-size-applies-to-004.xht @@ -0,0 +1,32 @@ +<!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: Font-size and 'display: run-in' elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#font-size-props" /> + <link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-size-prop"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'font-size' property applies to 'display: run-in' elements." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + background: orange; + height: 1in; + width: 1in; + } + #div2 + { + display: run-in; + font-family: Ahem; + font-size: 1in; + } + </style> + </head> + <body> + <p>Test passes if the boxes below are the same size.</p> + <div id="div1"></div> + <div id="div2">X</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/font-style-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/font-style-applies-to-004.xht new file mode 100644 index 0000000000..449a5c420b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/font-style-applies-to-004.xht @@ -0,0 +1,23 @@ +<!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: Font-style and 'display: run-in' elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-style" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#font-styling" /> + <link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-style-prop"/> + <link rel="match" href="../../reference/pass_if_filler_text_slanted.xht"/> + <meta name="assert" content="The 'font-style' property applies to 'display: run-in' elements." /> + <style type="text/css"> + div + { + display: run-in; + font-style: italic; + } + </style> + </head> + <body> + <p>Test passes if the "Filler Text" below is slanted to one side.</p> + <div>Filler Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/font-variant-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/font-variant-applies-to-004.xht new file mode 100644 index 0000000000..af45082207 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/font-variant-applies-to-004.xht @@ -0,0 +1,27 @@ +<!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: Font-variant and 'display: run-in' elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-variant" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#small-caps" /> + <link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-variant-prop" /> + <link rel="match" href="../../reference/pass_if_filler_text_match_smallcaps.xht"/> + <meta name="assert" content="The 'font-variant' property applies to 'display: run-in' elements." /> + <style type="text/css"> + div + { + font-variant: small-caps; + } + #div1 + { + display: run-in; + } + </style> + </head> + <body> + <p>Test passes if the lines of "Filler Text" below match.</p> + <div>Filler Text</div> + <div id="div1">Filler Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/font-weight-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/font-weight-applies-to-004.xht new file mode 100644 index 0000000000..bcbf70e3d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/font-weight-applies-to-004.xht @@ -0,0 +1,27 @@ +<!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: Font-weight and 'display: run-in' elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#font-boldness" /> + <link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-weight-prop" /> + <link rel="match" href="../../reference/pass_if_filler_text_match_bold.xht"/> + <meta name="assert" content="Font weights apply to 'display: run-in' elements." /> + <style type="text/css"> + div + { + font-weight: bold; + } + #div1 + { + display: run-in; + } + </style> + </head> + <body> + <p>Test passes if the lines of "Filler Text" below match.</p> + <div>Filler Text</div> + <div id="div1">Filler Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/height-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/height-applies-to-011.xht new file mode 100644 index 0000000000..67acc00c79 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/height-applies-to-011.xht @@ -0,0 +1,24 @@ +<!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: Height applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property" /> + <link rel="match" href="../../reference/pass_if_square_96px_black.html"/> + <meta name="assert" content="The 'height' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + background: black; + display: run-in; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/left-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/left-applies-to-011.xht new file mode 100644 index 0000000000..604877974e --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/left-applies-to-011.xht @@ -0,0 +1,26 @@ +<!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: Left applied to element with 'display' set to run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <meta name="assert" content="The 'left' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + background: green; + left: 0; + display: run-in; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box on the left side of the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/letter-spacing-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/letter-spacing-applies-to-004.xht new file mode 100644 index 0000000000..33c71fbcb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/letter-spacing-applies-to-004.xht @@ -0,0 +1,37 @@ +<!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: Letter-spacing application on a 'display: run-in' element</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#propdef-letter-spacing" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#spacing-props" /> + <link rel="match" href="../../reference/black_box_ends_when_blue_box_ends_6_boxes_ahem.html"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'letter-spacing' property is applied to 'display: run-in' elements." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 16px/1em Ahem; + } + div div + { + display: run-in; + letter-spacing: 1em; + } + #div1 + { + background: blue; + height: 1em; + width: 11em; + } + </style> + </head> + <body> + <p>Test passes if there are six black boxes below and the last black box ends when the blue box ends.</p> + <div> + <div>XXXXXX</div> + </div> + <div id="div1"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/line-height-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/line-height-applies-to-011.xht new file mode 100644 index 0000000000..b8ddd08618 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/line-height-applies-to-011.xht @@ -0,0 +1,39 @@ +<!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: Line-height applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="assert" content="The 'line-height' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2 + { + background: blue; + display: run-in; + line-height: 2in; + width: 1in; + } + #div3 + { + background: orange; + height: 2in; + left: 1in; + position: absolute; + top: 0; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange boxes below are the same height.</p> + <div id="div1"> + <div id="div2"> </div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/list-style-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/list-style-applies-to-011.xht new file mode 100644 index 0000000000..4b0a0e46ce --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/list-style-applies-to-011.xht @@ -0,0 +1,29 @@ +<!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: List-style applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style" /> + <link rel="match" href="../../reference/single_square_list_marker.xht"/> + <meta name="assert" content="The 'list-style' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + display: run-in; + list-style: square; + margin-left: 1in; + } + span + { + display: list-item; + } + </style> + </head> + <body> + <p>Test passes if there is a single square below.</p> + <div> + <span></span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/list-style-image-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/list-style-image-applies-to-011.xht new file mode 100644 index 0000000000..dca032c6e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/list-style-image-applies-to-011.xht @@ -0,0 +1,29 @@ +<!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: List-style-image applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style" /> + <meta name="flags" content="image" /> + <meta name="assert" content="The 'list-style-image' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + display: run-in; + list-style-image: url('support/blue15x15.png'); + margin-left: 1in; + } + span + { + display: list-item; + } + </style> + </head> + <body> + <p>Test passes if there is a single blue square below.</p> + <div> + <span></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/list-style-position-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/list-style-position-applies-to-011.xht new file mode 100644 index 0000000000..e38e4f3e1d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/list-style-position-applies-to-011.xht @@ -0,0 +1,29 @@ +<!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: List-style-position applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style" /> + <meta name="assert" content="The 'list-style-position' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + display: run-in; + list-style-position: inside; + margin-left: 1in; + } + span + { + background: orange; + display: list-item; + } + </style> + </head> + <body> + <p>Test passes if there is a black dot inside an orange box below.</p> + <div> + <span></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/list-style-type-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/list-style-type-applies-to-011.xht new file mode 100644 index 0000000000..fed66d951f --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/list-style-type-applies-to-011.xht @@ -0,0 +1,29 @@ +<!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: List-style-type applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-type" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style" /> + <link rel="match" href="../../reference/single_square_list_marker.xht"/> + <meta name="assert" content="The 'list-style-type' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + display: run-in; + list-style-type: square; + margin-left: 1in; + } + span + { + display: list-item; + } + </style> + </head> + <body> + <p>Test passes if there is a single square below.</p> + <div> + <span></span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/margin-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/margin-applies-to-011.xht new file mode 100644 index 0000000000..4282f3e7fc --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/margin-applies-to-011.xht @@ -0,0 +1,31 @@ +<!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: Margin applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" /> + <meta name="assert" content="The 'Margin' property applies to elements with a display of run-in." /> + <style type="text/css"> + #wrapper + { + border: 10px solid blue; + position: absolute; + } + #test + { + border: 10px solid orange; + display: run-in; + height: 200px; + width: 200px; + margin: 50px; + } + </style> + </head> + <body> + <p>Test passes if there is space between the blue and orange lines below.</p> + <div id="wrapper"> + <div id="test"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/margin-bottom-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/margin-bottom-applies-to-011.xht new file mode 100644 index 0000000000..38d6498c45 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/margin-bottom-applies-to-011.xht @@ -0,0 +1,30 @@ +<!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: Margin-bottom applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" /> + <meta name="assert" content="The 'margin-bottom' property applies to elements with a display of run-in." /> + <style type="text/css"> + #wrapper + { + border-bottom: 10px solid blue; + } + div div + { + border-bottom: 10px solid orange; + display: run-in; + height: 200px; + margin-bottom: 50px; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if there is space between the blue and orange lines below.</p> + <div id="wrapper"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/margin-left-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/margin-left-applies-to-011.xht new file mode 100644 index 0000000000..906e95cb32 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/margin-left-applies-to-011.xht @@ -0,0 +1,33 @@ +<!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: Margin-left applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" /> + <meta name="assert" content="The 'margin-left' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + height: 200px; + width: 200px; + } + #div1 + { + border-left: 10px solid blue; + } + div div + { + border-left: 10px solid orange; + display: run-in; + margin-left: 50px; + } + </style> + </head> + <body> + <p>Test passes if there is space between the blue and orange lines below.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/margin-right-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/margin-right-applies-to-011.xht new file mode 100644 index 0000000000..ee1c80dfd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/margin-right-applies-to-011.xht @@ -0,0 +1,33 @@ +<!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: Margin-right applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" /> + <meta name="assert" content="The 'margin-right' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + height: 200px; + } + #div1 + { + border-right: 10px solid blue; + width: 200px; + } + div div + { + border-right: 10px solid orange; + display: run-in; + margin-right: 50px; + } + </style> + </head> + <body> + <p>Test passes if there is space between the blue and orange lines below.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/margin-top-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/margin-top-applies-to-011.xht new file mode 100644 index 0000000000..95af9e8ccd --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/margin-top-applies-to-011.xht @@ -0,0 +1,33 @@ +<!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: Margin-top applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" /> + <meta name="assert" content="The 'margin-top' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + height: 200px; + width: 200px; + } + #div1 + { + border-top: 10px solid blue; + } + div div + { + border-top: 10px solid orange; + display: run-in; + margin-top: 50px; + } + </style> + </head> + <body> + <p>Test passes if there is space between the blue and orange lines below.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/max-height-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/max-height-applies-to-011.xht new file mode 100644 index 0000000000..f27561c182 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/max-height-applies-to-011.xht @@ -0,0 +1,25 @@ +<!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: Max-height applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-max-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights" /> + <link rel="match" href="../../reference/pass_if_square_96px_black.html"/> + <meta name="assert" content="The 'max-height' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + background: black; + display: run-in; + height: 3in; + max-height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/max-width-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/max-width-applies-to-011.xht new file mode 100644 index 0000000000..65337647e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/max-width-applies-to-011.xht @@ -0,0 +1,25 @@ +<!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: Max-width applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-max-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="../../reference/pass_if_square_96px_black.html"/> + <meta name="assert" content="The 'max-width' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + background: black; + display: run-in; + height: 1in; + max-width: 1in; + width: 3in; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/min-height-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/min-height-applies-to-011.xht new file mode 100644 index 0000000000..ca2a6ba0fa --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/min-height-applies-to-011.xht @@ -0,0 +1,24 @@ +<!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: Min-height applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-min-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights" /> + <link rel="match" href="../../reference/pass_if_square_96px_black.html"/> + <meta name="assert" content="The 'min-height' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + background: black; + display: run-in; + min-height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/min-width-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/min-width-applies-to-011.xht new file mode 100644 index 0000000000..b905bf9383 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/min-width-applies-to-011.xht @@ -0,0 +1,30 @@ +<!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: Min-width applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-min-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="../../reference/pass_if_square_96px_black.html"/> + <meta name="assert" content="The 'min-width' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + #div1 + { + width: 0.5in; + } + div div + { + background: black; + display: run-in; + height: 1in; + min-width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/outline-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/outline-applies-to-011.xht new file mode 100644 index 0000000000..98da6983da --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/outline-applies-to-011.xht @@ -0,0 +1,23 @@ +<!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: Outline applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/ui.html#propdef-outline" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines" /> + <meta name="assert" content="The 'outline' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + display: run-in; + height: 1in; + outline: solid blue 10px; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a blue box below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/outline-color-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/outline-color-applies-to-011.xht new file mode 100644 index 0000000000..1012b5d0ba --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/outline-color-applies-to-011.xht @@ -0,0 +1,25 @@ +<!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: Outline-color applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/ui.html#propdef-outline-color" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines" /> + <meta name="assert" content="The 'outline-color' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + height: 1in; + display: run-in; + outline-color: blue; + outline-style: solid; + outline-width: 10px; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the box below is blue.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/outline-style-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/outline-style-applies-to-011.xht new file mode 100644 index 0000000000..934aee6246 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/outline-style-applies-to-011.xht @@ -0,0 +1,25 @@ +<!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: Outline-style applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/ui.html#propdef-outline-style" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines" /> + <meta name="assert" content="The 'outline-style' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + display: run-in; + height: 1in; + outline-color: blue; + outline-style: dotted; + outline-width: 10px; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the box below has a dotted border.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/outline-width-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/outline-width-applies-to-011.xht new file mode 100644 index 0000000000..216dd8c62c --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/outline-width-applies-to-011.xht @@ -0,0 +1,25 @@ +<!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: Outline-width applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/ui.html#propdef-outline-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines" /> + <meta name="assert" content="The 'outline-width' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + display: run-in; + height: 1in; + outline-color: green; + outline-style: solid; + outline-width: 10px; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a green box below.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/overflow-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/overflow-applies-to-011.xht new file mode 100644 index 0000000000..bbf47e3bb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/overflow-applies-to-011.xht @@ -0,0 +1,32 @@ +<!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: overflow applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'overflow' property applies to elements with 'display' set to 'run-in'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + border: 5px solid transparent; + color: white; + display: run-in; + font: 20px/1em Ahem; + height: 5em; + overflow: hidden; + width: 5em; + } + #span2 + { + color: red; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div><span>XXXXX</span><span id="span2">XXXXX</span></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/padding-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/padding-applies-to-011.xht new file mode 100644 index 0000000000..58567c7b28 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/padding-applies-to-011.xht @@ -0,0 +1,30 @@ +<!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: Padding applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-padding" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#padding-properties" /> + <meta name="assert" content="The 'padding' property applies to elements with a display of run-in." /> + <style type="text/css"> + #div1 + { + border: 10px solid blue; + display: run-in; + padding: 50px; + width: 200px; + } + div div + { + border: 10px solid orange; + height: 200px; + } + </style> + </head> + <body> + <p>Test passes if there is space between the blue and orange lines on all four sides.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/padding-bottom-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/padding-bottom-applies-to-011.xht new file mode 100644 index 0000000000..c31cfb2ca2 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/padding-bottom-applies-to-011.xht @@ -0,0 +1,32 @@ +<!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: Padding-bottom applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-padding-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#padding-properties" /> + <meta name="assert" content="The 'padding-bottom' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + width: 200px; + } + #div1 + { + border-bottom: 10px solid blue; + display: run-in; + padding-bottom: 50px; + } + div div + { + border-bottom: 10px solid orange; + } + </style> + </head> + <body> + <p>Test passes if there is space between the blue and orange lines below.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/padding-left-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/padding-left-applies-to-011.xht new file mode 100644 index 0000000000..5c2eb7aaf0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/padding-left-applies-to-011.xht @@ -0,0 +1,33 @@ +<!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: Padding-left applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-padding-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#padding-properties" /> + <meta name="assert" content="The 'padding-left' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + height: 200px; + width: 200px; + } + #div1 + { + border-left: 10px solid blue; + display: run-in; + padding-left: 50px; + } + div div + { + border-left: 10px solid orange; + } + </style> + </head> + <body> + <p>Test passes if there is space between the blue and orange lines below.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/padding-right-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/padding-right-applies-to-011.xht new file mode 100644 index 0000000000..25d09ff02f --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/padding-right-applies-to-011.xht @@ -0,0 +1,33 @@ +<!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: Padding-right applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-padding-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#padding-properties" /> + <meta name="assert" content="The 'padding-right' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + height: 200px; + } + #div1 + { + border-right: 10px solid blue; + display: run-in; + padding-right: 50px; + width: 200px; + } + div div + { + border-right: 10px solid orange; + } + </style> + </head> + <body> + <p>Test passes if there is space between the blue and orange lines below.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/padding-top-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/padding-top-applies-to-011.xht new file mode 100644 index 0000000000..5cce439be6 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/padding-top-applies-to-011.xht @@ -0,0 +1,32 @@ +<!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: Padding-top applied to element with display run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-padding-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#padding-properties" /> + <meta name="assert" content="The 'padding-top' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + width: 200px; + } + #div1 + { + border-top: 10px solid blue; + display: run-in; + padding-top: 50px; + } + div div + { + border-top: 10px solid orange; + } + </style> + </head> + <body> + <p>Test passes if there is space between the blue and orange lines below.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/position-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/position-applies-to-011.xht new file mode 100644 index 0000000000..6e683b255d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/position-applies-to-011.xht @@ -0,0 +1,26 @@ +<!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: Position applied to element with 'display' set to run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <meta name="assert" content="The 'position' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + background: green; + bottom: 0; + display: run-in; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box at the bottom of the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/quotes-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/quotes-applies-to-011.xht new file mode 100644 index 0000000000..9594507359 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/quotes-applies-to-011.xht @@ -0,0 +1,26 @@ +<!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: Quotes applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#propdef-quotes" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#quotes-specify" /> + <link rel="match" href="../../reference/pass_if_pass_below.html" /> + <meta name="assert" content="The 'quotes' property applies to elements with a 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + display: run-in; + quotes: "P" "S" "A" "S"; + } + div:before + { + content: open-quote open-quote close-quote close-quote; + } + </style> + </head> + <body> + <p>Test passes if there is the word "PASS" below.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/right-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/right-applies-to-011.xht new file mode 100644 index 0000000000..59af50fe68 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/right-applies-to-011.xht @@ -0,0 +1,26 @@ +<!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: Right applied to element with 'display' set to run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <meta name="assert" content="The 'right' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + background: green; + right: 0; + display: run-in; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box on the right side of the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-001.xht new file mode 100644 index 0000000000..d16fc20e01 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-001.xht @@ -0,0 +1,35 @@ +<!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: Run-in with a block box converts to a block box</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Run-in boxes are converted to block boxes when the run-in box contains a block box." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1em Ahem; + } + #span1 + { + display: run-in; + } + span span + { + display: block; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div> + <span>XXX</span> + <span id="span1"> + XXX + <span>XXX</span> + </span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-002.xht new file mode 100644 index 0000000000..6541659627 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-002.xht @@ -0,0 +1,27 @@ +<!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: Run-in boxes change to inline boxes</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in" /> + <meta name="assert" content="Sibling block boxes following a run-in makes the run-in become an inline of the block box." /> + <style type="text/css"> + #span1 + { + display: run-in; + } + #span2 + { + background: orange; + display: block; + } + </style> + </head> + <body> + <p>Test passes if the "Filler Text" below is all on the same line and is completely contained within the orange box.</p> + <div> + <span id="span1">Filler Text</span> + <span id="span2">Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-003.xht new file mode 100644 index 0000000000..2a6d75eb1f --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-003.xht @@ -0,0 +1,33 @@ +<!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: Run-in boxes and float</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Float prevents run-in from becoming inline." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + span + { + font: 20px/1em Ahem; + } + #span1 + { + display: run-in; + } + #span2 + { + display: block; + float: left; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div> + <span id="span1">XX</span> + <span id="span2">XX</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-004.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-004.xht new file mode 100644 index 0000000000..e19688b2ae --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-004.xht @@ -0,0 +1,33 @@ +<!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: Run-in boxes and absolute positioning</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Absolute positioning prevents run-in from becoming inline." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + span + { + font: 20px/1em Ahem; + } + #span1 + { + display: run-in; + } + #span2 + { + display: block; + position: absolute; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div> + <span id="span1">XX</span> + <span id="span2">XX</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-005.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-005.xht new file mode 100644 index 0000000000..b16506f363 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-005.xht @@ -0,0 +1,29 @@ +<!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: Run-in that starts with a run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in" /> + <meta name="assert" content="Run-in boxes cannot run-in with another box that already starts with a run-in." /> + <style type="text/css"> + span + { + display: run-in; + } + span span + { + background: orange; + } + </style> + </head> + <body> + <p>Test passes if words "Filler Text" are on three separate lines and the orange box in the middle spans the entire width of the page.</p> + <div> + <span id="span1"> + Filler Text + <span>Filler Text</span> + Filler Text + </span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-006.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-006.xht new file mode 100644 index 0000000000..55a80fed06 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-006.xht @@ -0,0 +1,33 @@ +<!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: Run-in with a table box</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Run-in boxes are converted to block boxes when the run-in box runs into a table box." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + span + { + font: 20px/1em Ahem; + } + #span1 + { + display: run-in; + } + #span2 + { + display: table; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div> + <span id="span1">XX</span> + <span id="span2">XX</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-007.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-007.xht new file mode 100644 index 0000000000..e24242a9a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-007.xht @@ -0,0 +1,33 @@ +<!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: Run-in with a inline-table box</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Run-in boxes are converted to block boxes when the run-in box runs into an inline-table box." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + span + { + font: 20px/1em Ahem; + } + #span1 + { + display: run-in; + } + #span2 + { + display: inline-table; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div> + <span id="span1">XX</span> + <span id="span2">XX</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-008.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-008.xht new file mode 100644 index 0000000000..87ca7073bd --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-008.xht @@ -0,0 +1,33 @@ +<!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: Run-in with a table-row-group box</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Run-in boxes are converted to block boxes when the run-in box runs into a table-row-group box." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + span + { + font: 20px/1em Ahem; + } + #span1 + { + display: run-in; + } + #span2 + { + display: table-row-group; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div> + <span id="span1">XX</span> + <span id="span2">XX</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-009.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-009.xht new file mode 100644 index 0000000000..255dfa0ae7 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-009.xht @@ -0,0 +1,33 @@ +<!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: Run-in with a table-row box</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Run-in boxes are converted to block boxes when the run-in box runs into a table-row box." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + span + { + font: 20px/1em Ahem; + } + #span1 + { + display: run-in; + } + #span2 + { + display: table-row; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div> + <span id="span1">XX</span> + <span id="span2">XX</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-010.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-010.xht new file mode 100644 index 0000000000..4f1738cc1d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-010.xht @@ -0,0 +1,33 @@ +<!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: Run-in with a table-cell box</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Run-in boxes are converted to block boxes when the run-in box runs into a table-cell box." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + span + { + font: 20px/1em Ahem; + } + #span1 + { + display: run-in; + } + #span2 + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div> + <span id="span1">XX</span> + <span id="span2">XX</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-011.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-011.xht new file mode 100644 index 0000000000..5e45d90e42 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-011.xht @@ -0,0 +1,33 @@ +<!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: Run-in with a table-caption box</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Run-in boxes are converted to block boxes when the run-in box runs into a table-caption box." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + span + { + font: 20px/1em Ahem; + } + #span1 + { + display: run-in; + } + #span2 + { + display: table-caption; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div> + <span id="span1">XX</span> + <span id="span2">XX</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-012.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-012.xht new file mode 100644 index 0000000000..0673437b72 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-012.xht @@ -0,0 +1,33 @@ +<!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: Run-in with a table-header-group box</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Run-in boxes are converted to block boxes when the run-in box runs into a table-header-group box." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + span + { + font: 20px/1em Ahem; + } + #span1 + { + display: run-in; + } + #span2 + { + display: table-header-group; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div> + <span id="span1">XX</span> + <span id="span2">XX</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-013.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-013.xht new file mode 100644 index 0000000000..0102222b35 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-013.xht @@ -0,0 +1,34 @@ +<!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: Run-in with a table-footer-group box</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Run-in boxes are converted to block boxes when the run-in box runs into a table-footer-group box." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + span + { + font: 20px/1em Ahem; + } + #span1 + { + display: run-in; + } + #span2 + { + display: table-footer-group; + background: blue; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div> + <span id="span1">XX</span> + <span id="span2">XX</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-abspos-between-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-abspos-between-001.xht new file mode 100644 index 0000000000..1af8ee4567 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-abspos-between-001.xht @@ -0,0 +1,24 @@ +<!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>CSS Test: Run in - abs pos should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if there is an absolutely + positioned element between the run-in and the following block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + .abspos { position: absolute; visibility: hidden; } + #target { border: 2px solid black; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <div class="abspos"></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-abspos-between-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-abspos-between-002.xht new file mode 100644 index 0000000000..8303df2bf6 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-abspos-between-002.xht @@ -0,0 +1,40 @@ +<!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>CSS Test: Run in - block set to abs pos should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if a block is dynamically set to + absolutely positioned between them and the following block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + .abspos { position: absolute; visibility: hidden; } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.className = "abspos"; + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="r">Some text.</div> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-abspos-between-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-abspos-between-003.xht new file mode 100644 index 0000000000..5053a7a5ea --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-abspos-between-003.xht @@ -0,0 +1,40 @@ +<!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>CSS Test: Run in - inline toggled from abs pos should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if an inline between them and + the block is toggled from being absolutely positioned."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + .abspos { position: absolute; visibility: hidden; } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.className = ""; + } + ]]></script> + </head> + <body> + <div> + <div class="run-in">Run-in header</div> + <span id="r" class="abspos">Some text.</span> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-001.xht new file mode 100644 index 0000000000..d28a657595 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-001.xht @@ -0,0 +1,23 @@ +<!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>CSS Test: Run in - basic functionality</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Run-ins run into a following block if there is nothing + between the run-in and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div><div id="target">Start of block. The + run-in header should be inside the border around this block and there should + be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-002.xht new file mode 100644 index 0000000000..6c7b7c3c9e --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-002.xht @@ -0,0 +1,22 @@ +<!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>CSS Test: Run in - basic functionality with whitespace</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Run-ins run into a following block if there is collapsed + whitespace between the run-in and the following block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-003.xht new file mode 100644 index 0000000000..16121978c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-003.xht @@ -0,0 +1,25 @@ +<!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>CSS Test: Run in - basic functionality with comments</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Run-ins run into a following block if there is collapsed + whitespace and comments between the run-in and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <!-- This is a comment --> + + <!-- And another comment --> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-004.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-004.xht new file mode 100644 index 0000000000..faad2521e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-004.xht @@ -0,0 +1,36 @@ +<!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>CSS Test: Run in - basic functionality with multiple whitespace nodes</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins actually run in if there are multiple + whitespace nodes between the run-in and the following block. + There must be multiple whitespace nodes in the DOM between the + run-in and the following block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + </head> + <body> + <div id="makemerun">Run-in header</div> + <script type="text/javascript"><![CDATA[ + document.body.appendChild(document.createTextNode(" ")); + document.body.appendChild(document.createTextNode(" ")); + window.onload = function() { + var t = document.getElementById("target"); + if (t.previousSibling.nodeType == 3 /* Node.TEXT_NODE */ && + t.previousSibling.previousSibling.nodeType == 3) { + document.getElementById("makemerun").className = "run-in"; + } + } + ]]></script> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-005.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-005.xht new file mode 100644 index 0000000000..47c7632bbb --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-005.xht @@ -0,0 +1,23 @@ +<!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>CSS Test: Run in - basic functionality with following block containing run-in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-block-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if the following block has + a display:run-in child."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + #target > div { display: run-in; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target"><div>Start of block. The run-in header should be inside the border around this block and there should be a newline between the word "header" and the word "Start".</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-006.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-006.xht new file mode 100644 index 0000000000..d77b02a001 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-006.xht @@ -0,0 +1,21 @@ +<!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>CSS Test: Run in - basic functionality with list-item</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if followed by a list-item."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; display: list-item; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-007-ref.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-007-ref.xht new file mode 100644 index 0000000000..ba04ce3435 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-007-ref.xht @@ -0,0 +1,17 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <style type="text/css"> + .run-in { font-weight: bold } + #target { border: 2px solid black; overflow: scroll; } + </style> + </head> + <body> + <div id="target"><span class="run-in">Run-in header</span>Start of block. + The run-in header should be inside the border around this block and there + should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-007.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-007.xht new file mode 100644 index 0000000000..4138a9f697 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-007.xht @@ -0,0 +1,22 @@ +<!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>CSS Test: Run in - runs into overflow:scroll block</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-007-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if the block has + overflow:scroll."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; overflow: scroll; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-008.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-008.xht new file mode 100644 index 0000000000..412eec6786 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-008.xht @@ -0,0 +1,25 @@ +<!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>CSS Test: Run in - runs into relatively positioned block</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if the block is relatively + positioned."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; position: relative; top: 2em; left: 2em; } + #container { position: relative; top: -2em; left: -2em; } + ]]></style> + </head> + <body> + <div id="container"> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-009.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-009.xht new file mode 100644 index 0000000000..14c997804d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-009.xht @@ -0,0 +1,22 @@ +<!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>CSS Test: Run in - run-ins run in even if given overflow:scroll</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have + overflow:scroll set."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold; overflow: scroll } + #target { border: 2px solid black; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-010.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-010.xht new file mode 100644 index 0000000000..2dc30223e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-010.xht @@ -0,0 +1,23 @@ +<!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>CSS Test: Run in - parsing a block after a run-in should make the run-in run in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins actually run in if a block is parsed after them."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <script type="text/javascript">document.body.offsetHeight; /* flush layout here on purpose */</script> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-011.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-011.xht new file mode 100644 index 0000000000..afc85413af --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-011.xht @@ -0,0 +1,36 @@ +<!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>CSS Test: Run in - inserting a block after a run-in should make the run-in run in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins actually run in if a block is inserted after them."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.createElement("div"); + t.id = "target"; + t.appendChild(document.createTextNode('Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".')); + document.body.appendChild(t); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-012.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-012.xht new file mode 100644 index 0000000000..c5d35bf236 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-012.xht @@ -0,0 +1,23 @@ +<!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>CSS Test: Run in - basic functionality with :before</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins end up before :before content when they run + in."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + #target:before { content: "Start of block. " } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-013.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-013.xht new file mode 100644 index 0000000000..af810ac289 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-013.xht @@ -0,0 +1,37 @@ +<!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>CSS Test: Run in - dynamically inserted run-in should run in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that dynamically inserted run-ins run in."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + var s = document.createElement("div"); + s.appendChild(document.createTextNode("Run-in header")); + s.className = "run-in"; + t.parentNode.insertBefore(s, t); + } + ]]></script> + </head> + <body> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-014.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-014.xht new file mode 100644 index 0000000000..9f52e92cec --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-014.xht @@ -0,0 +1,22 @@ +<!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>CSS Test: Run in - basic functionality with preserved whitespace</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-pre-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in across preserved whitespace."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + #container { white-space: pre; } + #container > * { white-space: normal; } + ]]></style> + </head> + <body> + <div id="container"><div class="run-in">Run-in header</div> <div id="target">Start of block. The run-in header should be outside the border around this block and there should be a blank line between the run-in header and this block.</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-015.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-015.xht new file mode 100644 index 0000000000..8eee5e98df --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-015.xht @@ -0,0 +1,37 @@ +<!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>CSS Test: Run in - dynamically preserved whitespace</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-pre-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in across preserved whitespace + even if it's preserved dynamically."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .container { white-space: pre; } + .container > * { white-space: normal; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var c = document.getElementById("container"); + c.className = "container"; + } + ]]></script> + </head> + <body> + <div id="container"><div class="run-in">Run-in header</div> <div id="target">Start of block. The run-in header should be outside the border around this block and there should be a blank line between the run-in header and this block.</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-016.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-016.xht new file mode 100644 index 0000000000..4e8d71ae89 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-016.xht @@ -0,0 +1,37 @@ +<!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>CSS Test: Run in - dynamically added preserved whitespace(2)</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-pre-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in across preserved whitespace + even if it's added dynamically."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + #container { white-space: pre; } + #container > * { white-space: normal; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + t.parentNode.insertBefore(document.createTextNode(" "), t); + } + ]]></script> + </head> + <body> + <div id="container"><div class="run-in">Run-in header</div><div id="target">Start of block. The run-in header should be outside the border around this block and there should be a blank line between the run-in header and this block.</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-017.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-017.xht new file mode 100644 index 0000000000..065fe751f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-017.xht @@ -0,0 +1,40 @@ +<!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>CSS Test: Run in - dynamically added preserved whitespace(3)</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-pre-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in across preserved whitespace + even if it's added dynamically."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + #container { white-space: pre; } + #container > * { white-space: normal; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + var s = document.createTextNode(""); + t.parentNode.insertBefore(s, t); + flushLayout(document.documentElement); + s.data = " "; + } + ]]></script> + </head> + <body> + <div id="container"><div class="run-in">Run-in header</div><div id="target">Start of block. The run-in header should be outside the border around this block and there should be a blank line between the run-in header and this block.</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-018.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-018.xht new file mode 100644 index 0000000000..d776c2df87 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-018.xht @@ -0,0 +1,40 @@ +<!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>CSS Test: Run in - dynamically added empty preserved whitespace</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in across preserved whitespace if the + textnode is empty."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + #container { white-space: pre; } + #container > * { white-space: normal; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + var s = document.createTextNode(""); + t.parentNode.insertBefore(s, t); + } + ]]></script> + </head> + <body> + <div id="container"><div class="run-in">Run-in header</div><div id="target">Start of block. + The run-in header should be inside the border around this block and there + should be no space between the word "header" and the word "Start".</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-basic-ref.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-ref.xht new file mode 100644 index 0000000000..597c7237a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-basic-ref.xht @@ -0,0 +1,17 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <style type="text/css"> + .run-in { font-weight: bold } + #target { border: 2px solid black; } + </style> + </head> + <body> + <div id="target"><span class="run-in">Run-in header</span>Start of block. + The run-in header should be inside the border around this block and there + should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-block-between-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-block-between-001.xht new file mode 100644 index 0000000000..503924f23b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-block-between-001.xht @@ -0,0 +1,23 @@ +<!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>CSS Test: Run in - block should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Run-ins run into a following block even if the block is empty."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <div></div> + <div>Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-block-between-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-block-between-002.xht new file mode 100644 index 0000000000..eeace162a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-block-between-002.xht @@ -0,0 +1,39 @@ +<!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>CSS Test: Run in - dynamically inserted block should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Run-ins run into a following block even if the block is + dynamically inserted and empty."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + t.parentNode.insertBefore(document.createElement("div"), t); + var s = document.createElement("div"); + s.appendChild(document.createTextNode("Some text.")) + t.parentNode.insertBefore(s, t); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-block-between-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-block-between-003.xht new file mode 100644 index 0000000000..ca901199c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-block-between-003.xht @@ -0,0 +1,39 @@ +<!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>CSS Test: Run in - dynamically removed block should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Run-ins run into a following block even if there was another + block between that was dynamically removed."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.parentNode.removeChild(r); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="r">Some text.</div> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-block-ref.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-block-ref.xht new file mode 100644 index 0000000000..48e01902d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-block-ref.xht @@ -0,0 +1,17 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <style type="text/css"> + .run-in { font-weight: bold } + #target { border: 2px solid black; } + </style> + </head> + <body> + <div id="target"><div class="run-in">Run-in header</div>Start of block. + The run-in header should be inside the border around this block and there + should be a newline between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-breaking-001-ref.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-breaking-001-ref.xht new file mode 100644 index 0000000000..71701bf4a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-breaking-001-ref.xht @@ -0,0 +1,21 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <style type="text/css"> + .run-in { font-weight: bold; border: 5px solid blue; } + #target { border: 2px solid black; padding: 1em; } + </style> + </head> + <body> + <div id="target"><span class="run-in">Run-in<br/>header</span>Start of + block. The run-in header should be inside the border around this block and + there should be no space between the word "header" and the word "Start", + other than the 5px vertical blue border. The border of the run-in must + have no vertical part on the right in the first line and no vertical part + on the left in the second line. The border of the run-in must not extend + outside the border of the block.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-breaking-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-breaking-001.xht new file mode 100644 index 0000000000..7ec7bf8e3f --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-breaking-001.xht @@ -0,0 +1,27 @@ +<!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>CSS Test: Run in - line-breaking after running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-breaking-001-ref.xht"/> + <meta name="assert" + content="Tests that run-ins that run in can line-break correctly, + and that their borders are then painted correctly."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; border: 5px solid blue; font-weight: bold; } + #target { border: 2px solid black; padding: 1em; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in<br/>header</div> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start", other than the 5px vertical blue border. The + border of the run-in must have no vertical part on the right in the first + line and no vertical part on the left in the second line. The border of the + run-in must not extend outside the border of the block.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-breaking-002-ref.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-breaking-002-ref.xht new file mode 100644 index 0000000000..1dc6994452 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-breaking-002-ref.xht @@ -0,0 +1,26 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <style type="text/css"> + .run-in { font-weight: bold; border: 5px solid blue; direction: ltr; } + .one { border-left: none; } + .two { border-right: none; } + #target { border: 2px solid black; padding: 1em; direction: rtl } + </style> + </head> + <body> + <div id="target"> + <span class="run-in one">Run-in</span><br/> + <span class="run-in two">header</span>Start of block. The run-in header + should be inside the border around this block and there should be no + space between the word "header" and the word "Start". The border of the + run-in must have no vertical part on the left in the first line and no + vertical part on the right in the second line. It must have a vertical + part on the right in the first line and a vertical part on the left in + the second line. The border of the run-in must not extend outside the + border of the block.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-breaking-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-breaking-002.xht new file mode 100644 index 0000000000..ac48e594f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-breaking-002.xht @@ -0,0 +1,30 @@ +<!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>CSS Test: Run in - line-breaking after running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-breaking-002-ref.xht"/> + <meta name="assert" + content="Tests that run-ins that run in can line-break correctly, + and that their borders are then painted correctly."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; border: 5px solid blue; font-weight: bold; + direction: rtl; } + #target { border: 2px solid black; padding: 1em; direction: rtl; } + ]]></style> + </head> + <body> + <span class="run-in">Run-in<br/>header</span> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start". The border of the run-in must have no + vertical part on the left in the first line and no vertical part on the + right in the second line. It must have a vertical part on the right in + the first line and a vertical part on the left in the second line. The + border of the run-in must not extend outside the border of the + block.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-clear-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-clear-001.xht new file mode 100644 index 0000000000..47afe8d863 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-clear-001.xht @@ -0,0 +1,26 @@ +<!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>CSS Test: Run in - clear on a run-in should apply to the block it runs into</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that clear on run-ins applies to their block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .bold { font-weight: bold; float: left } + #target { border: 2px solid black; } + .run-in { display: run-in; clear: both; } + ]]></style> + </head> + <body> + <div class="bold">Run-in header</div> + <div class="run-in">Some </div> + <div>text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the + border around this block; it should be on a line by itself before the line + containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-clear-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-clear-002.xht new file mode 100644 index 0000000000..f392b4f47d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-clear-002.xht @@ -0,0 +1,41 @@ +<!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>CSS Test: Run in - clear on a run-in should apply to the block it runs into</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that dynamically set clear on run-ins applies to their block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .bold { font-weight: bold; float: left } + #target { border: 2px solid black; } + .run-in { display: run-in; } + .clear { clear: both; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.className = "run-in clear"; + } + ]]></script> + </head> + <body> + <div class="bold">Run-in header</div> + <div id="r" class="run-in">Some </div> + <div>text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the + border around this block; it should be on a line by itself before the line + containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-abspos-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-abspos-001.xht new file mode 100644 index 0000000000..83b3be2a60 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-abspos-001.xht @@ -0,0 +1,26 @@ +<!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>CSS Test: Run in - an abs pos child should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have abs pos kids."/> + <style type="text/css"><![CDATA[ + #container { position: relative; top: -1em; } + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; position: relative; top: 1em; } + .run-in > span { position: absolute; top: 0 } + .run-in > span + span { position: static; visibility: hidden; } + ]]></style> + </head> + <body> + <div id="container"> + <div class="run-in">Run-in <span>header</span><span>header</span></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-001.xht new file mode 100644 index 0000000000..ec4f293e9c --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-001.xht @@ -0,0 +1,24 @@ +<!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>CSS Test: Run in - a child block should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in if they have child blocks."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header<div></div></div> + <div>Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the + border around this block; it should be on a line by itself before the line + containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-002.xht new file mode 100644 index 0000000000..d0fcecd408 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-002.xht @@ -0,0 +1,36 @@ +<!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>CSS Test: Run in - dynamically inserted block child should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if they have dynamically + inserted child blocks."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + document.getElementById("r").appendChild(document.createElement("div")); + } + ]]></script> + </head> + <body> + <div id="r" class="run-in">Run-in header</div> + <div>Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-003.xht new file mode 100644 index 0000000000..83d04ce737 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-003.xht @@ -0,0 +1,38 @@ +<!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>CSS Test: Run in - dynamically removed block child should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if a block child is dynamically + removed."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.parentNode.removeChild(r); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header<div id="r"></div></div> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-004.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-004.xht new file mode 100644 index 0000000000..da9a9e4273 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-004.xht @@ -0,0 +1,37 @@ +<!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>CSS Test: Run in - child dynamically toggled to block display should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if they have a child + dynamically toggled to block display."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .block { display: block; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + document.getElementById("r").className = "block"; + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header<span id="r"></span></div> + <div>Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-005.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-005.xht new file mode 100644 index 0000000000..c55842087a --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-005.xht @@ -0,0 +1,38 @@ +<!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>CSS Test: Run in - child dynamically toggled to inline display should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if they have a child + dynamically toggled to inline display."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .inline { display: inline; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + document.getElementById("r").className = "inline"; + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header<div id="r"></div></div> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-inside-inline-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-inside-inline-001.xht new file mode 100644 index 0000000000..656558368b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-inside-inline-001.xht @@ -0,0 +1,25 @@ +<!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>CSS Test: Run in - a child inline containing a block should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in if they have child inlines + which contain blocks."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header<span><div></div></span></div> + <div>Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the + border around this block; it should be on a line by itself before the line + containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-inside-inline-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-inside-inline-002.xht new file mode 100644 index 0000000000..4c47b020f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-inside-inline-002.xht @@ -0,0 +1,38 @@ +<!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>CSS Test: Run in - dynamically inserted inline child containing block should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if they have dynamically + inserted child inlines containing blocks."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var s = document.createElement("span"); + s.appendChild(document.createElement("div")); + document.getElementById("r").appendChild(s); + } + ]]></script> + </head> + <body> + <div id="r" class="run-in">Run-in header</div> + <div>Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-inside-inline-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-inside-inline-003.xht new file mode 100644 index 0000000000..a3b56dcb47 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-block-inside-inline-003.xht @@ -0,0 +1,38 @@ +<!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>CSS Test: Run in - dynamically removed inline child containing a block should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if an inline child containing a + block is dynamically removed."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.parentNode.removeChild(r); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header<span id="r"><div></div></span></div> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-float-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-float-001.xht new file mode 100644 index 0000000000..4b1cf5df5d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-float-001.xht @@ -0,0 +1,25 @@ +<!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>CSS Test: Run in - a floating child should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have floating kids."/> + <style type="text/css"><![CDATA[ + #container { margin-left: -5em; } + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; clear: both; margin-left: 5em; } + .run-in > span { float: left; } + ]]></style> + </head> + <body> + <div id="container"> + <div class="run-in"><span>Run-</span>in header</div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-001.xht new file mode 100644 index 0000000000..15621f1071 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-001.xht @@ -0,0 +1,21 @@ +<!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>CSS Test: Run in - a child inline should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have child inlines."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in <span>header</span></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-002.xht new file mode 100644 index 0000000000..e37201ff33 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-002.xht @@ -0,0 +1,23 @@ +<!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>CSS Test: Run in - a child inline with table-cell child should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have child inlines + which contain table cells."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + span > span { display: table-cell; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in <span><span>header</span></span></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-003.xht new file mode 100644 index 0000000000..413c386054 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-003.xht @@ -0,0 +1,26 @@ +<!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>CSS Test: Run in - a child inline with table-cell child with an abs pos child should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have child inlines + which contain table cells which contain abs pos kids."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; position: relative; } + .run-in > span { visibility: hidden; } /* tests that the abs pos actually + shows up */ + .run-in > span > span { display: table-cell; visibility: visible; } + .run-in > span > span > span { position: absolute; top: 0; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in <span><span><span>header</span></span></span><span>header</span></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-004.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-004.xht new file mode 100644 index 0000000000..6c40107594 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-004.xht @@ -0,0 +1,26 @@ +<!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>CSS Test: Run in - a child inline with table-cell child with a floating child should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have child inlines + which contain table cells which contain floating kids."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; clear: both; } + .run-in > span { visibility: hidden; } /* tests that the float actually + shows up */ + .run-in > span > span { display: table-cell; visibility: visible; } + .run-in > span > span > span { float: left; } + ]]></style> + </head> + <body> + <div class="run-in"><span><span><span>Run-</span></span></span>in header</div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-005.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-005.xht new file mode 100644 index 0000000000..6be696b4a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-005.xht @@ -0,0 +1,23 @@ +<!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>CSS Test: Run in - a child inline with table-row child should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have child inlines + which contain table rowss."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + span > span { display: table-row; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in <span><span>header</span></span></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-006.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-006.xht new file mode 100644 index 0000000000..7cd2ad774f --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-006.xht @@ -0,0 +1,25 @@ +<!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>CSS Test: Run in - a child inline with an abs pos child should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have child inlines + which contain abs pos kids."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; position: relative; } + .run-in > span { visibility: hidden; } /* tests that the abs pos actually + shows up */ + .run-in > span > span { position: absolute; visibility: visible; top: 0} + ]]></style> + </head> + <body> + <div class="run-in">Run-in <span><span>header</span></span><span>header</span></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-007.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-007.xht new file mode 100644 index 0000000000..9ff76e714e --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-007.xht @@ -0,0 +1,25 @@ +<!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>CSS Test: Run in - a child inline with a floating child should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have child inlines + which contain floating kids."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; clear: both; } + .run-in > span { visibility: hidden; } /* tests that the float actually + shows up */ + .run-in > span > span { float: left; visibility: visible; } + ]]></style> + </head> + <body> + <div class="run-in"><span><span>Run-</span></span>in header</div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-block-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-block-001.xht new file mode 100644 index 0000000000..663b948308 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-block-001.xht @@ -0,0 +1,22 @@ +<!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>CSS Test: Run in - a child inline-block should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have child inline-blocks."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in > span { display: inline-block } + ]]></style> + </head> + <body> + <div class="run-in">Run-in <span>header</span></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-table-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-table-001.xht new file mode 100644 index 0000000000..b916dbc711 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-inline-table-001.xht @@ -0,0 +1,23 @@ +<!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>CSS Test: Run in - a child inline-table should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have child + inline-tables."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in > span { display: inline-table } + ]]></style> + </head> + <body> + <div class="run-in">Run-in <span>header</span></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-relpos-block-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-relpos-block-001.xht new file mode 100644 index 0000000000..a22138e0c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-relpos-block-001.xht @@ -0,0 +1,26 @@ +<!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>CSS Test: Run in - a child rel pos block should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in if they have child rel pos + blocks."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in div { position: relative; top: 2em; left: 3em; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header<div></div></div> + <div>Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the + border around this block; it should be on a line by itself before the line + containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-relpos-block-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-relpos-block-002.xht new file mode 100644 index 0000000000..64fa6f6e1a --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-relpos-block-002.xht @@ -0,0 +1,37 @@ +<!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>CSS Test: Run in - dynamically inserted rel pos block child should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if they have dynamically + inserted child rel pos blocks."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in div { position: relative; top: 2em; left: 3em; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + document.getElementById("r").appendChild(document.createElement("div")); + } + ]]></script> + </head> + <body> + <div id="r" class="run-in">Run-in header</div> + <div>Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-relpos-block-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-relpos-block-003.xht new file mode 100644 index 0000000000..c5756fce48 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-relpos-block-003.xht @@ -0,0 +1,39 @@ +<!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>CSS Test: Run in - dynamically removed rel pos block child should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if a rel pos block child is dynamically + removed."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in div { position: relative; top: 2em; left: 3em; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.parentNode.removeChild(r); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header<div id="r"></div></div> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-run-in-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-run-in-001.xht new file mode 100644 index 0000000000..cebbfef67c --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-run-in-001.xht @@ -0,0 +1,25 @@ +<!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>CSS Test: Run in - a child run-in should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in if they have child run-ins."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in div { display: run-in; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header<div></div></div> + <div>Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the + border around this block; it should be on a line by itself before the line + containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-run-in-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-run-in-002.xht new file mode 100644 index 0000000000..e3f978be08 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-run-in-002.xht @@ -0,0 +1,37 @@ +<!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>CSS Test: Run in - dynamically inserted run-in child should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if they have dynamically + inserted child run-ins."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in div { display: run-in; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + document.getElementById("r").appendChild(document.createElement("div")); + } + ]]></script> + </head> + <body> + <div id="r" class="run-in">Run-in header</div> + <div>Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-run-in-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-run-in-003.xht new file mode 100644 index 0000000000..5a812b382b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-run-in-003.xht @@ -0,0 +1,39 @@ +<!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>CSS Test: Run in - dynamically removed run-in child should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if a run-in child is dynamically + removed."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in div { display: run-in; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.parentNode.removeChild(r); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header<div id="r"></div></div> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-001.xht new file mode 100644 index 0000000000..9001a7e4e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-001.xht @@ -0,0 +1,25 @@ +<!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>CSS Test: Run in - a child table should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in if they have child tables."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in div { display: table; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header<div></div></div> + <div>Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the + border around this block; it should be on a line by itself before the line + containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-002.xht new file mode 100644 index 0000000000..3fd6adda3a --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-002.xht @@ -0,0 +1,37 @@ +<!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>CSS Test: Run in - dynamically inserted table child should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if they have dynamically + inserted child tables."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in div { display: table; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + document.getElementById("r").appendChild(document.createElement("div")); + } + ]]></script> + </head> + <body> + <div id="r" class="run-in">Run-in header</div> + <div>Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-003.xht new file mode 100644 index 0000000000..ab76e87e2d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-003.xht @@ -0,0 +1,39 @@ +<!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>CSS Test: Run in - dynamically removed table child should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if a table child is dynamically + removed."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in div { display: table; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.parentNode.removeChild(r); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header<div id="r"></div></div> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-caption-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-caption-001.xht new file mode 100644 index 0000000000..d98b535a3d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-caption-001.xht @@ -0,0 +1,22 @@ +<!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>CSS Test: Run in - a child table-caption should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have child table-captions."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in > span { display: table-caption } + ]]></style> + </head> + <body> + <div class="run-in">Run-in <span>header</span></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-cell-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-cell-001.xht new file mode 100644 index 0000000000..433e1c65de --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-cell-001.xht @@ -0,0 +1,22 @@ +<!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>CSS Test: Run in - a child table-cell should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have child table-cells."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in > span { display: table-cell } + ]]></style> + </head> + <body> + <div class="run-in">Run-in <span>header</span></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-column-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-column-001.xht new file mode 100644 index 0000000000..d9fc2f0318 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-column-001.xht @@ -0,0 +1,22 @@ +<!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>CSS Test: Run in - a child table-column should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have child table-columns."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in > span { display: table-column } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header<span></span></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-column-group-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-column-group-001.xht new file mode 100644 index 0000000000..f4aeb8b7b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-column-group-001.xht @@ -0,0 +1,22 @@ +<!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>CSS Test: Run in - a child table-column should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have child table-columns."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in > span { display: table-column-group } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header<span></span></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-inside-inline-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-inside-inline-001.xht new file mode 100644 index 0000000000..6270d647f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-inside-inline-001.xht @@ -0,0 +1,26 @@ +<!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>CSS Test: Run in - a child inline containing a table should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in if they have child inlines + which contain tables."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in div { display: table; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header<span><div></div></span></div> + <div>Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the + border around this block; it should be on a line by itself before the line + containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-inside-inline-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-inside-inline-002.xht new file mode 100644 index 0000000000..edd543d45b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-inside-inline-002.xht @@ -0,0 +1,39 @@ +<!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>CSS Test: Run in - dynamically inserted inline child containing table should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if they have dynamically + inserted child inlines containing tables."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in div { display: table; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var s = document.createElement("span"); + s.appendChild(document.createElement("div")); + document.getElementById("r").appendChild(s); + } + ]]></script> + </head> + <body> + <div id="r" class="run-in">Run-in header</div> + <div>Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-inside-inline-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-inside-inline-003.xht new file mode 100644 index 0000000000..5df9c526c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-inside-inline-003.xht @@ -0,0 +1,39 @@ +<!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>CSS Test: Run in - dynamically removed inline child containing a table should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if an inline child containing a + table is dynamically removed."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in div { display: table; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.parentNode.removeChild(r); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header<span id="r"><div></div></span></div> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-row-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-row-001.xht new file mode 100644 index 0000000000..eb1c69292c --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-row-001.xht @@ -0,0 +1,22 @@ +<!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>CSS Test: Run in - a child table-row should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have child table-rows."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in > span { display: table-row } + ]]></style> + </head> + <body> + <div class="run-in">Run-in <span>header</span></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-row-group-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-row-group-001.xht new file mode 100644 index 0000000000..9d8936f05f --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-contains-table-row-group-001.xht @@ -0,0 +1,22 @@ +<!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>CSS Test: Run in - a child table-row-group should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if they have child table-row-groupss."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .run-in > span { display: table-row-group } + ]]></style> + </head> + <body> + <div class="run-in">Run-in <span>header</span></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-display-none-between-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-display-none-between-001.xht new file mode 100644 index 0000000000..bdcd34d277 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-display-none-between-001.xht @@ -0,0 +1,24 @@ +<!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>CSS Test: Run in - display:none should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if there is a display:none + element between the run-in and the following block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + .none { display: none; } + #target { border: 2px solid black; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <div class="none"></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-display-none-between-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-display-none-between-002.xht new file mode 100644 index 0000000000..c9dddee3cd --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-display-none-between-002.xht @@ -0,0 +1,41 @@ +<!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>CSS Test: Run in - block set to display:none should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if a block is dynamically set to + display:none between them and the following block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + .none { display: none; } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + document.normalize(); + var r = document.getElementById("r"); + r.className = "none"; + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="r">Some text.</div> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-display-none-between-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-display-none-between-003.xht new file mode 100644 index 0000000000..ac28260492 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-display-none-between-003.xht @@ -0,0 +1,38 @@ +<!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>CSS Test: Run in - inline toggled from display:none should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if an inline between them and + the block is toggled from display:none."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + .none { display: none; } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.className = ""; + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <span id="r" class="none">Some text.</span> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-fixedpos-between-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-fixedpos-between-001.xht new file mode 100644 index 0000000000..11396660f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-fixedpos-between-001.xht @@ -0,0 +1,24 @@ +<!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>CSS Test: Run in - fixed pos should not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if there is an fixed + positioned element between the run-in and the following block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + .fixedpos { position: fixed; visibility: hidden; } + #target { border: 2px solid black; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <div class="fixedpos"></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-fixedpos-between-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-fixedpos-between-002.xht new file mode 100644 index 0000000000..e97fe47cad --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-fixedpos-between-002.xht @@ -0,0 +1,40 @@ +<!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>CSS Test: Run in - block set to fixed pos should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if a block is dynamically set to + fixed positioned between them and the following block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + .fixedpos { position: fixed; visibility: hidden; } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.className = "fixedpos"; + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="r">Some text.</div> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-fixedpos-between-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-fixedpos-between-003.xht new file mode 100644 index 0000000000..9af28a390c --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-fixedpos-between-003.xht @@ -0,0 +1,38 @@ +<!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>CSS Test: Run in - inline toggled from fixed pos should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if an inline between them and + the block is toggled from being fixed positioned."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + .fixedpos { position: fixed; visibility: hidden; } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.className = ""; + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <span id="r" class="fixedpos">Some text.</span> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-float-between-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-float-between-001.xht new file mode 100644 index 0000000000..3ac540cc1c --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-float-between-001.xht @@ -0,0 +1,24 @@ +<!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>CSS Test: Run in - floatshould not prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="assert" + content="Tests that run-ins actually run in if there is a float + element between the run-in and the following block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + .float { float: right; visibility: hidden; } + #target { border: 2px solid black; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <div class="float"></div> + <div id="target">Start of block. The run-in header should be inside the border around this block and there should be no space between the word "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-float-between-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-float-between-002.xht new file mode 100644 index 0000000000..a5ad3c7de4 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-float-between-002.xht @@ -0,0 +1,40 @@ +<!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>CSS Test: Run in - block set to float should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if a block is dynamically set to + float between them and the following block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + .float { float: right; visibility: hidden; } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.className = "float"; + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="r">Some text.</div> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-float-between-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-float-between-003.xht new file mode 100644 index 0000000000..8d4b9e52f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-float-between-003.xht @@ -0,0 +1,38 @@ +<!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>CSS Test: Run in - inline toggled from float should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if an inline between them and + the block is toggled from float."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + .float { float: right; visibility: hidden; } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.className = ""; + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <span id="r" class="float">Some text.</span> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-inherit-001-ref.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-inherit-001-ref.xht new file mode 100644 index 0000000000..64f0a45e7d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-inherit-001-ref.xht @@ -0,0 +1,20 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <style type="text/css"> + .run-in { font-weight: bold; color: green; border: 10px outset orange; } + #target { border: 2px solid black; margin: 2em; padding: 10px; } + body { border: 10px outset orange; } + </style> + </head> + <body> + <div id="target"><span class="run-in">Run-in header</span>Start of block. + The run-in header should be inside the border around this block, should be + colored green, and should have an outset orange border. There should be + 2em of space on each side between the black border of the block and outset + orange border around it.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-inherit-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-inherit-001.xht new file mode 100644 index 0000000000..f87e093ea9 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-inherit-001.xht @@ -0,0 +1,28 @@ +<!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>CSS Test: Run in - run-in property inheritance</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-inherit-001-ref.xht"/> + <meta name="assert" + content="Tests property inheritance for run-ins, and margin collapsing + for the block following a run-in. Should inherit from our content parent, and the margins should not collapse through a border."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold; border: inherit} + #target { border: 2px solid black; color: black; margin: 2em; padding: 10px } + #container { color: green; border: 10px outset orange; } + ]]></style> + </head> + <body> + <div id="container"> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should be inside the + border around this block, should be colored green, and should have an + outset orange border. There should be 2em of space on each side between + the black border of the block and outset orange border around it.</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-inheritance-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-inheritance-001.xht new file mode 100644 index 0000000000..c1072450bb --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-inheritance-001.xht @@ -0,0 +1,31 @@ +<!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: Run-in boxes and inheritance</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in" /> + <meta name="assert" content="Run-in boxes inherit properties from its parent element." /> + <style type="text/css"> + div + { + color: orange; + } + #span1 + { + display: run-in; + } + #span2 + { + background: blue; + display: block; + } + </style> + </head> + <body> + <p>Test passes if the "Filler Text" below is orange and is completely contained within the blue box.</p> + <div> + <span id="span1">Filler Text</span> + <span id="span2">Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-inline-between-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-between-001.xht new file mode 100644 index 0000000000..76710eafd9 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-between-001.xht @@ -0,0 +1,23 @@ +<!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>CSS Test: Run in - inline should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in if there's an inline between + them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <span>Some text.</span> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-inline-between-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-between-002.xht new file mode 100644 index 0000000000..bba6f3b246 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-between-002.xht @@ -0,0 +1,38 @@ +<!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>CSS Test: Run in - dynamically inserted inline should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if there's a dynamically + inserted inline between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + var s = document.createElement("span"); + s.appendChild(document.createTextNode("Some text.")) + t.parentNode.insertBefore(s, t); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-inline-between-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-between-003.xht new file mode 100644 index 0000000000..358b4231c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-between-003.xht @@ -0,0 +1,39 @@ +<!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>CSS Test: Run in - dynamically removed inline should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if an inline is dynamically removed + from between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.parentNode.removeChild(r); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <span id="r">Some text.</span> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-inline-block-between-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-block-between-001.xht new file mode 100644 index 0000000000..17271636b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-block-between-001.xht @@ -0,0 +1,24 @@ +<!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>CSS Test: Run in - inline-block should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in if there's an inline-block + between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + span { display: inline-block; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <span>Some text.</span> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-inline-block-between-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-block-between-002.xht new file mode 100644 index 0000000000..1ceb4bed25 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-block-between-002.xht @@ -0,0 +1,39 @@ +<!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>CSS Test: Run in - dynamically inserted inline-block should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if there's a dynamically + inserted inline-block between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + span { display: inline-block; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + var s = document.createElement("span"); + s.appendChild(document.createTextNode("Some text.")) + t.parentNode.insertBefore(s, t); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-inline-block-between-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-block-between-003.xht new file mode 100644 index 0000000000..351f27756e --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-block-between-003.xht @@ -0,0 +1,40 @@ +<!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>CSS Test: Run in - dynamically removed inline-block should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if an inline-block is dynamically + removed from between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + span { display: inline-block; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.parentNode.removeChild(r); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <span id="r">Some text.</span> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-inline-table-between-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-table-between-001.xht new file mode 100644 index 0000000000..c7449056b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-table-between-001.xht @@ -0,0 +1,24 @@ +<!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>CSS Test: Run in - inline-table should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in if there's a inline-table between + them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + span { display: inline-table; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <span>Some text.</span> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-inline-table-between-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-table-between-002.xht new file mode 100644 index 0000000000..49164c05ec --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-table-between-002.xht @@ -0,0 +1,39 @@ +<!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>CSS Test: Run in - dynamically inserted inline-table should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if there's a dynamically + inserted inline-table between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + span { display: inline-table; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + var s = document.createElement("span"); + s.appendChild(document.createTextNode("Some text.")) + t.parentNode.insertBefore(s, t); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-inline-table-between-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-table-between-003.xht new file mode 100644 index 0000000000..9b73d0cadc --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-inline-table-between-003.xht @@ -0,0 +1,40 @@ +<!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>CSS Test: Run in - dynamically removed inline-table should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if a inline-table is dynamically removed + from between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + span { display: inline-table; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.parentNode.removeChild(r); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <span id="r">Some text.</span> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-linebox-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-linebox-001.xht new file mode 100644 index 0000000000..128cd3e386 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-linebox-001.xht @@ -0,0 +1,24 @@ +<!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>CSS Test: run-in and sibling blocks</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" /> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/run-in/001.xml" type="application/xhtml+xml" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in" /> + <style type="text/css"> + .r { display: run-in; color: blue; } + .b { background: blue; display: block; } + .fail { background: red; line-height: 0; margin-top: 1em; color: white; } + </style> + </head> + <body> + <p>There should be a blue box below.</p> + <div class="r">FAIL</div> + <div class="b"></div> + <div class="fail"> + FAIL + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-linebox-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-linebox-002.xht new file mode 100644 index 0000000000..db741a1e8a --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-linebox-002.xht @@ -0,0 +1,23 @@ +<!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>CSS Test: run-in and the line box model</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" /> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/run-in/002.xml" type="application/xhtml+xml"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in" /> + <meta name="assert" content="A run-in element inherits (line-height) from its document tree parent"/> + <style type="text/css"> + div { font-family: monospace; } + .r { color: blue; display: run-in; } + .b { background: blue; line-height: 0; } + span { color: blue; } + </style> + </head> + <body> + <p>There should be a blue box below.</p> + <div class="r">FAIL</div> + <div class="b"><span> FAIL</span></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-listitem-between-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-listitem-between-001.xht new file mode 100644 index 0000000000..bfe6d35ca7 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-listitem-between-001.xht @@ -0,0 +1,25 @@ +<!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>CSS Test: Run in - block should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in if there's a list-item between + them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .listitem { display: list-item; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <div class="listitem"></div> + <div class="listitem">Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-listitem-between-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-listitem-between-002.xht new file mode 100644 index 0000000000..1eda2aa7b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-listitem-between-002.xht @@ -0,0 +1,41 @@ +<!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>CSS Test: Run in - dynamically inserted block should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if there's a dynamically + inserted list-item between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + #r { display: list-item; list-style-type: ""; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + t.parentNode.insertBefore(document.createElement("div"), t); + var s = document.createElement("div"); + s.appendChild(document.createTextNode("Some text.")) + s.id = "r"; + t.parentNode.insertBefore(s, t); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-listitem-between-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-listitem-between-003.xht new file mode 100644 index 0000000000..06fda02c74 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-listitem-between-003.xht @@ -0,0 +1,40 @@ +<!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>CSS Test: Run in - dynamically removed block should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if a list-item is dynamically removed + from between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + #r { display: list-item; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.parentNode.removeChild(r); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="r">Some text.</div> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-pre-ref.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-pre-ref.xht new file mode 100644 index 0000000000..541d182a5e --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-pre-ref.xht @@ -0,0 +1,17 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <style type="text/css"> + .run-in { font-weight: bold } + #target { border: 2px solid black; } + #container { white-space: pre; } + #container > * { white-space: normal; } + </style> + </head> + <body> + <div id="container"><div class="run-in">Run-in header</div> <div id="target">Start of block. The run-in header should be outside the border around this block and there should be a blank line between the run-in header and this block.</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-relpos-between-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-relpos-between-001.xht new file mode 100644 index 0000000000..c16b9fc942 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-relpos-between-001.xht @@ -0,0 +1,25 @@ +<!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>CSS Test: Run in - rel pos inline should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in if there's a rel pos inline + between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .outer { position: relative; top: 50px; } + .inner { position: relative; top: -50px; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <span class="outer"><span class="inner">Some text.</span></span> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-relpos-between-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-relpos-between-002.xht new file mode 100644 index 0000000000..bb7c91a0c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-relpos-between-002.xht @@ -0,0 +1,44 @@ +<!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>CSS Test: Run in - dynamically inserted rel pos inline should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if there's a dynamically + inserted rel pos inline between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .outer { position: relative; top: 50px; } + .inner { position: relative; top: -50px; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + var s = document.createElement("span"); + s.className = "inner"; + s.appendChild(document.createTextNode("Some text.")); + var s2 = document.createElement("span"); + s2.className = "outer"; + s2.appendChild(s); + t.parentNode.insertBefore(s2, t); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-relpos-between-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-relpos-between-003.xht new file mode 100644 index 0000000000..cea7d4f4b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-relpos-between-003.xht @@ -0,0 +1,41 @@ +<!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>CSS Test: Run in - dynamically removed rel pos inline should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if a rel pos inline is dynamically + removed from between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + .outer { position: relative; top: 50px; } + .inner { position: relative; top: -50px; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.parentNode.removeChild(r); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <span id="r" class="outer"><span class="inner">Some text.</span></span> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-replaced-001-ref.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-replaced-001-ref.xht new file mode 100644 index 0000000000..e6c53abfac --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-replaced-001-ref.xht @@ -0,0 +1,15 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <style type="text/css"> + #target { border: 2px solid black; width: 500px; height: 200px; } + #target > img { width: 100px; height: 100px; } + </style> + </head> + <body> + <div id="target"><img src="support/swatch-blue.png"/>The blue square should be inside the border of this block, a square, and half the block's height.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-replaced-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-replaced-001.xht new file mode 100644 index 0000000000..01af2d38a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-replaced-001.xht @@ -0,0 +1,26 @@ +<!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>CSS Test: Run in - basic replaced element</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-replaced-001-ref.xht"/> + <meta name="assert" + content="Tests that replaced elements can actually run in and that + they ten get sized correctly."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; width: 20%; height: 50% } + #target { border: 2px solid black; width: 500px; height: 200px; } + #container { height: 0; width: 0; } + ]]></style> + </head> + <body> + <div id="container"> + <img class="run-in" src="support/swatch-blue.png" /> + <div id="target">Start of block. The blue square should be inside the + border of this block, a square, and half the block's height.</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-restyle-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-restyle-001.xht new file mode 100644 index 0000000000..05bd61a0b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-restyle-001.xht @@ -0,0 +1,36 @@ +<!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>CSS Test: Run in - should run out when they stop being run-ins</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run once they stop being run-ins."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; } + .bold { font-weight: bold; } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + document.getElementById("r").className = "bold"; + } + ]]></script> + </head> + <body> + <div id="r" class="run-in bold">Run-in header</div> + <div>Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-restyle-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-restyle-002.xht new file mode 100644 index 0000000000..40d23e4fb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-restyle-002.xht @@ -0,0 +1,36 @@ +<!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>CSS Test: Run in - should run out when following block becomes an inline</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run once their following block becomes an inline."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold; } + #target { border: 2px solid black; } + .inline { display: inline; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + document.getElementById("r").className = "inline"; + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="r">Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-restyle-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-restyle-003.xht new file mode 100644 index 0000000000..226081278d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-restyle-003.xht @@ -0,0 +1,37 @@ +<!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>CSS Test: Run in - should run in when following inline becomes a block</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in when the inline after them becomes a block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold; } + #target { border: 2px solid black; } + .block { display: block; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + document.getElementById("target").className = "block"; + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <span id="target">Start of block. + The run-in header should be inside the border around this block and there + should be no space between the word "header" and the word "Start".</span> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-001.xht new file mode 100644 index 0000000000..13077566c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-001.xht @@ -0,0 +1,24 @@ +<!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>CSS Test: Run in - run in that has not run in should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in if there's a run in that has + not run in between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + #r { display: run-in; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="r">Some text.<div><!--Make us not run in--></div></div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-002.xht new file mode 100644 index 0000000000..220c45ed24 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-002.xht @@ -0,0 +1,42 @@ +<!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>CSS Test: Run in - dynamically inserted run-in which does not run in should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if there's a dynamically + inserted run-in which has not run in between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + #r { display: run-in; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + t.parentNode.insertBefore(document.createElement("div"), t); + var s = document.createElement("div"); + s.appendChild(document.createTextNode("Some text.")) + s.id = "r"; + s.appendChild(document.createElement("div")); /* make s not run in */ + t.parentNode.insertBefore(s, t); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-003.xht new file mode 100644 index 0000000000..555774420c --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-003.xht @@ -0,0 +1,40 @@ +<!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>CSS Test: Run in - dynamically removed run-in which did not run in should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if a run-in which has not run in is + dynamically removed from between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + #r { display: run-in } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.parentNode.removeChild(r); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="r">Some text.<div><!--Make us not run in--></div></div> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-004.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-004.xht new file mode 100644 index 0000000000..c9af78ddb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-004.xht @@ -0,0 +1,25 @@ +<!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>CSS Test: Run in - run in that has run in should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in if there's a run-in that has + run in between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + #r { display: run-in; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="r">Some </div> + <div>text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-005.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-005.xht new file mode 100644 index 0000000000..9839d9bd59 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-005.xht @@ -0,0 +1,44 @@ +<!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>CSS Test: Run in - dynamically inserted run-in which runs in should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if there's a dynamically + inserted run-in which has run in between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + #r { display: run-in; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + var s = document.createElement("div"); + s.appendChild(document.createTextNode("text.")) + t.parentNode.insertBefore(s, t); + flushLayout(document.documentElement); + var s2 = document.createElement("div"); + s2.appendChild(document.createTextNode("Some ")) + s2.id = "r"; + s.parentNode.insertBefore(s2, s); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-006.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-006.xht new file mode 100644 index 0000000000..ae2bceef2d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-006.xht @@ -0,0 +1,40 @@ +<!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>CSS Test: Run in - dynamically removed run-in which ran in should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if a run-in which has run in is + dynamically removed from between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + #r { display: run-in } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.parentNode.removeChild(r); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="r">Some text.</div> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-007.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-007.xht new file mode 100644 index 0000000000..910831a742 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-007.xht @@ -0,0 +1,41 @@ +<!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>CSS Test: Run in - run-in which runs in should prevent running in of dynamically inserted run-in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that dynamically inserted run-ins don't run in if + there's a run-in which has run in between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + #r { display: run-in; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + var s = document.createElement("div"); + s.appendChild(document.createTextNode("Run-in header")); + s.className = "run-in"; + r.parentNode.insertBefore(s, r); + } + ]]></script> + </head> + <body> + <div id="r">Some </div> + <div>text.</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-008.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-008.xht new file mode 100644 index 0000000000..00e24408e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-run-in-between-008.xht @@ -0,0 +1,41 @@ +<!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>CSS Test: Run in - run-in which does not run in should prevent running in of dynamically inserted run-in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that dynamically inserted run-ins don't run in if + there's a run-in which has not run in between them and the + block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + #r { display: run-in; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + var s = document.createElement("div"); + s.appendChild(document.createTextNode("Run-in header")); + s.className = "run-in"; + r.parentNode.insertBefore(s, r); + } + ]]></script> + </head> + <body> + <div id="r">Some text.<div></div></div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-table-between-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-table-between-001.xht new file mode 100644 index 0000000000..79a98d1fb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-table-between-001.xht @@ -0,0 +1,24 @@ +<!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>CSS Test: Run in - table should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in if there's a table between + them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + span { display: table; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <span>Some text.</span> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-table-between-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-table-between-002.xht new file mode 100644 index 0000000000..2ca8027546 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-table-between-002.xht @@ -0,0 +1,39 @@ +<!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>CSS Test: Run in - dynamically inserted table should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if there's a dynamically + inserted table between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + span { display: table; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + var s = document.createElement("span"); + s.appendChild(document.createTextNode("Some text.")) + t.parentNode.insertBefore(s, t); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-table-between-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-table-between-003.xht new file mode 100644 index 0000000000..aa4d9f4497 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-table-between-003.xht @@ -0,0 +1,40 @@ +<!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>CSS Test: Run in - dynamically removed table should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if a table is dynamically removed + from between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + span { display: table; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.parentNode.removeChild(r); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <span id="r">Some text.</span> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-table-cell-between-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-table-cell-between-001.xht new file mode 100644 index 0000000000..18fcc2f797 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-table-cell-between-001.xht @@ -0,0 +1,24 @@ +<!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>CSS Test: Run in - table-cell should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in if there's a table-cell between + them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + span { display: table-cell; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <span>Some text.</span> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-table-cell-between-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-table-cell-between-002.xht new file mode 100644 index 0000000000..04f5e80c53 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-table-cell-between-002.xht @@ -0,0 +1,39 @@ +<!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>CSS Test: Run in - dynamically inserted table-cell should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if there's a dynamically + inserted table-cell between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + span { display: table-cell; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + var s = document.createElement("span"); + s.appendChild(document.createTextNode("Some text.")) + t.parentNode.insertBefore(s, t); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-table-cell-between-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-table-cell-between-003.xht new file mode 100644 index 0000000000..49ab645554 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-table-cell-between-003.xht @@ -0,0 +1,40 @@ +<!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>CSS Test: Run in - dynamically removed table-cell should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if a table-cell is dynamically removed + from between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + span { display: table-cell; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.parentNode.removeChild(r); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <span id="r">Some text.</span> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-table-row-between-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-table-row-between-001.xht new file mode 100644 index 0000000000..06b0852bb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-table-row-between-001.xht @@ -0,0 +1,24 @@ +<!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>CSS Test: Run in - table-row should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in if there's a table-row between + them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + span { display: table-row; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + <span>Some text.</span> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-table-row-between-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-table-row-between-002.xht new file mode 100644 index 0000000000..a5e069daac --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-table-row-between-002.xht @@ -0,0 +1,39 @@ +<!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>CSS Test: Run in - dynamically inserted table-row should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if there's a dynamically + inserted table-row between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + span { display: table-row; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + var s = document.createElement("span"); + s.appendChild(document.createTextNode("Some text.")) + t.parentNode.insertBefore(s, t); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-table-row-between-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-table-row-between-003.xht new file mode 100644 index 0000000000..755b46351b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-table-row-between-003.xht @@ -0,0 +1,40 @@ +<!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>CSS Test: Run in - dynamically removed table-row should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if a table-row is dynamically removed + from between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + span { display: table-row; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var r = document.getElementById("r"); + r.parentNode.removeChild(r); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <span id="r">Some text.</span> + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-text-between-001.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-text-between-001.xht new file mode 100644 index 0000000000..cdbd7acca0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-text-between-001.xht @@ -0,0 +1,23 @@ +<!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>CSS Test: Run in - text should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="assert" + content="Tests that run-ins don't run in if there's text between them + and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + </head> + <body> + <div class="run-in">Run-in header</div> + Some text. + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-text-between-002.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-text-between-002.xht new file mode 100644 index 0000000000..545dee956e --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-text-between-002.xht @@ -0,0 +1,36 @@ +<!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>CSS Test: Run in - dynamically inserted text should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if there's dynamically + inserted text between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + t.parentNode.insertBefore(document.createTextNode("Some text."), t); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-text-between-003.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-text-between-003.xht new file mode 100644 index 0000000000..66a4451d32 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-text-between-003.xht @@ -0,0 +1,36 @@ +<!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>CSS Test: Run in - dynamically changed text should prevent running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-text-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins don't run in if there's dynamically + changed text between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + t.previousSibling.data = "Some text."; + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + <div id="target">Start of block. The run-in header should NOT be inside the border around this block; it should be on a line by itself before the line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-text-between-004.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-text-between-004.xht new file mode 100644 index 0000000000..9411b64819 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-text-between-004.xht @@ -0,0 +1,39 @@ +<!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>CSS Test: Run in - dynamically removed text should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if text is dynamically removed from + between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + t.parentNode.removeChild(t.previousSibling); + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + Some text. + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-text-between-005.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-text-between-005.xht new file mode 100644 index 0000000000..e981b9e2d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-text-between-005.xht @@ -0,0 +1,39 @@ +<!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>CSS Test: Run in - dynamically set to whitespace text should allow running in</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#run-in"/> + <link rel="match" href="run-in-basic-ref.xht"/> + <meta name="flags" content="dom" /> + <meta name="assert" + content="Tests that run-ins run in if text is dynamically set to + whitespace between them and the block."/> + <style type="text/css"><![CDATA[ + div { display: block; } + .run-in { display: run-in; font-weight: bold } + #target { border: 2px solid black; } + ]]></style> + <script type="text/javascript"><![CDATA[ + function flushLayout(elt) { + elt.offsetWidth; /* Just undefined on non-elements, but that's ok */ + for (var i = 0; i < elt.childNodes.length; ++i) { + flushLayout(elt.childNodes[i]); + } + } + window.onload = function() { + flushLayout(document.documentElement); + var t = document.getElementById("target"); + t.previousSibling.data = " "; + } + ]]></script> + </head> + <body> + <div class="run-in">Run-in header</div> + Some text. + <div id="target">Start of block. The run-in header should be inside the + border around this block and there should be no space between the word + "header" and the word "Start".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/run-in-text-ref.xht b/testing/web-platform/tests/css/css-display/run-in/run-in-text-ref.xht new file mode 100644 index 0000000000..88f4930b4a --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/run-in-text-ref.xht @@ -0,0 +1,19 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Microsoft" href="http://www.microsoft.com/" /> + <style type="text/css"> + .run-in { font-weight: bold } + #target { border: 2px solid black; } + </style> + </head> + <body> + <div class="run-in">Run-in header</div> + <div>Some text.</div> + <div id="target">Start of block. The run-in header should NOT be inside + the border around this block; it should be on a line by itself before the + line containing "Some text".</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/support/black15x15.png b/testing/web-platform/tests/css/css-display/run-in/support/black15x15.png Binary files differnew file mode 100644 index 0000000000..b1bbef2cd5 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/support/black15x15.png diff --git a/testing/web-platform/tests/css/css-display/run-in/support/blue15x15.png b/testing/web-platform/tests/css/css-display/run-in/support/blue15x15.png Binary files differnew file mode 100644 index 0000000000..89de32fdb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/support/blue15x15.png diff --git a/testing/web-platform/tests/css/css-display/run-in/support/blue96x96.png b/testing/web-platform/tests/css/css-display/run-in/support/blue96x96.png Binary files differnew file mode 100644 index 0000000000..820f8cace2 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/support/blue96x96.png diff --git a/testing/web-platform/tests/css/css-display/run-in/support/green15x15.png b/testing/web-platform/tests/css/css-display/run-in/support/green15x15.png Binary files differnew file mode 100644 index 0000000000..51741584a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/support/green15x15.png diff --git a/testing/web-platform/tests/css/css-display/run-in/support/swatch-blue.png b/testing/web-platform/tests/css/css-display/run-in/support/swatch-blue.png Binary files differnew file mode 100644 index 0000000000..bf2759634d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/support/swatch-blue.png diff --git a/testing/web-platform/tests/css/css-display/run-in/table-anonymous-block-001.xht b/testing/web-platform/tests/css/css-display/run-in/table-anonymous-block-001.xht new file mode 100644 index 0000000000..c2e8b69549 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/table-anonymous-block-001.xht @@ -0,0 +1,33 @@ +<!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: The anonymous block box around a table does not work with run-in interaction</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#model" /> + <meta name="assert" content="The anonymous block around a table does not behave like a block for 'run-in' interaction." /> + <style type="text/css"> + div + { + display: run-in; + } + table + { + background: black; + } + td + { + height: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if the "Filler Text" is above the box.</p> + <div>Filler Text</div> + <table> + <tr> + <td></td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/table-layout-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/table-layout-applies-to-004.xht new file mode 100644 index 0000000000..f7da9e08dd --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/table-layout-applies-to-004.xht @@ -0,0 +1,59 @@ +<!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: Table-layout and 'display: run-in' elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#width-layout" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Table-layout does not apply to 'display: run-in' elements." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #test + { + display: run-in; + table-layout: fixed; + width: 10em; + } + .colgroup + { + display: table-column-group; + width: 5em; + } + .tr + { + display: table-row; + } + .td + { + background: black; + display: table-cell; + font: 1em Ahem; + overflow: hidden; + padding: 0; + } + #reference + { + background: blue; + height: 2em; + width: 20em; + } + </style> + </head> + <body> + <p>Test passes if both bars below are the same width.</p> + <div id="test"> + <div class="colgroup"></div> + <div class="colgroup"></div> + <div class="tr"> + <div class="td">XXXXX</div> + <div class="td">XXXXX</div> + </div> + <div class="tr"> + <div class="td">XXXXXXXXX0</div> + <div class="td">XXXXXXXXX0</div> + </div> + </div> + <div id="reference"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/text-align-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/text-align-applies-to-004.xht new file mode 100644 index 0000000000..cb5fc309e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/text-align-applies-to-004.xht @@ -0,0 +1,22 @@ +<!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: Text-align application on a 'display: run-in' element</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#propdef-text-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#alignment-prop" /> + <meta name="assert" content="The 'text-align' property is applied ton 'display: run-in' elements." /> + <style type="text/css"> + div + { + border: solid; + display: run-in; + text-align: right; + } + </style> + </head> + <body> + <p>Test passes if the "Filler Text" below is aligned to the right side of the box.</p> + <div>Filler Text Filler Text Filler Text Filler Text</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/text-decoration-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/text-decoration-applies-to-004.xht new file mode 100644 index 0000000000..7efedf6ad9 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/text-decoration-applies-to-004.xht @@ -0,0 +1,22 @@ +<!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: Text-decoration application on a 'run-in' element</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#lining-striking-props" /> + <link rel="match" href="../../reference/pass_if_filler_text_underlined.html"/> + <meta name="assert" content="The 'text-decoration' property applies to a 'run-in' element." /> + <style type="text/css"> + div + { + display: run-in; + text-decoration: underline; + } + </style> + </head> + <body> + <p>Test passes if the "Filler Text" below has a line under it.</p> + <div>Filler Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/text-indent-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/text-indent-applies-to-004.xht new file mode 100644 index 0000000000..a7bce70d29 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/text-indent-applies-to-004.xht @@ -0,0 +1,37 @@ +<!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: Text-indent application on a 'display: run-in' element</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#propdef-text-indent" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'text-indent' property is applied to 'display: run-in' elements." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 16px/1em Ahem; + } + div div + { + display: run-in; + text-indent: 10em; + } + #div1 + { + background: blue; + height: 1em; + margin-left: 10em; + width: 5em; + } + </style> + </head> + <body> + <p>Test passes if the black box below is directly above the blue box. (Note that the two boxes do not need to be touching.)</p> + <div> + <div>XXXXX</div> + </div> + <div id="div1"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/text-transform-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/text-transform-applies-to-004.xht new file mode 100644 index 0000000000..8b5e2af0ca --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/text-transform-applies-to-004.xht @@ -0,0 +1,22 @@ +<!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: Text-transform application to 'display: run-in' element</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#propdef-text-transform" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#caps-prop" /> + <link rel="match" href="../../reference/pass_if_letter_uppercase.html" /> + <meta name="assert" content="The 'text-transform' property is applied to 'display: run-in' elements." /> + <style type="text/css"> + div + { + display: run-in; + text-transform: capitalize; + } + </style> + </head> + <body> + <p>Test passes if the letter "F" in the words "Filler Text" below is in upper-case.</p> + <div>filler text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/top-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/top-applies-to-011.xht new file mode 100644 index 0000000000..618b75e86d --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/top-applies-to-011.xht @@ -0,0 +1,30 @@ +<!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: Top applied to element with 'display' set to run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <meta name="assert" content="The 'top' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + background: green; + top: 0; + display: run-in; + height: 1in; + position: absolute; + width: 1in; + } + p + { + margin-top: 1.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a box at the top of the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/unicode-bidi-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/unicode-bidi-applies-to-011.xht new file mode 100644 index 0000000000..575de0e2a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/unicode-bidi-applies-to-011.xht @@ -0,0 +1,22 @@ +<!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: Unicode-bidi applied to element with 'display' set to run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-unicode-bidi" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction" /> + <meta name="assert" content="The 'unicode-bidi' property applies to elements with a display of run-in." /> + <style type="text/css"> + div + { + direction: rtl; + display: run-in; + unicode-bidi: bidi-override; + } + </style> + </head> + <body> + <p>Test passes if there are the words "PASS PASS" below.</p> + <div>SSAP SSAP</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/vertical-align-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/vertical-align-applies-to-011.xht new file mode 100644 index 0000000000..f27cc0693b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/vertical-align-applies-to-011.xht @@ -0,0 +1,28 @@ +<!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: Vertical-align applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property does not apply to elements with 'display' set to 'run-in'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: orange; + color: blue; + display: run-in; + font: 20px/1em Ahem; + height: 1in; + vertical-align: bottom; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue box below is in the upper-left corner of the orange box.</p> + <div>X</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/visibility-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/visibility-applies-to-011.xht new file mode 100644 index 0000000000..85a1aa8e3f --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/visibility-applies-to-011.xht @@ -0,0 +1,32 @@ +<!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: Visibility applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="The 'visibility' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + #div1 + { + background: red; + display: run-in; + height: 1in; + visibility: hidden; + width: 1in; + } + .box + { + background: black; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is white space between the boxes below and there is no red visible on the page.</p> + <div class="box"></div> + <div id="div1"><div></div></div> + <div class="box"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/white-space-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/white-space-applies-to-004.xht new file mode 100644 index 0000000000..ce9820ff30 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/white-space-applies-to-004.xht @@ -0,0 +1,39 @@ +<!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: White-space application to 'display: run-in' element</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#propdef-white-space" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#white-space-prop" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'white-space' property applies to 'display: run-in' elements." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 16px/1em Ahem; + } + #div1 + { + display: run-in; + white-space: pre; + } + #div2, #div3 + { + background: black; + display: inline-block; + height: 1em; + width: 2em; + } + #div3 + { + margin-left: 3em; + } + </style> + </head> + <body> + <p>Test passes if there are only two boxes below.</p> + <div id="div1">XX XX</div> + <div id="div2"></div><div id="div3"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/width-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/width-applies-to-011.xht new file mode 100644 index 0000000000..fcf32f426b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/width-applies-to-011.xht @@ -0,0 +1,24 @@ +<!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 applied to elements with 'display' set to 'run-in'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" /> + <link rel="match" href="../../reference/pass_if_square_96px_black.html"/> + <meta name="assert" content="The 'width' property applies to elements with 'display' set to 'run-in'." /> + <style type="text/css"> + div + { + background: black; + display: run-in; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a square below.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-display/run-in/word-spacing-applies-to-004.xht b/testing/web-platform/tests/css/css-display/run-in/word-spacing-applies-to-004.xht new file mode 100644 index 0000000000..2996691015 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/word-spacing-applies-to-004.xht @@ -0,0 +1,36 @@ +<!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: Word-spacing application to 'display: run-in' element</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#propdef-word-spacing" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#spacing-props" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'word-spacing' property applies to 'display: run-in' elements." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 16px/1em Ahem; + } + div div + { + display: run-in; + word-spacing: 10em; + } + #div1 + { + background: blue; + height: 1em; + width: 22em; + } + </style> + </head> + <body> + <p>Test passes if there are two black boxes below and the last black box ends when the blue box ends.</p> + <div> + <div>XXXXX XXXXXX</div> + </div> + <div id="div1"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/run-in/z-index-applies-to-011.xht b/testing/web-platform/tests/css/css-display/run-in/z-index-applies-to-011.xht new file mode 100644 index 0000000000..b8e02fae75 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/run-in/z-index-applies-to-011.xht @@ -0,0 +1,36 @@ +<!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: Z-index applied to element with 'display' set to run-in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#z-index" /> + <meta name="assert" content="The 'z-index' property applies to elements with a display of run-in." /> + <style type="text/css"> + #div2 + { + background: green; + display: run-in; + z-index: 1; + } + #zindex + { + background: red; + top: -1in; + } + #div2, #zindex + { + height: 1in; + position: relative; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div> + <div id="div2"><div></div></div> + <div id="zindex"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-display/select-4-option-optgroup-display-none-ref.html b/testing/web-platform/tests/css/css-display/select-4-option-optgroup-display-none-ref.html new file mode 100644 index 0000000000..230c8a6d4f --- /dev/null +++ b/testing/web-platform/tests/css/css-display/select-4-option-optgroup-display-none-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: display:none on OPTION and OPTGROUP</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> + +.none { display:none; } +.contents { display:contents; } +.red { color: red; } +.green { color: green; } + +select { -webkit-appearance: none; } + + </style> +</head> +<body> + +<pre>FAIL if there is any red color</pre> + +<optgroup></optgroup> +<optgroup class="contents red"></optgroup> +<optgroup class="contents green" label="optgroup"></optgroup> + +<br> + +<select class="red" size="4"></select> +<select size="4" class="red"></select> +<select size="4" class="red"></select> +<select size="4" class="red"><optgroup></select> +<select size="4"></select> +<select size="4" class="red"></select> +<select size="4" class="red"></select> +<select size="4" class="red"></select> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-display/select-4-option-optgroup-display-none.html b/testing/web-platform/tests/css/css-display/select-4-option-optgroup-display-none.html new file mode 100644 index 0000000000..a6da3d53c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/select-4-option-optgroup-display-none.html @@ -0,0 +1,48 @@ +<!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: display:none on OPTION and OPTGROUP</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-none"> + <link rel="match" href="select-4-option-optgroup-display-none-ref.html"> + <style> + +.none { display:none; } +.contents { display:contents; } +.red { color: red; } +.green { color: green; } + +select { -webkit-appearance: none; } + + </style> +</head> +<body> + +<pre>FAIL if there is any red color</pre> + +<option class="none red">text</option> +<optgroup class="none red">text</optgroup> + +<optgroup class="none red"><option>option</option></optgroup> +<optgroup><option class="none red">option</option></optgroup> +<optgroup class="contents red"><option class="none">option</option></optgroup> +<optgroup class="contents green" label="optgroup"><option class="none red">option</option></optgroup> +<optgroup class="none red" label="optgroup"><option class="red">option</option></optgroup> + +<br> + +<select class="red" size="4">select</select> +<select size="4" class="red"><optgroup class="none" label="optgroup"></select> +<select size="4" class="red"><option class="none">option</select> +<select size="4" class="red"><optgroup><option class="none">option</select> +<select size="4"><optgroup class="none"><option class="green">option</select> +<select size="4" class="red"><optgroup class="none green" label="optgroup"><option>option</select> +<select size="4" class="red"><optgroup class="none"><option class="none">option</select> +<select size="4" class="red"><optgroup class="none green" label="optgroup"><option class="none">option</select> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-display/support/acid.css b/testing/web-platform/tests/css/css-display/support/acid.css new file mode 100644 index 0000000000..62d1aca2e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/support/acid.css @@ -0,0 +1,59 @@ +html, body { + color: black; + background-color: white; + font-size: 16px; + padding: 0; + margin: 0; +} + +body { color: red; } + +.table { + display: table; + border-collapse: collapse; + border: blue solid 1pt; +} + +.itable { display: inline-table; } +.caption { display: table-caption; } +.cell { + display: table-cell; + border: inherit; +} +.row { + display: table-row; + border: green dashed 1pt; +} +.rowg { display: table-row-group; } +.head { display: table-header-group; } +.foot { display: table-footer-group; } +.col { display: table-column; } +.colg { display: table-column-group; } +.flex { display: flex; } +.iflex { display: inline-flex; } +.li { display: list-item; } +.ib { display: inline-block; } +.inline { display: inline; } +.columns { columns: 2; height: 4em; } +.contents { + display: contents; + align-items: inherit; + justify-items:inherit; +} +.c1 { color: lime; } +.c2 { background: blue; color: pink; } +.c3 { color: teal; } +.c4 { color: green; } +.c5 { color: silver; } +.c6 { color: cyan; } +.c7 { color: magenta; } +.c8 { color: yellow; } +.c9 { color: grey; } +.c10{ color: black; } +.b { background: inherit; } + +/** This is the only difference between references and non-reference styles */ +.ref .c2 { background: transparent; } +.ref .b { background:blue; } +.ref div.contents { display: block; } +.ref span.contents { display: inline; } diff --git a/testing/web-platform/tests/css/css-display/support/red-square.html b/testing/web-platform/tests/css/css-display/support/red-square.html new file mode 100644 index 0000000000..e4e48ccfdc --- /dev/null +++ b/testing/web-platform/tests/css/css-display/support/red-square.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<style> + body { margin:0; } +</style> +<div id="square" style="width:100px; height:100px; background:red;"></div> diff --git a/testing/web-platform/tests/css/css-display/support/swatch-orange.png b/testing/web-platform/tests/css/css-display/support/swatch-orange.png Binary files differnew file mode 100644 index 0000000000..d3cd498b52 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/support/swatch-orange.png diff --git a/testing/web-platform/tests/css/css-display/support/util.js b/testing/web-platform/tests/css/css-display/support/util.js new file mode 100644 index 0000000000..08024b52d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/support/util.js @@ -0,0 +1,23 @@ +function eachDisplayContentsElementIn(document, window, callbackDo, callbackUndo) { + var elements = []; + + document.body.offsetHeight; + + // NOTE: Doing qsa('*') and getComputedStyle is just for the + // test's sake, since it's easier to mess it up when + // getComputedStyle is involved. + var all = document.querySelectorAll('*'); + for (var i = 0; i < all.length; ++i) { + if (window.getComputedStyle(all[i]).display === "contents") { + callbackDo(all[i]); + elements.push(all[i]); + } + } + + document.body.offsetHeight; + + for (var i = 0; i < elements.length; ++i) + callbackUndo(elements[i]); + + document.body.offsetHeight; +} diff --git a/testing/web-platform/tests/css/css-display/textarea-display.html b/testing/web-platform/tests/css/css-display/textarea-display.html new file mode 100644 index 0000000000..44634e3c3b --- /dev/null +++ b/testing/web-platform/tests/css/css-display/textarea-display.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Display of textarea</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1700535"> +<link rel="help" href="https://github.com/whatwg/html/issues/4082"> +<meta name="assert" content="textarea has inline block display."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<body> +<textarea id="t"></textarea> +<script> + test( + function(){ + var target = document.getElementById("t"); + assert_equals(getComputedStyle(target).display, "inline-block"); + }, "textarea has inline block display"); +</script> +</body> +</html> |
